Bounded movement inside walls.

5 years ago · ec22d54b1f
parent 97cf2dc632
commit ec22d54b1f
6 changed files with 150 additions and 112 deletions
--- a/client/board.js
+++ b/client/board.js
@ -2,20 +2,10 @@ const Board = function({ parent, squares }) {
    this.parent = parent;
    this.squares = squares;
    
-    this.blockers = {};
+    this.walls = {};
    this.listeners = {};

    this.drawSquares();
-    this.resetBlockers();
-};
-
-Board.prototype.resetBlockers = function() {
-    this.blockers = {
-        negativeI: null,
-        negativeJ: null,
-        positiveI: null,
-        positiveJ: null
-    };
 };

 Board.prototype.drawRobots = function(robots) {
@ -46,6 +36,8 @@ Board.prototype.drawRobots = function(robots) {
        shadow.style.left = x + 'px';
        shadow.style.top = y + 'px';
        shadow.dataset.parentRobot = id;
+        shadow.dataset.currentI = i;
+        shadow.dataset.currentJ = j;

        this.parent.appendChild(robot);
        this.parent.appendChild(shadow);
@ -73,7 +65,11 @@ Board.prototype.drawSquares = function() {
 };

 Board.prototype.drawWalls = function(edges) {
+    this.walls = {};
+
    edges.forEach(edge => {
+        this.walls[edge] = true;
+
        const id = `wall-${edge}`;

        if (document.getElementById(id)) {
@ -82,8 +78,6 @@ Board.prototype.drawWalls = function(edges) {

        const [i1, j1, i2, j2] = edge.split('-');

-        console.log(edge)
-
        const wall = document.createElement('div');
        wall.id = id;
        wall.title = edge;
@ -107,37 +101,61 @@ Board.prototype.drawWalls = function(edges) {
    })
 };

+// i1 and j1 are the original position.
+// i2 and j2 are the requested position.
+// Check all the edges crossed between the two to find if it's a valid move.
 Board.prototype.getBlockers = function({ i1, j1, i2, j2 }) {
    // const upperEdge = `${i1}-${j1}-${i2}-${j2}`;
    // const lowerEdge = `${i1}-${j1}-${i2}-${j2}`;

-    if (i1 === i2 && j1 < j2) {
-        
-
-    } else if (i1 === i2 && j1 > j2) {
-        
+    if (i1 !== i2 && j1 !== j2) {
+        return "uh oh";
+    }

-    } else if (j1 === j2 && i1 <= i2) {
-        this.blockers.positiveI && console.log(this.blockers.positiveI.i, i1)

-        if (this.blockers.positiveI && this.blockers.positiveI.i <= i1) {
-            return this.blockers.positiveI.blockage;
+    if (i1 === i2 && j1 == j2) {
+        return;
+    } else if (i1 === i2 && j1 > j2) {
+        // Moving up
+        // Moving down.
+        for (let j = j2; j < j1; j++) {
+            const edge = `${i1}-${j + 1}-${i1 + 1}-${j + 1}`;
+
+            if (this.walls[edge]) {
+                return document.querySelector(`[data-wall='${edge}']`);
+            }
        }

-        const rightEdge = `${i1 + 1}-${j1}-${i1 + 1}-${j1 + 1}`;
-
-        const wall = document.querySelector(`[data-wall='${rightEdge}']`);
+    } else if (i1 === i2 && j1 < j2) {
+        // Moving down.
+        for (let j = j1; j < j2; j++) {
+            const edge = `${i1}-${j + 1}-${i1 + 1}-${j + 1}`;

-        if (wall) {
-            this.blockers.positiveI = { i: i1 + 1, blockage: wall };
-            return wall;
+            if (this.walls[edge]) {
+                return document.querySelector(`[data-wall='${edge}']`);
+            }
+        }
+    } else if (j1 === j2 && i1 < i2) {
+        // Moving right.
+        for (let i = i1; i < i2; i++) {
+            const edge = `${i + 1}-${j1}-${i + 1}-${j1 + 1}`;
+
+            if (this.walls[edge]) {
+                return document.querySelector(`[data-wall='${edge}']`);
+            }
+        }
+    } else if (j1 === j2 && i1 > i2) {
+        // Moving left.
+        for (let i = i2; i < i1; i++) {
+            const edge = `${i + 1}-${j1}-${i + 1}-${j1 + 1}`;
+
+            if (this.walls[edge]) {
+                return document.querySelector(`[data-wall='${edge}']`);
+            }
        }
-    } else {
-        // const leftEdge = `${i1}-${j1}-${i2}-${j2}`;
-        // console.log("Left edge: ", leftEdge)
    }

-    return null;
+    // return "uh oh";
 };

 Board.prototype.onRobotDragStart = function(evt) {
@ -157,16 +175,15 @@ Board.prototype.onRobotDragStart = function(evt) {
 };

 Board.prototype.onRobotDrag = function(dragTarget, evt) {
-    const { i: i1, j: j1 } = this.squares.xyToIj({ x: evt.x - evt.movementX, y: evt.y - evt.movementY });
+    const i1 = dragTarget.dataset.currentI * 1;
+    const j1 = dragTarget.dataset.currentJ * 1;
+    // const { i: i1, j: j1 } = this.squares.xyToIj({ x: evt.x - evt.movementX, y: evt.y - evt.movementY });
    const { i: i2, j: j2 } = this.squares.xyToIj({ x: evt.x, y: evt.y });

    const blockage = this.getBlockers({ i1, j1, i2, j2 });
-    // console.warn(blockers)

    if (blockage) {
-        console.log(blockage)
-        console.log("NOPE")
-        // this.onRobotDragStop(); works but i don't like it
+        // console.log(blockage)
        return;
    }
    
@ -177,8 +194,6 @@ Board.prototype.onRobotDrag = function(dragTarget, evt) {
 };

 Board.prototype.onRobotDragStop = function(_) {
-    this.resetBlockers();
-
    document.body.removeEventListener('mouseup', this.listeners.onRobotDragStop);
    document.body.removeEventListener('mousemove', this.listeners.onRobotDrag);
 };
--- a/client/controls.js
+++ b/client/controls.js
@ -1,53 +1,61 @@
-const Controls = {
-    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);
+const Controls = function(connection) {
+    this.connection = connection;
+    console.log(this.connection)
+}
+
+    // guessBuild: = function() {
+    //     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)
+    // },
+
+Controls.prototype.playerAdd = function() {
+    const rawInput = prompt("What is your name?");
+    this.connection.send(JSON.stringify({ head: { type: 'playerAdd' }, body: rawInput }))
+};
+
+Controls.prototype.playerRemove = function(rawInput) {
+    this.connection.send(JSON.stringify({ head: { type: 'playerRemove' }, body: rawInput }))
+};
+
+Controls.prototype.playersUpdate = function(names) {
+    const container = document.getElementById('controls-players');
+    const keys = Object.keys(names);
+
+    if (keys.length > 0) {
+        const nobody = document.getElementById('controls-players-nobody');
+        nobody.parentNode.removeChild(nobody);
+    }
+    
+    keys.forEach(connectionId => {
+        const id = `player-${connectionId}`;
+
+        if (document.getElementById(id)) {
+            return;
        }
-    },
-
-    guessClick: (evt) => {
-        alert(evt.currentTarget.dataset.value)
-    },
-
-    playerAdd: () => {
-        const rawInput = prompt("What is your name?");
-        connection.send(JSON.stringify({ head: { type: 'playerAdd' }, body: rawInput }))
-    },
-
-    playerRemove: (rawInput) => {
-        connection.send(JSON.stringify({ head: { type: 'playerRemove' }, body: rawInput }))
-    },
-
-    playersUpdate: (names) => {
-        const container = document.getElementById('controls-players');
-        console.log(names)
-        
-        Object.keys(names).forEach(connectionId => {
-            const id = `player-${connectionId}`;
-
-            if (document.getElementById(id)) {
-                return;
-            }
-
-            const n = document.createElement('div');
-            n.id = id;
-            n.innerHTML = names[connectionId];
-            n.className = 'controls-player';
-            container.appendChild(n)
-        });
-
-        // container.querySelectorAll('.controls-player').forEach(el => {
-        //     if (!names[el.id]) {
-        //         container.removeChild(el);
-        //     }
-        // })
-    },
+
+        const n = document.createElement('div');
+        n.id = id;
+        n.innerHTML = names[connectionId];
+        n.className = 'controls-player';
+        container.appendChild(n)
+    });
+
+    // container.querySelectorAll('.controls-player').forEach(el => {
+    //     if (!names[el.id]) {
+    //         container.removeChild(el);
+    //     }
+    // })
 };
--- a/index.css
+++ b/index.css
@ -24,12 +24,6 @@ body {
    z-index: 1;
 }

-.controls-subtitle {
-    background-color: #4D3243;
-    color: #fff;
-    padding: 12px;
-}
-
 .controls-title {
    background-color: #639978;
    background-image: url('sprite-robots.png');
@ -40,21 +34,31 @@ body {
    text-align: center;
 }

-.controls-room {
+.controls-subtitle {
+    background-color: #4D3243;
+    color: #fff;
+    padding: 12px;
+    margin: 24px 0;
 }

-.controls-room span {
-
+#controls-room {
 }

-.controls-room input {
-
+.controls-room-error {
+    background: #e00000;
+    color: #fff;
+    margin: 4px 0;
+    padding: 8px;
 }

-.controls-room button {
+#controls-players {
+}

+.controls-player {
+    padding: 8px;
 }

+
 #controls-guesses  {
    background: salmon;
 }
--- a/index.html
+++ b/index.html
@ -15,10 +15,12 @@
    <div id="controls-container">
        <div class='controls-title'>Puzzle Robots</div>

-        <div class="controls-room">
+        <div id="controls-room">
            <div class='controls-subtitle'>Room</div>
            <input type="text" id='game-id'>
            <button type='button'>&gt;</button>
+
+            <div class="controls-room-errors"></div>
        </div>

        <!-- <div class="rounds">
@ -28,6 +30,8 @@

        <div id="controls-players">
            <div class='controls-subtitle'>Players</div>
+
+            <div class="controls-player" id='controls-players-nobody'>Nobody is in the game yet.</div>
        </div>
        

@ -41,15 +45,22 @@

    <script>
        window.addEventListener('load', () => {
+            const connection = new WebSocket('ws://localhost:8080/ricochet');
            const squares = new Squares();
-
+            const controls = new Controls(connection);
            const board = new Board({ parent: document.getElementById('content-container'), squares });

-            var connection = new WebSocket('ws://localhost:8080/ricochet', ['soap', 'xmpp']);
+            // connection.onopen = controls.playerAdd.bind(controls);
+
+            connection.onerror = (err) => {
+                console.error(err);

-            // connection.onopen = Controls.playerAdd;
+                const div = document.createElement('div');
+                div.className = 'controls-room-error';
+                div.innerHTML = "Can't reach the server.";

-            connection.onerror = console.error;
+                document.getElementById('controls-room').appendChild(div);
+            }

            connection.onmessage = function (msg) {
                const data = JSON.parse(msg.data)
@ -68,7 +79,7 @@
                        break;

                    case 'players':
-                        // Controls.playersUpdate(data.body)
+                        controls.playersUpdate(data.body)
                        break;

                    case 'robots':
--- a/notes.txt
+++ b/notes.txt
@ -1,12 +1,10 @@
-// TODO dynamic sizing of squares based on available height
 // TODO dynamic move population
 // TODO move websocket server to /core
 // TODO dynamic socket server resolution
 // TODO namespace server to /ricochet
-// 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
-// TODO donate link
+// TODO donate link
+// TODO tutorial
--- a/server/game.js
+++ b/server/game.js
@ -32,6 +32,8 @@ Game.prototype.getRobots = function() {
 Game.prototype.getWalls = function() {
    // Edge IDs are of the form [i1-j1-i2-j2]. Top left is 0, 0.
    return [
+        "1-3-1-4",
+        "4-1-5-1",
        "4-8-5-8", 
        "8-3-8-4"
    ];