diff --git a/build/dp1.js b/build/dp1.js index b9eb2aa..9653106 100644 --- a/build/dp1.js +++ b/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.")})(); \ No newline at end of file +(()=>{"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.")})(); \ No newline at end of file diff --git a/build/dp2.js b/build/dp2.js new file mode 100644 index 0000000..4573e28 --- /dev/null +++ b/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.")})(); \ No newline at end of file diff --git a/index.html b/index.html index ff3bcdd..a1f743a 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,96 @@ - + - - Rectangle Vert + + Mahjong + - - - + + + +
+ + diff --git a/src/deck.ts b/src/deck.ts new file mode 100644 index 0000000..3a2da6a --- /dev/null +++ b/src/deck.ts @@ -0,0 +1,76 @@ +import { Tile } from "./tile" + +export class Deck { + private tiles: Array; + + 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)); + } + } + } + } + } +} diff --git a/src/display/dp1.ts b/src/display/dp1.ts index f697193..e39e1b7 100644 --- a/src/display/dp1.ts +++ b/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); + + // 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 + ); - const tile = new Tile(4, 4, false); - tile.drawTile(ctx, 100, 100, 0.5); } else { console.error("Impossible d'obtenir le contexte du canvas."); } diff --git a/src/display/dp2.ts b/src/display/dp2.ts new file mode 100644 index 0000000..783f7ea --- /dev/null +++ b/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."); +} + diff --git a/src/tile.ts b/src/tile.ts index eab340d..d50fbab 100644 --- a/src/tile.ts +++ b/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"; } } } diff --git a/webpack.config.js b/webpack.config.js index c0c88c1..421abd5 100644 --- a/webpack.config.js +++ b/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: [