From 0681a9bc9541446c4d7324f31377a2933fa3fbc4 Mon Sep 17 00:00:00 2001
From: Ben Burlingham <ben.burlingham@gmail.com>
Date: Fri, 22 May 2020 23:35:29 -0700
Subject: [PATCH] Dragging robots.

---
 ricochet.css  |  64 +++++++++++---------
 ricochet.html | 163 +++++++++++++++++++++++++++++++-------------------
 server.js     |   4 +-
 3 files changed, 141 insertions(+), 90 deletions(-)

diff --git a/ricochet.css b/ricochet.css
index 70f7cf7..423caaa 100644
--- a/ricochet.css
+++ b/ricochet.css
@@ -43,6 +43,24 @@
 
 }
 
+#controls-guesses  {
+    background: salmon;
+}
+
+.controls-guess  {
+    background: yellow;
+    float: left;
+    font-size: 12px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    width: 30px;
+}
+
+.controls-guess:hover {
+    background: orange;
+}
+
 .board-container {
     background: conic-gradient(lime 0 25%, yellow 25% 50%, red 50% 75%, blue 75% 100%);
     bottom: 0;
@@ -52,14 +70,23 @@
     top: 0;
 }
 
-#board {
+#board-squares {
     border-color: #aaa;
     border-style: solid;
     border-width: 1px 0 0 1px;
-    margin: 0 auto;
     position: relative;
 }
 
+.board-square{
+    background: #ddd;
+    border-style: solid;
+    border-color: #aaa;
+    border-width: 0 1px 1px 0;
+    float: left;
+    height: 40px;
+    width: 40px;
+}
+
 .board-wall-x {
     background: #222;
     height: 8px;
@@ -77,35 +104,18 @@
 }
 
 .board-robot {
-    border-radius: 18px;
+    /*border-radius: 20px;*/
+    border: 2px solid transparent;
     height: 36px;
     margin: 2px;
     position: absolute;
     width: 36px;
 }
 
