From 814bc38306d273539675ee1b8b8911048792b524 Mon Sep 17 00:00:00 2001 From: bendtherules Date: Tue, 28 Jan 2025 16:04:41 +0530 Subject: [PATCH] Update maps --- public/map1.svg | 705 +++- public/map2 copy.svg | 8784 +++++++++++++++++++++++++++++++++++++++++ public/map2.svg | 8997 ++++++++++++++++++++++++++++++++++++++++++ public/mapSmall.svg | 6298 +++++++++++++++++++++++++++++ src/App.css | 54 +- src/App.tsx | 133 +- src/utils.ts | 31 + 7 files changed, 24870 insertions(+), 132 deletions(-) create mode 100644 public/map2 copy.svg create mode 100644 public/map2.svg create mode 100644 public/mapSmall.svg create mode 100644 src/utils.ts diff --git a/public/map1.svg b/public/map1.svg index 00b7fa4..f78d7e1 100644 --- a/public/map1.svg +++ b/public/map1.svg @@ -24,17 +24,42 @@ inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1" inkscape:document-units="mm" - inkscape:zoom="0.78362514" - inkscape:cx="410.91076" - inkscape:cy="235.44421" + inkscape:zoom="1.6015162" + inkscape:cx="802.98906" + inkscape:cy="381.20126" inkscape:window-width="1728" inkscape:window-height="966" inkscape:window-x="0" inkscape:window-y="38" inkscape:window-maximized="1" - inkscape:current-layer="g12242" /> + inkscape:current-layer="layer4" + showgrid="false" /> + + + + + + + + @@ -76,6 +101,237 @@ r="120.80013" gradientTransform="matrix(1,0,0,0.66597812,0,34.061183)" gradientUnits="userSpaceOnUse" /> + + + + + + + + + + + + + + + + + + + + + + style="fill:url(#swatch1);fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:round" + id="hexfill_4_8" + inkscape:label="game-barrier" /> + id="hexfill_5_6" + transform="translate(0.11767185)" /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + style="stroke:#616161;stroke-dasharray:4, 6;stroke-dashoffset:0;stroke-opacity:1" + transform="translate(-26.017314)"> diff --git a/public/map2 copy.svg b/public/map2 copy.svg new file mode 100644 index 0000000..ac19241 --- /dev/null +++ b/public/map2 copy.svg @@ -0,0 +1,8784 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/map2.svg b/public/map2.svg new file mode 100644 index 0000000..2ce778f --- /dev/null +++ b/public/map2.svg @@ -0,0 +1,8997 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/mapSmall.svg b/public/mapSmall.svg new file mode 100644 index 0000000..24101e3 --- /dev/null +++ b/public/mapSmall.svg @@ -0,0 +1,6298 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/App.css b/src/App.css index 74b5e05..f95df2c 100644 --- a/src/App.css +++ b/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); - } - to { - transform: rotate(360deg); - } +* { + -webkit-print-color-adjust: exact; } + + +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); +} \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index a53698a..3da36af 100644 --- a/src/App.tsx +++ b/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(null); + const svgObjectEleRef = useRef(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 (
-
- logo -

- Edit src/App.tsx and save to reload. -

- - Learn React - -
+
+ {/* + + { + gridData.map((row, rowIndex) => ( + + { + row.map((cell, cellIndex) => ( + + )) + } + + )) + } + +
{cell.value}
*/} +
+ { + gridData.map((cell, index) => ( + {cell.value} + )) + } +
+ + +
); } diff --git a/src/utils.ts b/src/utils.ts new file mode 100644 index 0000000..c527944 --- /dev/null +++ b/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))