draw winds and turn

src/game.ts

@@ -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> {

src/state.ts

@@ -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();
+}