Move definition of Scribe glyphs to an array of objects

[lmno.games] / scribe / scribe.jsx

diff --git a/scribe/scribe.jsx b/scribe/scribe.jsx
index 7b68ff05afe8ac16d78b74d6b74d49b7f4fe73cf..548a0edc826c44258bf05af1e2cdc73325d7da18 100644 (file)
--- a/scribe/scribe.jsx
+++ b/scribe/scribe.jsx
@@ -79,6 +79,123 @@ events.addEventListener("game-state", event => {
  * Game and supporting classes                           *
  *********************************************************/
 
  * Game and supporting classes                           *
  *********************************************************/
 

+const scribe_glyphs = [
+  {
+    name: "Single",
+    squares: [1,0,0,
+              0,0,0,
+              0,0,0]
+  },
+  {
+    name: "Double",
+    squares: [1,1,0,
+              0,0,0,
+              0,0,0]
+  },
+  {
+    name: "Line",
+    squares: [1,1,1,
+              0,0,0,
+              0,0,0]
+  },
+  {
+    name: "Pipe",
+    squares: [0,0,1,
+              1,1,1,
+              0,0,0]
+  },
+  {
+    name: "Squat-T",
+    squares: [1,1,1,
+              0,1,0,
+              0,0,0]
+  },
+  {
+    name: "4-block",
+    squares: [1,1,0,
+              1,1,0,
+              0,0,0]
+  },
+  {
+    name: "T",
+    squares: [1,1,1,
+              0,1,0,
+              0,1,0]
+  },
+  {
+    name: "Cross",
+    squares: [0,1,0,
+              1,1,1,
+              0,1,0]
+  },
+  {
+    name: "6-block",
+    squares: [1,1,1,
+              1,1,1,
+              0,0,0]
+  },
+  {
+    name: "Bomber",
+    squares: [1,1,1,
+              0,1,1,
+              0,0,1]
+  },
+  {
+    name: "Chair",
+    squares: [0,0,1,
+              1,1,1,
+              1,0,1]
+  },
+  {
+    name: "J",
+    squares: [0,0,1,
+              1,0,1,
+              1,1,1]
+  },
+  {
+    name: "Earring",
+    squares: [0,1,1,
+              1,0,1,
+              1,1,1]
+  },
+  {
+    name: "House",
+    squares: [0,1,0,
+              1,1,1,
+              1,1,1]
+  },
+  {
+    name: "H",
+    squares: [1,0,1,
+              1,1,1,
+              1,0,1]
+  },
+  {
+    name: "U",
+    squares: [1,0,1,
+              1,0,1,
+              1,1,1]
+  },
+  {
+    name: "Ottoman",
+    squares: [1,1,1,
+              1,1,1,
+              1,0,1]
+  },
+  {
+    name: "O",
+    squares: [1,1,1,
+              1,0,1,
+              1,1,1]
+  },
+  {
+    name: "9-block",
+    squares: [1,1,1,
+              1,1,1,
+              1,1,1]
+  }
+];
+

 function copy_to_clipboard(id)
 {
   const tmp = document.createElement("input");
 function copy_to_clipboard(id)
 {
   const tmp = document.createElement("input");


@@ -169,6 +286,16 @@ function Glyph(props) {
 
   const glyph_dots = [];
 
 
   const glyph_dots = [];
 

+  let last_square = 0;
+  for (let i = 0; i < 9; i++) {
+    if (props.squares[i])
+      last_square = i;
+  }
+
+  const height = Math.floor(20 * (Math.floor(last_square / 3) + 1));
+
+  const viewbox=`0 0 60 ${height}`;
+

   for (let row = 0; row < 3; row++) {
     for (let col = 0; col < 3; col++) {
       if (props.squares[3 * row + col]) {
   for (let row = 0; row < 3; row++) {
     for (let col = 0; col < 3; col++) {
       if (props.squares[3 * row + col]) {


@@ -176,6 +303,7 @@ function Glyph(props) {
         let cx = 10 + 20 * col;
         glyph_dots.push(
           <circle
         let cx = 10 + 20 * col;
         glyph_dots.push(
           <circle

+            key={3 * row + col}

             cx={cx}
             cy={cy}
             r="8"
             cx={cx}
             cy={cy}
             r="8"


@@ -188,7 +316,7 @@ function Glyph(props) {
   return (<div className="glyph-and-name">
             {props.name}
             <div className="glyph">
   return (<div className="glyph-and-name">
             {props.name}
             <div className="glyph">

-              <svg viewBox="0 0 60 60">
+              <svg viewBox={viewbox}>

                 <g fill="#287789">
                   {glyph_dots}
                 </g>
                 <g fill="#287789">
                   {glyph_dots}
                 </g>


@@ -450,120 +578,17 @@ class Game extends React.Component {
         </div>
       </div>,
       <div key="glyphs" className="glyphs">
         </div>
       </div>,
       <div key="glyphs" className="glyphs">

-        <Glyph
-          name="Single"
-          squares={[1,0,0,
-                    0,0,0,
-                    0,0,0]}
-        />
-        <Glyph
-          name="Double"
-          squares={[1,1,0,
-                    0,0,0,
-                    0,0,0]}
-        />
-        <Glyph
-          name="Line"
-          squares={[1,1,1,
-                    0,0,0,
-                    0,0,0]}
-        />
-        <Glyph
-          name="Pipe"
-          squares={[0,0,1,
-                    1,1,1,
-                    0,0,0]}
-        />
-        <Glyph
-          name="Squat-T"
-          squares={[1,1,1,
-                    0,1,0,
-                    0,0,0]}
-        />
-        <Glyph
-          name="4-block"
-          squares={[1,1,0,
-                    1,1,0,
-                    0,0,0]}
-        />
-        <Glyph
-          name="T"
-          squares={[1,1,1,
-                    0,1,0,
-                    0,1,0]}
-                />
-        <Glyph
-          name="Cross"
-          squares={[0,1,0,
-                    1,1,1,
-                    0,1,0]}
-        />
-        <Glyph
-          name="6-block"
-          squares={[1,1,1,
-                    1,1,1,
-                    0,0,0]}
-        />
-        <Glyph
-          name="Bomber"
-          squares={[1,1,1,
-                    0,1,1,
-                    0,0,1]}
-        />
-        <Glyph
-          name="Chair"
-          squares={[0,0,1,
-                    1,1,1,
-                    1,0,1]}
-        />
-        <Glyph
-          name="J"
-          squares={[0,0,1,
-                    1,0,1,
-                    1,1,1]}
-        />
-        <Glyph
-          name="Earring"
-          squares={[0,1,1,
-                    1,0,1,
-                    1,1,1]}
-        />
-        <Glyph
-          name="House"
-          squares={[0,1,0,
-                    1,1,1,
-                    1,1,1]}
-        />
-        <Glyph
-          name="H"
-          squares={[1,0,1,
-                    1,1,1,
-                    1,0,1]}
-        />
-        <Glyph
-          name="U"
-          squares={[1,0,1,
-                    1,0,1,
-                    1,1,1]}
-        />
-        <Glyph
-          name="Ottoman"
-          squares={[1,1,1,
-                    1,1,1,
-                    1,0,1]}
-        />
-        <Glyph
-          name="O"
-          squares={[1,1,1,
-                    1,0,1,
-                    1,1,1]}
-        />
-        <Glyph
-          name="9-block"
-          squares={[1,1,1,
-                    1,1,1,
-                    1,1,1]}
-        />
+        {
+          scribe_glyphs.map(glyph => {
+            return (
+              <Glyph
+                key={glyph.name}
+                name={glyph.name}
+                squares={glyph.squares}
+              />
+            );
+          })
+        }

       </div>
     ];
   }
       </div>
     ];
   }