Board loading from server

Signed-off-by: James Ketrenos <james_gitlab@ketrenos.com>

src/Board.js

@@ -19,45 +19,7 @@ const hexagonRatio = 1.1547005,
   } ];
 
 const Tiles = (board) => {
-  const tiles = [ {
+  const tiles = board.game.tiles;
-    type: "wood", y: 0. / 4.
-  }, {
-    type: "wood", y: 1. / 4.
-  }, {
-    type: "wood", y: 2. / 4.
-  }, {
-    type: "wood", y: 3. / 4.
-  }, {
-    type: "wheat", y: 0. / 4.
-  }, {
-    type: "wheat", y: 1. / 4.
-  }, {
-    type: "wheat", y: 2. / 4.
-  }, {
-    type: "wheat", y: 3. / 4.
-  }, {
-    type: "stone", y: 0. / 4.
-  }, {
-    type: "stone", y: 1. / 4.
-  }, {
-    type: "stone", y: 2. / 4.
-  }, {
-    type: "sheep", y: 0. / 4.
-  }, {
-    type: "sheep", y: 1. / 4.
-  }, {
-    type: "sheep", y: 2. / 4.
-  }, {
-    type: "sheep", y: 3. / 4.
-  }, {
-    type: "brick", y: 0. / 4.
-  }, {
-    type: "brick", y: 1. / 4.
-  }, {
-    type: "brick", y: 2. / 4.
-  }, {
-    type: "robber", y: 0
-  } ];
 
   [ "robber", "brick", "wood", "sheep", "stone", "wheat" ].forEach((type) => {
     const image = new Image(),
@@ -87,28 +49,6 @@ const Pips = (board) => {
   const image = new Image(),
     file = 'pip-numbers.png';
 
-  let pips = [
-    { roll:  7, pips: 0, y: 3. / 6., x: 0. / 6. },
-    { roll:  5, pips: 4, y: 0. / 6., x: 0. / 6. },
-    { roll:  2, pips: 1, y: 0. / 6., x: 1. / 6. },
-    { roll:  6, pips: 5, y: 0. / 6., x: 2. / 6. },
-    { roll:  3, pips: 2, y: 0. / 6., x: 3. / 6. },
-    { roll:  8, pips: 5, y: 0. / 6., x: 4. / 6. },
-    { roll: 10, pips: 3, y: 0. / 6., x: 5. / 6. },
-    { roll:  9, pips: 4, y: 1. / 6., x: 0. / 6. },
-    { roll: 12, pips: 1, y: 1. / 6., x: 1. / 6. },
-    { roll: 11, pips: 2, y: 1. / 6., x: 2. / 6. },
-    { roll:  4, pips: 3, y: 1. / 6., x: 3. / 6. },
-    { roll:  8, pips: 5, y: 1. / 6., x: 4. / 6. },
-    { roll: 10, pips: 3, y: 1. / 6., x: 5. / 6. },
-    { roll:  9, pips: 4, y: 2. / 6., x: 0. / 6. },
-    { roll:  4, pips: 3, y: 2. / 6., x: 1. / 6. },
-    { roll:  5, pips: 4, y: 2. / 6., x: 2. / 6. },
-    { roll:  6, pips: 6, y: 2. / 6., x: 3. / 6. },
-    { roll:  3, pips: 2, y: 2. / 6., x: 4. / 6. },
-    { roll: 11, pips: 2, y: 2. / 6., x: 5. / 6. }
-  ];
-  
   image.addEventListener("load", (event) => {
     console.log(`Done loading ${file}`);
     window.requestAnimationFrame(board.drawFrame);
@@ -120,7 +60,7 @@ const Pips = (board) => {
 
   return {
     image: image,
-    pips: pips
+    pips: board.game.pips
   };
 };
 
@@ -255,6 +195,19 @@ class Board extends React.Component {
     this.mouse = { x: 0, y: 0 };
     this.radius = 0.317;
 
+    window.fetch("api/v1/games", {
+      method: 'POST',
+      cache: 'no-cache',
+      credentials: 'same-origin',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+//      body: JSON.stringify(data) // body data type must match "Content-Type" header
+    }).then((res) => {
+      return res.json();
+    }).then((game) => {
+      console.log(JSON.stringify(game, null, 2));
+      this.game = game;
       this.pips = Pips(this);
       this.tiles = Tiles(this);
       this.table = Table(this);
@@ -267,23 +220,12 @@ class Board extends React.Component {
         settlement: null
       };
   
-    this.borders = [ {
+      this.borders = this.game.borders.map((file) => {
-      file: 'borders-1.6.png', left: "sheep", right: "bank"
-    }, { 
-      file: 'borders-2.1.png', center: "sheep"
-    }, { 
-      file: 'borders-3.2.png', left: "wheat", right: "bank"
-    }, { 
-      file: 'borders-4.3.png', center: "wood"
-    }, { 
-      file: 'borders-5.4.png', left: "sheep", right: "bank"
-    }, { 
-      file: 'borders-6.5.png', center: "bank"
-    } ].map((file) => {
         return Border(this, file);
       });
-
+    }).catch((error) => {
-    this.randomize();
+      console.error(error);
+    });
   }
 
   randomize() {