https://github.com/scriptraccoon/slidorus
The torus-shaped twisty puzzle
https://github.com/scriptraccoon/slidorus
browsergame css-3d-animation sliding-puzzle svelte torus
Last synced: 8 months ago
JSON representation
The torus-shaped twisty puzzle
- Host: GitHub
- URL: https://github.com/scriptraccoon/slidorus
- Owner: ScriptRaccoon
- Created: 2025-09-26T07:54:55.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-10-08T17:15:11.000Z (8 months ago)
- Last Synced: 2025-10-08T18:44:00.634Z (8 months ago)
- Topics: browsergame, css-3d-animation, sliding-puzzle, svelte, torus
- Language: Svelte
- Homepage: https://slidorus.xyz
- Size: 4.44 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Slidorus
[👉 Play here](https://slidorus.xyz)
## About this puzzle
Slidorus is a sliding puzzle made of 9 blocks of 9 pieces. Every row and column can be shifted in either direction. When a piece moves off one side of the grid, it reappears on the opposite side. In other words, the pieces move on a [torus](https://en.wikipedia.org/wiki/Torus).
The puzzle is similar to 9×9 [Loopover](https://loopover.xyz/), but with a Rubik's Cube-inspired color scheme and indistinguishable pieces within each 3×3 block. The puzzle is solved when each 3×3 block is uniformly colored; the exact placement of the blocks does not matter.
An additional option lets you bandage pieces together. This makes the puzzle significantly more complex, especially when many pieces are bandaged. Furthermore, it is possible to make pieces fixed, so that they will not move anymore. This adds yet another level of complexity.
Finally, rows and columns can be grouped, meaning they always move together.
Any configuration can be shared via a link. The app works on both desktop and mobile.
Contributions and feedback are welcome!
## Implementation Details
This application is built with [Svelte 5](https://svelte.dev) and [TypeScript](https://www.typescriptlang.org/). Apart from the icon library [lucide/svelte](https://lucide.dev/guide/packages/lucide-svelte), no external libraries are used.
The 3D torus visualization is implemented entirely in standard CSS, inspired by the work of [Amit Sheen](https://github.com/Amit-Sheen). A standalone example is available on [CodePen](https://codepen.io/scriptraccoon/pen/LEGGrzp).