Add player hand display in browser

2 files changed, 51 insertions, 1 deletions

diff --git a/assets/session.css b/assets/session.css
new file mode 100644
index 0000000..03db59d
--- /dev/null
+++ b/assets/session.css
@@ -0,0 +1,6 @@
+#hand {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    flex-wrap: wrap;
+}
\ No newline at end of file
diff --git a/assets/session.js b/assets/session.js
index 981cff1..3f17ad0 100644
--- a/assets/session.js
+++ b/assets/session.js
@@ -1,4 +1,5 @@
 const colorSelect = document.getElementById('color-select');
+const hand = document.getElementById('hand');
 
 const id = document.getElementById('session-script').dataset.id;
 const websocket = new WebSocket(`/session/${id}/play`);
@@ -28,6 +29,49 @@ websocket.addEventListener('message', (event) => {
     } else if (Object.hasOwn(message, 'Hand')) {
         const payload = message.Hand;
         colorSelect.disabled = false;
+
+        Array.from(hand.children).forEach((child) => {
+            child.remove();
+        })
+
+        payload.forEach((handObject) => {
+            if (Object.hasOwn(handObject, 'CustomDeck')) {
+                const customDeck = handObject.CustomDeck;
+
+                /*
+                const cardWidthRatio = 100 / customDeck.width;
+                const cardHeightRatio = 100 / customDeck.height;
+                const cardHorizontalOffset = cardWidthRatio * (customDeck.card_id % customDeck.width);
+                const cardVerticalOffset = cardHeightRatio * Math.floor(customDeck.card_id / customDeck.width);
+
+                const card = document.createElement('img');
+                card.src = customDeck.face;
+                card.style.clipPath = `rect(${cardVerticalOffset}% ${cardWidthRatio}% ${cardVerticalOffset + cardHeightRatio}% ${cardHorizontalOffset}%`;
+                card.style.objectFit = 'none';
+                 */
+
+                // 214x334
+                const cardBounds = document.createElement('div');
+                cardBounds.style.overflow = 'hidden';
+                const cardFace = document.createElement('img');
+                cardFace.src = customDeck.face;
+                cardFace.addEventListener('load', () => {
+                    const width = cardFace.naturalWidth / customDeck.width;
+                    const height = cardFace.naturalHeight / customDeck.height;
+                    const offsetX = width * (customDeck.card_id % customDeck.width);
+                    const offsetY = height * Math.floor(customDeck.card_id / customDeck.width);
+
+                    cardBounds.style.width = `${width}px`;
+                    cardBounds.style.height = `${height}px`;
+                    cardBounds.style.scale = '0.8';
+
+                    cardFace.style.marginLeft = `-${offsetX}px`;
+                    cardFace.style.marginTop = `-${offsetY}px`;
+                });
+                cardBounds.appendChild(cardFace);
+                hand.appendChild(cardBounds);
+            }
+        });
     }
 });
 
@@ -37,7 +81,7 @@ websocket.addEventListener('close', () => {
 
 colorSelect.addEventListener('change', () => {
     if (colorSelect.value === '') return;
-    
+
     colorSelect.disabled = true;
 
     websocket.send(JSON.stringify({