Hellenic · PorcoTheRosso · Nov 28, 2023 · Dec 6, 2023 · Dec 7, 2023 · Dec 11, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,8 +22,9 @@
     "@babel/core": "^7.18.6",
     "@babel/preset-env": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@emotion/react": "^11.9.3",
-    "@emotion/styled": "^11.9.3",
+    "@changesets/cli": "^2.23.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@storybook/addon-actions": "^6.5.9",
     "@storybook/addon-essentials": "^6.5.9",
     "@storybook/addon-interactions": "^6.5.9",
@@ -46,11 +47,15 @@
     "react-use": "17.4.0",
     "ts-jest": "^28.0.6",
     "ts-node": "^10.8.2",
-    "typescript": "^4.7.4",
-    "@changesets/cli": "^2.23.0"
+    "typescript": "^4.7.4"
   },
   "dependencies": {
-    "classnames": "^2.3.1"
+    "@fontsource/pixelify-sans": "^5.0.1",
+    "@fontsource/roboto": "^5.0.8",
+    "@mui/icons-material": "^5.14.19",
+    "@mui/material": "^5.14.20",
+    "classnames": "^2.3.1",
+    "react-hexgrid": "^2.0.1"
   },
   "files": [
     "lib/",

diff --git a/src/HexGrid.tsx b/src/HexGrid.tsx
@@ -12,22 +12,40 @@ type Props = {} & React.SVGProps<SVGSVGElement>
  * @param {string} SVGProps.viewBox - the container's internal coordinate system
  * @returns
  */
+
+const ShadowFilter = () => (
+  <filter id="hexShadow" height="130%">
+    <feGaussianBlur in="SourceAlpha" stdDeviation="2.5" /> {/* Adjust blur */}
+    <feOffset dx="2" dy="2" result="offsetblur" /> {/* Adjust shadow offset */}
+    <feComponentTransfer>
+      <feFuncA type="linear" slope="0.5"/> {/* Adjust shadow opacity */}
+    </feComponentTransfer>
+    <feMerge> 
+      <feMergeNode />
+      <feMergeNode in="SourceGraphic" /> {/* Combine blur with original graphic */}
+    </feMerge>
+  </filter>
+);
+
 export function HexGrid({
   width = 800,
   height = 600,
   viewBox = "-50 -50 100 100",
   ...props
 }: Props) {
   return (
-    <svg
+    <svg 
+
       className="grid"
       width={width}
       height={height}
       viewBox={viewBox}
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
+
       {...props}
     />
+
   )
 }
 export default HexGrid
diff --git a/src/img/Timer.png b/src/img/Timer.png
diff --git a/src/img/background-color-1.svg b/src/img/background-color-1.svg
diff --git a/src/img/buttons.png b/src/img/buttons.png
diff --git a/src/img/hexagon-playfield.svg b/src/img/hexagon-playfield.svg
diff --git a/src/img/line-1.svg b/src/img/line-1.svg
diff --git a/src/img/line-2.svg b/src/img/line-2.svg
diff --git a/src/img/line-3.svg b/src/img/line-3.svg
diff --git a/src/img/log.png b/src/img/log.png
diff --git a/src/img/player-ranking-game-stats.png b/src/img/player-ranking-game-stats.png
diff --git a/src/img/player-ship.png b/src/img/player-ship.png
diff --git a/src/img/playfield.png b/src/img/playfield.png
diff --git a/src/img/polygon-2.svg b/src/img/polygon-2.svg
diff --git a/src/img/punkships-3.png b/src/img/punkships-3.png
diff --git a/src/img/ship-status.png b/src/img/ship-status.png