Resaki1 · therealhoodboy · May 15, 2024 · May 16, 2024 · May 16, 2024 · May 17, 2024
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Build your own town in a 3D procedurally generated cubic world with Taal!" />
     <link rel="apple-touch-icon" href="/ios/192.png" />

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -41,22 +41,22 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^29.5.11",
+    "@types/lodash.debounce": "^4.0.7",
     "@types/node": "^20.8.9",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.7",
     "@types/three": "^0.164.0",
-    "@types/lodash.debounce": "^4.0.7",
     "@typescript-eslint/eslint-plugin": "^6.2.0",
     "@typescript-eslint/parser": "^6.8.0",
     "@vitejs/plugin-react": "^4.2.1",
     "classnames": "^2.3.2",
     "eslint": "^8.45.0",
-    "eslint-plugin-react": "^7.33.2",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.33.2",
     "firebase": "^10.1.0",
-    "prettier": "^3.0.3",
+    "prettier": "^3.3.3",
     "sass": "^1.77.1",
     "typescript": "^5.4.5",
     "vite": "^5.2.11",

diff --git a/src/App.tsx b/src/App.tsx
@@ -7,6 +7,7 @@ import { useStore } from './store/store';
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { DirectionalLight, Vector3 } from 'three';
 import './App.scss';
+import { TilePropertiesMenu } from './components/TilePropertiesMenu/TilePropertiesMenu';
 
 const App = () => {
   const sun = useRef<DirectionalLight>(null!);
@@ -51,6 +52,7 @@ const App = () => {
       </Canvas>
       <BuildMenu />
       <RessourceMenu />
+      <TilePropertiesMenu />
     </div>
   );
 };

diff --git a/src/components/BuildMenu/BuildMenu.scss b/src/components/BuildMenu/BuildMenu.scss
@@ -1,25 +1,84 @@
 $build-menu-height: 64px;
 
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    filter: blur(4px);
+  }
+  to {
+    opacity: 1;
+    filter: blur(0);
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+    filter: blur(0);
+  }
+  to {
+    opacity: 0;
+    filter: blur(4px);
+  }
+}
+
+.fade-in {
+  animation: fadeIn 0.2s ;
+  will-change: opacity, filter;
+}
+
+.fade-out {
+  animation: fadeOut 0.2s ;
+  will-change: opacity, filter;
+}
+
 .build-menu {
-  position: absolute;
-  bottom: 0;
-  bottom: env(safe-area-inset-bottom);
-  width: 100%;
-  background-color: #21494db3;
-  color: white;
-  height: 0;
-  transition: transform 0.2s cubic-bezier(0.59, 0.33, 0.16, 1.29);
+  position: fixed;
+  left: 50cqi;
+  bottom: calc(env(safe-area-inset-bottom) + 8%);
+  border-radius: 20px;
+  height: fit-content;
+  width: fit-content;
+
+  background-color: rgba(33, 73, 77, 0.702);
+  @media (prefers-color-scheme: light) {
+    background-color: #d3c57a66;
+  }
+  @media (prefers-color-scheme: dark) {
+    background-color: rgba(33, 73, 77, 0.702);
+  }
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+  color: #e6e6e6;
   display: flex;
   flex-direction: row;
   justify-content: center;
-  padding: 8px;
-  gap: 32px;
-  box-sizing: border-box;
+  align-items: baseline;
+  padding: 10px 48px;
+  gap: 38px;
+  box-sizing: content-box;
   backdrop-filter: saturate(180%) blur(30px);
-  transform: translateY($build-menu-height);
+  -webkit-backdrop-filter: saturate(180%) blur(30px);
+
+  animation: fadeOut 0.4s forwards ease-out;
+  transform: translateX(50%);
 
   &--visible {
-    transform: translateY(0);
+    opacity: 1;
+    animation: fadeIn 0.3s forwards ease-in;
+
+    transform: translateX(-50%) translateY(0);
     height: $build-menu-height;
   }
+
+  &--hidden {
+    opacity: 0;
+    height: $build-menu-height;
+  }
+
+  @media (orientation: landscape) {
+    max-height: 30%;
+    left: 20cqi;
+    top: 36cqi;
+  }
 }
diff --git a/src/components/BuildMenu/BuildMenu.tsx b/src/components/BuildMenu/BuildMenu.tsx
@@ -50,17 +50,16 @@ export const BuildMenu = () => {
   const hasEnoughRessources = (building: BuildingType) => {
     const recipe = getCostsOfBuilding(building);
     let hasEnough = true;
-    Object.entries(recipe).forEach((cost) => {
-      if (ressources[cost[0] as Ressources] < recipe[cost[0] as Ressources]!) hasEnough = false;
-    });
+    Object.entries(recipe).forEach(([key, value]) => {
+      if (ressources[key as Ressources] < value.amount) hasEnough = false;    });
     return hasEnough;
   };
 
   return (
     <div
       className={classNames({
         'build-menu': true,
-        'build-menu--visible': selected,
+        'build-menu--visible': selected && (existingBuilding !== undefined || getPossibleBuildingType().length > 0),
       })}
     >
       {selected && existingBuilding === undefined ? (