Premier commit de ce submodule
This commit is contained in:
+136
@@ -0,0 +1,136 @@
|
|||||||
|
# Tetris - Projet DFX (Internet Computer)
|
||||||
|
|
||||||
|
## Architecture
|
||||||
|
|
||||||
|
```
|
||||||
|
tetris/
|
||||||
|
├── dfx.json # Configuration DFX (canisters)
|
||||||
|
├── package.json # Workspace racine
|
||||||
|
├── src/
|
||||||
|
│ ├── tetris_backend/
|
||||||
|
│ │ └── main.mo # Backend Motoko
|
||||||
|
│ └── tetris_frontend/
|
||||||
|
│ ├── package.json # Dépendances frontend
|
||||||
|
│ ├── svelte.config.js # Config SvelteKit (adapter-static)
|
||||||
|
│ ├── vite.config.js # Config Vite (proxy, env DFX)
|
||||||
|
│ ├── src/
|
||||||
|
│ │ ├── app.html # Shell HTML (fonts, meta)
|
||||||
|
│ │ ├── index.scss # Styles globaux (thème néon)
|
||||||
|
│ │ ├── lib/canisters.js # Connexion au backend canister
|
||||||
|
│ │ └── routes/
|
||||||
|
│ │ ├── +layout.js # Prerendering activé
|
||||||
|
│ │ └── +page.svelte # Composant Tetris (logique + rendu)
|
||||||
|
│ └── dist/ # Build statique (généré)
|
||||||
|
└── .dfx/ # État local DFX (généré)
|
||||||
|
```
|
||||||
|
|
||||||
|
## Prérequis
|
||||||
|
|
||||||
|
| Outil | Version minimale | Installation |
|
||||||
|
|---------|-----------------|---------------------------------------|
|
||||||
|
| Node.js | >= 16.0.0 | https://nodejs.org |
|
||||||
|
| npm | >= 7.0.0 | Inclus avec Node.js |
|
||||||
|
| dfx | >= 0.30.0 | `sh -ci "$(curl -fsSL https://internetcomputer.org/install.sh)"` |
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd tetris
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
Cela installe les dépendances du workspace racine et du frontend SvelteKit
|
||||||
|
(Svelte 5, Vite, adapter-static, dfinity/agent...).
|
||||||
|
|
||||||
|
## Lancement en mode développement (Vite)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd src/tetris_frontend
|
||||||
|
npx vite --port 3000
|
||||||
|
```
|
||||||
|
|
||||||
|
Ouvre http://localhost:3000/ dans n'importe quel navigateur.
|
||||||
|
Hot reload activé, pas besoin de DFX.
|
||||||
|
|
||||||
|
## Déploiement sur la réplique locale (DFX)
|
||||||
|
|
||||||
|
### 1. Build du frontend
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd src/tetris_frontend
|
||||||
|
npx vite build
|
||||||
|
```
|
||||||
|
|
||||||
|
Génère le dossier `dist/` contenant les assets statiques.
|
||||||
|
Note : `npm run build` exécute d'abord `dfx generate` (prebuild).
|
||||||
|
Si le canister backend n'existe pas encore, utiliser `npx vite build` directement.
|
||||||
|
|
||||||
|
### 2. Démarrer la réplique locale
|
||||||
|
|
||||||
|
```bash
|
||||||
|
dfx start --background
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. Déployer les canisters
|
||||||
|
|
||||||
|
```bash
|
||||||
|
dfx deploy
|
||||||
|
```
|
||||||
|
|
||||||
|
### 4. Accéder au jeu
|
||||||
|
|
||||||
|
| URL | Navigateur |
|
||||||
|
|-----|-----------|
|
||||||
|
| `http://<canister-id>.localhost:8080/` | Chrome, Firefox |
|
||||||
|
| `http://127.0.0.1:8080/?canisterId=<canister-id>` | Fonctionne partiellement (assets cassés en legacy) |
|
||||||
|
|
||||||
|
Le canister ID est affiché après `dfx deploy`.
|
||||||
|
Safari ne résout pas `*.localhost` : utiliser Chrome/Firefox ou le serveur Vite.
|
||||||
|
|
||||||
|
### 5. Arrêter la réplique
|
||||||
|
|
||||||
|
```bash
|
||||||
|
dfx stop
|
||||||
|
```
|
||||||
|
|
||||||
|
## Déploiement via Docker
|
||||||
|
|
||||||
|
Depuis le dossier parent (`icp_container/`) :
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Tout construire et lancer
|
||||||
|
make super_start
|
||||||
|
|
||||||
|
# Ou étape par étape
|
||||||
|
make build_image # Build l'image Docker
|
||||||
|
make create_container # Crée le container (port 4943)
|
||||||
|
make start_container # Lance le container
|
||||||
|
|
||||||
|
# Arrêter
|
||||||
|
make stop_container
|
||||||
|
|
||||||
|
# Nettoyer tout et relancer
|
||||||
|
make re
|
||||||
|
```
|
||||||
|
|
||||||
|
Le container expose le port 4943. Accès via :
|
||||||
|
`http://127.0.0.1:4943/?canisterId=<canister-id>`
|
||||||
|
|
||||||
|
## Commandes utiles
|
||||||
|
|
||||||
|
| Commande | Description |
|
||||||
|
|----------|-------------|
|
||||||
|
| `dfx start --background` | Démarre la réplique IC locale |
|
||||||
|
| `dfx stop` | Arrête la réplique |
|
||||||
|
| `dfx deploy` | Build + déploie tous les canisters |
|
||||||
|
| `dfx canister status tetris_frontend` | Vérifie l'état du canister |
|
||||||
|
| `dfx ping` | Vérifie que la réplique est en ligne |
|
||||||
|
| `npx vite build` | Build le frontend (sans dfx generate) |
|
||||||
|
| `npx vite --port 3000` | Serveur de dev avec hot reload |
|
||||||
|
|
||||||
|
## Stack technique
|
||||||
|
|
||||||
|
- **Frontend** : SvelteKit 2 + Svelte 5, Vite 5, TypeScript, SCSS
|
||||||
|
- **Backend** : Motoko (Internet Computer)
|
||||||
|
- **Déploiement** : adapter-static -> assets canister DFX
|
||||||
|
- **Conteneurisation** : Docker (image `icp-dev-env-slim`)
|
||||||
Generated
-15
@@ -1664,21 +1664,6 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "ISC"
|
"license": "ISC"
|
||||||
},
|
},
|
||||||
"node_modules/picomatch": {
|
|
||||||
"version": "4.0.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
|
|
||||||
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"optional": true,
|
|
||||||
"peer": true,
|
|
||||||
"engines": {
|
|
||||||
"node": ">=12"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://github.com/sponsors/jonschlinkert"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/postcss": {
|
"node_modules/postcss": {
|
||||||
"version": "8.5.6",
|
"version": "8.5.6",
|
||||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
|
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
|
||||||
|
|||||||
@@ -1,20 +1,17 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="fr">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
|
<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
|
||||||
<meta name="viewport" content="width=device-width" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>IC Hello Starter</title>
|
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet">
|
||||||
|
<title>TETRIS</title>
|
||||||
%sveltekit.head%
|
%sveltekit.head%
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body data-sveltekit-preload-data="hover">
|
<body data-sveltekit-preload-data="hover">
|
||||||
<div class="browser-warning">
|
|
||||||
⚠️ If this page appears broken, try reloading. If the problem persists, try switching browsers; Chrome or
|
|
||||||
Firefox are recommended.
|
|
||||||
</div>
|
|
||||||
<div style="display: contents">%sveltekit.body%</div>
|
<div style="display: contents">%sveltekit.body%</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -1,41 +1,35 @@
|
|||||||
|
:root {
|
||||||
|
--bg: #070712;
|
||||||
|
--panel: #0d0d1f;
|
||||||
|
--border: #1a1a3e;
|
||||||
|
--accent: #00ffe7;
|
||||||
|
--accent2:#ff00aa;
|
||||||
|
--dim: #3a3a6a;
|
||||||
|
--text: #c0c0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: sans-serif;
|
background: var(--bg);
|
||||||
font-size: 1.5rem;
|
font-family: 'Share Tech Mono', monospace;
|
||||||
|
color: var(--text);
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
body::before {
|
||||||
max-width: 50vw;
|
content: '';
|
||||||
max-height: 25vw;
|
position: fixed;
|
||||||
display: block;
|
inset: 0;
|
||||||
margin: auto;
|
background-image:
|
||||||
}
|
linear-gradient(rgba(0,255,231,0.03) 1px, transparent 1px),
|
||||||
|
linear-gradient(90deg, rgba(0,255,231,0.03) 1px, transparent 1px);
|
||||||
form {
|
background-size: 40px 40px;
|
||||||
display: flex;
|
pointer-events: none;
|
||||||
justify-content: center;
|
z-index: 0;
|
||||||
gap: 0.5em;
|
|
||||||
flex-flow: row wrap;
|
|
||||||
max-width: 40vw;
|
|
||||||
margin: auto;
|
|
||||||
align-items: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
button[type="submit"] {
|
|
||||||
padding: 5px 20px;
|
|
||||||
margin: 10px auto;
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
#greeting {
|
|
||||||
margin: 10px auto;
|
|
||||||
padding: 10px 60px;
|
|
||||||
border: 1px solid #222;
|
|
||||||
}
|
|
||||||
|
|
||||||
#greeting:empty {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.browser-warning {
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,27 +1,823 @@
|
|||||||
<script>
|
<script>
|
||||||
import "../index.scss";
|
import "../index.scss";
|
||||||
import { backend } from "$lib/canisters";
|
import { onMount, onDestroy } from "svelte";
|
||||||
|
|
||||||
let greeting = $state("")
|
// ─────────────────────────────────────────────
|
||||||
|
// PIÈCES
|
||||||
|
// ─────────────────────────────────────────────
|
||||||
|
|
||||||
function onSubmit(event) {
|
class Piece {
|
||||||
event.preventDefault();
|
constructor(startX, startY) {
|
||||||
const name = event.target.name.value;
|
this.position = { x: startX, y: startY };
|
||||||
backend.greet(name).then((response) => {
|
this.currentRotation = 0;
|
||||||
greeting = response;
|
this.rotations = this.defineRotations();
|
||||||
});
|
this.shape = this.rotations[0];
|
||||||
return false;
|
this.color = this.getColor();
|
||||||
|
}
|
||||||
|
defineRotations() { return [[[1]]]; }
|
||||||
|
getColor() { return 1; }
|
||||||
|
getPosition() { return { ...this.position }; }
|
||||||
|
getShape() { return this.shape; }
|
||||||
|
moveDown() { this.position.y++; }
|
||||||
|
moveLeft() { this.position.x--; }
|
||||||
|
moveRight() { this.position.x++; }
|
||||||
|
rotateLeft() {
|
||||||
|
this.currentRotation = (this.currentRotation - 1 + this.rotations.length) % this.rotations.length;
|
||||||
|
this.shape = this.rotations[this.currentRotation];
|
||||||
|
}
|
||||||
|
rotateRight() {
|
||||||
|
this.currentRotation = (this.currentRotation + 1) % this.rotations.length;
|
||||||
|
this.shape = this.rotations[this.currentRotation];
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
class PieceT extends Piece {
|
||||||
|
defineRotations() {
|
||||||
|
return [
|
||||||
|
[[0,1,0],[1,1,1],[0,0,0]],
|
||||||
|
[[0,1,0],[0,1,1],[0,1,0]],
|
||||||
|
[[0,0,0],[1,1,1],[0,1,0]],
|
||||||
|
[[0,1,0],[1,1,0],[0,1,0]]
|
||||||
|
];
|
||||||
|
}
|
||||||
|
getColor() { return 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
class PieceL extends Piece {
|
||||||
|
defineRotations() {
|
||||||
|
return [
|
||||||
|
[[0,0,1],[1,1,1],[0,0,0]],
|
||||||
|
[[0,1,0],[0,1,0],[0,1,1]],
|
||||||
|
[[0,0,0],[1,1,1],[1,0,0]],
|
||||||
|
[[1,1,0],[0,1,0],[0,1,0]]
|
||||||
|
];
|
||||||
|
}
|
||||||
|
getColor() { return 2; }
|
||||||
|
}
|
||||||
|
|
||||||
|
class PieceReverseL extends Piece {
|
||||||
|
defineRotations() {
|
||||||
|
return [
|
||||||
|
[[1,0,0],[1,1,1],[0,0,0]],
|
||||||
|
[[0,1,1],[0,1,0],[0,1,0]],
|
||||||
|
[[0,0,0],[1,1,1],[0,0,1]],
|
||||||
|
[[0,1,0],[0,1,0],[1,1,0]]
|
||||||
|
];
|
||||||
|
}
|
||||||
|
getColor() { return 3; }
|
||||||
|
}
|
||||||
|
|
||||||
|
class PieceI extends Piece {
|
||||||
|
defineRotations() {
|
||||||
|
return [
|
||||||
|
[[0,0,0,0],[1,1,1,1],[0,0,0,0],[0,0,0,0]],
|
||||||
|
[[0,0,1,0],[0,0,1,0],[0,0,1,0],[0,0,1,0]]
|
||||||
|
];
|
||||||
|
}
|
||||||
|
getColor() { return 4; }
|
||||||
|
}
|
||||||
|
|
||||||
|
class PieceZ extends Piece {
|
||||||
|
defineRotations() {
|
||||||
|
return [
|
||||||
|
[[1,1,0],[0,1,1],[0,0,0]],
|
||||||
|
[[0,0,1],[0,1,1],[0,1,0]]
|
||||||
|
];
|
||||||
|
}
|
||||||
|
getColor() { return 5; }
|
||||||
|
}
|
||||||
|
|
||||||
|
class PieceReverseZ extends Piece {
|
||||||
|
defineRotations() {
|
||||||
|
return [
|
||||||
|
[[0,1,1],[1,1,0],[0,0,0]],
|
||||||
|
[[0,1,0],[0,1,1],[0,0,1]]
|
||||||
|
];
|
||||||
|
}
|
||||||
|
getColor() { return 6; }
|
||||||
|
}
|
||||||
|
|
||||||
|
class PieceO extends Piece {
|
||||||
|
defineRotations() { return [[[1,1],[1,1]]]; }
|
||||||
|
getColor() { return 7; }
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─────────────────────────────────────────────
|
||||||
|
// LOGIQUE TETRIS
|
||||||
|
// ─────────────────────────────────────────────
|
||||||
|
|
||||||
|
class Tetris {
|
||||||
|
constructor(onRender, onGameOver) {
|
||||||
|
this.onRender = onRender;
|
||||||
|
this.onGameOver = onGameOver;
|
||||||
|
|
||||||
|
this.grid = this._createGrid(10, 20);
|
||||||
|
this.bufferGrid = this._createGrid(10, 5);
|
||||||
|
this.currentPiece = null;
|
||||||
|
this.storedPiece = null;
|
||||||
|
this.nextPiece = null;
|
||||||
|
|
||||||
|
this.score = 0;
|
||||||
|
this.timeToDown = 1000;
|
||||||
|
this.harding = 1000;
|
||||||
|
this.decrementTTD = 50;
|
||||||
|
|
||||||
|
this.isRunning = false;
|
||||||
|
this.isPaused = false;
|
||||||
|
this.canStore = true;
|
||||||
|
|
||||||
|
this.animationFrameId = null;
|
||||||
|
this.lastTime = 0;
|
||||||
|
this.accumulator = 0;
|
||||||
|
|
||||||
|
this._keyHandler = this._handleKey.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
_createGrid(w, h) {
|
||||||
|
return Array.from({ length: h }, () => Array(w).fill(0));
|
||||||
|
}
|
||||||
|
|
||||||
|
start() {
|
||||||
|
if (this.isRunning) return;
|
||||||
|
this.isRunning = true;
|
||||||
|
this.isPaused = false;
|
||||||
|
this.grid = this._createGrid(10, 20);
|
||||||
|
this.score = 0;
|
||||||
|
this.timeToDown = 1000;
|
||||||
|
this.storedPiece = null;
|
||||||
|
this.canStore = true;
|
||||||
|
this._spawnNewPiece();
|
||||||
|
document.addEventListener('keydown', this._keyHandler);
|
||||||
|
this._startGameLoop();
|
||||||
|
}
|
||||||
|
|
||||||
|
stop() {
|
||||||
|
this.isRunning = false;
|
||||||
|
this.isPaused = false;
|
||||||
|
if (this.animationFrameId !== null) {
|
||||||
|
cancelAnimationFrame(this.animationFrameId);
|
||||||
|
this.animationFrameId = null;
|
||||||
|
}
|
||||||
|
this.accumulator = 0;
|
||||||
|
this.lastTime = 0;
|
||||||
|
document.removeEventListener('keydown', this._keyHandler);
|
||||||
|
}
|
||||||
|
|
||||||
|
pause() {
|
||||||
|
if (!this.isRunning) return;
|
||||||
|
this.isPaused = !this.isPaused;
|
||||||
|
if (!this.isPaused) {
|
||||||
|
this.lastTime = 0;
|
||||||
|
this._startGameLoop();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_startGameLoop() {
|
||||||
|
this.lastTime = 0;
|
||||||
|
this.accumulator = 0;
|
||||||
|
|
||||||
|
const gameLoop = (currentTime) => {
|
||||||
|
if (!this.isRunning) return;
|
||||||
|
|
||||||
|
if (this.isPaused) {
|
||||||
|
this.animationFrameId = requestAnimationFrame(gameLoop);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.lastTime === 0) {
|
||||||
|
this.lastTime = currentTime;
|
||||||
|
this.animationFrameId = requestAnimationFrame(gameLoop);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const deltaTime = currentTime - this.lastTime;
|
||||||
|
this.lastTime = currentTime;
|
||||||
|
this.accumulator += deltaTime;
|
||||||
|
|
||||||
|
while (this.accumulator >= this.timeToDown) {
|
||||||
|
this._tick();
|
||||||
|
this.accumulator -= this.timeToDown;
|
||||||
|
if (this.accumulator > this.timeToDown * 3) {
|
||||||
|
this.accumulator = 0;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.onRender();
|
||||||
|
this.animationFrameId = requestAnimationFrame(gameLoop);
|
||||||
|
};
|
||||||
|
|
||||||
|
this.animationFrameId = requestAnimationFrame(gameLoop);
|
||||||
|
}
|
||||||
|
|
||||||
|
_tick() {
|
||||||
|
if (!this.currentPiece) return;
|
||||||
|
if (this._canMoveDown()) {
|
||||||
|
this.currentPiece.moveDown();
|
||||||
|
} else {
|
||||||
|
this._lockPiece();
|
||||||
|
this.verifierLignes();
|
||||||
|
this._makeHarder();
|
||||||
|
this._spawnNewPiece();
|
||||||
|
this.canStore = true;
|
||||||
|
if (!this._canSpawn()) this._gameOver();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_handleKey(e) {
|
||||||
|
if (!this.isRunning || !this.currentPiece) return;
|
||||||
|
|
||||||
|
switch (e.key) {
|
||||||
|
case 'ArrowLeft':
|
||||||
|
e.preventDefault();
|
||||||
|
if (!this.isPaused && this._canMoveLeft()) this.currentPiece.moveLeft();
|
||||||
|
break;
|
||||||
|
case 'ArrowRight':
|
||||||
|
e.preventDefault();
|
||||||
|
if (!this.isPaused && this._canMoveRight()) this.currentPiece.moveRight();
|
||||||
|
break;
|
||||||
|
case 'ArrowDown':
|
||||||
|
e.preventDefault();
|
||||||
|
if (!this.isPaused && this._canMoveDown()) {
|
||||||
|
this.currentPiece.moveDown();
|
||||||
|
this.score += 1;
|
||||||
|
this.accumulator = 0;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case ' ':
|
||||||
|
e.preventDefault();
|
||||||
|
if (!this.isPaused) this._hardDrop();
|
||||||
|
break;
|
||||||
|
case 'q': case 'Q':
|
||||||
|
e.preventDefault();
|
||||||
|
if (!this.isPaused) this._rotatePiece(-1);
|
||||||
|
break;
|
||||||
|
case 'w': case 'W':
|
||||||
|
e.preventDefault();
|
||||||
|
if (!this.isPaused) this._rotatePiece(1);
|
||||||
|
break;
|
||||||
|
case 'c': case 'C':
|
||||||
|
e.preventDefault();
|
||||||
|
if (!this.isPaused) this._storePiece();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.onRender();
|
||||||
|
}
|
||||||
|
|
||||||
|
_hardDrop() {
|
||||||
|
if (!this.currentPiece) return;
|
||||||
|
let dist = 0;
|
||||||
|
while (this._canMoveDown()) { this.currentPiece.moveDown(); dist++; }
|
||||||
|
this.score += dist * 2;
|
||||||
|
this._lockPiece();
|
||||||
|
this.verifierLignes();
|
||||||
|
this._makeHarder();
|
||||||
|
this._spawnNewPiece();
|
||||||
|
this.canStore = true;
|
||||||
|
this.accumulator = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
_rotatePiece(direction) {
|
||||||
|
if (!this.currentPiece) return;
|
||||||
|
const originalPos = { ...this.currentPiece.getPosition() };
|
||||||
|
|
||||||
|
if (direction === -1) this.currentPiece.rotateLeft();
|
||||||
|
else this.currentPiece.rotateRight();
|
||||||
|
|
||||||
|
if (!this._isValidPosition()) {
|
||||||
|
this.currentPiece.moveRight();
|
||||||
|
if (this._isValidPosition()) return;
|
||||||
|
|
||||||
|
this.currentPiece.moveLeft();
|
||||||
|
this.currentPiece.moveLeft();
|
||||||
|
if (this._isValidPosition()) return;
|
||||||
|
|
||||||
|
this.currentPiece.moveLeft();
|
||||||
|
if (this._isValidPosition()) return;
|
||||||
|
|
||||||
|
this.currentPiece.moveRight();
|
||||||
|
this.currentPiece.moveRight();
|
||||||
|
this.currentPiece.position.y--;
|
||||||
|
if (this._isValidPosition()) return;
|
||||||
|
|
||||||
|
this.currentPiece.position.y = originalPos.y;
|
||||||
|
this.currentPiece.position.x = originalPos.x;
|
||||||
|
if (direction === -1) this.currentPiece.rotateRight();
|
||||||
|
else this.currentPiece.rotateLeft();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_storePiece() {
|
||||||
|
if (!this.canStore || !this.currentPiece) return;
|
||||||
|
|
||||||
|
if (this.storedPiece === null) {
|
||||||
|
this.storedPiece = this.currentPiece;
|
||||||
|
this._spawnNewPiece();
|
||||||
|
} else {
|
||||||
|
const temp = this.storedPiece;
|
||||||
|
this.storedPiece = this.currentPiece;
|
||||||
|
this.currentPiece = temp;
|
||||||
|
this.currentPiece.position.x = 3;
|
||||||
|
this.currentPiece.position.y = 0;
|
||||||
|
}
|
||||||
|
this.canStore = false;
|
||||||
|
this.accumulator = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
_spawnNewPiece() {
|
||||||
|
this.currentPiece = this.nextPiece || this._createRandomPiece();
|
||||||
|
this.nextPiece = this._createRandomPiece();
|
||||||
|
this._updateBufferGrid();
|
||||||
|
}
|
||||||
|
|
||||||
|
_createRandomPiece() {
|
||||||
|
const types = [PieceT, PieceL, PieceReverseL, PieceI, PieceZ, PieceReverseZ, PieceO];
|
||||||
|
return new types[Math.floor(Math.random() * types.length)](3, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
_updateBufferGrid() {
|
||||||
|
this.bufferGrid = this._createGrid(10, 5);
|
||||||
|
if (!this.nextPiece) return;
|
||||||
|
const shape = this.nextPiece.getShape();
|
||||||
|
const offsetX = Math.floor((10 - shape[0].length) / 2);
|
||||||
|
for (let y = 0; y < shape.length; y++)
|
||||||
|
for (let x = 0; x < shape[y].length; x++)
|
||||||
|
if (shape[y][x] !== 0)
|
||||||
|
this.bufferGrid[y + 1][x + offsetX] = this.nextPiece.getColor();
|
||||||
|
}
|
||||||
|
|
||||||
|
verifierLignes() {
|
||||||
|
let cleared = 0;
|
||||||
|
for (let y = this.grid.length - 1; y >= 0; y--) {
|
||||||
|
if (this.grid[y].every(c => c !== 0)) {
|
||||||
|
this.grid.splice(y, 1);
|
||||||
|
this.grid.unshift(Array(10).fill(0));
|
||||||
|
cleared++;
|
||||||
|
y++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const points = [0, 100, 300, 500, 800];
|
||||||
|
this.score += points[cleared] || 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
_makeHarder() {
|
||||||
|
const prev = Math.floor((this.score - this.harding) / this.harding);
|
||||||
|
const curr = Math.floor(this.score / this.harding);
|
||||||
|
if (curr > prev && curr > 0)
|
||||||
|
this.timeToDown = Math.max(100, this.timeToDown - this.decrementTTD);
|
||||||
|
}
|
||||||
|
|
||||||
|
_canMoveDown() {
|
||||||
|
if (!this.currentPiece) return false;
|
||||||
|
const { x, y } = this.currentPiece.getPosition();
|
||||||
|
const shape = this.currentPiece.getShape();
|
||||||
|
for (let row = 0; row < shape.length; row++)
|
||||||
|
for (let col = 0; col < shape[row].length; col++)
|
||||||
|
if (shape[row][col] !== 0) {
|
||||||
|
const ny = y + row + 1;
|
||||||
|
const nx = x + col;
|
||||||
|
if (ny >= this.grid.length || this.grid[ny][nx] !== 0) return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
_canMoveLeft() {
|
||||||
|
if (!this.currentPiece) return false;
|
||||||
|
const { x, y } = this.currentPiece.getPosition();
|
||||||
|
const shape = this.currentPiece.getShape();
|
||||||
|
for (let row = 0; row < shape.length; row++)
|
||||||
|
for (let col = 0; col < shape[row].length; col++)
|
||||||
|
if (shape[row][col] !== 0) {
|
||||||
|
const nx = x + col - 1;
|
||||||
|
if (nx < 0 || this.grid[y + row][nx] !== 0) return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
_canMoveRight() {
|
||||||
|
if (!this.currentPiece) return false;
|
||||||
|
const { x, y } = this.currentPiece.getPosition();
|
||||||
|
const shape = this.currentPiece.getShape();
|
||||||
|
for (let row = 0; row < shape.length; row++)
|
||||||
|
for (let col = 0; col < shape[row].length; col++)
|
||||||
|
if (shape[row][col] !== 0) {
|
||||||
|
const nx = x + col + 1;
|
||||||
|
if (nx >= this.grid[0].length || this.grid[y + row][nx] !== 0) return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
_isValidPosition() {
|
||||||
|
if (!this.currentPiece) return false;
|
||||||
|
const { x, y } = this.currentPiece.getPosition();
|
||||||
|
const shape = this.currentPiece.getShape();
|
||||||
|
for (let row = 0; row < shape.length; row++)
|
||||||
|
for (let col = 0; col < shape[row].length; col++)
|
||||||
|
if (shape[row][col] !== 0) {
|
||||||
|
const gx = x + col;
|
||||||
|
const gy = y + row;
|
||||||
|
if (gx < 0 || gx >= this.grid[0].length ||
|
||||||
|
gy < 0 || gy >= this.grid.length ||
|
||||||
|
this.grid[gy][gx] !== 0) return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
_canSpawn() { return this._isValidPosition(); }
|
||||||
|
|
||||||
|
_lockPiece() {
|
||||||
|
if (!this.currentPiece) return;
|
||||||
|
const { x, y } = this.currentPiece.getPosition();
|
||||||
|
const shape = this.currentPiece.getShape();
|
||||||
|
const color = this.currentPiece.getColor();
|
||||||
|
for (let row = 0; row < shape.length; row++)
|
||||||
|
for (let col = 0; col < shape[row].length; col++)
|
||||||
|
if (shape[row][col] !== 0)
|
||||||
|
this.grid[y + row][x + col] = color;
|
||||||
|
}
|
||||||
|
|
||||||
|
_gameOver() {
|
||||||
|
this.stop();
|
||||||
|
this.onGameOver(this.score);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─────────────────────────────────────────────
|
||||||
|
// RENDU
|
||||||
|
// ─────────────────────────────────────────────
|
||||||
|
|
||||||
|
const CELL = 30;
|
||||||
|
const COLORS = ['#070712','#a855f7','#f97316','#3b82f6','#06b6d4','#ef4444','#22c55e','#eab308'];
|
||||||
|
|
||||||
|
let canvasMain;
|
||||||
|
let canvasNext;
|
||||||
|
let canvasHold;
|
||||||
|
let game;
|
||||||
|
|
||||||
|
let scoreDisplay = $state(0);
|
||||||
|
let btnStartDisabled = $state(false);
|
||||||
|
let btnPauseDisabled = $state(true);
|
||||||
|
let btnStopDisabled = $state(true);
|
||||||
|
let btnPauseText = $state('Pause');
|
||||||
|
let overlayVisible = $state(false);
|
||||||
|
let overlayTitle = $state('');
|
||||||
|
let overlayScore = $state('');
|
||||||
|
|
||||||
|
function drawCell(ctx, x, y, colorIndex, size) {
|
||||||
|
const p = 1;
|
||||||
|
ctx.fillStyle = COLORS[colorIndex];
|
||||||
|
ctx.fillRect(x * size + p, y * size + p, size - p * 2, size - p * 2);
|
||||||
|
ctx.fillStyle = 'rgba(255,255,255,0.25)';
|
||||||
|
ctx.fillRect(x * size + p, y * size + p, size - p * 2, 3);
|
||||||
|
ctx.fillRect(x * size + p, y * size + p, 3, size - p * 2);
|
||||||
|
ctx.fillStyle = 'rgba(0,0,0,0.35)';
|
||||||
|
ctx.fillRect(x * size + p, (y + 1) * size - p - 3, size - p * 2, 3);
|
||||||
|
ctx.fillRect((x + 1) * size - p - 3, y * size + p, 3, size - p * 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearCanvas(ctx, w, h) {
|
||||||
|
ctx.fillStyle = '#070712';
|
||||||
|
ctx.fillRect(0, 0, w, h);
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawGridLines(ctx, cols, rows, size) {
|
||||||
|
ctx.strokeStyle = 'rgba(255,255,255,0.04)';
|
||||||
|
ctx.lineWidth = 1;
|
||||||
|
for (let x = 0; x <= cols; x++) {
|
||||||
|
ctx.beginPath(); ctx.moveTo(x * size, 0); ctx.lineTo(x * size, rows * size); ctx.stroke();
|
||||||
|
}
|
||||||
|
for (let y = 0; y <= rows; y++) {
|
||||||
|
ctx.beginPath(); ctx.moveTo(0, y * size); ctx.lineTo(cols * size, y * size); ctx.stroke();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawGhost(ctx, piece, grid) {
|
||||||
|
if (!piece) return;
|
||||||
|
const ghost = { x: piece.getPosition().x, y: piece.getPosition().y };
|
||||||
|
const shape = piece.getShape();
|
||||||
|
|
||||||
|
while (true) {
|
||||||
|
ghost.y++;
|
||||||
|
let valid = true;
|
||||||
|
for (let row = 0; row < shape.length && valid; row++)
|
||||||
|
for (let col = 0; col < shape[row].length && valid; col++)
|
||||||
|
if (shape[row][col] !== 0) {
|
||||||
|
const ny = ghost.y + row;
|
||||||
|
const nx = ghost.x + col;
|
||||||
|
if (ny >= grid.length || grid[ny][nx] !== 0) valid = false;
|
||||||
|
}
|
||||||
|
if (!valid) { ghost.y--; break; }
|
||||||
|
}
|
||||||
|
|
||||||
|
if (ghost.y === piece.getPosition().y) return;
|
||||||
|
|
||||||
|
ctx.strokeStyle = 'rgba(255,255,255,0.15)';
|
||||||
|
ctx.lineWidth = 1;
|
||||||
|
for (let row = 0; row < shape.length; row++)
|
||||||
|
for (let col = 0; col < shape[row].length; col++)
|
||||||
|
if (shape[row][col] !== 0)
|
||||||
|
ctx.strokeRect(
|
||||||
|
(ghost.x + col) * CELL + 2,
|
||||||
|
(ghost.y + row) * CELL + 2,
|
||||||
|
CELL - 4, CELL - 4
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawMiniPiece(ctx, piece, canvasW, canvasH) {
|
||||||
|
clearCanvas(ctx, canvasW, canvasH);
|
||||||
|
if (!piece) return;
|
||||||
|
const shape = piece.getShape();
|
||||||
|
const color = piece.getColor();
|
||||||
|
const s = 20;
|
||||||
|
const offsetX = Math.floor((canvasW / s - shape[0].length) / 2);
|
||||||
|
const offsetY = Math.floor((canvasH / s - shape.length) / 2);
|
||||||
|
for (let row = 0; row < shape.length; row++)
|
||||||
|
for (let col = 0; col < shape[row].length; col++)
|
||||||
|
if (shape[row][col] !== 0)
|
||||||
|
drawCell(ctx, offsetX + col, offsetY + row, color, s);
|
||||||
|
}
|
||||||
|
|
||||||
|
function render() {
|
||||||
|
if (!canvasMain || !canvasNext || !canvasHold || !game) return;
|
||||||
|
|
||||||
|
const ctxMain = canvasMain.getContext('2d');
|
||||||
|
const ctxNext = canvasNext.getContext('2d');
|
||||||
|
const ctxHold = canvasHold.getContext('2d');
|
||||||
|
|
||||||
|
clearCanvas(ctxMain, 300, 600);
|
||||||
|
drawGridLines(ctxMain, 10, 20, CELL);
|
||||||
|
|
||||||
|
for (let y = 0; y < game.grid.length; y++)
|
||||||
|
for (let x = 0; x < game.grid[y].length; x++)
|
||||||
|
if (game.grid[y][x] !== 0)
|
||||||
|
drawCell(ctxMain, x, y, game.grid[y][x], CELL);
|
||||||
|
|
||||||
|
if (game.currentPiece) {
|
||||||
|
drawGhost(ctxMain, game.currentPiece, game.grid);
|
||||||
|
const { x, y } = game.currentPiece.getPosition();
|
||||||
|
const shape = game.currentPiece.getShape();
|
||||||
|
const color = game.currentPiece.getColor();
|
||||||
|
for (let row = 0; row < shape.length; row++)
|
||||||
|
for (let col = 0; col < shape[row].length; col++)
|
||||||
|
if (shape[row][col] !== 0)
|
||||||
|
drawCell(ctxMain, x + col, y + row, color, CELL);
|
||||||
|
}
|
||||||
|
|
||||||
|
drawMiniPiece(ctxNext, game.nextPiece, 100, 80);
|
||||||
|
drawMiniPiece(ctxHold, game.storedPiece, 100, 80);
|
||||||
|
|
||||||
|
scoreDisplay = game.score;
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateButtons() {
|
||||||
|
if (!game) return;
|
||||||
|
btnStartDisabled = game.isRunning;
|
||||||
|
btnPauseDisabled = !game.isRunning;
|
||||||
|
btnStopDisabled = !game.isRunning;
|
||||||
|
btnPauseText = game.isPaused ? 'Resume' : 'Pause';
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleStart() {
|
||||||
|
overlayVisible = false;
|
||||||
|
game.start();
|
||||||
|
updateButtons();
|
||||||
|
render();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handlePause() {
|
||||||
|
game.pause();
|
||||||
|
updateButtons();
|
||||||
|
if (game.isPaused) {
|
||||||
|
overlayTitle = 'PAUSE';
|
||||||
|
overlayScore = '';
|
||||||
|
overlayVisible = true;
|
||||||
|
} else {
|
||||||
|
overlayVisible = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleStop() {
|
||||||
|
game.stop();
|
||||||
|
updateButtons();
|
||||||
|
render();
|
||||||
|
overlayTitle = 'STOPPED';
|
||||||
|
overlayScore = '';
|
||||||
|
overlayVisible = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
game = new Tetris(
|
||||||
|
() => { render(); updateButtons(); },
|
||||||
|
(score) => {
|
||||||
|
render();
|
||||||
|
updateButtons();
|
||||||
|
overlayTitle = 'GAME OVER';
|
||||||
|
overlayScore = `Score : ${score}`;
|
||||||
|
overlayVisible = true;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
render();
|
||||||
|
updateButtons();
|
||||||
|
});
|
||||||
|
|
||||||
|
onDestroy(() => {
|
||||||
|
if (game && game.isRunning) {
|
||||||
|
game.stop();
|
||||||
|
}
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<main>
|
<h1>TETRIS</h1>
|
||||||
<img src="/logo2.svg" alt="DFINITY logo" />
|
|
||||||
<br />
|
<div id="app">
|
||||||
<br />
|
<!-- Panneau gauche : Hold + Score + Boutons -->
|
||||||
<form action="#" onsubmit={onSubmit}>
|
<div class="panel">
|
||||||
<label for="name">Enter your name: </label>
|
<div class="panel-title">Hold</div>
|
||||||
<input id="name" alt="Name" type="text" />
|
<canvas bind:this={canvasHold} id="canvas-hold" width="100" height="80"></canvas>
|
||||||
<button type="submit">Click Me!</button>
|
|
||||||
</form>
|
<div class="score-block">
|
||||||
<section id="greeting">{greeting}</section>
|
<div class="score-label">Score</div>
|
||||||
</main>
|
<div class="score-value">{scoreDisplay}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="btn-group">
|
||||||
|
<button id="btn-start" disabled={btnStartDisabled} onclick={handleStart}>Start</button>
|
||||||
|
<button id="btn-pause" disabled={btnPauseDisabled} onclick={handlePause}>{btnPauseText}</button>
|
||||||
|
<button id="btn-stop" disabled={btnStopDisabled} onclick={handleStop}>Stop</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Grille principale -->
|
||||||
|
<div id="main-wrapper">
|
||||||
|
<canvas bind:this={canvasMain} id="canvas-main" width="300" height="600"></canvas>
|
||||||
|
<div id="overlay" class:visible={overlayVisible}>
|
||||||
|
<div id="overlay-title">{overlayTitle}</div>
|
||||||
|
<div id="overlay-score">{overlayScore}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Panneau droit : Next + Contrôles -->
|
||||||
|
<div class="panel">
|
||||||
|
<div class="panel-title">Next</div>
|
||||||
|
<canvas bind:this={canvasNext} id="canvas-next" width="100" height="80"></canvas>
|
||||||
|
|
||||||
|
<div class="controls-list">
|
||||||
|
<div><span>← →</span> Déplacer</div>
|
||||||
|
<div><span>↓</span> Descendre</div>
|
||||||
|
<div><span>Q</span> Rot. gauche</div>
|
||||||
|
<div><span>W</span> Rot. droite</div>
|
||||||
|
<div><span>Espace</span> Drop</div>
|
||||||
|
<div><span>C</span> Hold</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
h1 {
|
||||||
|
font-family: 'Orbitron', monospace;
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: 2.2rem;
|
||||||
|
letter-spacing: 0.4em;
|
||||||
|
color: var(--accent);
|
||||||
|
text-shadow: 0 0 20px var(--accent), 0 0 40px var(--accent);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
align-items: flex-start;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
background: var(--panel);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 14px;
|
||||||
|
width: 130px;
|
||||||
|
box-shadow: 0 0 20px rgba(0,255,231,0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-title {
|
||||||
|
font-family: 'Orbitron', monospace;
|
||||||
|
font-size: 0.6rem;
|
||||||
|
letter-spacing: 0.2em;
|
||||||
|
color: var(--accent);
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(canvas) { display: block; border-radius: 4px; }
|
||||||
|
|
||||||
|
#canvas-main {
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
box-shadow: 0 0 30px rgba(0,255,231,0.08), inset 0 0 30px rgba(0,0,0,0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
#canvas-next, #canvas-hold {
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score-block {
|
||||||
|
margin-top: 14px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score-label {
|
||||||
|
font-size: 0.55rem;
|
||||||
|
letter-spacing: 0.2em;
|
||||||
|
color: var(--dim);
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score-value {
|
||||||
|
font-family: 'Orbitron', monospace;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--accent);
|
||||||
|
text-shadow: 0 0 10px var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
margin-top: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
font-family: 'Orbitron', monospace;
|
||||||
|
font-size: 0.55rem;
|
||||||
|
letter-spacing: 0.15em;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
padding: 10px 8px;
|
||||||
|
border: 1px solid;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
background: transparent;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#btn-start { color: var(--accent); border-color: var(--accent); }
|
||||||
|
#btn-start:hover:not(:disabled) { background: var(--accent); color: var(--bg); box-shadow: 0 0 15px var(--accent); }
|
||||||
|
|
||||||
|
#btn-pause { color: var(--accent2); border-color: var(--accent2); }
|
||||||
|
#btn-pause:hover:not(:disabled) { background: var(--accent2); color: var(--bg); box-shadow: 0 0 15px var(--accent2); }
|
||||||
|
|
||||||
|
#btn-stop { color: #ef4444; border-color: #ef4444; }
|
||||||
|
#btn-stop:hover:not(:disabled) { background: #ef4444; color: var(--bg); box-shadow: 0 0 15px #ef4444; }
|
||||||
|
|
||||||
|
button:disabled { opacity: 0.3; cursor: not-allowed; }
|
||||||
|
|
||||||
|
.controls-list {
|
||||||
|
margin-top: 14px;
|
||||||
|
font-size: 0.6rem;
|
||||||
|
line-height: 2;
|
||||||
|
color: var(--dim);
|
||||||
|
}
|
||||||
|
.controls-list span { color: var(--text); }
|
||||||
|
|
||||||
|
#main-wrapper { position: relative; }
|
||||||
|
|
||||||
|
#overlay {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 0; left: 0;
|
||||||
|
width: 300px;
|
||||||
|
height: 600px;
|
||||||
|
background: rgba(7,7,18,0.88);
|
||||||
|
border-radius: 4px;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 12px;
|
||||||
|
z-index: 10;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
#overlay.visible { display: flex; }
|
||||||
|
|
||||||
|
#overlay-title {
|
||||||
|
font-family: 'Orbitron', monospace;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
font-weight: 900;
|
||||||
|
letter-spacing: 0.2em;
|
||||||
|
color: var(--accent2);
|
||||||
|
text-shadow: 0 0 20px var(--accent2);
|
||||||
|
}
|
||||||
|
|
||||||
|
#overlay-score {
|
||||||
|
font-family: 'Orbitron', monospace;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -3,16 +3,16 @@ import adapter from '@sveltejs/adapter-static';
|
|||||||
/** @type {import('@sveltejs/kit').Config} */
|
/** @type {import('@sveltejs/kit').Config} */
|
||||||
const config = {
|
const config = {
|
||||||
kit: {
|
kit: {
|
||||||
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
|
|
||||||
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
|
|
||||||
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
|
|
||||||
adapter: adapter({
|
adapter: adapter({
|
||||||
pages: 'dist',
|
pages: 'dist',
|
||||||
assets: 'dist',
|
assets: 'dist',
|
||||||
fallback: undefined,
|
fallback: 'index.html',
|
||||||
precompress: false,
|
precompress: false,
|
||||||
strict: true,
|
strict: true,
|
||||||
}),
|
}),
|
||||||
|
paths: {
|
||||||
|
relative: false,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user