diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..cff7006 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,17 @@ +{ + "semi": true, + "singleQuote": true, + "tabWidth": 2, + "useTabs": false, + "trailingComma": "all", + "printWidth": 100, + "bracketSpacing": true, + "arrowParens": "avoid", + "endOfLine": "lf", + "quoteProps": "as-needed", + "jsxSingleQuote": false, + "bracketSameLine": false, + "proseWrap": "preserve", + "htmlWhitespaceSensitivity": "css", + "embeddedLanguageFormatting": "auto" +} diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..edd85b4 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,11 @@ +{ + "recommendations": [ + "esbenp.prettier-vscode", + "dbaeumer.vscode-eslint", + "bradlc.vscode-tailwindcss", + "formulahendry.auto-rename-tag", + "streetsidesoftware.code-spell-checker", + "streetsidesoftware.code-spell-checker-french", + "ms-vscode.vscode-typescript-next" + ] +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..f3af47d --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,37 @@ +{ + "typescript.tsdk": "node_modules/typescript/lib", + "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.codeActionsOnSave": { + "source.fixAll.eslint": "explicit", + "source.organizeImports": "explicit" + }, + "[typescript]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[javascript]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[json]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[css]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[html]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "files.exclude": { + "**/node_modules": true, + "**/build": false, + "**/.git": true + }, + "search.exclude": { + "**/node_modules": true, + "**/build": true, + "**/*.js.map": true + }, + "emmet.includeLanguages": { + "typescript": "html" + } +} diff --git a/Makefile b/Makefile index 494cd77..b49fc9a 100644 --- a/Makefile +++ b/Makefile @@ -1,27 +1,107 @@ -TESTS = $(wildcard build/test*) +# ================================== +# Riichi Mahjong Tutorial - Makefile +# ================================== -all: - npx webpack --mode production +.PHONY: all dev build preview test lint format clean hard-clean zip help install +# Default target +all: build + +# Install dependencies +install: + @echo "Installing dependencies..." + npm install + +# Development server with hot reload dev: - npx webpack --mode development + @echo "Starting development server..." + npm run dev -zip: - npx webpack --mode production +# Production build +build: + @echo "Building for production..." + npm run build + +# Preview production build +preview: + @echo "Previewing production build..." + npm run preview + +# Run tests +test: + @echo "Running tests..." + npm run test + +# Run tests in watch mode +test-watch: + @echo "Running tests in watch mode..." + npm run test:watch + +# Lint code +lint: + @echo "Linting code..." + npm run lint + +# Fix linting issues +lint-fix: + @echo "Fixing linting issues..." + npm run lint:fix + +# Format code +format: + @echo "Formatting code..." + npm run format + +# Type check +typecheck: + @echo "Type checking..." + npm run typecheck + +# Create distribution zip +zip: build + @echo "Creating distribution archive..." @rm -rf riichi - mkdir riichi - cp -r build riichi - cp index.html riichi - cp -r img riichi - zip -r riichi.zip riichi - @rm -r riichi - + @mkdir riichi + @cp -r build riichi/ + @cp index.html riichi/ + @cp -r img riichi/ + @cp -r src/styles riichi/src/ 2>/dev/null || mkdir -p riichi/src && cp -r src/styles riichi/src/ + @zip -r riichi.zip riichi + @rm -rf riichi + @echo "Created riichi.zip" +# Clean build artifacts clean: - rm -rf build/ - rm -f riichi.zip + @echo "Cleaning build artifacts..." + @rm -rf build/ + @rm -rf dist/ + @rm -f riichi.zip + @rm -rf riichi/ -hard-clean: - rm -rf build/ - rm -rf node_modules/ - rm -f package-lock.json - rm -f richi.zip +# Deep clean (including dependencies) +hard-clean: clean + @echo "Deep cleaning (including dependencies)..." + @rm -rf node_modules/ + @rm -f package-lock.json + @rm -rf .cache/ + @rm -f *.tsbuildinfo + +# Show help +help: + @echo "" + @echo "Riichi Mahjong Tutorial - Available Commands" + @echo "================================================" + @echo "" + @echo " make install - Install npm dependencies" + @echo " make dev - Start development server with hot reload" + @echo " make build - Build for production" + @echo " make preview - Preview production build" + @echo " make test - Run tests" + @echo " make test-watch - Run tests in watch mode" + @echo " make lint - Check code for linting errors" + @echo " make lint-fix - Fix linting errors automatically" + @echo " make format - Format code with Prettier" + @echo " make typecheck - Run TypeScript type checking" + @echo " make zip - Create distribution archive" + @echo " make clean - Remove build artifacts" + @echo " make hard-clean - Remove all generated files and dependencies" + @echo "" diff --git a/README.md b/README.md index 1ecff3e..c9f166b 100644 --- a/README.md +++ b/README.md @@ -1,83 +1,127 @@ -# 🀄 Tutoriel interactif de Mahjong 🀄 -Un tutoriel complet et interactif pour apprendre Ă  jouer au mahjong, dĂ©veloppĂ© en TypeScript. Ce projet vise Ă  rendre l'apprentissage du mahjong accessible Ă  tous. +# Tutoriel interactif de Mahjong Riichi +

+ TypeScript + Vite + License +

+Un tutoriel complet et interactif pour apprendre Ă  jouer au Mahjong Riichi, dĂ©veloppĂ© en TypeScript moderne avec une interface Ă©lĂ©gante. -## 🔗 DĂ©monstration +## DĂ©monstration Ce tutoriel est accessible directement sur [ce site](https://perso.eleves.ens-rennes.fr/people/adrien.decosse/riichi/). +## FonctionnalitĂ©s +- **Guide Ă©tape par Ă©tape** : Apprentissage progressif dĂ©coupĂ© en chapitres +- **Interface interactive** : Manipulez les tuiles et expĂ©rimentez les dynamiques +- **Exemples de jeu** : ScĂ©narios dirigĂ©s pour s'entraĂźner aux diffĂ©rentes situations +- **Design moderne** : Interface Ă©lĂ©gante avec animations fluides +- **Performances optimisĂ©es** : Rendu canvas optimisĂ© avec double buffering -## ✹ FonctionnalitĂ©s +## Stack Technique -- Guide Ă©tape par Ă©tape: Apprentissage progressif dĂ©coupĂ© en chapitre -- Interface interactive: Manipulez les tuiles et expĂ©rimenter les dynamiques -- Exemples de jeu: ScĂ©narios dirigĂ©s pour s'entrainer aux diffĂ©rentes situations -- Non compatible pour le format tĂ©lĂ©phone ou tablette +| Technologie | Version | Usage | +|------------|---------|-------| +| TypeScript | 5.6+ | Langage principal | +| Vite | 6.0+ | Build tool & dev server | +| Vitest | 2.1+ | Tests unitaires | +| Canvas API | - | Rendu graphique | +## DĂ©marrage Rapide +### PrĂ©requis -## đŸ› ïž Configuration Typescript +- Node.js 18.0 ou supĂ©rieur +- npm ou yarn -- Cible ES2015 -- Mode strict activĂ© -- Module de type "esnext" +### Installation +```bash +# Cloner le dĂ©pĂŽt +git clone https://github.com/Didictateur/Riichi.git +cd Riichi +# Installer les dĂ©pendances +npm install -## đŸ› ïž PrĂ©requis - -- ts-loader ^9.5.2 -- webpack ^5.98.0 -- webpack-cli ^6.0.1 - - - -## 🚀 Installation - -- Clonage du dĂ©pot: ```git clone https://github.com/Didictateur/Riichi.git && cd Riichi``` -- Installation des dĂ©pendances: ```npm install``` -- Compilation: ```make``` - - - -## Ⓜ Makefile - -Un makefile est Ă  disposition pour exĂ©cuter plusieurs commandes: - -- `make` compile le projet dans `build/` en mode `production` -- `make dev` compile le projet dans `build/` en mode `development` -- `make zip` compresse le contenu du `build` et les ressource nĂ©cessaires dans `riichi.zip` -- `make clean` supprime `riichi.zip` et le contenu de `build/` -- `make hard-clean` en plus de clean, supprime toutes les dĂ©pendances installĂ©es - - - -## 📁 Structure du projet - -``` -Riichi/ -├── src/ -│ ├── img/ # Dossier contenant les images -│ ├── display/ # Composant gĂ©rant l'affichage de chaque section -│ ├── text/ # Textes des tutoriels -│ ├── yakus/ # ImplĂ©mentation des yakus -│ └── [autres fichiers sources] -├── img/ # Images et ressources -├── tests/ # Tests unitaires et d'intĂ©gration -├── build/ # Ensemble du projet compilĂ© en JavaScript -└── [autres fichiers de configuration] +# Lancer le serveur de dĂ©veloppement +npm run dev ``` +## Scripts Disponibles +| Commande | Description | +|----------|-------------| +| `npm run dev` | Lance le serveur de dĂ©veloppement avec hot reload | +| `npm run build` | Compile le projet pour la production | +| `npm run preview` | PrĂ©visualise le build de production | +| `npm run typecheck` | VĂ©rifie les types TypeScript | +| `npm run test` | Lance les tests | +| `npm run test:watch` | Lance les tests en mode watch | -## đŸ€ Source +## Makefile -Les images ont Ă©tĂ© rĂ©cupĂ©rĂ©es depuis le github de [FluffyStuff](https://github.com/FluffyStuff/riichi-mahjong-tiles?tab=readme-ov-file). +Un Makefile est Ă©galement disponible : +```bash +make dev # Serveur de dĂ©veloppement +make build # Build production +make preview # PrĂ©visualiser le build +make test # Lancer les tests +make clean # Nettoyer les fichiers gĂ©nĂ©rĂ©s +make hard-clean # Nettoyage complet (incluant node_modules) +make zip # CrĂ©er une archive de distribution +make help # Afficher l'aide +``` +## Structure du Projet -## 📝 Licence +``` +Riichi/ +├── src/ +│ ├── constants/ # Constantes partagĂ©es +│ ├── display/ # Composants d'affichage (dp*.ts) +│ ├── styles/ # Feuilles de style CSS +│ ├── text/ # Textes des tutoriels +│ ├── types/ # DĂ©finitions de types TypeScript +│ ├── utils/ # Fonctions utilitaires +│ └── yakus/ # ImplĂ©mentation des yakus +├── img/ # Images et ressources +├── tests/ # Tests unitaires +├── build/ # Fichiers compilĂ©s +├── index.html # Point d'entrĂ©e HTML +├── vite.config.ts # Configuration Vite +└── tsconfig.json # Configuration TypeScript +``` -Tout le projet est dans le [domaine public](https://creativecommons.org/publicdomain/zero/1.0/). +## Design System + +Le projet utilise un systĂšme de variables CSS moderne : + +```css +:root { + --color-primary: #1a7f4b; + --color-accent: #ffd700; + --bg-main: linear-gradient(...); + /* ... */ +} +``` + +## Contribution + +Les contributions sont les bienvenues ! N'hĂ©sitez pas Ă  : +1. Fork le projet +2. CrĂ©er une branche (`git checkout -b feature/amelioration`) +3. Commit vos changements (`git commit -am 'Ajout de fonctionnalitĂ©'`) +4. Push la branche (`git push origin feature/amelioration`) +5. Ouvrir une Pull Request + +## Sources + +Les images des tuiles proviennent du dĂ©pĂŽt de [FluffyStuff](https://github.com/FluffyStuff/riichi-mahjong-tiles). + +## Licence + +Ce projet est dans le [domaine public](https://creativecommons.org/publicdomain/zero/1.0/) (CC0 1.0). diff --git a/index.html b/index.html index 0428179..793cb95 100644 --- a/index.html +++ b/index.html @@ -2,190 +2,260 @@ - Mahjong - + + + + Mahjong Riichi - Tutoriel Interactif + + + + + + + + -