mise en forme globale du site

build/dp1.js

@@ -1 +1 @@
-(()=>{"use strict";var t=function(){function t(t,e,i){this.family=t,this.value=e,this.red=i,this.imgSrc="",this.setImgSrc()}return t.prototype.getFamily=function(){return this.family},t.prototype.getValue=function(){return this.value},t.prototype.isRed=function(){return this.red},t.prototype.drawTile=function(t,e,i,r){var n=new Image;n.src="/img/Regular/Front.svg",n.onload=function(){t.drawImage(n,e,i,75*r,100*r)};var a=new Image;a.src=this.imgSrc,a.onload=function(){t.drawImage(a,e,i,75*r,100*r)}},t.prototype.setImgSrc=function(){this.imgSrc="/img/Regular/",this.family<=3?(this.imgSrc+=["","Man","Pin","Sou"][this.family],this.imgSrc+=String(this.value)+".svg"):4===this.family&&(this.imgSrc+=["","Ton","Nan","Shaa","Pei"][this.value]+".svg")},t}(),e=document.getElementById("myCanvas");if(e){var i=e.getContext("2d");i?(i.fillStyle="#007730",i.fillRect(50,50,1e3,1e3),new t(4,4,!1).drawTile(i,100,100,.5)):console.error("Impossible d'obtenir le contexte du canvas.")}else console.error("Canvas introuvable dans le DOM.")})();
+(()=>{"use strict";var i=function(){function i(i,t,e){this.family=i,this.value=t,this.red=e,this.imgSrc="",this.setImgSrc()}return i.prototype.getFamily=function(){return this.family},i.prototype.getValue=function(){return this.value},i.prototype.isRed=function(){return this.red},i.prototype.drawTile=function(i,t,e,r){var l=new Image;l.src="/img/Regular/Front.svg",l.onload=function(){i.drawImage(l,t,e,75*r,100*r)};var s=new Image;s.src=this.imgSrc,s.onload=function(){i.drawImage(s,t,e,75*r,100*r)}},i.prototype.setImgSrc=function(){this.imgSrc="/img/Regular/",this.family<=3?(this.imgSrc+=["","Man","Pin","Sou"][this.family],this.imgSrc+=String(this.value),this.red&&(this.imgSrc+="-Dora"),this.imgSrc+=".svg"):4===this.family?this.imgSrc+=["","Ton","Nan","Shaa","Pei"][this.value]+".svg":5===this.family&&(this.imgSrc+=["","Chun","Hatsu","Haku"][this.value]+".svg")},i}(),t=function(){function t(i){this.tiles=[],this.initTiles(i)}return t.prototype.displayFamilies=function(t,e,r,l,s,n){void 0===s&&(s=0),void 0===n&&(n=0);for(var o=e,a=r,f=1;f<6;f++)if(f<4){for(var u=1;u<10;u++)new i(f,u,!1).drawTile(t,o,a,l),o+=(75+s)*l;o=e,a+=(100+n)*l}else if(4===f){for(u=1;u<5;u++)new i(f,u,!1).drawTile(t,o,a,l),o+=(75+s)*l;o=e,a+=(100+n)*l}else if(5===f)for(u=1;u<4;u++)new i(f,u,!1).drawTile(t,o,a,l),o+=(75+s)*l},t.prototype.initTiles=function(t){for(var e=1;e<6;e++)if(e<4)for(var r=1;e<10;e++)this.tiles.push(new i(e,r,!1)),this.tiles.push(new i(e,r,!1)),this.tiles.push(new i(e,r,!1)),5===r&&t?this.tiles.push(new i(e,r,!0)):this.tiles.push(new i(e,r,!1));else if(5===e)for(r=1;r<5;r++)for(var l=0;l<4;l++)this.tiles.push(new i(e,r,!1));else if(6===e)for(r=1;r<4;r++)for(l=0;l<4;l++)this.tiles.push(new i(e,r,!1))},t}(),e=document.getElementById("myCanvas");if(e){var r=e.getContext("2d");if(r){r.fillStyle="#007730",r.fillRect(50,50,1e3,1e3);var l=.75;new t(!1).displayFamilies(r,180,80,l,50,100),r.fillStyle="#DFDFFF",r.font="30px serif",r.fillText("Caractère:",55,140),r.fillText("Rond:",55,290),r.fillText("Bambou:",55,440),r.fillText("Vent:",55,590),r.fillText("Dragon:",55,740);for(var s=0;s<3;s++)for(var n=0;n<9;n++)r.fillText(String(n+1),180+125*n*l+22.5,80+200*s*l+112.5);r.fillText("Est",180,642.5),r.fillText("Sud",273.75,642.5),r.fillText("Ouest",367.5,642.5),r.fillText("Nord",461.25,642.5),r.fillText("Rouge",180,792.5),r.fillText("Vert",273.75,792.5),r.fillText("Blanc",367.5,792.5)}else console.error("Impossible d'obtenir le contexte du canvas.")}else console.error("Canvas introuvable dans le DOM.")})();