-.square{
-    background: #ddd;
-    border-style: solid;
-    border-color: #aaa;
-    border-width: 0 1px 1px 0;
-    float: left;
-    height: 40px;
-    width: 40px;
-}
-
-.moves  {
-    background: salmon;
-}
-
-.move-count  {
-    background: yellow;
-    border-radius: 8px;
-    float: left;
-    font-size: 12px;
-    height: 16px;
-    line-height: 16px;
-    margin: 4px;
-    text-align: center;
-    width: 16px;
+.board-robot-shadow {
+    background: red;
+    height: 36px;
+    opacity: 0.75;
+    position: absolute;
+    width: 36px;
 }
\ No newline at end of file
diff --git a/ricochet.html b/ricochet.html
index cd0e90a..fcbbacf 100644
--- a/ricochet.html
+++ b/ricochet.html
@@ -27,44 +27,13 @@
         </div>
         
 
-        <div class="moves">
-            <div class="move-count">1</div>
-            <div class="move-count">2</div>
-            <div class="move-count">3</div>
-            <div class="move-count">4</div>
-            <div class="move-count">5</div>
-            <div class="move-count">6</div>
-            <div class="move-count">7</div>
-            <div class="move-count">8</div>
-            <div class="move-count">9</div>
-            <div class="move-count">10</div>
-            <br>
-            <div class="move-count">11</div>
-            <div class="move-count">12</div>
-            <div class="move-count">13</div>
-            <div class="move-count">14</div>
-            <div class="move-count">15</div>
-            <div class="move-count">16</div>
-            <div class="move-count">17</div>
-            <div class="move-count">18</div>
-            <div class="move-count">19</div>
-            <div class="move-count">20</div>
-            <br>
-            <div class="move-count">21</div>
-            <div class="move-count">22</div>
-            <div class="move-count">23</div>
-            <div class="move-count">24</div>
-            <div class="move-count">25</div>
-            <div class="move-count">26</div>
-            <div class="move-count">27</div>
-            <div class="move-count">28</div>
-            <div class="move-count">29</div>
-            <div class="move-count">30</div>
+        <div id="controls-guesses">
+            <div class='controls-subtitle'>Guess</div>
         </div>
     </div>
 
     <div class="board-container">
-        <div id="board"></div>
+        <div id="board-squares"></div>
     </div>
 
     <script>
@@ -76,6 +45,9 @@
         // TODO [soap, xmpp]
         // TODO a message must have a head and a body
         // TODO your favorite games
+        // TODO no cancel from name prompt
+        // TODO limit concurrent players
+        // TODO window resize update board
 
         const Cookie = {
             getCookie: function(name) {
@@ -95,16 +67,34 @@
         };
 
         const Controls = {
-            addPlayer: () => {
+            guessBuild: () => {
+                const container = document.getElementById('controls-guesses');
+                container.querySelectorAll('.controls-guess').forEach(el => el.parentNode.removeChild(el));
+
+                for (let i = 1; i <= 30; i++) {
+                    const guess = document.createElement('div');
+                    guess.className = 'controls-guess';
+                    guess.innerHTML = i;
+                    guess.setAttribute('data-value', i);
+                    guess.addEventListener('click', Controls.guessClick)
+                    container.appendChild(guess);
+                }
+            },
+
+            guessClick: (evt) => {
+                alert(evt.currentTarget.dataset.value)
+            },
+
+            playerAdd: () => {
                 const rawInput = prompt("What is your name?");
-                connection.send(JSON.stringify({ head: { type: 'addPlayer' }, body: rawInput }))
+                connection.send(JSON.stringify({ head: { type: 'playerAdd' }, body: rawInput }))
             },
 
-            removePlayer: (rawInput) => {
-                connection.send(JSON.stringify({ head: { type: 'removePlayer' }, body: rawInput }))
+            playerRemove: (rawInput) => {
+                connection.send(JSON.stringify({ head: { type: 'playerRemove' }, body: rawInput }))
             },
 
-            updatePlayers: (names) => {
+            playersUpdate: (names) => {
                 const container = document.getElementById('controls-players');
                 console.log(names)
                 
@@ -130,43 +120,88 @@
             },
         };
 
+        const Robot = function([color, x, y]) {
+            this.color = color;
+
+            const el = document.createElement('div');
+            el.className = 'board-robot';
+            el.style.background = color;
+            el.style.left = 40 * x + 'px';
+            el.style.top = 40 * y + 'px';
+            el.addEventListener('mousedown', this.onMouseDown.bind(this));
+
+            this.shadow = document.createElement('div');
+            this.shadow.className = 'board-robot-shadow';
+            this.shadow.style.display = 'none';
+        
+            Board.el.appendChild(el);
+            Board.el.appendChild(this.shadow);
+        };
+                
+        Robot.prototype.onMouseDown = function(evt) {
+            document.body.addEventListener('mouseup', this.onMouseUp.bind(this));
+            document.body.addEventListener('mousemove', this.onDrag.bind(this));
+
+            this.shadow.style.display = 'block';
+            this.shadow.style.left = (this.snapX(evt.pageX) + 2) + 'px';
+            this.shadow.style.top = (this.snapY(evt.pageY) + 2) + 'px';
+        };
+
+        Robot.prototype.onDrag = function(evt) {
+            // this.shadow.style.left = (evt.pageX - Board.bounds.left - 18) + 'px';
+            // this.shadow.style.top = (evt.pageY - Board.bounds.top - 18) + 'px';
+
+            this.shadow.style.left = (this.snapX(evt.pageX) + 2) + 'px';
+            this.shadow.style.top = (this.snapY(evt.pageY) + 2) + 'px';
+        };
+
+        Robot.prototype.onMouseUp = function(evt) {
+            console.log('mouseup')
+            this.shadow.style.display = 'none';
+            document.removeEventListener('mouseup', this.onMouseUp);
+            document.removeEventListener('mousemove', this.onDrag);
+        };
+
+        Robot.prototype.snapX = (x) => {
+            const relativeX = Math.floor((x - Board.bounds.left) / Board.squareSize) * Board.squareSize;
+            const maxX = Board.squareSize * (Board.squaresPerSide - 1);
+
+            return Math.min(Math.max(0, relativeX), maxX);
+        };
+
+        Robot.prototype.snapY = (y) => {
+            const relativeY = Math.floor((y - Board.bounds.top) / Board.squareSize) * Board.squareSize;
+            const maxY = Board.squareSize * (Board.squaresPerSide - 1);
+
+            return Math.min(Math.max(0, relativeY), maxY);
+        };
 
         const Board = {
+            bounds: document.getElementById('board-squares').getBoundingClientRect(),
+            el: document.getElementById('board-squares'),
             squaresPerSide: 20,
             squareSize: 40,
 
             placeSquares: () => {
-                const board = document.getElementById('board');
+                Board.el.style.width = (Board.squaresPerSide * Board.squareSize + 1) + 'px';
+                Board.el.style.height = (Board.squaresPerSide * Board.squareSize + 1) + 'px';
 
-                board.style.width = (Board.squaresPerSide * Board.squareSize + 1) + 'px';
-                board.style.height = (Board.squaresPerSide * Board.squareSize + 1) + 'px';
-
-                while (board.hasChildElements)  {
-                    board.removeChild(board.firstChild);
+                while (Board.el.hasChildElements)  {
+                    Board.el.removeChild(board.firstChild);
                 }
 
                 for (let i = 0; i < Board.squaresPerSide; i++) {
                     for (let j = 0; j < Board.squaresPerSide; j++) {
                         const square = document.createElement('div');
-                        square.className = 'square';
+                        square.className = 'board-square';
 
-                        board.appendChild(square);
+                        Board.el.appendChild(square);
                     }
                 }
             },
 
             placeRobots: (robots) => {
-                robots.forEach(robot => {
-                    const [color, x, y] = robot;
-
-                    const r = document.createElement('div');
-                    r.className = 'board-robot';
-                    r.style.background = color;
-                    r.style.left = 40 * x + 'px';
-                    r.style.top = 40 * y + 'px';
-
-                    document.getElementById('board').appendChild(r);
-                })
+                robots.forEach(r => new Robot(r))
             },
 
             placeWall: (id, className, x, y) => {
@@ -180,7 +215,7 @@
                 w.style.left = y + 'px';
                 w.className = className;
 
-                document.getElementById('board').appendChild(w);
+                Board.el.appendChild(w);
             },
 
             placeWalls: (walls) => {
@@ -216,11 +251,15 @@
 
         /////////////////////
 
-        window.addEventListener('load', Board.placeSquares)
+        window.addEventListener('load', () => {
+            Controls.guessBuild();
+
+            Board.placeSquares();
+        })
 
         var connection = new WebSocket('ws://localhost:8080/ricochet', ['soap', 'xmpp']);
 
-        connection.onopen = Controls.addPlayer;
+        connection.onopen = Controls.playerAdd;
 
         connection.onerror = console.error;
 
@@ -241,7 +280,7 @@
                     break;
 
                 case 'players':
-                    Controls.updatePlayers(data.body)
+                    Controls.playersUpdate(data.body)
                     break;
 
                 case 'robots':
diff --git a/server.js b/server.js
index 496c0ec..78f5ac7 100644
--- a/server.js
+++ b/server.js
@@ -69,7 +69,7 @@ const Server = {
         }
 
         switch (message.head.type) {
-            case 'addPlayer':
+            case 'playerAdd':
                 DEBUG && console.log('Adding player: ');
                 DEBUG && console.log(ws.id);
                 DEBUG && console.log(message.body);
@@ -77,6 +77,8 @@ const Server = {
                 G.addPlayer(ws.id, santizedName);
                 Server.messageAll({ head: { type: 'players' }, body: G.getPlayers() });
                 break;
+            case 'playerRemove':
+                break;
             default:
                 console.warn("Unknown message type: ", message.head.type)
         }