Adrien/Riichi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

draw winds and turn

Browse source
This commit is contained in:
Didictateur 2025-03-26 00:20:33 +01:00
parent 779ce55472
commit d686d6559a
2 changed files with 94 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/game.ts
View file

@ -3,6 +3,7 @@ import { Hand } from "./hand";
import { Tile } from "./tile";
import { Group } from "./group";
import { drawButtons, clickAction } from "./button";
import { drawState } from "./state";
export type mousePos = { x: number, y: number};
@ -289,6 +290,7 @@ export class Game {
this.play();
// draw winds, discard, riichi etc...
drawState(this.staticCtx, this.turn);
this.drawDiscardSize();
// hands
@ -451,7 +453,7 @@ export class Game {
private drawDiscardSize() {
this.staticCtx.fillStyle = "#f070f0";
this.staticCtx.font = "40px garamond";
this.staticCtx.fillText(this.deck.length().toString(), 520, 520);
this.staticCtx.fillText(this.deck.length().toString(), 507, 537);
}
public async preload(): Promise<void> {

91
src/state.ts Normal file
View file

@ -0,0 +1,91 @@
export function drawState(
ctx: CanvasRenderingContext2D,
turn: number = 0,
rotation: number = 0
): void {
let color = "#e0e0f0";
let r = 30;
let s = 100;
let c = 525;
let pi = Math.PI;
// turn
let w = 150;
let h = 4;
let rd = 2;
let y = 525 + s + 5;
ctx.save();
ctx.translate(525, 525);
ctx.rotate([0, -pi/2, pi, pi/2][turn]);
ctx.translate(-525, -525);
ctx.fillStyle = "#ffcc33";
ctx.beginPath();
ctx.moveTo(c, y);
ctx.lineTo(c - w/2 + rd, y);
ctx.quadraticCurveTo(c - w/2, y, c - w/2, y + rd);
ctx.lineTo(c - w/2, y + h - rd);
ctx.quadraticCurveTo(c - w/2, y + h, c - w/2 + rd, y + h);
ctx.lineTo(c + w/2 - rd, y + h);
ctx.quadraticCurveTo(c + w/2, y + h, c + w/2, y + h - rd);
ctx.lineTo(c + w/2, y + rd);
ctx.quadraticCurveTo(c + w/2, y, c + w/2 - rd, y);
ctx.lineTo(c, y);
ctx.fill();
ctx.stroke();
ctx.restore();
// big rectangle
ctx.save();
ctx.translate(525, 525);
ctx.rotate(rotation);
ctx.translate(-525, -525);
ctx.fillStyle = color;
ctx.beginPath();
ctx.moveTo(c - s, c);
ctx.lineTo(c - s, c + s - r);
ctx.quadraticCurveTo(c - s, c + s, c - s + r, c + s);
ctx.lineTo(c + s - r, c + s);
ctx.quadraticCurveTo(c + s, c + s, c + s, c + s - r);
ctx.lineTo(c + s, c - s + r);
ctx.quadraticCurveTo(c + s, c - s, c + s - r, c - s);
ctx.lineTo(c - s + r, c - s);
ctx.quadraticCurveTo(c - s, c - s, c - s, c - s + r);
ctx.lineTo(c - s, c);
ctx.fill();
ctx.stroke();
// winds
ctx.fillStyle = "#000000";
ctx.font = "40px garamond";
ctx.fillText("Est", 505, 515 + s);
ctx.save();
ctx.translate(525, 525);
ctx.rotate(-3.141592/2);
ctx.translate(-525, -525);
ctx.fillText("Sud", 500, 515 + s);
ctx.restore();
ctx.save();
ctx.translate(525, 525);
ctx.rotate(3.141592);
ctx.translate(-525, -525);
ctx.fillText("Ouest", 480, 515 + s);
ctx.restore();
ctx.save();
ctx.translate(525, 525);
ctx.rotate(3.141592/2);
ctx.translate(-525, -525);
ctx.fillText("Nord", 485, 515 + s);
ctx.restore();
ctx.restore();
}