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,
|
||||
"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": {
|
||||
"version": "8.5.6",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
|
||||
|
||||
@@ -1,19 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>IC Hello Starter</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<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%
|
||||
</head>
|
||||
|
||||
<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>
|
||||
</body>
|
||||
|
||||
|
||||
@@ -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 {
|
||||
font-family: sans-serif;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 50vw;
|
||||
max-height: 25vw;
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
form {
|
||||
background: var(--bg);
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
color: var(--text);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5em;
|
||||
flex-flow: row wrap;
|
||||
max-width: 40vw;
|
||||
margin: auto;
|
||||
align-items: baseline;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
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;
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
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);
|
||||
background-size: 40px 40px;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@@ -1,27 +1,823 @@
|
||||
<script>
|
||||
import "../index.scss";
|
||||
import { backend } from "$lib/canisters";
|
||||
import { onMount, onDestroy } from "svelte";
|
||||
|
||||
let greeting = $state("")
|
||||
// ─────────────────────────────────────────────
|
||||
// PIÈCES
|
||||
// ─────────────────────────────────────────────
|
||||
|
||||
function onSubmit(event) {
|
||||
event.preventDefault();
|
||||
const name = event.target.name.value;
|
||||
backend.greet(name).then((response) => {
|
||||
greeting = response;
|
||||
});
|
||||
return false;
|
||||
class Piece {
|
||||
constructor(startX, startY) {
|
||||
this.position = { x: startX, y: startY };
|
||||
this.currentRotation = 0;
|
||||
this.rotations = this.defineRotations();
|
||||
this.shape = this.rotations[0];
|
||||
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>
|
||||
|
||||
<main>
|
||||
<img src="/logo2.svg" alt="DFINITY logo" />
|
||||
<br />
|
||||
<br />
|
||||
<form action="#" onsubmit={onSubmit}>
|
||||
<label for="name">Enter your name: </label>
|
||||
<input id="name" alt="Name" type="text" />
|
||||
<button type="submit">Click Me!</button>
|
||||
</form>
|
||||
<section id="greeting">{greeting}</section>
|
||||
</main>
|
||||
<h1>TETRIS</h1>
|
||||
|
||||
<div id="app">
|
||||
<!-- Panneau gauche : Hold + Score + Boutons -->
|
||||
<div class="panel">
|
||||
<div class="panel-title">Hold</div>
|
||||
<canvas bind:this={canvasHold} id="canvas-hold" width="100" height="80"></canvas>
|
||||
|
||||
<div class="score-block">
|
||||
<div class="score-label">Score</div>
|
||||
<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} */
|
||||
const config = {
|
||||
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({
|
||||
pages: 'dist',
|
||||
assets: 'dist',
|
||||
fallback: undefined,
|
||||
fallback: 'index.html',
|
||||
precompress: false,
|
||||
strict: true,
|
||||
}),
|
||||
paths: {
|
||||
relative: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user