gkucmierz/rubic-cube
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

docs: overwrite README with project description and centered preview image
All checks were successful
Deploy to Production / deploy (push) Successful in 5s
Details

Browse Source
This commit is contained in:
Grzegorz Kucmierz
2026-02-23 22:18:06 +00:00
parent 6089e6f961
commit 349e74d7ef
7 changed files with 1252 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
README.md
View File

@@ -1,31 +1,21 @@
# Vue 3 + Vite # Rubik's Cube Logic Engine & Simulator
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more. <div align="center">
<img src="./public/preview.png" alt="Cube Preview" width="600" />
</div>
Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support). ## Overview
## Uruchamianie (Automatyczne - CI/CD) This application is a 3D animated, Interactive Rubik's Cube simulator and mathematical solver built from scratch using Vue.js. It aims to provide seamless mechanical interactions and mathematically perfectly rigorous tracking of a classic 3x3 Rubik's Cube state.
Projekt wykorzystuje **Gitea Actions** z runnerem **self-hosted** na serwerze produkcyjnym. The software operates entirely in the browser using a custom Group Theory mathematical engine (`DeepCube.js`), which separates the heavy analytical permutation tracking from the 3D CSS visual layer using Web Workers.
Każdy push do gałęzi `main` automatycznie:
1. Pobiera kod na serwerze.
2. Zatrzymuje i usuwa stare kontenery.
3. Buduje i uruchamia nową wersję aplikacji przy użyciu `docker compose up -d --build`.
### Konfiguracja Sieci i Bezpieczeństwa (Izolacja) ## Features
Aplikacja wykorzystuje dwie sieci dockerowe dla zapewnienia izolacji: - **Mechanical Realism:** 3D CSS rendering precisely models physical cube mechanics. Dragging edge and corner pieces rotates the specific mechanical layer dynamically, while dragging the center elements pivots the entire camera view.
1. `npm_public` (zewnętrzna): Sieć, w której znajduje się Nginx Proxy Manager. Tylko kontener `rubic-cube` jest do niej podłączony, aby NPM mógł przekierować ruch. - **Reactive Algorithm Queue:** Execute complex algorithms fluidly. The dynamic queue evaluates incoming inputs and instantly intercepts redundances (e.g. evaluating `U U` into a single `U2` animation, or cancelling out `F` into `F'` on the fly).
2. `rubic-net` (wewnętrzna): Prywatna sieć aplikacji. Wszelkie inne serwisy (np. baza danych, redis - jeśli dodasz w przyszłości) powinny być tylko w tej sieci, niewidoczne dla NPM ani innych aplikacji. - **Deep Mathematical Engine:** Based entirely on Group Theory. It stores corner and edge permutation arrays combined with spatial orientation parities to guarantee that only physically legal mechanical states exist or can be scrambled.
- **Intelligent Solvers:**
**Wymagania:** - **Beginner Method (Human):** Constructs the solution layer-by-layer simulating human heuristics natively with instantaneous $O(1)$ algorithmic macros.
Przed uruchomieniem upewnij się, że na serwerze istnieje sieć publiczna dla proxy: - **Kociemba's Algorithm (Optimal):** Offloads pruning tables and recursive heuristic searches to Web Workers to instantly calculate and stream back the objectively shortest path solution (typically <20 moves).
```bash - **High Performance:** Decoupling the single-threaded UI rendering stack from mathematical validations ensures 60 FPS 3D animations, even while executing computationally expensive analytical algorithms in the background.
docker network create npm_public
```
(Jeśli Twój Nginx Proxy Manager używa innej sieci, zaktualizuj nazwę w `docker-compose.yml`).
W panelu Nginx Proxy Manager skonfiguruj:
* **Network:** `npm_public` (lub odpowiednia sieć proxy).
* **Forward Hostname:** `rubic-cube`
* **Forward Port:** `80`

22
index.html
View File

