mise en forme globale du site
This commit is contained in:
Didictateur
parent
2d18d856fc
commit
44c3717796
8 changed files with 345 additions and 14 deletions
|
|
@ -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.")})();
|
||||
1
build/dp2.js
Normal file
1
build/dp2.js
Normal file
|
|
@ -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.")})();
|
||||
96
index.html
96
index.html
|
|
@ -1,12 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Rectangle Vert</title>
|
||||
<meta charset="UTF-8">
|
||||
<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>
|
||||
|
||||
|
|
|
|||
76
src/deck.ts
Normal file
76
src/deck.ts
Normal file
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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.");
|
||||
}
|
||||
|
|
|
|||
91
src/display/dp2.ts
Normal file
91
src/display/dp2.ts
Normal file
|
|
@ -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.");
|
||||
}
|
||||
|
||||
|
|
@ -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";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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: [
|
||||
|
|
|
|||
Loading…
Reference in a new issue