feat(DevWeb): Le push du siecle

2026-07-09 13:27:45 +00:00 · 2024-04-30 15:44:53 +02:00
parent e4f3edcc04
commit 275ad640dc
10 changed files with 177 additions and 102 deletions
@@ -0,0 +1,28 @@
+export default class Card {
+    static Color = {
+        DIAMONDS: "DIAMONDS",
+        HEART: "HEART",
+        SPADES: "SPADES",
+        CLUBS: "CLUBS",
+    }
+
+    constructor(color, value) {
+        this.color = color;
+        this.value = value;
+    }
+
+    getValueColor() {
+        return (this.color === Card.Color.DIAMONDS || this.color === Card.Color.HEART)
+            ? 'red' : 'black'
+    }
+
+    render() {
+        const className = [
+            "card-play",
+            this.color.toLowerCase(),
+            `${this.getValueColor()}_${this.value.toLowerCase()}`
+        ]
+
+        return `<div class="${className.join(" ")}"></div>`
+    }
+}
@@ -0,0 +1,34 @@
+import Card from "./Card.js";
+
+export default class PlayerHand {
+    static TextPosition = {
+        TOP: "TOP",
+        BOTTOM: "BOTTOM"
+    }
+
+    constructor(player) {
+        this.player = player;
+        this.card = new Card(player.currentCard.color, player.currentCard.value)
+    }
+
+    render({className, textPosition}) {
+        if (!textPosition) textPosition = PlayerHand.TextPosition.TOP;
+
+        const text = `
+            <div class="pb-1 pt-1">
+                <p class="has-text-centered has-text-white title is-4 mb-1">${this.player.user.username}</p>
+                <p class="has-text-centered has-text-white title is-5">${this.player.score}</p>
+
+            </div>
+        `;
+
+        return `
+            <div class="${className} player-${this.player.user.id} is-flex is-flex-direction-column is-align-items-center">
+                ${textPosition === PlayerHand.TextPosition.TOP ? text : ""}
+                ${this.card.render()}
+                ${textPosition === PlayerHand.TextPosition.BOTTOM ? text : ""}
+            </div>
+        `;
+
+    }
+}