build/dp2.js

@@ -0,0 +1 @@
+(()=>{"use strict";var i=function(){function i(i,t,e){this.family=i,this.value=t,this.red=e,this.imgSrc="",this.setImgSrc()}return i.prototype.getFamily=function(){return this.family},i.prototype.getValue=function(){return this.value},i.prototype.isRed=function(){return this.red},i.prototype.drawTile=function(i,t,e,r){var l=new Image;l.src="/img/Regular/Front.svg",l.onload=function(){i.drawImage(l,t,e,75*r,100*r)};var s=new Image;s.src=this.imgSrc,s.onload=function(){i.drawImage(s,t,e,75*r,100*r)}},i.prototype.setImgSrc=function(){this.imgSrc="/img/Regular/",this.family<=3?(this.imgSrc+=["","Man","Pin","Sou"][this.family],this.imgSrc+=String(this.value),this.red&&(this.imgSrc+="-Dora"),this.imgSrc+=".svg"):4===this.family?this.imgSrc+=["","Ton","Nan","Shaa","Pei"][this.value]+".svg":5===this.family&&(this.imgSrc+=["","Chun","Hatsu","Haku"][this.value]+".svg")},i}(),t=function(){function t(i){this.tiles=[],this.initTiles(i)}return t.prototype.displayFamilies=function(t,e,r,l,s,n){void 0===s&&(s=0),void 0===n&&(n=0);for(var o=e,a=r,f=1;f<6;f++)if(f<4){for(var u=1;u<10;u++)new i(f,u,!1).drawTile(t,o,a,l),o+=(75+s)*l;o=e,a+=(100+n)*l}else if(4===f){for(u=1;u<5;u++)new i(f,u,!1).drawTile(t,o,a,l),o+=(75+s)*l;o=e,a+=(100+n)*l}else if(5===f)for(u=1;u<4;u++)new i(f,u,!1).drawTile(t,o,a,l),o+=(75+s)*l},t.prototype.initTiles=function(t){for(var e=1;e<6;e++)if(e<4)for(var r=1;e<10;e++)this.tiles.push(new i(e,r,!1)),this.tiles.push(new i(e,r,!1)),this.tiles.push(new i(e,r,!1)),5===r&&t?this.tiles.push(new i(e,r,!0)):this.tiles.push(new i(e,r,!1));else if(5===e)for(r=1;r<5;r++)for(var l=0;l<4;l++)this.tiles.push(new i(e,r,!1));else if(6===e)for(r=1;r<4;r++)for(l=0;l<4;l++)this.tiles.push(new i(e,r,!1))},t}(),e=document.getElementById("myCanvas");if(e){var r=e.getContext("2d");if(r){r.fillStyle="#007730",r.fillRect(50,50,1e3,1e3);var l=.75;new t(!1).displayFamilies(r,180,80,l,50,100),r.fillStyle="#DFDFFF",r.font="30px serif",r.fillText("Caractère:",55,140),r.fillText("Pin:",55,290),r.fillText("Bambou:",55,440),r.fillText("Vent:",55,590),r.fillText("Dragon:",55,740);for(var s=0;s<3;s++)for(var n=0;n<9;n++)r.fillText(String(n+1),180+125*n*l+22.5,80+200*s*l+112.5);r.fillText("Est",180,642.5),r.fillText("Sud",273.75,642.5),r.fillText("Ouest",367.5,642.5),r.fillText("Nord",461.25,642.5),r.fillText("Rouge",180,792.5),r.fillText("Vert",273.75,792.5),r.fillText("Blanc",367.5,792.5)}else console.error("Impossible d'obtenir le contexte du canvas.")}else console.error("Canvas introuvable dans le DOM.")})();

