Merge pull request #139 from Resaki1/dev

Remaining time estimation
Resaki1 · May 9, 2024 · 8a99fdf · 8a99fdf
2 parents b4e45e7 + e4bc9fa
commit 8a99fdf
Show file tree

Hide file tree

Showing 8 changed files with 91 additions and 44 deletions.
diff --git a/.gitignore b/.gitignore
@@ -23,3 +23,11 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 node_modules
+src/textures/dungeon-stone1-bl/dungeon-stone1-roughness.png
+src/textures/dungeon-stone1-bl/dungeon-stone1-normal.png
+src/textures/dungeon-stone1-bl/dungeon-stone1-metalness.png
+src/textures/dungeon-stone1-bl/dungeon-stone1-height.png
+src/textures/dungeon-stone1-bl/dungeon-stone1-ao.png
+src/textures/dungeon-stone1-bl/dungeon-stone1-albedo2.png
+src/textures/dungeon-stone1-bl/desktop.ini
+src/textures/dungeon-stone1-bl/About these PBR files.txt
diff --git a/src/components/BuildMenu/BuildMenu.scss b/src/components/BuildMenu/BuildMenu.scss
@@ -8,7 +8,7 @@
   flex-direction: row;
   justify-content: center;
   padding: 8px;
-  gap: 16px;
+  gap: 64px;
   box-sizing: border-box;
   backdrop-filter: saturate(180%) blur(30px);
 

diff --git a/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.scss b/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.scss
@@ -21,8 +21,14 @@
   font-size: 20px;
   line-height: 30px;
   margin: 0;
-  border: 1px solid white;
+  border: 1px solid rgb(47, 192, 57);
+  color: rgb(47, 192, 57);
   border-radius: 100%;
   text-align: center;
   transition: background 0.2s ease-out;
 }
+
+.building-menu__entry[disabled] {
+  filter: grayscale(1);
+  color: rgb(133, 129, 129);
+}
diff --git a/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.tsx b/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.tsx
@@ -23,7 +23,7 @@ const BuildingMenuEntry = ({ building, handleAdd, handleDelete, hasEnoughRessour
   ) : (
     <button className="building-menu__entry" onClick={handleDelete}>
       <figure className="building-menu__entry-icon">❌</figure>
-      delete
+      remove building
     </button>
   );
 };

diff --git a/src/components/RessourceMenu/RessourceMenu.scss b/src/components/RessourceMenu/RessourceMenu.scss
@@ -1,36 +1,31 @@
 .ressource-menu {
+  margin: 0 auto;
   position: absolute;
-  top: 5%;
-  right: 12%;
-  background: #fff6;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-  width: 280px;
-  padding: 8px;
+  top: 0%;
+  left: 12%;
+
+  background: rgba(211, 197, 122, 0.4);
+  padding: 4px;
+
   font-size: 12px;
   backdrop-filter: saturate(180%) blur(30px);
-  border-radius: 8px;
+  -webkit-backdrop-filter: saturate(180%) blur(30px);
 
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
+  border-radius: 0 0 8px 8px;
 
   th {
-    font-size: 30px;
+    font-size: 25px;
   }
 
   td {
-    font-size: medium;
-    align-content: center;
-  }
-
-  button{
-    background-color: #fff6;
-    backdrop-filter: saturate(180%) blur(30px);
-
+    align-content: left;
   }
 }
+.ressource-menu button {
+  width: 100%;
+  height: 20px;
+  font-size: 10px;
+  border-radius: 3px;
+  background: rgba(98, 94, 71, 0.4);
+  color: wheat;
+}
diff --git a/src/components/RessourceMenu/RessourceMenu.tsx b/src/components/RessourceMenu/RessourceMenu.tsx
@@ -1,15 +1,26 @@
 import { useStore } from '../../store/store';
