From d36bb42270ca2b1d8d604c8f53b3f6e7ada66186 Mon Sep 17 00:00:00 2001
From: Ben Kyd <benjaminkyd@gmail.com>
Date: Sat, 20 Mar 2021 23:33:30 +0000
Subject: [PATCH] tiles ennit

---
 client/dragable.js |  2 +-
 client/game.css    | 29 +++++++++++++++++++++++++++--
 client/game.html   | 14 +++++++-------
 3 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/client/dragable.js b/client/dragable.js
index b0db6f6..14717e5 100644
--- a/client/dragable.js
+++ b/client/dragable.js
@@ -34,7 +34,7 @@ function mouseMove(event)
 
     if (selectedElement.pointerEvents === 'none') {
    
-        // Update top/left directly in the dom element:
+        // TODO: Scale for %
         selectedElement.style.left = `${event.clientX - state.dx}px`;
         selectedElement.style.top = `${event.clientY - state.dy}px`;
     }
diff --git a/client/game.css b/client/game.css
index 84e93c8..347756e 100644
--- a/client/game.css
+++ b/client/game.css
@@ -6,9 +6,34 @@
 }
 
 piece {
+    display: flex;
+
     cursor: move;
     border: 1px dotted black;
-    background-color: blanchedalmond;
+    background: radial-gradient(circle, rgba(255,214,45,1) 41%, rgba(255,179,0,1) 84%);
+
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+
+    font-size: 5vw;
+
+    width: 10%;
+    height: 10%;
+
+    position: absolute;
+}
+
+score {
+    display: inline-block;
+
+    text-align: right;
+    right: 1vw;
+
+    width: 100%;
+    height: 100%;
+
+    font-size: 3vw;
 
     position: absolute;
 }
@@ -21,8 +46,8 @@ piece {
     width: 100%;
     height: 100%;
 
-    max-height: 70%;
     max-width: 70%;
+    max-height: 70%;
 
     text-align: center;
     font-size: 3vw; /* roughly 15 / table width */
diff --git a/client/game.html b/client/game.html
index d07b394..53cb74e 100644
--- a/client/game.html
+++ b/client/game.html
@@ -385,13 +385,13 @@
 
     <p><p><p>
         
-    <piece class="unselectable" id="n1">A</piece>
-    <piece class="unselectable" id="n2">A</piece>
-    <piece class="unselectable" id="n3">A</piece>
-    <piece class="unselectable" id="n4">A</piece>
-    <piece class="unselectable" id="n5">A</piece>
-    <piece class="unselectable" id="n6">A</piece>
-    <piece class="unselectable" id="n7">A</piece>
+    <piece class="unselectable">A<score>4</score></piece>
+    <piece class="unselectable">A<score>4</score></piece>
+    <piece class="unselectable">A<score>4</score></piece>
+    <piece class="unselectable">A<score>4</score></piece>
+    <piece class="unselectable">A<score>4</score></piece>
+    <piece class="unselectable">A<score>4</score></piece>
+    <piece class="unselectable">A<score>4</score></piece>
 
     </div>