Update maps

src/App.css

@@ -1,5 +1,5 @@
 .App {
-  text-align: center;
+  
 }
 
 .App-logo {
@@ -14,25 +14,47 @@
 }
 
 .App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  position: relative;
+}
+
+.grid-number{
+  position: absolute;
+  transform: translate(-50%, -50%);
+  padding-left: 4px;
+  padding-top: 4px;
+  font-size: 2em;
+}
+
+.hidden {
+  visibility: hidden;
 }
 
 .App-link {
   color: #61dafb;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
+* {
+  -webkit-print-color-adjust: exact;   
 }
-  to {
-    transform: rotate(360deg);
+
+
+table {
+  border-collapse: collapse;
+  border: 2px solid rgb(140 140 140);
+  font-family: sans-serif;
+  letter-spacing: 1px;
 }
+
+th,
+td {
+  border: 1px solid rgb(160 160 160);
+  padding: 8px 10px;
+}
+
+td:last-of-type {
+  text-align: center;
+}
+
+tbody > tr:nth-of-type(even) {
+  background-color: rgb(237 238 242);
 }

src/App.tsx

@@ -1,24 +1,125 @@
-import React from 'react';
-import logo from './logo.svg';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import './App.css';
+import { getColored, getRandomNumbers } from './utils';
+
+const gridMinVal = 1;
+const gridMaxVal = 11;
+const gridWidth = 14;
+const gridHeight = 11;
+const gridSize = gridWidth * gridHeight;
+
+function generateGridData(): {color: string, value: number}[] {
+  // const data =  new Array(gridSize).fill(0).map( () => {
+  //   return getColored(getRandomNumbers(gridMinVal, gridMaxVal, gridWidth));
+  // });
+
+  return getColored(getRandomNumbers(gridMinVal, gridMaxVal, gridSize).map((num) => num === 1 ? 0 : num));
+}
 
 function App() {
+  const [gridData, setGridData] = useState(() => generateGridData());
+  const gridNumbersEleRef = useRef<HTMLDivElement|null>(null);
+  const svgObjectEleRef = useRef<HTMLObjectElement|null>(null);
+
+  useEffect(() => {
+    if (svgObjectEleRef.current === null || gridNumbersEleRef.current === null) {
+      console.log('svgObjectEleRef or gridNumbersEleRef is null');
+      console.log(svgObjectEleRef.current);
+      console.log(gridNumbersEleRef.current);
+      return;
+    }
+    const svgDocument = svgObjectEleRef.current?.contentDocument;
+    const updateSVG = () => {
+      const svgDocument = svgObjectEleRef.current?.contentDocument;
+      if (!svgDocument) {
+        return;
+      }
+      const centerDotEle = svgDocument.querySelector("g[*|label='Hex Centerdots']") as HTMLElement;
+      var svgNS = "http://www.w3.org/2000/svg";
+      centerDotEle.style.display = 'unset';
+      centerDotEle.style.visibility = 'hidden';
+
+      if (svgDocument.querySelector("#grid-numbers")) {return;}
+      var newTextGroup = document.createElementNS(svgNS,"g");
+      newTextGroup.setAttribute("id", "grid-numbers");
+      newTextGroup.setAttribute("transform", centerDotEle.getAttribute("transform") as string);
+      
+      const centerDotElements = Array.from(svgDocument.querySelectorAll("g[*|label='Hex Centerdots'] circle"));
+      centerDotElements.forEach((tmpCenterDotElement, index) => {
+        const [posX, posY] = tmpCenterDotElement.getAttribute('id')?.replace('hexcenter_', '').split('_') as string[];
+        const isBarrier = svgDocument.querySelector(`polygon[*|label='game-barrier']#hexfill_${posX}_${posY}`);
+        if (isBarrier) {
+          return;
+        }
+
+        var newText = document.createElementNS(svgNS,"text");
+        const tmpX = Number(tmpCenterDotElement.getAttribute('cx'));
+        const tmpY = Number(tmpCenterDotElement.getAttribute('cy'));
+        let newX;
+        if (gridData[index].value >= 10) {
+          newX = tmpX - 10;
+        } else {
+          newX = tmpX - 4;
+        }
+        const newY = tmpY + 8;
+
+        newText.setAttributeNS(null,"x",newX.toString());     
+        newText.setAttributeNS(null,"y",newY.toString()); 
+        newText.setAttributeNS(null,"font-size","20");
+        newText.setAttribute("style", "fill: black; font-family:sans-serif;");
+
+
+        var textNode = document.createTextNode(gridData[index].value.toString());
+        newText.appendChild(textNode);
+        newTextGroup.appendChild(newText);
+
+
+        const hexFillEl = svgDocument.querySelector(`#hexfill_${posX}_${posY}`)
+        if (hexFillEl) {
+          hexFillEl.setAttribute('style', `fill:${gridData[index].color}`);
+        }
+      });
+
+      svgDocument.querySelector("svg")?.appendChild(newTextGroup);
+    };
+
+    console.log(svgDocument?.readyState);
+    if (svgDocument?.readyState  === 'complete' ) {
+      setTimeout(updateSVG, 100);
+    } else {
+      svgDocument?.addEventListener('load', updateSVG);
+    }
+
+  }, [svgObjectEleRef.current, gridNumbersEleRef.current]);
+
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <div className="App-header">
+        {/* <table>
+          <tbody>
+          {
+            gridData.map((row, rowIndex) => (
+              <tr key={rowIndex}>
+                {
+                  row.map((cell, cellIndex) => (
+                    <td key={cellIndex} style={{color: cell.color}}>{cell.value}</td>
+                  ))
+                }
+              </tr>
+            ))
+          }
+          </tbody>
+        </table> */}
+        <div className='grid-numbers' ref={gridNumbersEleRef}>
+          {
+            gridData.map((cell, index) => (
+              <span key={index} style={{color: cell.color}} className='grid-number hidden' id={`grid-number-${index}`}>{cell.value}</span>
+            ))
+          }
+        </div>
+
+        <object ref={svgObjectEleRef} type="image/svg+xml" data="/mapSmall.svg" aria-label='Game map' width="100%"></object>
+      </div>
     </div>
   );
 }

src/utils.ts

@@ -0,0 +1,31 @@
+export function getRandomNumber(start:number, end:number):number {
+  return Math.floor(Math.random() * (end-start)) + start;
+}
+
+export function getRandomNumbers(start:number, end:number, count:number):number[] {
+  let randomNumbers = [];
+  for (let i = 0; i < count; i++) {
+      randomNumbers.push(getRandomNumber(start, end));
+  }
+  return randomNumbers;
+}
+
+export function getRandomColor(colors = ['lightPink', 'lightgreen', 'turquoise', 'beige']):string {
+  return colors[getRandomNumber(0, colors.length)];
+}
+
+export function getColored(arr : number[]): {color: string, value: number}[] {
+  return arr.map(num => {
+      const tmpColor = getRandomColor();
+      return {
+        color: tmpColor,
+        value: num,
+      };
+  })
+}
+
+// Populate board map of 25 tiles
+// getColored(getRandomNumbers(0, 7, 25))
+
+// Populate 8 cards in hand
+// getColored(getRandomNumbers(1, 7, 8))