From 522e1f4ecc2f0434f6a7d2364be482672b48c6c5 Mon Sep 17 00:00:00 2001
From: Alex Palcuie <alex.palcuie@hootsuite.com>
Date: Fri, 24 Oct 2014 11:38:29 +0300
Subject: [PATCH] God knows how this works

---
 map.md                     | 16 ++++++-------
 src/components/big-map.jsx | 38 ++++++++++++++++++------------
 src/components/level.jsx   | 11 +++++----
 src/game.jsx               | 47 +++++++++++++++++++++++++++++++++-----
 src/mixins/control-char.js |  8 +++----
 5 files changed, 83 insertions(+), 37 deletions(-)

diff --git a/map.md b/map.md
index c214b9d..dae6ca6 100644
--- a/map.md
+++ b/map.md
@@ -28,20 +28,20 @@ Trying to understand what the fuck are those numbers in the map.
 0,  = 0x0   = Nothing
 4,  = 0x4   = Corridor
 16, = 0x10  = Perimeter
-66, = 0x42  =
+66, = 0x42  = 101010
 70, = 0x46  =
 262 = 0x106 =
 514 = 0x202 =
 518 = 0x206 =
 589299744 = 0x23200020
 
-NOTHING     = 0x00000000;
-BLOCKED     = 0x00000001;
-ROOM        = 0x00000002;
-CORRIDOR    = 0x00000004;
-PERIMETER   = 0x00000010;
-ENTRANCE    = 0x00000020;
-ROOM_ID     = 0x0000FFC0;
+NOTHING     = 0x00000000; = 00000
+BLOCKED     = 0x00000001; = 00001
+ROOM        = 0x00000002; = 00011
+CORRIDOR    = 0x00000004; = 00100
+PERIMETER   = 0x00000010; = 01000
+ENTRANCE    = 0x00000020; = 10000
+ROOM_ID     = 0x0000FFC0; = 1111111111000000
 ARCH        = 0x00010000;
 DOOR        = 0x00020000;
 DOOR        = 0x00040000;
diff --git a/src/components/big-map.jsx b/src/components/big-map.jsx
index 2d64019..aebac56 100644
--- a/src/components/big-map.jsx
+++ b/src/components/big-map.jsx
@@ -9,23 +9,33 @@ var BigMap = React.createClass({
   },
 
   render: function() {
-    var rows = [];
+    if (this.props.cornerLeftTop) {
+      var rows = [];
 
-    for (var i=this.props.cornerLeftTop.x; i<=this.props.cornerRightBottom.x; i++) {
-      var items = [];
-      for (var j=this.props.cornerLeftTop.y; j<=this.props.cornerRightBottom.y; j++) {
-        var isCharacter = (i === this.props.currentX &&
-                           j === this.props.currentY);
-        var classes = cx({
-          'character': isCharacter
-        });
-        var key = i + '-' + j;
-        items.push(<td className={classes} key={key}>{this.props.area[i][j]}</td>);
+      for (var i=this.props.cornerLeftTop.x; i<=this.props.cornerRightBottom.x; i++) {
+        var items = [];
+        for (var j=this.props.cornerLeftTop.y; j<=this.props.cornerRightBottom.y; j++) {
+          var isCharacter = (i === this.props.currentX &&
+                             j === this.props.currentY);
+          var classes = cx({
+            'character': isCharacter
+          });
+          var key = i + '-' + j;
+          items.push(<td className={classes} key={key}>{this.props.area[i][j]}</td>);
+        }
+        rows.push(<tr key={i}>{items}</tr>);
       }
-      rows.push(<tr key={i}>{items}</tr>);
-    }
 
-    return <table>{rows}</table>;
+      return <div>
+        <p>
+          Offset
+          ({this.props.cornerLeftTop.x},{this.props.cornerLeftTop.y}) and
+          ({this.props.cornerRightBottom.x},{this.props.cornerRightBottom.y})
+        </p>
+        <table>{rows}</table>
+      </div>;
+    }
+    return <div>"Waiting for character..."</div>;
   }
 });
 
