137 lines
3.9 KiB
Markdown
137 lines
3.9 KiB
Markdown
# 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`)
|