index.html

@@ -1,12 +1,96 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="fr">
 <head>
     <meta charset="UTF-8">
-	<title>Rectangle Vert</title>
+    <title>Mahjong</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #F0EDFF;
+        }
+        .menu {
+            display: flex;
+            justify-content: center;
+            background-color: #4CAF50;
+            padding: 10px 0;
+        }
+        .menu-item {
+            position: relative;
+            list-style: none;
+        }
+        .menu-item > a {
+            color: white;
+            text-decoration: none;
+            padding: 10px 20px;
+            display: block;
+        }
+        .menu-item > a:hover {
+            background-color: #45a049;
+        }
+        .dropdown {
+            display: none;
+            position: absolute;
+            top: 100%;
+            left: 0;
+            background-color: white;
+            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        .dropdown a {
+            color: black;
+            text-decoration: none;
+            padding: 10px 20px;
+            display: block;
+        }
+        .dropdown a:hover {
+            background-color: #ddd;
+        }
+        .menu-item:hover .dropdown {
+            display: block;
+        }
+    </style>
 </head>
-<body style="background-color:#F0EDFF">
-	<canvas id="myCanvas" width="1000" height="1000"></canvas>
-	<script type="module"  src="build/dp1.js"></script>
+<body>
+    <nav class="menu">
+        <ul class="menu-item">
+            <a href="#">Riichi Mahjong</a>
+            <div class="dropdown">
+                <a href="#" onclick="loadScript('dp1.js')">Présentation des tuiles</a>
+                <a href="#" onclick="loadScript('dp2.js')">La main</a>
+                <a href="#" onclick="loadScript('dp3.js')">Les groupes</a>
+        	</div>
+        </ul>
+				<ul class="menu-item">
+					<a href="#">Yaku trainer</a>
+					<div class="dropdown">
+						<a href="#" onclick="loadScript('')">Yaku 1</a>
+					</div>
+				</ul>
+    </nav>
+
+		<div id="canvasContainer"></div>
+
+    <script>
+				const loaderScript = new Set();
+
+        function loadScript(scriptName) {
+					const container = document.getElementById("canvasContainer");
+					container.innerHTML = `<canvas id="myCanvas" width="1000" height="1000"></canvas>`;
+
+					const timestamp = new Date().getTime();
+
+					const script = document.createElement("script");
+					script.type = "module";
+					script.src = `build/${scriptName}?t=${timestamp}`;
+
+					script.onload = () => {};
+					document.body.appendChild(script);
+				}
+					
+				//script initial
+				loadScript('dp1.js');
+    </script>
 </body>
 </html>
 

src/deck.ts

@@ -0,0 +1,76 @@
+import { Tile } from "./tile"
+
+export class Deck {
+	private tiles: Array<Tile>;
+
+	public constructor(allowRed: boolean) {
+		this.tiles = [];
+		this.initTiles(allowRed);
+	}
+
+	public displayFamilies(
+		ctx: CanvasRenderingContext2D,
+		x: number,
+		y: number,
+		size: number,
+		xOffset: number = 0,
+		yOffset: number = 0
+	): undefined {
+		let posX = x;
+		let posY = y;
+		for (let i = 1; i < 6; i++) {
+			if (i < 4) { // ordinaire
+				for (let j = 1; j < 10; j++) {
+					const tile = new Tile(i, j, false);
+					tile.drawTile(ctx, posX, posY, size);
+					posX += (75 + xOffset) * size;
+				}
+				posX = x;
+				posY += (100 + yOffset) * size;
+			} else if (i === 4) { //vent
+				for (let j = 1; j < 5; j++) {
+					const tile = new Tile(i, j, false);
+					tile.drawTile(ctx, posX, posY, size);
+					posX += (75 + xOffset) * size;
+				}
+				posX = x;
+				posY += (100 + yOffset) * size;
+			} else if (i === 5) { //vent
+				for (let j = 1; j < 4; j++) {
+					const tile = new Tile(i, j, false);
+					tile.drawTile(ctx, posX, posY, size);
+					posX += (75 + xOffset) * size;
+				}
+			}
+		}
+	}
+
+	private initTiles(allowRed: boolean): undefined {
+		for (let i = 1; i < 6; i++) {
+			if (i < 4) { // ordinaire
+				for (let j = 1; i < 10; i++) {
+					this.tiles.push(new Tile(i, j, false));
+					this.tiles.push(new Tile(i, j, false));
+					this.tiles.push(new Tile(i, j, false));
+					if (j === 5 && allowRed) {
+						this.tiles.push(new Tile(i, j, true));
+					} else {
+						this.tiles.push(new Tile(i, j, false));
+					}
+				}
+			} else if (i === 5) { //vent
+				for (let j = 1; j < 5; j++) {
+					for (let k = 0; k < 4; k++) {
+						this.tiles.push(new Tile(i, j, false));
+					}
+				}
+			} else if (i === 6) { //vent
+				for (let j = 1; j < 4; j++) {
+					for (let k = 0; k < 4; k++) {
+						this.tiles.push(new Tile(i, j, false));
+					}
+				}
+			}
+		}
+	}
+}

src/display/dp1.ts

@@ -1,4 +1,5 @@
 import { Tile } from "../tile"
+import { Deck } from "../deck"
 
 const canvas = document.getElementById("myCanvas") as HTMLCanvasElement;
 
@@ -6,12 +7,81 @@ if (canvas) {
   const ctx = canvas.getContext("2d");
   
   if (ctx) {
+		// tapis
     ctx.fillStyle = "#007730";
-
     ctx.fillRect(50, 50, 1000, 1000);
 		
-		const tile = new Tile(4, 4, false);
-		tile.drawTile(ctx, 100, 100, 0.5);
+		// tuiles
+		let x = 180;
+		let y = 80;
+		let size = 0.75;
+		let xos = 50;
+		let yos = 100;
+		const deck = new Deck(false);
+		deck.displayFamilies(ctx, x, y, size, xos, yos);
+
+		// texte
+		ctx.fillStyle = "#DFDFFF";
+		ctx.font = "30px serif";
+
+		let delta = 50 * size;
+		let eps = 30 * size;
+		ctx.fillText("Caractère:", 55, y + delta + eps);
+		ctx.fillText("Rond:", 55, y + 3 * delta + yos * size + eps);
+		ctx.fillText("Bambou:", 55, y + 5 * delta + 2 * yos * size + eps);
+		ctx.fillText("Vent:", 55, y + 7 * delta + 3 * yos * size + eps);
+		ctx.fillText("Dragon:", 55, y + 9 * delta + 4 * yos * size + eps);
+
+		// familles
+		for (let i = 0; i < 3; i++) {
+			for (let j = 0; j < 9; j++) {
+				ctx.fillText(
+					String(j+1),
+					x + j * (xos + 75) * size + 30 * size,
+					y + i * (yos + 100) * size + 150 * size
+				);
+			}
+		}
+
+		// vent
+		ctx.fillText(
+			"Est",
+			x + 0 * (xos + 75) * size,
+			y + 3 * (yos + 100) * size + 150 * size
+		);
+		ctx.fillText(
+			"Sud",
+			x + 1 * (xos + 75) * size,
+			y + 3 * (yos + 100) * size + 150 * size
+		);
+		ctx.fillText(
+			"Ouest",
+			x + 2 * (xos + 75) * size,
+			y + 3 * (yos + 100) * size + 150 * size
+		);
+		ctx.fillText(
+			"Nord",
+			x + 3 * (xos + 75) * size,
+			y + 3 * (yos + 100) * size + 150 * size
+		);
+		
+		// dragon
+		ctx.fillText(
+			"Rouge",
+			x + 0 * (xos + 75) * size,
+			y + 4 * (yos + 100) * size + 150 * size
+		);
+		ctx.fillText(
+			"Vert",
+			x + 1 * (xos + 75) * size,
+			y + 4 * (yos + 100) * size + 150 * size
+		);
+		ctx.fillText(
+			"Blanc",
+			x + 2 * (xos + 75) * size,
+			y + 4 * (yos + 100) * size + 150 * size
+		);
+
   } else {
     console.error("Impossible d'obtenir le contexte du canvas.");
   }

src/display/dp2.ts

@@ -0,0 +1,91 @@
+import { Tile } from "../tile"
+import { Deck } from "../deck"
+
+const canvas = document.getElementById("myCanvas") as HTMLCanvasElement;
+
+if (canvas) {
+  const ctx = canvas.getContext("2d");
+  
+  if (ctx) {
+		// tapis
+    ctx.fillStyle = "#007730";
+    ctx.fillRect(50, 50, 1000, 1000);
+		
+		// tuiles
+		let x = 180;
+		let y = 80;
+		let size = 0.75;
+		let xos = 50;
+		let yos = 100;
+		const deck = new Deck(false);
+		deck.displayFamilies(ctx, x, y, size, xos, yos);
+
+		// texte
+		ctx.fillStyle = "#DFDFFF";
+		ctx.font = "30px serif";
+
+		let delta = 50 * size;
+		let eps = 30 * size;
+		ctx.fillText("Caractère:", 55, y + delta + eps);
+		ctx.fillText("Pin:", 55, y + 3 * delta + yos * size + eps);
+		ctx.fillText("Bambou:", 55, y + 5 * delta + 2 * yos * size + eps);
+		ctx.fillText("Vent:", 55, y + 7 * delta + 3 * yos * size + eps);
+		ctx.fillText("Dragon:", 55, y + 9 * delta + 4 * yos * size + eps);
+
+		// familles
+		for (let i = 0; i < 3; i++) {
+			for (let j = 0; j < 9; j++) {
+				ctx.fillText(
+					String(j+1),
+					x + j * (xos + 75) * size + 30 * size,
+					y + i * (yos + 100) * size + 150 * size
+				);
+			}
+		}
+
+		// vent
+		ctx.fillText(
+			"Est",
+			x + 0 * (xos + 75) * size,
+			y + 3 * (yos + 100) * size + 150 * size
+		);
+		ctx.fillText(
+			"Sud",
+			x + 1 * (xos + 75) * size,
+			y + 3 * (yos + 100) * size + 150 * size
+		);
+		ctx.fillText(
+			"Ouest",
+			x + 2 * (xos + 75) * size,
+			y + 3 * (yos + 100) * size + 150 * size
+		);
+		ctx.fillText(
+			"Nord",
+			x + 3 * (xos + 75) * size,
+			y + 3 * (yos + 100) * size + 150 * size
+		);
+		
+		// dragon
+		ctx.fillText(
+			"Rouge",
+			x + 0 * (xos + 75) * size,
+			y + 4 * (yos + 100) * size + 150 * size
+		);
+		ctx.fillText(
+			"Vert",
+			x + 1 * (xos + 75) * size,
+			y + 4 * (yos + 100) * size + 150 * size
+		);
+		ctx.fillText(
+			"Blanc",
+			x + 2 * (xos + 75) * size,
+			y + 4 * (yos + 100) * size + 150 * size
+		);
+
+  } else {
+    console.error("Impossible d'obtenir le contexte du canvas.");
+  }
+} else {
+  console.error("Canvas introuvable dans le DOM.");
+}
+

src/tile.ts

@@ -47,9 +47,15 @@ export class Tile {
 		this.imgSrc = "/img/Regular/"
 		if (this.family <= 3) {
 			this.imgSrc += ["", "Man", "Pin", "Sou"][this.family];
-			this.imgSrc += String(this.value) + ".svg";
+			this.imgSrc += String(this.value);
+			if (this.red) {
+				this.imgSrc += "-Dora";
+			}
+			this.imgSrc += ".svg";
 		} else if (this.family === 4) {
 			this.imgSrc += ["", "Ton", "Nan", "Shaa", "Pei"][this.value] + ".svg";
+		} else if (this.family === 5) {
+			this.imgSrc += ["", "Chun", "Hatsu", "Haku"][this.value] + ".svg";
 		}
 	}
 }

webpack.config.js

@@ -1,13 +1,16 @@
 const path = require('path');
 
 module.exports = {
-  entry: './src/display/dp1.ts', // Point d'entrée principal
+  entry: {
+    dp1: './src/display/dp1.ts',
+    dp2: './src/display/dp2.ts'
+  },
   output: {
-    filename: 'dp1.js', // Fichier de sortie
+    filename: '[name].js',
     path: path.resolve(__dirname, 'build'),
   },
   resolve: {
-    extensions: ['.ts', '.js'], // Extensions prises en charge
+    extensions: ['.ts', '.js'],
   },
   module: {
     rules: [