diff --git a/src/components/level.jsx b/src/components/level.jsx
index 9b33bf4..49b2206 100644
--- a/src/components/level.jsx
+++ b/src/components/level.jsx
@@ -23,13 +23,14 @@ var Level = React.createClass({
     setInterval(this._getLevel, Constants.SCAN_INTERVAL);
   },
 
-  componentWillReceiveProps: function() {
-    this._getLevel();
+  componentWillMount: function() {
+    // this._getLevel();
   },
 
-  _getLevel: function() {
-    if (this.props.currentChar) {
-      $.get(getUrl('scan', this.props.currentChar), function(response){
+  _getLevel: function(currentChar) {
+    currentChar = currentChar || this.props.currentChar;
+    if (currentChar) {
+      $.get(getUrl('scan', currentChar), function(response){
         delete response.mid;
         this.setState({level: response});
         this.props.onReceiveLevel(response);
diff --git a/src/game.jsx b/src/game.jsx
index a5b5885..7f38907 100644
--- a/src/game.jsx
+++ b/src/game.jsx
@@ -28,11 +28,11 @@ var Game = React.createClass({
       currentChar: "",
       maxX: 50,
       maxY: 50,
-      cornerLeftTop: {x:0, y:0},
-      cornerRightBottom: {x:4, y:4},
+      cornerLeftTop: null,
+      cornerRightBottom: null,
       bigMap: m,
-      currentX: 0,
-      currentY: 0
+      currentX: null,
+      currentY: null
     };
   },
 
@@ -62,14 +62,49 @@ var Game = React.createClass({
   },
 
   onReceiveLevel: function(level) {
+
     var nextMap = _.clone(this.state.bigMap);
     var receivedMap = level.area;
+
     for (var i=0; i<receivedMap[0].length; i++) {
       for (var j=0; j<receivedMap.length; j++) {
-        nextMap[level.bx + i][level.by + j] = receivedMap[i][j];
+        nextMap[level.bx + i][level.by + j] = receivedMap[j][i];
       }
     }
-    this.setState({bigMap: nextMap});
+
+    var nextCornerLeftTop = {},
+        nextCornerRightBottom = {};
+    if (this.state.cornerLeftTop) {
+      nextCornerLeftTop.x = Math.min(this.state.cornerLeftTop.x, level.bx);
+      nextCornerLeftTop.y = Math.min(this.state.cornerLeftTop.y, level.by);
+      nextCornerRightBottom.x = Math.max(this.state.cornerRightBottom.x,
+                                    level.bx + receivedMap.length - 1);
+      nextCornerRightBottom.y = Math.max(this.state.cornerRightBottom.y,
+                                    level.by + receivedMap[0].length - 1);
+    } else {
+      nextCornerLeftTop = {
+        x: level.bx,
+        y: level.by
+      };
+      nextCornerRightBottom = {
+        x: level.bx + receivedMap.length - 1,
+        y: level.by + receivedMap[0].length - 1
+      };
+    }
+    // console.table(nextMap)
+
+    this.setState({
+      bigMap: nextMap,
+      currentX: level.x,
+      currentY: level.y,
+      cornerLeftTop: nextCornerLeftTop,
+      cornerRightBottom: nextCornerRightBottom
+      // bigMap: level.area
+      // cornerLeftTop: {x: 0, y: 0},
+      // cornerRightBottom: {x:15, y: 15},
+      // currentX: 2,
+      // currentY: 2
+    });
   }
 });
 
diff --git a/src/mixins/control-char.js b/src/mixins/control-char.js
index cb2ebce..843ae6a 100644
--- a/src/mixins/control-char.js
+++ b/src/mixins/control-char.js
@@ -11,25 +11,25 @@ module.exports = {
   componentWillMount: function() {
     Mousetrap.bind('up', function(e) {
       e.preventDefault();
-      $.get(getUrl('move', this.state.currentChar, 'up'), function(response) {
+      $.get(getUrl('move', this.state.currentChar, 'left'), function(response) {
         console.log(response['success']);
       });
     }.bind(this));
     Mousetrap.bind('down', function(e) {
       e.preventDefault();
-      $.get(getUrl('move', this.state.currentChar, 'down'), function(response) {
+      $.get(getUrl('move', this.state.currentChar, 'right'), function(response) {
         console.log(response['success']);
       });
     }.bind(this));
     Mousetrap.bind('left', function(e) {
       e.preventDefault();
-      $.get(getUrl('move', this.state.currentChar, 'left'), function(response) {
+      $.get(getUrl('move', this.state.currentChar, 'up'), function(response) {
         console.log(response['success']);
       });
     }.bind(this));
     Mousetrap.bind('right', function(e) {
       e.preventDefault();
-      $.get(getUrl('move', this.state.currentChar, 'right'), function(response) {
+      $.get(getUrl('move', this.state.currentChar, 'down'), function(response) {
         console.log(response['success']);
       });
     }.bind(this));