tiles ennit

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`;
     }

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 */

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>