+
 import './RessourceMenu.scss';
 
 export const RessourceMenu = () => {
   const ressources = useStore((state) => ({ ...state.ressources }));
   const buildingOutputs = useStore((state) => state.buildingOutputs);
   const reset = useStore((state) => state.reset);
 
+  const valueSmoothener = (buildingsOutputValue: number) => Math.round((buildingsOutputValue * 6000) / 100);
+
+  const remainingRessources = (ressourcesPerMinute: number, totalRessources: number) => {
+    if (ressourcesPerMinute < 0) {
+      return Math.ceil(totalRessources / (ressourcesPerMinute * -1)) + 'min';
+    }
+
+    return '♾';
+  };
+
   return (
     <div className="ressource-menu">
-      <ul>
-        <table>
+      <table>
+        <thead>
           <tr>
             <th></th>
             <th>💵</th>
@@ -19,30 +30,48 @@ export const RessourceMenu = () => {
             <th></th>
             <th>🧑‍🦱</th>
           </tr>
+        </thead>
+
+        <tbody>
           <tr>
-            <td>Total</td>
-            <td>{Math.floor(ressources.gold)} </td>
-            <td>{Math.floor(ressources.wood)}</td>
-            <td>{Math.floor(ressources.stone)}</td>
-            <td>{Math.floor(ressources.food)}</td>
+            <td>
+              <b>Total</b>
+            </td>
+            <td>
+              <b>{Math.floor(ressources.gold)}</b> ({valueSmoothener(buildingOutputs.gold)})
+            </td>
+            <td>
+              <b>{Math.floor(ressources.wood)}</b> ({valueSmoothener(buildingOutputs.wood)})
+            </td>
+            <td>
+              <b>{Math.floor(ressources.stone)}</b> ({valueSmoothener(buildingOutputs.stone)})
+            </td>
+            <td>
+              <b>{Math.floor(ressources.food)}</b> ({valueSmoothener(buildingOutputs.food)})
+            </td>
             <td></td>
             <td>{Math.floor(ressources.villager)}</td>
           </tr>
           <tr>
-            <td>Every Minute</td>
-            <td>{Math.round(buildingOutputs.gold * 6000) / 100}</td>
-            <td>{Math.round(buildingOutputs.wood * 6000) / 100}</td>
-            <td>{Math.round(buildingOutputs.stone * 6000) / 100}</td>
-            <td>{Math.round(buildingOutputs.food * 6000) / 100}</td>
+            <td>
+              <b>Remaining</b>
+            </td>
+            <td>{remainingRessources(valueSmoothener(buildingOutputs.gold), Math.floor(ressources.gold))} </td>
+            <td>{remainingRessources(valueSmoothener(buildingOutputs.wood), Math.floor(ressources.wood))}</td>
+            <td>{remainingRessources(valueSmoothener(buildingOutputs.stone), Math.floor(ressources.stone))}</td>
+            <td>{remainingRessources(valueSmoothener(buildingOutputs.food), Math.floor(ressources.food))}</td>
             <td></td>
             <td></td>
           </tr>
+        </tbody>
+        <tfoot>
           <tr>
-            <button onClick={() => reset()}>Restart</button>
+            <td colSpan={7}>
+              <button onClick={() => reset()}>Restart</button>
+            </td>
           </tr>
-        </table>
-      </ul>
+        </tfoot>
+      </table>
     </div>
   );
 };
-
diff --git a/src/components/building/buildings.ts b/src/components/building/buildings.ts
@@ -5,6 +5,7 @@ export type Building = {
   type: BuildingType;
   name: string;
   icon: string;
+  price: string;
   terrains: Terrain[];
 };
 
@@ -13,30 +14,35 @@ export const allBuildings: Building[] = [
     type: BuildingType.Outpost,
     name: 'Outpost',
     icon: '🗼',
+    price: 'X',
     terrains: [Terrain.BEACH, Terrain.MEADOW, Terrain.FOREST],
   },
   {
     type: BuildingType.House,
     name: 'House',
     icon: '🛖',
+    price: 'x',
     terrains: [Terrain.BEACH, Terrain.MEADOW, Terrain.FOREST],
   },
   {
     type: BuildingType.Lumberhut,
     name: 'Lumberhut',
     icon: '🪚',
+    price: 'x',
     terrains: [Terrain.FOREST],
   },
   {
     type: BuildingType.CornField,
     name: 'Cornfield',
     icon: '🌽',
+    price:'x',
     terrains: [Terrain.MEADOW],
   },
   {
     type: BuildingType.StoneQuarry,
     name: 'Quarry',
     icon: '⛏️',
+    price: 'x',
     terrains: [Terrain.MOUNTAIN],
   },
 ];

diff --git a/src/materials/materials.tsx b/src/materials/materials.tsx
@@ -16,15 +16,18 @@ export const Materials = () => {
 
   const water = new MeshStandardMaterial({
     color: new Color(0x0055ff),
-    emissiveIntensity: 0.2,
+    emissive: new Color(0x0055ff),
+    emissiveIntensity: 0.4,
     transparent: true,
     opacity: 0.9,
     metalness: 0.7,
     roughness: 0.5,
+    wireframe: false,
   });
 
   const atlas = new MeshStandardMaterial({
     map: texture_atlas,
+
   });
 
   return {