@@ -1,13 +1,31 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/assets/rubic-cube.svg" /> <link rel="icon" type="image/png" href="/favicon.png" sizes="32x32" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rubic Cube</title> <title>Rubic Cube Logic Engine</title>
<meta name="description"
content="A 3D interactive Rubik's Cube simulator and solver powered by a custom mathematical engine." />
<!-- Open Graph (for social media sharing like Facebook/Discord) -->
<meta property="og:title" content="Rubic Cube Logic Engine" />
<meta property="og:description"
content="A 3D interactive Rubik's Cube simulator and solver powered by a custom mathematical engine." />
<meta property="og:image" content="/preview.png" />
<meta property="og:type" content="website" />
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Rubic Cube Logic Engine" />
<meta name="twitter:description"
content="A 3D interactive Rubik's Cube simulator and solver powered by a custom mathematical engine." />
<meta name="twitter:image" content="/preview.png" />
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
</body> </body>
</html> </html>

1211
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@@ -15,6 +15,7 @@
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-vue": "^5.2.1", "@vitejs/plugin-vue": "^5.2.1",
"puppeteer": "^24.37.5",
"vite": "^6.2.0" "vite": "^6.2.0"
} }
} }

BIN
public/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 915 B

BIN
public/preview.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 160 KiB

55
src/assets/rubic-cube.svg
View File

@@ -1,55 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<defs>
<style>
.face { stroke: #000; stroke-width: 6; stroke-linejoin: round; }
.top { fill: #ffffff; }
.left { fill: #009e60; }
.right { fill: #c41e3a; }
</style>
</defs>
<!-- Top Face -->
<g class="face top">
<path d="M256 80 L309.33 106.67 L256 133.33 L202.67 106.67 Z" />
<path d="M309.33 106.67 L362.67 133.33 L309.33 160 L256 133.33 Z" />
<path d="M362.67 133.33 L416 160 L362.67 186.67 L309.33 160 Z" />
<path d="M202.67 106.67 L256 133.33 L202.67 160 L149.33 133.33 Z" />
<path d="M256 133.33 L309.33 160 L256 186.67 L202.67 160 Z" />
<path d="M309.33 160 L362.67 186.67 L309.33 213.33 L256 186.67 Z" />
<path d="M149.33 133.33 L202.67 160 L149.33 186.67 L96 160 Z" />
<path d="M202.67 160 L256 186.67 L202.67 213.33 L149.33 186.67 Z" />
<path d="M256 186.67 L309.33 213.33 L256 240 L202.67 213.33 Z" />
</g>
<!-- Left Face -->
<g class="face left">
<path d="M96 160 L149.33 186.67 L149.33 248 L96 221.33 Z" />
<path d="M149.33 186.67 L202.67 213.33 L202.67 274.67 L149.33 248 Z" />
<path d="M202.67 213.33 L256 240 L256 301.33 L202.67 274.67 Z" />
<path d="M96 221.33 L149.33 248 L149.33 309.33 L96 282.67 Z" />
<path d="M149.33 248 L202.67 274.67 L202.67 336 L149.33 309.33 Z" />
<path d="M202.67 274.67 L256 301.33 L256 362.67 L202.67 336 Z" />
<path d="M96 282.67 L149.33 309.33 L149.33 370.67 L96 344 Z" />
<path d="M149.33 309.33 L202.67 336 L202.67 397.33 L149.33 370.67 Z" />
<path d="M202.67 336 L256 362.67 L256 424 L202.67 397.33 Z" />
</g>
<!-- Right Face -->
<g class="face right">
<path d="M256 240 L309.33 213.33 L309.33 274.67 L256 301.33 Z" />
<path d="M309.33 213.33 L362.67 186.67 L362.67 248 L309.33 274.67 Z" />
<path d="M362.67 186.67 L416 160 L416 221.33 L362.67 248 Z" />
<path d="M256 301.33 L309.33 274.67 L309.33 336 L256 362.67 Z" />
<path d="M309.33 274.67 L362.67 248 L362.67 309.33 L309.33 336 Z" />
<path d="M362.67 248 L416 221.33 L416 282.67 L362.67 309.33 Z" />
<path d="M256 362.67 L309.33 336 L309.33 397.33 L256 424 Z" />
<path d="M309.33 336 L362.67 309.33 L362.67 370.67 L309.33 397.33 Z" />
<path d="M362.67 309.33 L416 282.67 L416 344 L362.67 370.67 Z" />
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.3 KiB