From 6a68b5dfeeca8c6f1c9456b42b523d70eac2e219 Mon Sep 17 00:00:00 2001 From: BuildTools Date: Thu, 16 May 2024 02:26:26 +0200 Subject: [PATCH 01/28] Improved BuildMenu UI --- .../BuildMenuEntry/BuildMenuEntry.scss | 26 +++++++++++++++---- .../BuildMenuEntry/BuildMenuEntry.tsx | 11 ++++---- 2 files changed, 27 insertions(+), 10 deletions(-) diff --git a/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.scss b/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.scss index 3dad625..1372ecd 100644 --- a/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.scss +++ b/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.scss @@ -51,7 +51,7 @@ display: flex; flex-direction: column; gap: 16px; - color: white; + color: #d5d5d5; h2 { margin: 0; @@ -77,12 +77,16 @@ .building-menu__modal-accept { all: unset; - background: rgba(211, 197, 122, 0.4); + background: rgba(12, 185, 61, 0.645); padding: 8px; - border-radius: 4px; + border-radius: 50%; text-align: center; - font-size: 0.8em; - font-weight: bold; + font-size: 20px; + height: 48px; + width: 48px; + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); + align-self: center; + cursor: pointer; transition: all 0.2s cubic-bezier(0.67, 0.38, 0.09, 2.1); margin-top: 8px; @@ -93,6 +97,18 @@ } } + .building-menu__modal-accept[disabled] { + background: rgba(178, 192, 182, 0.645); + cursor:not-allowed; + transition:none; + + + &:hover { + transform: none; + box-shadow:none + } + } + .building-menu__modal-close { all: unset; position: absolute; diff --git a/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.tsx b/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.tsx index 4e49f50..7021e6c 100644 --- a/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.tsx +++ b/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.tsx @@ -33,7 +33,7 @@ const BuildingMenuEntry = ({ , document.body, @@ -75,7 +76,7 @@ const BuildingMenuEntry = ({ <> {modalOpen && createPortal( @@ -95,7 +96,7 @@ const BuildingMenuEntry = ({ remove , document.body, From a041f8679be1051df077626b55d9738346b42d09 Mon Sep 17 00:00:00 2001 From: BuildTools Date: Thu, 16 May 2024 02:26:51 +0200 Subject: [PATCH 02/28] Changed gold icon --- src/components/RessourceMenu/RessourceMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/RessourceMenu/RessourceMenu.tsx b/src/components/RessourceMenu/RessourceMenu.tsx index 4ac7e8c..c3f4fe0 100644 --- a/src/components/RessourceMenu/RessourceMenu.tsx +++ b/src/components/RessourceMenu/RessourceMenu.tsx @@ -23,7 +23,7 @@ export const RessourceMenu = () => { - 💵 + 💰 🪵 🪨 🍟 From fcd9af418e462daddd38b17a1b47441ff138e7aa Mon Sep 17 00:00:00 2001 From: BuildTools Date: Fri, 17 May 2024 02:53:19 +0200 Subject: [PATCH 03/28] Optimized map rendering --- src/components/Foilage/foilage/TreeBirch.tsx | 28 +++++++++++--------- src/components/Map/Map.tsx | 2 +- src/components/Tile/Tile.tsx | 5 ++-- src/materials/materials.tsx | 27 +++++++++++-------- 4 files changed, 36 insertions(+), 26 deletions(-) diff --git a/src/components/Foilage/foilage/TreeBirch.tsx b/src/components/Foilage/foilage/TreeBirch.tsx index 9e61fb8..680bacb 100644 --- a/src/components/Foilage/foilage/TreeBirch.tsx +++ b/src/components/Foilage/foilage/TreeBirch.tsx @@ -1,13 +1,5 @@ -/* -Auto-generated by: https://github.com/pmndrs/gltfjsx -author: WaxFreeOintment (https://sketchfab.com/WaxFreeOintment) -license: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/) -source: https://sketchfab.com/3d-models/birch-tree-voxel-459f53f6981a4482834f7700a1f2c7a8 -title: Birch Tree Voxel -*/ - -import {Group} from "three"; -import { useRef } from "react"; +import { Group, Color, MeshStandardMaterial } from "three"; +import { useRef, useMemo } from "react"; import { useGLTF } from "@react-three/drei"; import { GLTF } from "three-stdlib"; @@ -27,6 +19,18 @@ export default function TreeBirch({ const { nodes, materials } = useGLTF( "gltf/tree_birch/tree_birch.glb" ) as GLTFResult; + + // Verwenden Sie useMemo, um das Material nur einmal zu erstellen und wiederzuverwenden + const optimizedMaterial = useMemo(() => { + return new MeshStandardMaterial({ + color: new Color(0x228B22), // Grüner Farbwert für die Baumfarbe + emissive: new Color(0x006400), // Dunkler Grünton für Emissive + emissiveIntensity: 0.2, + roughness: 0.5, // Angemessene Rauheit für eine bessere Lichtverteilung + metalness: 0.1, // Geringe Metallizität für ein nicht-metallisches Aussehen + }); + }, []); + return ( ); } -useGLTF.preload("/scene-transformed.glb"); +useGLTF.preload("gltf/tree_birch/tree_birch.glb"); diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx index 73da18c..56b6cd7 100644 --- a/src/components/Map/Map.tsx +++ b/src/components/Map/Map.tsx @@ -102,7 +102,7 @@ export const Map = () => { {/* TODO: fix type */} - tileShader(shader, MATERIALS.texture_atlas)} defines={{ USE_UV: '' }} /> diff --git a/src/components/Tile/Tile.tsx b/src/components/Tile/Tile.tsx index 41f2e03..87bf44f 100644 --- a/src/components/Tile/Tile.tsx +++ b/src/components/Tile/Tile.tsx @@ -5,6 +5,7 @@ import { useStore } from '../../store/store'; import { Building } from '../Building/Building'; import { Color, Group } from 'three'; import { getTerrainHeight } from '../../helpers/terrain'; +import { Foilage } from '../Foilage/Foilage'; const lightGray = new Color(0xa0a0a0); const grayScale = new Color('hsla(62, 0%, 20%)'); @@ -108,9 +109,9 @@ const TileComponent = () => { > {hasBuilding && } - {/* {ref?.current?.position && !hasBuilding && ( + { ref?.current?.position && !hasBuilding && ( - )} */} + )} ); }; diff --git a/src/materials/materials.tsx b/src/materials/materials.tsx index a0278b2..191b94a 100644 --- a/src/materials/materials.tsx +++ b/src/materials/materials.tsx @@ -1,9 +1,10 @@ import { useTexture } from '@react-three/drei'; -import { BoxGeometry, Color, MeshStandardMaterial, NearestFilter } from 'three'; +import { Water } from 'three/examples/jsm/objects/Water.js'; +import { BoxGeometry, Color, LinearFilter, MeshPhysicalMaterial, NearestFilter, PlaneGeometry } from 'three'; import textureAtlas from '../textures/textureAtlas.jpg'; -export const water = new MeshStandardMaterial({ - color: 'blue', +export const water = new MeshPhysicalMaterial({ + color: 'DeepBlue', emissiveIntensity: 0.2, }); @@ -11,21 +12,25 @@ export const building = new BoxGeometry(0.5, 0.5, 0.5); export const Materials = () => { const [texture_atlas] = useTexture([textureAtlas]); - texture_atlas.minFilter = NearestFilter; - texture_atlas.magFilter = NearestFilter; + texture_atlas.minFilter = LinearFilter; + texture_atlas.magFilter = LinearFilter; - const water = new MeshStandardMaterial({ + const water = new MeshPhysicalMaterial({ color: new Color(0x0055ff), emissive: new Color(0x0055ff), emissiveIntensity: 0.4, transparent: true, - opacity: 0.9, - metalness: 0.7, - roughness: 0.5, - wireframe: false, + opacity: 0.8, + metalness: 0.1, + roughness: 0.1, // Niedrigere Rauheit für glänzenderes Wasser + clearcoat: 1.0, // Klarlack für zusätzliche Glanzschicht + clearcoatRoughness: 0.1, // Rauheit der Klarlackschicht + reflectivity: 0.9, // Hohe Reflektivität für Spiegelungen }); - const atlas = new MeshStandardMaterial({ + + + const atlas = new MeshPhysicalMaterial({ map: texture_atlas, }); From 317c272ed9dfed7537f96c7638c98ab0d4454d59 Mon Sep 17 00:00:00 2001 From: BuildTools Date: Fri, 17 May 2024 03:59:48 +0200 Subject: [PATCH 04/28] Improved graphics --- src/components/Tile/Tile.tsx | 6 +++--- src/materials/materials.tsx | 6 ++++-- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/Tile/Tile.tsx b/src/components/Tile/Tile.tsx index 87bf44f..b96c8e1 100644 --- a/src/components/Tile/Tile.tsx +++ b/src/components/Tile/Tile.tsx @@ -108,10 +108,10 @@ const TileComponent = () => { color={selected ? noColor : isUnlocked ? lightGray : grayScale} > {hasBuilding && } - - { ref?.current?.position && !hasBuilding && ( + + {/* {ref?.current?.position && !hasBuilding && ( - )} + )} */} ); }; diff --git a/src/materials/materials.tsx b/src/materials/materials.tsx index 191b94a..dc842b2 100644 --- a/src/materials/materials.tsx +++ b/src/materials/materials.tsx @@ -1,6 +1,6 @@ import { useTexture } from '@react-three/drei'; import { Water } from 'three/examples/jsm/objects/Water.js'; -import { BoxGeometry, Color, LinearFilter, MeshPhysicalMaterial, NearestFilter, PlaneGeometry } from 'three'; +import { BoxGeometry, Color, LinearFilter, MeshPhysicalMaterial,MeshStandardMaterial, NearestFilter, LinearMipmapLinearFilter } from 'three'; import textureAtlas from '../textures/textureAtlas.jpg'; export const water = new MeshPhysicalMaterial({ @@ -30,8 +30,10 @@ export const Materials = () => { - const atlas = new MeshPhysicalMaterial({ + const atlas = new MeshStandardMaterial({ map: texture_atlas, + roughness: 0.5, // Mittlere Rauheit für ein ausgewogenes Aussehen + metalness: 0.1, // Geringer Metallgehalt für natürliche Oberflächen }); return { From f23705aa3ce74ae8b11ecd98a26f34b396581814 Mon Sep 17 00:00:00 2001 From: BuildTools Date: Fri, 17 May 2024 04:09:00 +0200 Subject: [PATCH 05/28] Added webkit backdrop filter for BuildMenu --- src/components/BuildMenu/BuildMenu.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/BuildMenu/BuildMenu.scss b/src/components/BuildMenu/BuildMenu.scss index d3c3ea6..2795fdd 100644 --- a/src/components/BuildMenu/BuildMenu.scss +++ b/src/components/BuildMenu/BuildMenu.scss @@ -16,6 +16,7 @@ $build-menu-height: 64px; gap: 32px; box-sizing: border-box; backdrop-filter: saturate(180%) blur(30px); + -webkit-backdrop-filter: saturate(180%) blur(30px); transform: translateY($build-menu-height); &--visible { From 03e5bfce0a256cd1f30454348c8d2e6982bb9f2e Mon Sep 17 00:00:00 2001 From: BuildTools Date: Fri, 17 May 2024 04:09:16 +0200 Subject: [PATCH 06/28] Removed warnings --- src/components/Foilage/foilage/TreeBirch.tsx | 2 +- src/components/Tile/Tile.tsx | 1 - src/materials/materials.tsx | 3 +-- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/Foilage/foilage/TreeBirch.tsx b/src/components/Foilage/foilage/TreeBirch.tsx index 680bacb..97ac84a 100644 --- a/src/components/Foilage/foilage/TreeBirch.tsx +++ b/src/components/Foilage/foilage/TreeBirch.tsx @@ -16,7 +16,7 @@ export default function TreeBirch({ ...props }: JSX.IntrinsicElements["group"]) { const group = useRef(null!); - const { nodes, materials } = useGLTF( + const { nodes } = useGLTF( "gltf/tree_birch/tree_birch.glb" ) as GLTFResult; diff --git a/src/components/Tile/Tile.tsx b/src/components/Tile/Tile.tsx index b96c8e1..828c9a3 100644 --- a/src/components/Tile/Tile.tsx +++ b/src/components/Tile/Tile.tsx @@ -5,7 +5,6 @@ import { useStore } from '../../store/store'; import { Building } from '../Building/Building'; import { Color, Group } from 'three'; import { getTerrainHeight } from '../../helpers/terrain'; -import { Foilage } from '../Foilage/Foilage'; const lightGray = new Color(0xa0a0a0); const grayScale = new Color('hsla(62, 0%, 20%)'); diff --git a/src/materials/materials.tsx b/src/materials/materials.tsx index dc842b2..94f87ec 100644 --- a/src/materials/materials.tsx +++ b/src/materials/materials.tsx @@ -1,6 +1,5 @@ import { useTexture } from '@react-three/drei'; -import { Water } from 'three/examples/jsm/objects/Water.js'; -import { BoxGeometry, Color, LinearFilter, MeshPhysicalMaterial,MeshStandardMaterial, NearestFilter, LinearMipmapLinearFilter } from 'three'; +import { BoxGeometry, Color, LinearFilter, MeshPhysicalMaterial,MeshStandardMaterial } from 'three'; import textureAtlas from '../textures/textureAtlas.jpg'; export const water = new MeshPhysicalMaterial({ From ba5369caa010d29d1862a55327ebc98b84087a66 Mon Sep 17 00:00:00 2001 From: Max Herter Date: Mon, 2 Sep 2024 12:47:10 +0200 Subject: [PATCH 07/28] Removed comments, Added license --- package-lock.json | 9 +++++---- package.json | 6 +++--- src/components/Foilage/foilage/TreeBirch.tsx | 18 +++++++++++++----- src/materials/materials.tsx | 12 ++++++------ 4 files changed, 27 insertions(+), 18 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4651f1b..8117fcc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -43,7 +43,7 @@ "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", @@ -6730,10 +6730,11 @@ } }, "node_modules/prettier": { - "version": "3.2.5", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz", - "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==", + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz", + "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==", "dev": true, + "license": "MIT", "bin": { "prettier": "bin/prettier.cjs" }, diff --git a/package.json b/package.json index ef6bea9..ff453c4 100644 --- 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/components/Foilage/foilage/TreeBirch.tsx b/src/components/Foilage/foilage/TreeBirch.tsx index 97ac84a..3df62af 100644 --- a/src/components/Foilage/foilage/TreeBirch.tsx +++ b/src/components/Foilage/foilage/TreeBirch.tsx @@ -1,3 +1,11 @@ +/* +Auto-generated by: https://github.com/pmndrs/gltfjsx +author: WaxFreeOintment (https://sketchfab.com/WaxFreeOintment) +license: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/) +source: https://sketchfab.com/3d-models/birch-tree-voxel-459f53f6981a4482834f7700a1f2c7a8 +title: Birch Tree Voxel +*/ + import { Group, Color, MeshStandardMaterial } from "three"; import { useRef, useMemo } from "react"; import { useGLTF } from "@react-three/drei"; @@ -20,14 +28,14 @@ export default function TreeBirch({ "gltf/tree_birch/tree_birch.glb" ) as GLTFResult; - // Verwenden Sie useMemo, um das Material nur einmal zu erstellen und wiederzuverwenden + const optimizedMaterial = useMemo(() => { return new MeshStandardMaterial({ - color: new Color(0x228B22), // Grüner Farbwert für die Baumfarbe - emissive: new Color(0x006400), // Dunkler Grünton für Emissive + color: new Color(0x228B22), + emissive: new Color(0x006400), emissiveIntensity: 0.2, - roughness: 0.5, // Angemessene Rauheit für eine bessere Lichtverteilung - metalness: 0.1, // Geringe Metallizität für ein nicht-metallisches Aussehen + roughness: 0.5, + metalness: 0.1, }); }, []); diff --git a/src/materials/materials.tsx b/src/materials/materials.tsx index 94f87ec..4f13154 100644 --- a/src/materials/materials.tsx +++ b/src/materials/materials.tsx @@ -21,18 +21,18 @@ export const Materials = () => { transparent: true, opacity: 0.8, metalness: 0.1, - roughness: 0.1, // Niedrigere Rauheit für glänzenderes Wasser - clearcoat: 1.0, // Klarlack für zusätzliche Glanzschicht - clearcoatRoughness: 0.1, // Rauheit der Klarlackschicht - reflectivity: 0.9, // Hohe Reflektivität für Spiegelungen + roughness: 0.1, + clearcoat: 1.0, + clearcoatRoughness: 0.1, + reflectivity: 0.9, }); const atlas = new MeshStandardMaterial({ map: texture_atlas, - roughness: 0.5, // Mittlere Rauheit für ein ausgewogenes Aussehen - metalness: 0.1, // Geringer Metallgehalt für natürliche Oberflächen + roughness: 0.5, + metalness: 0.1, }); return { From 2747b25e448f93cd7f1d11549d299b8264cdf76f Mon Sep 17 00:00:00 2001 From: BuildTools Date: Mon, 9 Sep 2024 00:37:20 +0200 Subject: [PATCH 08/28] UI enhancements Added support for light- and darkmode --- src/components/BuildMenu/BuildMenu.scss | 35 ++++++++++---- .../BuildMenuEntry/BuildMenuEntry.scss | 20 ++++++-- .../RessourceMenu/RessourceMenu.scss | 47 ++++++++++++++----- .../RessourceMenu/RessourceMenu.tsx | 15 +++--- 4 files changed, 84 insertions(+), 33 deletions(-) diff --git a/src/components/BuildMenu/BuildMenu.scss b/src/components/BuildMenu/BuildMenu.scss index 2795fdd..2360a81 100644 --- a/src/components/BuildMenu/BuildMenu.scss +++ b/src/components/BuildMenu/BuildMenu.scss @@ -1,26 +1,41 @@ $build-menu-height: 64px; .build-menu { - position: absolute; - bottom: 0; - bottom: env(safe-area-inset-bottom); - width: 100%; - background-color: #21494db3; - color: white; + position: fixed; + left: 50cqi; + bottom: calc(env(safe-area-inset-bottom) + 10%); + border-radius: 20px; height: 0; - transition: transform 0.2s cubic-bezier(0.59, 0.33, 0.16, 1.29); + 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; + align-items:baseline; padding: 8px; gap: 32px; box-sizing: border-box; backdrop-filter: saturate(180%) blur(30px); -webkit-backdrop-filter: saturate(180%) blur(30px); - transform: translateY($build-menu-height); + + opacity: 0; + transition: opacity 0.2s ease-out, transform 0.5s ease-out 0.2s; + transform: translateX(-50%); + &--visible { - transform: translateY(0); + opacity: 1; + transform: translateX(-50%) translateY(0); height: $build-menu-height; } -} +} \ No newline at end of file diff --git a/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.scss b/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.scss index 1372ecd..a8606fe 100644 --- a/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.scss +++ b/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.scss @@ -11,7 +11,7 @@ user-select: none; &:hover .building-menu__entry-icon { - background: rgba(255, 255, 255, 0.6); + background: rgba(255, 255, 255, 0.6); } } @@ -35,8 +35,8 @@ .building-menu__modal { position: fixed; - top: 50%; - left: 50%; + top: 48%; + left: 50cqi; transform: translate(-50%, -50%); display: flex; flex-direction: column; @@ -44,10 +44,20 @@ padding: 32px 48px; background: rgba(211, 197, 122, 0.4); backdrop-filter: saturate(180%) blur(30px); + -webkit-backdrop-filter: saturate(180%) blur(30px); border-radius: 8px; - width: 196px; + width: 190px; min-height: 196px; - + 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.6); + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); + opacity: 1; display: flex; flex-direction: column; gap: 16px; diff --git a/src/components/RessourceMenu/RessourceMenu.scss b/src/components/RessourceMenu/RessourceMenu.scss index 49719da..1306c6d 100644 --- a/src/components/RessourceMenu/RessourceMenu.scss +++ b/src/components/RessourceMenu/RessourceMenu.scss @@ -1,31 +1,56 @@ .ressource-menu { margin: 0 auto; - position: absolute; - top: 0%; - left: 12%; - - background: rgba(211, 197, 122, 0.4); + position: fixed; + top: 1cqb; + left: 50cqi; + height: min-content; padding: 4px; + 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); + } + display: flex; + flex-direction: column; + justify-content: center; + align-items:center; font-size: 12px; + color: #E6E6E6; backdrop-filter: saturate(180%) blur(30px); -webkit-backdrop-filter: saturate(180%) blur(30px); - - border-radius: 0 0 8px 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); + transform: translateX(-50%); + border-radius: 20px; th { - font-size: 25px; + font-size: 20px; + padding: 4px; + text-align: left; + } + + table { + width: 100%; + border-collapse: collapse; } td { - align-content: left; + padding: 8px; + text-align: left; } } .ressource-menu button { - width: 100%; + position: relative; + top:2px; + width: 30%; height: 20px; font-size: 10px; border-radius: 3px; - background: rgba(98, 94, 71, 0.4); + border-style:hidden; + background: rgba(255, 94, 71, 0.7); color: wheat; } diff --git a/src/components/RessourceMenu/RessourceMenu.tsx b/src/components/RessourceMenu/RessourceMenu.tsx index c3f4fe0..b4dae5d 100644 --- a/src/components/RessourceMenu/RessourceMenu.tsx +++ b/src/components/RessourceMenu/RessourceMenu.tsx @@ -23,19 +23,19 @@ export const RessourceMenu = () => { - 💰 - 🪵 - 🪨 - 🍟 + 💰 + 🪵 + 🪨 + 🍟 - 🧑‍🦱 + 🧑‍🦱 - Total + ∑ {Math.floor(ressources.gold)} ({valueSmoothener(buildingOutputs.gold)}) @@ -52,9 +52,10 @@ export const RessourceMenu = () => { {Math.floor(ressources.villager)} + - Remaining + ⏳ {remainingRessources(valueSmoothener(buildingOutputs.gold), Math.floor(ressources.gold))} {remainingRessources(valueSmoothener(buildingOutputs.wood), Math.floor(ressources.wood))} From 645cd8e7a490674f14dfd29d4fa2d2bff5e77e17 Mon Sep 17 00:00:00 2001 From: BuildTools Date: Tue, 10 Sep 2024 03:47:40 +0200 Subject: [PATCH 09/28] Added basic location saving feature --- src/App.tsx | 2 + src/components/BuildMenu/BuildMenu.scss | 10 +- .../RessourceMenu/RessourceMenu.scss | 109 +++++++++++++++--- .../RessourceMenu/RessourceMenu.tsx | 33 ++++-- .../TilePropertiesMenu.scss | 108 +++++++++++++++++ .../TilePropertiesMenu/TilePropertiesMenu.tsx | 54 +++++++++ src/components/building/buildings.ts | 10 +- src/store/store.ts | 24 ++++ 8 files changed, 315 insertions(+), 35 deletions(-) create mode 100644 src/components/TilePropertiesMenu/TilePropertiesMenu.scss create mode 100644 src/components/TilePropertiesMenu/TilePropertiesMenu.tsx diff --git a/src/App.tsx b/src/App.tsx index f661532..1e082f3 100644 --- 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(null!); @@ -51,6 +52,7 @@ const App = () => { + ); }; diff --git a/src/components/BuildMenu/BuildMenu.scss b/src/components/BuildMenu/BuildMenu.scss index 2360a81..4e4964a 100644 --- a/src/components/BuildMenu/BuildMenu.scss +++ b/src/components/BuildMenu/BuildMenu.scss @@ -3,9 +3,9 @@ $build-menu-height: 64px; .build-menu { position: fixed; left: 50cqi; - bottom: calc(env(safe-area-inset-bottom) + 10%); + bottom: calc(env(safe-area-inset-bottom) + 8%); border-radius: 20px; - height: 0; + height: min-content; width: fit-content; background-color: rgba(33, 73, 77, 0.702); @@ -38,4 +38,10 @@ $build-menu-height: 64px; transform: translateX(-50%) translateY(0); height: $build-menu-height; } + + @media (orientation: landscape) { + max-height: 30%; + left: 20cqi; + top: 36cqi; + } } \ No newline at end of file diff --git a/src/components/RessourceMenu/RessourceMenu.scss b/src/components/RessourceMenu/RessourceMenu.scss index 1306c6d..545078d 100644 --- a/src/components/RessourceMenu/RessourceMenu.scss +++ b/src/components/RessourceMenu/RessourceMenu.scss @@ -1,23 +1,64 @@ +@keyframes fadeOut { + from { + opacity: 1; + height: auto; + } + to { + opacity: 0; + height: 0; + overflow: hidden; + } +} + +@keyframes subtleBounce { + 0%, 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-1px); + } +} + +@keyframes delayedFadeOut { + 0% { + opacity: 1; + height: auto; + } + 90% { + opacity: 1; + height: auto; + } + 100% { + opacity: 0; + height: 0; + overflow: hidden; + } +} +.landscape-view { + display:none; +} .ressource-menu { margin: 0 auto; position: fixed; top: 1cqb; left: 50cqi; - height: min-content; + height: auto; padding: 4px; - width:fit-content; + width: fit-content; background-color: rgba(33, 73, 77, 0.702); @media (prefers-color-scheme: light) { - background-color: #d3c57a66; + background-color: #d3c57a66; } @media (prefers-color-scheme: dark) { - background-color: rgba(33, 73, 77, 0.702); + background-color: rgba(33, 73, 77, 0.702); } + + display: flex; flex-direction: column; justify-content: center; - align-items:center; + align-items: center; font-size: 12px; color: #E6E6E6; backdrop-filter: saturate(180%) blur(30px); @@ -25,6 +66,7 @@ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); transform: translateX(-50%); + transition: height 0.5s ease-out; border-radius: 20px; th { @@ -41,16 +83,49 @@ td { padding: 8px; text-align: left; + width: 35px; + font-size: 11px; } -} -.ressource-menu button { - position: relative; - top:2px; - width: 30%; - height: 20px; - font-size: 10px; - border-radius: 3px; - border-style:hidden; - background: rgba(255, 94, 71, 0.7); - color: wheat; -} + + button { + position: relative; + top: 2px; + width: 30%; + height: 20px; + font-size: 10px; + border-radius: 3px; + border-style: hidden; + background: rgba(255, 94, 71, 0.7); + color: wheat; + transition: visibility 0.5s ease-out, opacity 0.5s ease-out; + + } + + + @media (orientation: landscape) { + th { + font-size: 16px; + padding: 4px; + text-align: left; + animation: subtleBounce 2s infinite ease-in-out; + } + + height: auto; + + button { + display: none; + } + + + + .landscape-view { + display: contents; + + } + + .portrait-view { + display: none; + } + + } +} \ No newline at end of file diff --git a/src/components/RessourceMenu/RessourceMenu.tsx b/src/components/RessourceMenu/RessourceMenu.tsx index b4dae5d..b83c5f4 100644 --- a/src/components/RessourceMenu/RessourceMenu.tsx +++ b/src/components/RessourceMenu/RessourceMenu.tsx @@ -23,18 +23,16 @@ export const RessourceMenu = () => { - 💰 + 💰 🪵 🪨 🍟 - 🧑‍🦱 - - - + + ∑ @@ -49,11 +47,25 @@ export const RessourceMenu = () => { {Math.floor(ressources.food)} ({valueSmoothener(buildingOutputs.food)}) - {Math.floor(ressources.villager)} - - + + ∑ + + {Math.floor(ressources.gold)} + + + {Math.floor(ressources.wood)} + + + {Math.floor(ressources.stone)} + + + {Math.floor(ressources.food)} + + {Math.floor(ressources.villager)} + + ⏳ @@ -62,11 +74,10 @@ export const RessourceMenu = () => { {remainingRessources(valueSmoothener(buildingOutputs.stone), Math.floor(ressources.stone))} {remainingRessources(valueSmoothener(buildingOutputs.food), Math.floor(ressources.food))} - - - + + diff --git a/src/components/TilePropertiesMenu/TilePropertiesMenu.scss b/src/components/TilePropertiesMenu/TilePropertiesMenu.scss new file mode 100644 index 0000000..e76986d --- /dev/null +++ b/src/components/TilePropertiesMenu/TilePropertiesMenu.scss @@ -0,0 +1,108 @@ +@keyframes fadeIn { + from { + opacity: 0; + transform: translate(-50%, -60%); + } + to { + opacity: 1; + transform: translate(-50%, -50%); + } + } + + @keyframes pulse { + 0% { + background-color: rgba(33, 73, 77, 0.702); + } + 50% { + background-color: rgba(33, 100, 77, 0.702); + } + 100% { + background-color: rgba(33, 73, 77, 0.702); + } + } + + @keyframes successAnimation { + 0% { + background-color: rgba(33, 73, 77, 0.702); /* Ursprungsfarbe */ + } + 50% { + background-color: rgba(33, 150, 77, 0.702); /* Subtilerer Grünton */ + } + 100% { + background-color: rgba(33, 73, 77, 0.702); /* Ursprungsfarbe */ + } + } + + .TilePropertiesMenu__button { + position: fixed; + top: 46cqi; + left: 5cqi; + background: rgba(211, 197, 122, 0.4); + background-color: rgba(33, 73, 77, 0.702); + backdrop-filter: saturate(180%) blur(30px); + -webkit-backdrop-filter: saturate(180%) blur(30px); + padding: 10px 10px; + border-radius: 25px; + border-width: 0px; + font-size: 16px; + z-index: 1000; /* Sicherstellen, dass es über anderen Elementen liegt */ + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); + transition: background-color 0.3s ease, filter 0.3s ease; + + &:disabled { + background-color: rgba(0, 0, 0, 0.645); + cursor: not-allowed; + animation: none; + filter: grayscale(100%); + } + + &:hover { + background-color: #405368; + } + + &:not(:disabled) { + animation: pulse 4s ease-in-out infinite; + } + + &.success { + animation: successAnimation 1s ease-in-out; /* Erfolgsanimation anwenden */ + } + } + + .TilePropertiesMenu__modal { + position: fixed; + top: 64cqi; + left: 34cqi; + width: fit-content; + height: fit-content; + transform: translate(-50%, -50%); + padding: 0px; + border: 0px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + z-index: 1001; /* Sicherstellen, dass es über dem Button liegt */ + opacity: 0; /* Start mit 0 Opazität */ + animation: fadeIn 0.5s forwards ease-in-out; /* Animation anwenden */ + } + + .TilePropertiesMenu__modal-confirm { + border-radius: 15px; + border: none; + padding: 10px 20px; + color: whitesmoke; + cursor: pointer; + transition: background-color 0.3s ease; + background: rgba(211, 197, 122, 0.4); + background-color: rgba(33, 73, 77, 0.702); + backdrop-filter: saturate(180%) blur(30px); + -webkit-backdrop-filter: saturate(180%) blur(30px); + + &:disabled { + background-color: #6c757d; /* Grau */ + cursor: not-allowed; + } + + &:hover:not(:disabled) { + background-color: #218838; /* Dunkleres Grün beim Hover */ + } + } \ No newline at end of file diff --git a/src/components/TilePropertiesMenu/TilePropertiesMenu.tsx b/src/components/TilePropertiesMenu/TilePropertiesMenu.tsx new file mode 100644 index 0000000..27c3b20 --- /dev/null +++ b/src/components/TilePropertiesMenu/TilePropertiesMenu.tsx @@ -0,0 +1,54 @@ +import { useStore } from '../../store/store'; +import './TilePropertiesMenu.scss'; +import { createPortal } from 'react-dom'; +import { useClickOutside } from '../../hooks'; +import { useState } from 'react'; + +export const TilePropertiesMenu = () => { + const [modalOpen, setModalOpen] = useState(false); + const [success, setSuccess] = useState(false); + + const selected = useStore((state) => state.selected); + const modalRef = useClickOutside(() => setModalOpen(false)); + + const saveLocation = useStore((state) => state.saveLocation); + + const handleAdd = (t: string, x: number, y: number) => { + saveLocation(t, x, y); + selected!.object.userData.update(); + setModalOpen(false); + }; + + return ( + <> + + + {modalOpen && + createPortal( +
+ +
, + document.body, + )} + + ); +}; + +export default TilePropertiesMenu; \ No newline at end of file diff --git a/src/components/building/buildings.ts b/src/components/building/buildings.ts index 45a83c9..83c08b4 100644 --- a/src/components/building/buildings.ts +++ b/src/components/building/buildings.ts @@ -25,7 +25,7 @@ export const allBuildings: Building[] = [ type: BuildingType.Outpost, name: 'Outpost', icon: '🗼', - description: 'Unlocks new areas for your town to grow.', + description: 'The Outpost serves as a beacon of expansion, allowing your town to extend its borders and explore new territories. It stands tall, symbolizing the ambition and growth of your community. Establishing an Outpost is the first step towards a thriving and expansive settlement.', costs: { wood: 10, gold: 600, @@ -39,7 +39,7 @@ export const allBuildings: Building[] = [ type: BuildingType.House, name: 'House', icon: '🛖', - description: 'Adds 4 villagers to your town. Villagers pay taxes but require food.', + description: 'A cozy House that provides shelter for your villagers, adding 4 new members to your growing town. These villagers contribute to the economy by paying taxes, but they also require sustenance. The House is a cornerstone of any thriving community, ensuring the well-being and growth of its inhabitants.', costs: { wood: 6, gold: 100, @@ -55,7 +55,7 @@ export const allBuildings: Building[] = [ type: BuildingType.Lumberhut, name: 'Lumberhut', icon: '🪚', - description: 'A villager works here to produce wood needed to build new buildings, but costs money to maintain.', + description: 'The Lumberhut is a vital structure where a villager works tirelessly to produce the wood necessary for constructing new buildings. Though it requires gold to maintain, the steady supply of wood it provides is indispensable for the expansion and development of your town.', costs: { wood: 2, gold: 10, @@ -71,7 +71,7 @@ export const allBuildings: Building[] = [ type: BuildingType.CornField, name: 'Cornfield', icon: '🌽', - description: 'Produces low amounts of food. Costs money to maintain.', + description: 'The Cornfield is a humble yet essential source of food for your villagers. While it incurs maintenance costs, the Cornfield ensures a steady supply of nourishment, supporting the health and productivity of your community. It is a testament to the agricultural prowess of your town.', costs: { gold: 30, }, @@ -86,7 +86,7 @@ export const allBuildings: Building[] = [ name: 'Quarry', icon: '⛏️', description: - 'Villagers work here to produces stone needed for more advanced buildings, but it costs money to maintain.', + 'The Quarry is a bustling hub where villagers extract stone, a crucial resource for constructing advanced buildings. Despite the costs associated with its operation, the Quarry plays a key role in the architectural and infrastructural advancements of your settlement, paving the way for future growth.', costs: { wood: 6, gold: 40, diff --git a/src/store/store.ts b/src/store/store.ts index 9a6ea96..2c5e2f7 100644 --- a/src/store/store.ts +++ b/src/store/store.ts @@ -4,6 +4,7 @@ import { persist, devtools } from 'zustand/middleware'; import { BuildingType } from '../components/Building/Building'; import { BuildingSellBenefits } from '../components/Building/buildingFinancials'; import { getCostsOfBuilding, getOutputOfBuilding } from '../components/Building/buildings'; +import { title } from 'process'; export type Ressources = 'wood' | 'stone' | 'gold' | 'food' | 'villager'; @@ -24,6 +25,7 @@ export type State = { }; unlocked: { [key: number]: { [key: number]: number } }; selected: SelectedObject | undefined; + locations: { [key: string]: { positionX: number; positionY: number } }; camera: | { position: Vector3; @@ -40,6 +42,8 @@ export type Actions = { lock: (x: number, y: number, range: number) => void; unlock: (x: number, y: number, range: number) => void; setSelected: (object: SelectedObject | undefined) => void; + saveLocation: (title: string, x: number, y: number) => void; + removeLocation: (title: string, x: number, y: number) => void; setCamera: (position: Vector3, lookAt: Vector3) => void; reset: () => void; }; @@ -61,6 +65,7 @@ const initialState: State = { villager: 2, }, unlocked: {}, + locations: {}, selected: undefined, camera: undefined, }; @@ -94,6 +99,25 @@ export const useStore = create()( buildingOutputs: newBuildingOutputs, }; }), + // add new saved location + saveLocation: (t, x, y) => + set((state) => { + const newLocationType = { ...state.locations }; + newLocationType[t] = { positionX: x, positionY: y }; + return { + locations: newLocationType, + }; + }), + // remove saved location + removeLocation: (t, x, y) => + set((state) => { + const newLocationType = { ...state.locations }; + newLocationType[t] = { positionX: x, positionY: y }; + delete newLocationType[t]; + return { + locations: newLocationType, }; + }), + removeBuilding: (x, y) => set((state) => { const building = state.buildings[x][y]; From 0c6c7905cb9f2e4f1ece048f679ca0e87e173f4c Mon Sep 17 00:00:00 2001 From: BuildTools Date: Wed, 11 Sep 2024 17:10:56 +0200 Subject: [PATCH 10/28] Disabled zoom on input --- src/index.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/index.tsx b/src/index.tsx index a1cc752..3b8f828 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -5,6 +5,11 @@ import App from "./App"; import { register } from "./serviceWorkerRegistration"; import reportWebVitals from "./reportWebVitals"; +const meta = document.createElement('meta'); +meta.name = 'viewport'; +meta.content = 'width=device-width, initial-scale=1, maximum-scale=1'; +document.getElementsByTagName('head')[0].appendChild(meta); + const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement ); From 694ff17483071189038cc382d04fc6a95b4a5821 Mon Sep 17 00:00:00 2001 From: BuildTools Date: Wed, 11 Sep 2024 17:12:54 +0200 Subject: [PATCH 11/28] Added save-home feature --- .../TilePropertiesMenu.scss | 302 +++++++++++++----- .../TilePropertiesMenu/TilePropertiesMenu.tsx | 49 ++- src/store/store.ts | 51 +-- 3 files changed, 286 insertions(+), 116 deletions(-) diff --git a/src/components/TilePropertiesMenu/TilePropertiesMenu.scss b/src/components/TilePropertiesMenu/TilePropertiesMenu.scss index e76986d..b6c679d 100644 --- a/src/components/TilePropertiesMenu/TilePropertiesMenu.scss +++ b/src/components/TilePropertiesMenu/TilePropertiesMenu.scss @@ -1,108 +1,236 @@ @keyframes fadeIn { - from { - opacity: 0; - transform: translate(-50%, -60%); - } - to { - opacity: 1; - transform: translate(-50%, -50%); - } + from { + opacity: 0; + filter: blur(4px); } - - @keyframes pulse { - 0% { - background-color: rgba(33, 73, 77, 0.702); - } - 50% { - background-color: rgba(33, 100, 77, 0.702); - } - 100% { - background-color: rgba(33, 73, 77, 0.702); + to { + opacity: 1; + filter: blur(0); + } +} + +@keyframes slideIn { + from { + transform: translate(-50%, -100%); + } + to { + transform: translate(-50%, 0); + } +} + +@keyframes pulse { + 0% { + background-color: rgba(33, 73, 77, 0.702); + } + 50% { + background-color: rgba(33, 100, 77, 0.702); + } + 100% { + background-color: rgba(33, 73, 77, 0.702); + } +} + +@keyframes shake { + 0% { transform: translateX(0); } + 25% { transform: translateX(-5px); } + 50% { transform: translateX(5px); } + 75% { transform: translateX(-5px); } + 100% { transform: translateX(0); } +} + + +@keyframes successAnimation { + 0% { + background-color: rgba(33, 73, 77, 0.702); + } + 50% { + background-color: rgba(33, 150, 77, 0.702); + } + 100% { + background-color: rgba(33, 73, 77, 0.702); + } +} + +.fade-in { + animation: fadeIn 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) both; + will-change: opacity, transform, filter; +} +* { + user-select: none; + -webkit-user-select: none; + -moz-user-select: none; +} + +.TilePropertiesMenu__button { + position: fixed; + top: 56cqi; + left: 5cqi; + background: rgba(211, 197, 122, 0.4); + background-color: rgba(33, 73, 77, 0.702); + backdrop-filter: saturate(180%) blur(30px); + -webkit-backdrop-filter: saturate(180%) blur(30px); + padding: 10px 10px; + border-radius: 25px; + border-width: 0px; + font-size: 16px; + z-index: 1000; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); + transition: background-color 0.3s ease, filter 0.3s ease; + + &:disabled { + background-color: rgba(33, 73, 77, 0.3); + cursor: not-allowed; + animation: none; + filter: grayscale(100%); + transition: background-color 0.3s ease-in-out, filter 0.3s ease-in-out; + + &:active { + animation: shake 0.5s ease; } } + + &:not(:disabled):not(.selected) { + animation: pulse 4s ease-in-out infinite; + } +} + +.TilePropertiesMenu__modal { + margin: 0 auto; + position: fixed; + top: 6cqb; + left: 50cqi; + position: fixed; + transform: translate(-50%, 0); + width: 300px; + height: auto; + min-height: 132px; + max-height: 90vh; + overflow: hidden; + padding: 10px; + border: 0; + background-color: rgb(33, 73, 77); + backdrop-filter: saturate(180%) blur(30px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + border-radius: 20px; + z-index: 1001; + opacity: 0; + animation: fadeIn 0.25s forwards ease-in-out; + + h3 { + color: beige; + margin-bottom: 3px; + font-size: 13px; + } + + ul { + list-style-type: none; + padding: 0; + margin: 0; + max-height: 50px; + overflow-y: scroll; + color: beige; + flex-grow: 1; + - @keyframes successAnimation { - 0% { - background-color: rgba(33, 73, 77, 0.702); /* Ursprungsfarbe */ - } - 50% { - background-color: rgba(33, 150, 77, 0.702); /* Subtilerer Grünton */ - } - 100% { - background-color: rgba(33, 73, 77, 0.702); /* Ursprungsfarbe */ + } + + li { + padding: 5px 0; + display: flex; + font-size: 11px; + justify-content: space-between; + align-items: center; + } + + input { + -webkit-autocomplete: off; + -webkit-autocorrect: off; + -webkit-spellcheck: false; + outline: none; + width: calc(100% - 80px); + padding: 4px; + margin-bottom: 10px; + border-radius: 15px; + border: none; + background: rgba(211, 197, 122, 0.4); + background-color: rgba(33, 73, 77, 0.702); + backdrop-filter: saturate(180%) blur(30px); + -webkit-backdrop-filter: saturate(180%) blur(30px); + color: whitesmoke; + font-size: 12px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + text-shadw: 2px 2px 4px rgba(0, 0, 0, 0.5); + transition: background-color 0.3s ease, filter 0.3s ease; + + &::placeholder { + color: #ccc; } } - - .TilePropertiesMenu__button { - position: fixed; - top: 46cqi; - left: 5cqi; + + button { background: rgba(211, 197, 122, 0.4); background-color: rgba(33, 73, 77, 0.702); backdrop-filter: saturate(180%) blur(30px); -webkit-backdrop-filter: saturate(180%) blur(30px); - padding: 10px 10px; + padding: 5px 5px; border-radius: 25px; - border-width: 0px; - font-size: 16px; - z-index: 1000; /* Sicherstellen, dass es über anderen Elementen liegt */ + border-width: 0; + font-size: 10px; + z-index: 1000; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease, filter 0.3s ease; + } - &:disabled { - background-color: rgba(0, 0, 0, 0.645); - cursor: not-allowed; - animation: none; - filter: grayscale(100%); - } - - &:hover { - background-color: #405368; - } - - &:not(:disabled) { - animation: pulse 4s ease-in-out infinite; - } - - &.success { - animation: successAnimation 1s ease-in-out; /* Erfolgsanimation anwenden */ +} + +.TilePropertiesMenu__modal-confirm { + position: fixed; + top: 1cqb; + right: 2cqb; + width: 50px; + border-radius: 15px; + border: none; + padding: 10px 15px; + color: rgb(196, 31, 31); + cursor: pointer; + transition: background-color 0.3s ease; + background-color: rgba(0, 255, 26, 0.4); + filter: grayscale(0%); + + + + &:disabled { + box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1); + background-color: rgb(140, 36, 36); + cursor: not-allowed; + filter: grayscale(50%); + transition: background-color 0.3s ease-in-out, filter 0.3s ease-in-out; + + &:active { + animation: shake 0.5s ease; } } - +} + +@media (orientation: landscape) { .TilePropertiesMenu__modal { position: fixed; - top: 64cqi; - left: 34cqi; - width: fit-content; - height: fit-content; - transform: translate(-50%, -50%); - padding: 0px; - border: 0px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - z-index: 1001; /* Sicherstellen, dass es über dem Button liegt */ - opacity: 0; /* Start mit 0 Opazität */ - animation: fadeIn 0.5s forwards ease-in-out; /* Animation anwenden */ + top: 30cqi; + right: 0; + max-height: 250px; + width: 300px; + background-color: rgba(33, 73, 77, 0.9); + padding: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + border-radius: 0 10px 10px 0; + overflow-y: auto; + z-index: 1001; } - - .TilePropertiesMenu__modal-confirm { - border-radius: 15px; - border: none; - padding: 10px 20px; - color: whitesmoke; - cursor: pointer; - transition: background-color 0.3s ease; - background: rgba(211, 197, 122, 0.4); - background-color: rgba(33, 73, 77, 0.702); - backdrop-filter: saturate(180%) blur(30px); - -webkit-backdrop-filter: saturate(180%) blur(30px); - - &:disabled { - background-color: #6c757d; /* Grau */ - cursor: not-allowed; - } - - &:hover:not(:disabled) { - background-color: #218838; /* Dunkleres Grün beim Hover */ - } - } \ No newline at end of file + + .TilePropertiesMenu__button { + top: 7cqi; + left: 5cqi; + } +} \ No newline at end of file diff --git a/src/components/TilePropertiesMenu/TilePropertiesMenu.tsx b/src/components/TilePropertiesMenu/TilePropertiesMenu.tsx index 27c3b20..09d4cba 100644 --- a/src/components/TilePropertiesMenu/TilePropertiesMenu.tsx +++ b/src/components/TilePropertiesMenu/TilePropertiesMenu.tsx @@ -1,15 +1,25 @@ import { useStore } from '../../store/store'; +import { useRef } from 'react'; import './TilePropertiesMenu.scss'; import { createPortal } from 'react-dom'; import { useClickOutside } from '../../hooks'; import { useState } from 'react'; +import { Vector3, Mesh } from 'three'; + export const TilePropertiesMenu = () => { const [modalOpen, setModalOpen] = useState(false); const [success, setSuccess] = useState(false); + const [locationTitle, setLocationTitle] = useState(''); const selected = useStore((state) => state.selected); const modalRef = useClickOutside(() => setModalOpen(false)); + const setCamera = useStore((state) => state.setCamera); + + + const locations = useStore((state) => state.locations); + const waterRef = useRef(null!); + const saveLocation = useStore((state) => state.saveLocation); @@ -17,16 +27,17 @@ export const TilePropertiesMenu = () => { saveLocation(t, x, y); selected!.object.userData.update(); setModalOpen(false); + setLocationTitle(''); }; return ( <> @@ -34,19 +45,47 @@ export const TilePropertiesMenu = () => { {modalOpen && createPortal(
+ setLocationTitle(e.target.value)} + placeholder="Enter location title" + className="TilePropertiesMenu__input" + /> + +

Saved Locations

+ +
    + {Object.entries(locations).map(([title, { positionX, positionY }]) => ( +
  • + {title}: ({positionX.toFixed(2)}, {positionY.toFixed(2)}) + +
    • + ))} +
, document.body, - )} + ) + } ); }; diff --git a/src/store/store.ts b/src/store/store.ts index 2c5e2f7..411bafc 100644 --- a/src/store/store.ts +++ b/src/store/store.ts @@ -4,7 +4,6 @@ import { persist, devtools } from 'zustand/middleware'; import { BuildingType } from '../components/Building/Building'; import { BuildingSellBenefits } from '../components/Building/buildingFinancials'; import { getCostsOfBuilding, getOutputOfBuilding } from '../components/Building/buildings'; -import { title } from 'process'; export type Ressources = 'wood' | 'stone' | 'gold' | 'food' | 'villager'; @@ -43,7 +42,8 @@ export type Actions = { unlock: (x: number, y: number, range: number) => void; setSelected: (object: SelectedObject | undefined) => void; saveLocation: (title: string, x: number, y: number) => void; - removeLocation: (title: string, x: number, y: number) => void; + listLocations: () => {}; + removeLocation: (title: string) => void; setCamera: (position: Vector3, lookAt: Vector3) => void; reset: () => void; }; @@ -73,7 +73,7 @@ const initialState: State = { export const useStore = create()( devtools( persist( - (set) => ({ + (set, get) => ({ ...initialState, addBuilding: (x, y, building) => set((state) => { @@ -99,25 +99,28 @@ export const useStore = create()( buildingOutputs: newBuildingOutputs, }; }), - // add new saved location - saveLocation: (t, x, y) => - set((state) => { - const newLocationType = { ...state.locations }; - newLocationType[t] = { positionX: x, positionY: y }; - return { - locations: newLocationType, - }; - }), - // remove saved location - removeLocation: (t, x, y) => - set((state) => { - const newLocationType = { ...state.locations }; - newLocationType[t] = { positionX: x, positionY: y }; - delete newLocationType[t]; - return { - locations: newLocationType, }; - }), - + // add new saved location + saveLocation: (t, x, y) => + set((state) => { + const newLocationType = { ...state.locations }; + newLocationType[t] = { positionX: x, positionY: y }; + return { + locations: newLocationType, + }; + }), + // remove saved location + removeLocation: (t) => + set((state) => { + const newLocationType = { ...state.locations }; + delete newLocationType[t]; + return { + locations: newLocationType, + }; + }), + // list saved locations + listLocations: () => { + return get().locations; + }, removeBuilding: (x, y) => set((state) => { const building = state.buildings[x][y]; @@ -127,7 +130,7 @@ export const useStore = create()( state.lock(x, y, 8); } - // TODO: remove output froom state.buildingOutputs + // TODO: remove output from state.buildingOutputs const newBuildingOutputs = state.buildingOutputs; Object.entries(getOutputOfBuilding(building)).forEach((ressource) => { newBuildingOutputs[ressource[0] as Ressources] -= ressource[1]; @@ -208,4 +211,4 @@ export const useStore = create()( }, ), ), -); +); \ No newline at end of file From c95faa82ba37f5a86a2c20e0e3369a5e100435a3 Mon Sep 17 00:00:00 2001 From: BuildTools Date: Wed, 11 Sep 2024 17:14:04 +0200 Subject: [PATCH 12/28] Added animations and improved UI consistency --- src/components/BuildMenu/BuildMenu.scss | 45 ++++- src/components/BuildMenu/BuildMenu.tsx | 2 +- .../BuildMenuEntry/BuildMenuEntry.scss | 156 +++++++++++++----- .../BuildMenuEntry/BuildMenuEntry.tsx | 2 +- src/components/Map/Map.tsx | 15 +- .../RessourceMenu/RessourceMenu.scss | 32 ++-- .../RessourceMenu/RessourceMenu.tsx | 92 +++++------ 7 files changed, 230 insertions(+), 114 deletions(-) diff --git a/src/components/BuildMenu/BuildMenu.scss b/src/components/BuildMenu/BuildMenu.scss index 4e4964a..bb80e64 100644 --- a/src/components/BuildMenu/BuildMenu.scss +++ b/src/components/BuildMenu/BuildMenu.scss @@ -1,5 +1,33 @@ $build-menu-height: 64px; +@keyframes fadeIn { + from { + opacity: 0; + filter: blur(4px); + } + to { + opacity: 1; + filter: blur(0); + } +} + +@keyframes fadeOut { + from { + opacity: 1; + transform: translateY(0); + } + to { + opacity: 0; + transform: translateY(10px); + } +} + +.fade-in { + animation: fadeIn 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) both; + will-change: opacity, transform, filter; +} + + .build-menu { position: fixed; left: 50cqi; @@ -28,20 +56,31 @@ $build-menu-height: 64px; backdrop-filter: saturate(180%) blur(30px); -webkit-backdrop-filter: saturate(180%) blur(30px); - opacity: 0; - transition: opacity 0.2s ease-out, transform 0.5s ease-out 0.2s; - transform: translateX(-50%); + + animation: fadeOut 0.20s forwards ease-in-out; + transform: translateX(50%); + &--visible { opacity: 1; + animation: fadeIn 0.18s forwards ease-in-out; transform: translateX(-50%) translateY(0); height: $build-menu-height; } + &--hidden { + opacity: 0; + animation: fadeOut 0.18s forwards ease-in-out; + transform: translateX(0) translateY(10px); + height: $build-menu-height; + } + @media (orientation: landscape) { max-height: 30%; left: 20cqi; top: 36cqi; } + + } \ No newline at end of file diff --git a/src/components/BuildMenu/BuildMenu.tsx b/src/components/BuildMenu/BuildMenu.tsx index 290246c..a492d9e 100644 --- a/src/components/BuildMenu/BuildMenu.tsx +++ b/src/components/BuildMenu/BuildMenu.tsx @@ -60,7 +60,7 @@ export const BuildMenu = () => {
0), })} > {selected && existingBuilding === undefined ? ( diff --git a/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.scss b/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.scss index a8606fe..4df803e 100644 --- a/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.scss +++ b/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.scss @@ -1,41 +1,7 @@ -.building-menu__entry { - all: unset; - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - font-size: 12px; - height: 100%; - width: fit-content; - cursor: pointer; - user-select: none; - - &:hover .building-menu__entry-icon { - background: rgba(255, 255, 255, 0.6); - } -} - -.building-menu__entry-icon { - height: 32px; - width: 32px; - font-size: 20px; - line-height: 30px; - margin: 0; - 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); -} .building-menu__modal { position: fixed; - top: 48%; + top: 45%; left: 50cqi; transform: translate(-50%, -50%); display: flex; @@ -46,14 +12,14 @@ backdrop-filter: saturate(180%) blur(30px); -webkit-backdrop-filter: saturate(180%) blur(30px); border-radius: 8px; - width: 190px; - min-height: 196px; + width: 60%; + z-index: 1000 ; 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); + background-color: rgba(20, 44, 46, 0.802); } box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6); text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); @@ -63,6 +29,12 @@ gap: 16px; color: #d5d5d5; + p{ + font-size: 0.9em; + overflow-y: auto; + min-height: 30%; + } + h2 { margin: 0; @@ -122,11 +94,11 @@ .building-menu__modal-close { all: unset; position: absolute; - top: 8px; - right: 8px; + top: 10px; + right: 16px; padding: 4px; cursor: pointer; - font-size: 0.8em; + font-size: 1.2em; font-weight: bold; transition: all 0.2s cubic-bezier(0.67, 0.38, 0.09, 2.1); @@ -134,8 +106,104 @@ transform: scale(1.05); } } -} -h3 { - margin: 0; + @media (orientation: landscape) { + h3{ + font-size: 1.0em; + } + h2{ + font-size: 1.2em; + } + p{ + font-size: 0.9em; + overflow-y: auto; + min-height: 30%; + } + width: fit-content; + height: 60%; + top: 50%; + gap:0px; + max-width: 42%; + max-height: 60%; + + ul li { + width: 20% + } + ul{ + display: flex; + flex-direction: column; + align-items: left; + font-size: 0.8em; + } + padding: 26px 32px; + + .building-menu__modal-accept{ + font-size: 0.9em; + padding: 6px; + width: 35%; + position:relative; + top: -31px; + left: 35%; + height: 20px; + border-radius: 6px; + background: rgba(16, 162, 58, 0.645); + + } + + + .building-menu__modal-close { + all:unset; + position: absolute; + top: 12px; + right: 8px; + font-size: 15px; + padding: 2px; + border-radius: 50%; + cursor: pointer; + transition: all 0.2s cubic-bezier(0.67, 0.38, 0.09, 2.1); + + &:hover { + transform: scale(1.05); + } + } + } } + +.building-menu__entry { + all: unset; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + font-size: 12px; + height: 100%; + width: fit-content; + cursor: pointer; + user-select: none; + + &:disabled { + filter: grayscale(1); + animation: none; + color: rgba(255, 255, 255, 0.5); + box-shadow: 0 0px 0px rgba(0, 0, 0, 0.6); + text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.5); + + } + .building-menu__entry-icon { + height: 32px; + width: 32px; + font-size: 20px; + line-height: 30px; + margin: 0; + border: 1px solid rgb(47, 192, 57); + color: rgb(47, 192, 57); + border-radius: 100%; + text-align: center; + transition: background 0.2s ease-out; + background-color: rgb(47, 192, 57); + } + + &:hover .building-menu__entry-icon { + background: rgba(255, 255, 255, 0.6); + } +} \ No newline at end of file diff --git a/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.tsx b/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.tsx index 7021e6c..e8501dd 100644 --- a/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.tsx +++ b/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.tsx @@ -33,7 +33,7 @@ const BuildingMenuEntry = ({ - + )}
); }; From 823639ef344dc8e0fb53152fe3df3052833c6d09 Mon Sep 17 00:00:00 2001 From: BuildTools Date: Wed, 11 Sep 2024 23:09:00 +0200 Subject: [PATCH 13/28] Added fadeout animation --- src/components/BuildMenu/BuildMenu.scss | 12 ++- .../BuildMenuEntry/BuildMenuEntry.scss | 59 ++++++----- .../RessourceMenu/RessourceMenu.scss | 97 ++++++++++--------- .../RessourceMenu/RessourceMenu.tsx | 72 +++++++------- .../TilePropertiesMenu.scss | 84 ++++++++-------- 5 files changed, 167 insertions(+), 157 deletions(-) diff --git a/src/components/BuildMenu/BuildMenu.scss b/src/components/BuildMenu/BuildMenu.scss index bb80e64..e793a66 100644 --- a/src/components/BuildMenu/BuildMenu.scss +++ b/src/components/BuildMenu/BuildMenu.scss @@ -14,11 +14,11 @@ $build-menu-height: 64px; @keyframes fadeOut { from { opacity: 1; - transform: translateY(0); + filter: blur(0); } to { opacity: 0; - transform: translateY(10px); + filter: blur(4px); } } @@ -27,6 +27,12 @@ $build-menu-height: 64px; will-change: opacity, transform, filter; } +fade-out { + animation: fadeOut 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) both; + will-change: opacity, transform, filter; +} + + .build-menu { position: fixed; @@ -71,7 +77,7 @@ $build-menu-height: 64px; &--hidden { opacity: 0; - animation: fadeOut 0.18s forwards ease-in-out; + animation: fadeOut 0.18s backwards ease-in-out; transform: translateX(0) translateY(10px); height: $build-menu-height; } diff --git a/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.scss b/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.scss index 4df803e..f82b03b 100644 --- a/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.scss +++ b/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.scss @@ -1,4 +1,3 @@ - .building-menu__modal { position: fixed; top: 45%; @@ -13,13 +12,13 @@ -webkit-backdrop-filter: saturate(180%) blur(30px); border-radius: 8px; width: 60%; - z-index: 1000 ; - background-color: rgba(33, 73, 77, 0.702); + z-index: 1000; + background-color: rgba(33, 73, 77, 0.702); @media (prefers-color-scheme: light) { - background-color: #d3c57a66; + background-color: #d3c57a66; } @media (prefers-color-scheme: dark) { - background-color: rgba(20, 44, 46, 0.802); + background-color: rgba(20, 44, 46, 0.802); } box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6); text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); @@ -29,7 +28,7 @@ gap: 16px; color: #d5d5d5; - p{ + p { font-size: 0.9em; overflow-y: auto; min-height: 30%; @@ -68,7 +67,7 @@ width: 48px; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); align-self: center; - + cursor: pointer; transition: all 0.2s cubic-bezier(0.67, 0.38, 0.09, 2.1); margin-top: 8px; @@ -81,13 +80,12 @@ .building-menu__modal-accept[disabled] { background: rgba(178, 192, 182, 0.645); - cursor:not-allowed; - transition:none; - + cursor: not-allowed; + transition: none; &:hover { transform: none; - box-shadow:none + box-shadow: none; } } @@ -108,13 +106,13 @@ } @media (orientation: landscape) { - h3{ - font-size: 1.0em; + h3 { + font-size: 1em; } - h2{ + h2 { font-size: 1.2em; } - p{ + p { font-size: 0.9em; overflow-y: auto; min-height: 30%; @@ -122,37 +120,35 @@ width: fit-content; height: 60%; top: 50%; - gap:0px; + gap: 0px; max-width: 42%; max-height: 60%; ul li { - width: 20% + width: 20%; } - ul{ + ul { display: flex; - flex-direction: column; - align-items: left; + flex-direction: column; + align-items: left; font-size: 0.8em; } - padding: 26px 32px; - - .building-menu__modal-accept{ + padding: 26px 32px; + + .building-menu__modal-accept { font-size: 0.9em; padding: 6px; width: 35%; - position:relative; + position: relative; top: -31px; left: 35%; height: 20px; border-radius: 6px; background: rgba(16, 162, 58, 0.645); - - } - + } .building-menu__modal-close { - all:unset; + all: unset; position: absolute; top: 12px; right: 8px; @@ -161,7 +157,7 @@ border-radius: 50%; cursor: pointer; transition: all 0.2s cubic-bezier(0.67, 0.38, 0.09, 2.1); - + &:hover { transform: scale(1.05); } @@ -187,7 +183,6 @@ color: rgba(255, 255, 255, 0.5); box-shadow: 0 0px 0px rgba(0, 0, 0, 0.6); text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.5); - } .building-menu__entry-icon { height: 32px; @@ -204,6 +199,6 @@ } &:hover .building-menu__entry-icon { - background: rgba(255, 255, 255, 0.6); + background: rgba(255, 255, 255, 0.6); } -} \ No newline at end of file +} diff --git a/src/components/RessourceMenu/RessourceMenu.scss b/src/components/RessourceMenu/RessourceMenu.scss index 4afbb9f..f29b379 100644 --- a/src/components/RessourceMenu/RessourceMenu.scss +++ b/src/components/RessourceMenu/RessourceMenu.scss @@ -1,3 +1,5 @@ +$border-radius: 50px; + @keyframes fadeOut { from { opacity: 1; @@ -11,7 +13,8 @@ } @keyframes subtleBounce { - 0%, 100% { + 0%, + 100% { transform: translateY(0); } 50% { @@ -19,66 +22,61 @@ } } -@keyframes delayedFadeOut { - 0% { - opacity: 1; - height: auto; - } - 90% { +@keyframes fadeOut { + from { opacity: 1; - height: auto; + transform: translateY(0); } - 100% { + to { opacity: 0; - height: 0; - overflow: hidden; + transform: translateY(-10px); /* Optional: fügt eine leichte Bewegung hinzu */ } } - .ressource-menu { margin: 0 auto; position: fixed; top: 2cqb; //Temp position for gpu overlay left: 50cqi; - height: auto; - padding: 4px; + height: 60px; + padding: 8px 16px; width: fit-content; - background-color: rgba(33, 73, 77, 0.702); + background-color: rgba(33, 73, 77, 0.702); display: flex; flex-direction: column; justify-content: center; align-items: center; - font-size: 12px; - color: #E6E6E6; + color: #e6e6e6; backdrop-filter: saturate(180%) blur(30px); -webkit-backdrop-filter: saturate(180%) blur(30px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); - text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); - transform: translateX(-50%); - - border-radius: 20px; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); + transform: translateX(-50%); + transition: + height 1s ease-in-out, + max-height 1s ease-in-out, + border-radius 0.4s ease-in-out, + padding 1s ease-out, + width 1s ease-in-out; + border-radius: 45px; z-index: 1000; - - - th { - animation: subtleBounce 2s infinite ease-in-out; - font-size: 20px; - padding: 4px; - text-align: left; - } - table { - width: 100%; + animation: fadeIn 1s ease-out; + width: 100%; border-collapse: collapse; + white-space: nowrap; + } + th { + animation: subtleBounce 2s infinite ease-in-out; + font-size: 16px; + text-align: center; } td { - padding: 8px; - text-align: left; - width: 35px; - font-size: 11px; + text-align: center; + font-size: 10px; + padding: 4px 8px; } button { @@ -89,41 +87,48 @@ border-style: hidden; background: rgba(255, 94, 71, 0.7); color: wheat; - transition: visibility 0.5s ease-out, opacity 0.5s ease-out; - + transition: + visibility 0.5s ease-out, + opacity 0.5s ease-out; } @media (prefers-color-scheme: light) { - background-color: #d3c57a66; + background-color: #d3c57a66; } @media (prefers-color-scheme: dark) { - background-color: rgba(33, 73, 77, 0.702); + background-color: rgba(33, 73, 77, 0.702); } @media (orientation: landscape) { th { font-size: 16px; - padding: 4px; - text-align: left; + padding: 4px; + text-align: left; } height: auto; - + button { display: none; } - - .landscape-view { display: contents; - } .portrait-view { display: none; } + } +} +.ressource-menu-extended { + height: fit-content; + border-radius: 20px; +} +.ressource-menu-extended-items { + td { + animation: fadeIn 0.3s ease-in; } -} \ No newline at end of file +} diff --git a/src/components/RessourceMenu/RessourceMenu.tsx b/src/components/RessourceMenu/RessourceMenu.tsx index 16c665e..6ec919e 100644 --- a/src/components/RessourceMenu/RessourceMenu.tsx +++ b/src/components/RessourceMenu/RessourceMenu.tsx @@ -19,12 +19,17 @@ export const RessourceMenu = () => { }; return ( -
+
- + @@ -32,32 +37,29 @@ export const RessourceMenu = () => { - {selected && ( - - - - - - - - - - )} - <> - + + + + + + + + + <> + {selected && ( + @@ -67,21 +69,19 @@ export const RessourceMenu = () => { - + )} +
💰💰 🪵 🪨 🍟
- ∑ - - {Math.floor(ressources.gold)} ({valueSmoothener(buildingOutputs.gold)}) - - {Math.floor(ressources.wood)} ({valueSmoothener(buildingOutputs.wood)}) - - {Math.floor(ressources.stone)} ({valueSmoothener(buildingOutputs.stone)}) - - {Math.floor(ressources.food)} ({valueSmoothener(buildingOutputs.food)}) - {Math.floor(ressources.villager)}
+ ∑ + + {Math.floor(ressources.gold)} ({valueSmoothener(buildingOutputs.gold)}) + + {Math.floor(ressources.wood)} ({valueSmoothener(buildingOutputs.wood)}) + + {Math.floor(ressources.stone)} ({valueSmoothener(buildingOutputs.stone)}) + + {Math.floor(ressources.food)} ({valueSmoothener(buildingOutputs.food)}) + + {Math.floor(ressources.villager)} +
⏳ {remainingRessources(valueSmoothener(buildingOutputs.food), Math.floor(ressources.food))}
- {selected && ( - - + {selected && ( + + - )} + )}
); }; diff --git a/src/components/TilePropertiesMenu/TilePropertiesMenu.scss b/src/components/TilePropertiesMenu/TilePropertiesMenu.scss index b6c679d..174864b 100644 --- a/src/components/TilePropertiesMenu/TilePropertiesMenu.scss +++ b/src/components/TilePropertiesMenu/TilePropertiesMenu.scss @@ -5,7 +5,7 @@ } to { opacity: 1; - filter: blur(0); + filter: blur(0px); } } @@ -31,23 +31,32 @@ } @keyframes shake { - 0% { transform: translateX(0); } - 25% { transform: translateX(-5px); } - 50% { transform: translateX(5px); } - 75% { transform: translateX(-5px); } - 100% { transform: translateX(0); } + 0% { + transform: translateX(0); + } + 25% { + transform: translateX(-5px); + } + 50% { + transform: translateX(5px); + } + 75% { + transform: translateX(-5px); + } + 100% { + transform: translateX(0); + } } - @keyframes successAnimation { 0% { - background-color: rgba(33, 73, 77, 0.702); + background-color: rgba(33, 73, 77, 0.702); } 50% { - background-color: rgba(33, 150, 77, 0.702); + background-color: rgba(33, 150, 77, 0.702); } 100% { - background-color: rgba(33, 73, 77, 0.702); + background-color: rgba(33, 73, 77, 0.702); } } @@ -63,7 +72,7 @@ .TilePropertiesMenu__button { position: fixed; - top: 56cqi; + top: 36cqi; left: 5cqi; background: rgba(211, 197, 122, 0.4); background-color: rgba(33, 73, 77, 0.702); @@ -76,14 +85,11 @@ z-index: 1000; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); - transition: background-color 0.3s ease, filter 0.3s ease; + transition: display 0.3s ease-in-out; &:disabled { - background-color: rgba(33, 73, 77, 0.3); - cursor: not-allowed; - animation: none; - filter: grayscale(100%); - transition: background-color 0.3s ease-in-out, filter 0.3s ease-in-out; + animation: fadeOut 0.18s forwards ease-out; + transition: background 0.2s ease-in-out; &:active { animation: shake 0.5s ease; @@ -98,7 +104,8 @@ .TilePropertiesMenu__modal { margin: 0 auto; position: fixed; - top: 6cqb; + + top: 2cqb; left: 50cqi; position: fixed; transform: translate(-50%, 0); @@ -106,7 +113,7 @@ height: auto; min-height: 132px; max-height: 90vh; - overflow: hidden; + overflow: hidden; padding: 10px; border: 0; background-color: rgb(33, 73, 77); @@ -127,12 +134,10 @@ list-style-type: none; padding: 0; margin: 0; - max-height: 50px; - overflow-y: scroll; + max-height: 50px; + overflow-y: scroll; color: beige; - flex-grow: 1; - - + flex-grow: 1; } li { @@ -160,8 +165,9 @@ color: whitesmoke; font-size: 12px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - text-shadw: 2px 2px 4px rgba(0, 0, 0, 0.5); - transition: background-color 0.3s ease, filter 0.3s ease; + transition: + background-color 0.3s ease, + filter 0.3s ease; &::placeholder { color: #ccc; @@ -180,9 +186,7 @@ z-index: 1000; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); - transition: background-color 0.3s ease, filter 0.3s ease; } - } .TilePropertiesMenu__modal-confirm { @@ -199,14 +203,14 @@ background-color: rgba(0, 255, 26, 0.4); filter: grayscale(0%); - - &:disabled { box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1); background-color: rgb(140, 36, 36); cursor: not-allowed; filter: grayscale(50%); - transition: background-color 0.3s ease-in-out, filter 0.3s ease-in-out; + transition: + background-color 0.3s ease-in-out, + filter 0.3s ease-in-out; &:active { animation: shake 0.5s ease; @@ -218,19 +222,19 @@ .TilePropertiesMenu__modal { position: fixed; top: 30cqi; - right: 0; - max-height: 250px; - width: 300px; - background-color: rgba(33, 73, 77, 0.9); - padding: 10px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + right: 0; + max-height: 250px; + width: 300px; + background-color: rgba(33, 73, 77, 0.9); + padding: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 0 10px 10px 0; - overflow-y: auto; - z-index: 1001; + overflow-y: auto; + z-index: 1001; } .TilePropertiesMenu__button { top: 7cqi; left: 5cqi; } -} \ No newline at end of file +} From eb6dfa6e7a0b75f4ce180a515e1dcf5b40c5af09 Mon Sep 17 00:00:00 2001 From: BuildTools Date: Wed, 11 Sep 2024 23:11:42 +0200 Subject: [PATCH 14/28] Code formatting --- src/components/BuildMenu/BuildMenu.scss | 29 +++++++---------- src/components/Map/Map.tsx | 10 +++--- .../TilePropertiesMenu/TilePropertiesMenu.tsx | 31 ++++++++----------- src/store/store.ts | 2 +- 4 files changed, 29 insertions(+), 43 deletions(-) diff --git a/src/components/BuildMenu/BuildMenu.scss b/src/components/BuildMenu/BuildMenu.scss index e793a66..836adca 100644 --- a/src/components/BuildMenu/BuildMenu.scss +++ b/src/components/BuildMenu/BuildMenu.scss @@ -32,46 +32,41 @@ fade-out { will-change: opacity, transform, filter; } - - .build-menu { position: fixed; left: 50cqi; - bottom: calc(env(safe-area-inset-bottom) + 8%); + bottom: calc(env(safe-area-inset-bottom) + 8%); border-radius: 20px; height: min-content; width: fit-content; - background-color: rgba(33, 73, 77, 0.702); + background-color: rgba(33, 73, 77, 0.702); @media (prefers-color-scheme: light) { - background-color: #d3c57a66; + background-color: #d3c57a66; } @media (prefers-color-scheme: dark) { - background-color: rgba(33, 73, 77, 0.702); + 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; + color: #e6e6e6; display: flex; flex-direction: row; justify-content: center; - align-items:baseline; + align-items: baseline; padding: 8px; gap: 32px; box-sizing: border-box; backdrop-filter: saturate(180%) blur(30px); -webkit-backdrop-filter: saturate(180%) blur(30px); - - animation: fadeOut 0.20s forwards ease-in-out; - transform: translateX(50%); - - + animation: fadeOut 0.2s forwards ease-in-out; + transform: translateX(50%); &--visible { opacity: 1; animation: fadeIn 0.18s forwards ease-in-out; - transform: translateX(-50%) translateY(0); + transform: translateX(-50%) translateY(0); height: $build-menu-height; } @@ -85,8 +80,6 @@ fade-out { @media (orientation: landscape) { max-height: 30%; left: 20cqi; - top: 36cqi; + top: 36cqi; } - - -} \ No newline at end of file +} diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx index daa4b41..865ed49 100644 --- a/src/components/Map/Map.tsx +++ b/src/components/Map/Map.tsx @@ -10,17 +10,15 @@ import { tileShader } from '../../helpers/shader'; import { useStore } from '../../store/store'; import * as THREE from 'three'; - - const RENDER_DISTANCE = 32; const MAP_LENGTH = RENDER_DISTANCE * 2 + 1; const MAP_SIZE = Math.pow(MAP_LENGTH, 2); const waterMaterial = new THREE.MeshPhongMaterial({ color: 0x006994, - shininess: 60, + shininess: 60, transparent: true, - opacity: 0.7, + opacity: 0.7, }); // initialize three.js objects outside of component to avoid re-creating them on every render => better performance @@ -109,8 +107,8 @@ export const Map = () => { return ( <> - - + + {/* TODO: fix type */} diff --git a/src/components/TilePropertiesMenu/TilePropertiesMenu.tsx b/src/components/TilePropertiesMenu/TilePropertiesMenu.tsx index 09d4cba..21bd10d 100644 --- a/src/components/TilePropertiesMenu/TilePropertiesMenu.tsx +++ b/src/components/TilePropertiesMenu/TilePropertiesMenu.tsx @@ -6,20 +6,17 @@ import { useClickOutside } from '../../hooks'; import { useState } from 'react'; import { Vector3, Mesh } from 'three'; - export const TilePropertiesMenu = () => { const [modalOpen, setModalOpen] = useState(false); const [success, setSuccess] = useState(false); - const [locationTitle, setLocationTitle] = useState(''); + const [locationTitle, setLocationTitle] = useState(''); const selected = useStore((state) => state.selected); const modalRef = useClickOutside(() => setModalOpen(false)); const setCamera = useStore((state) => state.setCamera); - const locations = useStore((state) => state.locations); - const waterRef = useRef(null!); - + const waterRef = useRef(null!); const saveLocation = useStore((state) => state.saveLocation); @@ -29,19 +26,19 @@ export const TilePropertiesMenu = () => { setModalOpen(false); setLocationTitle(''); }; - + return ( <> - + {modalOpen && createPortal(
@@ -60,11 +57,11 @@ export const TilePropertiesMenu = () => { handleAdd(locationTitle, x, y); }} > - 💾 + 💾 - +

Saved Locations

- +
    {Object.entries(locations).map(([title, { positionX, positionY }]) => (
  • @@ -72,22 +69,20 @@ export const TilePropertiesMenu = () => {
    • ))}
, document.body, - ) - } + )} ); }; -export default TilePropertiesMenu; \ No newline at end of file +export default TilePropertiesMenu; diff --git a/src/store/store.ts b/src/store/store.ts index 411bafc..a1ff0cb 100644 --- a/src/store/store.ts +++ b/src/store/store.ts @@ -211,4 +211,4 @@ export const useStore = create()( }, ), ), -); \ No newline at end of file +); From 8dba6aa1e82527398b89ebeea6dbc9790fcda7d7 Mon Sep 17 00:00:00 2001 From: BuildTools Date: Thu, 12 Sep 2024 02:08:11 +0200 Subject: [PATCH 15/28] Removed warnings, fixed location saving --- .../TilePropertiesMenu/TilePropertiesMenu.tsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/src/components/TilePropertiesMenu/TilePropertiesMenu.tsx b/src/components/TilePropertiesMenu/TilePropertiesMenu.tsx index 21bd10d..430a49b 100644 --- a/src/components/TilePropertiesMenu/TilePropertiesMenu.tsx +++ b/src/components/TilePropertiesMenu/TilePropertiesMenu.tsx @@ -1,14 +1,12 @@ import { useStore } from '../../store/store'; -import { useRef } from 'react'; +import { useState } from 'react'; import './TilePropertiesMenu.scss'; import { createPortal } from 'react-dom'; import { useClickOutside } from '../../hooks'; -import { useState } from 'react'; -import { Vector3, Mesh } from 'three'; +import { Vector3 } from 'three'; export const TilePropertiesMenu = () => { const [modalOpen, setModalOpen] = useState(false); - const [success, setSuccess] = useState(false); const [locationTitle, setLocationTitle] = useState(''); const selected = useStore((state) => state.selected); @@ -16,7 +14,6 @@ export const TilePropertiesMenu = () => { const setCamera = useStore((state) => state.setCamera); const locations = useStore((state) => state.locations); - const waterRef = useRef(null!); const saveLocation = useStore((state) => state.saveLocation); @@ -30,7 +27,7 @@ export const TilePropertiesMenu = () => { return ( <>
, document.body, @@ -75,8 +74,8 @@ const BuildingMenuEntry = ({ buildingToRemove && ( <> {modalOpen && createPortal( @@ -96,7 +95,7 @@ const BuildingMenuEntry = ({ remove , document.body, From 910dac06d96ebb90413bfffd6fc727bfea4232b9 Mon Sep 17 00:00:00 2001 From: BuildTools Date: Thu, 12 Sep 2024 05:37:17 +0200 Subject: [PATCH 20/28] Fixed animation not appearing --- .../BuildMenuEntry/BuildMenuEntry.scss | 42 +++++++++++++++++-- .../BuildMenuEntry/BuildMenuEntry.tsx | 17 ++++---- .../RessourceMenu/RessourceMenu.scss | 7 ++-- 3 files changed, 50 insertions(+), 16 deletions(-) diff --git a/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.scss b/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.scss index c15b53a..7fbf8bd 100644 --- a/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.scss +++ b/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.scss @@ -20,15 +20,27 @@ } } -@keyframes blink { +@keyframes rgbPulse { 0% { - opacity: 1; + background-color: rgb(255, 0, 0); /* Rot */ + } + 16% { + background-color: rgb(255, 255, 0); /* Gelb */ + } + 33% { + background-color: rgb(0, 255, 0); /* Grün */ } 50% { - opacity: 0; + background-color: rgb(0, 255, 255); /* Cyan */ + } + 66% { + background-color: rgb(0, 0, 255); /* Blau */ + } + 83% { + background-color: rgb(255, 0, 255); /* Magenta */ } 100% { - opacity: 1; + background-color: rgb(255, 0, 0); /* Zurück zu Rot */ } } @@ -120,6 +132,24 @@ } } + .building-menu__modal-accept-delete { + all: unset; + background: rgba(185, 12, 12, 0.439); + padding: 8px; + color:blueviolet; + border-radius: 50%; + text-align: center; + font-size: 20px; + height: 48px; + width: 48px; + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); + align-self: center; + animation: fadeIn 0.4s forwards ease-in-out, rgbPulse 3s infinite; + cursor: pointer; + transition: all 0.2s cubic-bezier(0.67, 0.38, 0.09, 2.1); + margin-top: 8px; + } + .building-menu__modal-accept { all: unset; background: rgba(12, 185, 61, 0.645); @@ -211,6 +241,7 @@ border-radius: 6px; background: rgba(16, 162, 58, 0.645); } + .building-menu__modal-close { all: unset; @@ -242,6 +273,9 @@ cursor: pointer; user-select: none; + + + &:disabled { filter: grayscale(1); color: rgba(114, 110, 110, 0.5); diff --git a/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.tsx b/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.tsx index 67e6bcb..1c23947 100644 --- a/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.tsx +++ b/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.tsx @@ -49,7 +49,8 @@ const BuildingMenuEntry = ({
    {Object.entries(building.costs).map(([key, value]) => (
  • - {value.emoji} {value.amount * -1} + {value.emoji}{' '} + {value.amount * -1}
    • ))}
@@ -75,25 +76,23 @@ const BuildingMenuEntry = ({ <> {modalOpen && createPortal(
-

remove {buildingToRemove.name}?

+

Delete {buildingToRemove.name}?

- Are you sure you want to remove this {buildingToRemove.name}? You will be refunded {SELLFACTOR * 100}% - of the building costs. + Do you wish to dismantle the {buildingToRemove.name}? You will reclaim {SELLFACTOR * 100}% of its + resources.

+ >💲 diff --git a/src/components/RessourceMenu/RessourceMenu.scss b/src/components/RessourceMenu/RessourceMenu.scss index 96e9f2c..89b0535 100644 --- a/src/components/RessourceMenu/RessourceMenu.scss +++ b/src/components/RessourceMenu/RessourceMenu.scss @@ -106,7 +106,7 @@ $border-radius: 50px; } .ressource-menu { - margin: 0 auto; + margin: 0; position: fixed; top: 2cqb; //Temp position for gpu overlay left: 50cqi; @@ -126,9 +126,9 @@ $border-radius: 50px; transform: translateX(-50%); transition: height 1s ease-in-out, - max-height 1s ease-in-out, + //max-height 1s ease-in-out, border-radius 0.4s ease-in-out, - padding 1s ease-out, + //padding 1s ease-out, width 1s ease-in-out; border-radius: 45px; z-index: 1000; @@ -159,6 +159,7 @@ $border-radius: 50px; border-style: hidden; background: rgba(255, 94, 71, 0.7); color: wheat; + animation-delay: 2s; animation: fadeIn 0.6s forwards ease-in-out; } From 91863002049020c10769a54ff7733d3e299808e6 Mon Sep 17 00:00:00 2001 From: BuildTools Date: Thu, 12 Sep 2024 13:57:48 +0200 Subject: [PATCH 21/28] Increase general size of elements Fix transition for RessourceMenu --- src/components/BuildMenu/BuildMenu.scss | 20 ++++----- .../BuildMenuEntry/BuildMenuEntry.scss | 44 +++++++++---------- .../RessourceMenu/RessourceMenu.scss | 29 ++++++------ .../TilePropertiesMenu.scss | 6 +-- 4 files changed, 49 insertions(+), 50 deletions(-) diff --git a/src/components/BuildMenu/BuildMenu.scss b/src/components/BuildMenu/BuildMenu.scss index 84ddd86..9e82f66 100644 --- a/src/components/BuildMenu/BuildMenu.scss +++ b/src/components/BuildMenu/BuildMenu.scss @@ -23,13 +23,13 @@ $build-menu-height: 64px; } .fade-in { - animation: fadeIn 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) both; - will-change: opacity, transform, filter; + animation: fadeIn 0.5s ; + will-change: opacity, filter; } .fade-out { - animation: fadeOut 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) both; - will-change: opacity, transform, filter; + animation: fadeOut 0.5s ; + will-change: opacity, filter; } .build-menu { @@ -37,7 +37,7 @@ $build-menu-height: 64px; left: 50cqi; bottom: calc(env(safe-area-inset-bottom) + 8%); border-radius: 20px; - height: min-content; + height: fit-content; width: fit-content; background-color: rgba(33, 73, 77, 0.702); @@ -54,18 +54,18 @@ $build-menu-height: 64px; flex-direction: row; justify-content: center; align-items: baseline; - padding: 8px; - gap: 32px; - box-sizing: border-box; + padding: 10px 48px; + gap: 38px; + box-sizing: content-box; backdrop-filter: saturate(180%) blur(30px); -webkit-backdrop-filter: saturate(180%) blur(30px); - animation: fadeOut 0.4s forwards ease-in-out; + animation: fadeOut 0.4s forwards ease-out; transform: translateX(50%); &--visible { opacity: 1; - animation: fadeIn 0.3s forwards ease-in-out; + animation: fadeIn 0.3s forwards ease-in; transform: translateX(-50%) translateY(0); height: $build-menu-height; diff --git a/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.scss b/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.scss index 7fbf8bd..11e6e86 100644 --- a/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.scss +++ b/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.scss @@ -47,7 +47,7 @@ @keyframes subtleRing { 0%, 100% { - transform: scale(1); + font-size: scale(1); } 50% { transform: scale(1.05); @@ -94,14 +94,12 @@ } .value-amount { - } p { font-size: 0.9em; animation: fadeIn 0.4s forwards ease-in-out; overflow-y: auto; - min-height: 30%; } h2 { @@ -128,7 +126,7 @@ width: 100%; display: flex; flex-direction: row; - justify-content:flex-start; + justify-content: flex-start; } } @@ -136,7 +134,7 @@ all: unset; background: rgba(185, 12, 12, 0.439); padding: 8px; - color:blueviolet; + color: blueviolet; border-radius: 50%; text-align: center; font-size: 20px; @@ -144,7 +142,9 @@ width: 48px; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); align-self: center; - animation: fadeIn 0.4s forwards ease-in-out, rgbPulse 3s infinite; + animation: + fadeIn 0.4s forwards ease-in-out, + rgbPulse 3s infinite; cursor: pointer; transition: all 0.2s cubic-bezier(0.67, 0.38, 0.09, 2.1); margin-top: 8px; @@ -220,7 +220,6 @@ ul li { width: 20%; - } ul { display: flex; @@ -241,7 +240,6 @@ border-radius: 6px; background: rgba(16, 162, 58, 0.645); } - .building-menu__modal-close { all: unset; @@ -267,36 +265,34 @@ flex-direction: column; justify-content: space-between; align-items: center; - font-size: 12px; + font-size: 14px; height: 100%; - width: fit-content; + width: auto; cursor: pointer; user-select: none; - - - - &:disabled { - filter: grayscale(1); - color: rgba(114, 110, 110, 0.5); - box-shadow: 0 0px 0px rgba(0, 0, 0, 0.6); - text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.5); - } .building-menu__entry-icon { - height: 32px; - width: 32px; - font-size: 20px; - line-height: 30px; + height: 42px; + width: 42px; + font-size: 32px; + line-height: 38px; margin: 0; border: 1px solid rgb(47, 192, 57); color: rgb(47, 192, 57); border-radius: 100%; text-align: center; background-color: rgb(47, 192, 57); - //animation: pulse 2s infinite; animation disabled for now } &:hover .building-menu__entry-icon { background: rgba(255, 255, 255, 0.6); } + + &:disabled { + filter: grayscale(1); + color: rgba(255, 243, 243, 0.654); + box-shadow: 0 0px 0px rgba(0, 0, 0, 0.6); + text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.5); + animation: subtleRing infinite; + } } diff --git a/src/components/RessourceMenu/RessourceMenu.scss b/src/components/RessourceMenu/RessourceMenu.scss index 89b0535..a071b06 100644 --- a/src/components/RessourceMenu/RessourceMenu.scss +++ b/src/components/RessourceMenu/RessourceMenu.scss @@ -110,7 +110,7 @@ $border-radius: 50px; position: fixed; top: 2cqb; //Temp position for gpu overlay left: 50cqi; - height: 60px; + height: auto; padding: 8px 16px; width: fit-content; background-color: rgba(33, 73, 77, 0.702); @@ -138,17 +138,21 @@ $border-radius: 50px; width: 100%; border-collapse: collapse; white-space: nowrap; - } - th { - animation: subtleBounce 2s infinite ease-in-out; - font-size: 16px; - text-align: center; - } + th { + animation: subtleBounce 2s infinite ease-in-out; + font-size: 28px; + text-align: center; + padding: 6px 12px; + line-height: 30px; + } + + } + td { text-align: center; - font-size: 10px; - padding: 4px 8px; + font-size: 12px; + padding: 4px; } button { @@ -174,14 +178,14 @@ $border-radius: 50px; @media (orientation: landscape) { th { font-size: 16px; - padding: 4px; - text-align: left; } height: auto; + + button { - display: none; + display:none; } .landscape-view { @@ -195,7 +199,6 @@ $border-radius: 50px; } .ressource-menu-extended { - height: fit-content; border-radius: 20px; } .ressource-menu-extended-items { diff --git a/src/components/TilePropertiesMenu/TilePropertiesMenu.scss b/src/components/TilePropertiesMenu/TilePropertiesMenu.scss index 03d9c55..2c446e2 100644 --- a/src/components/TilePropertiesMenu/TilePropertiesMenu.scss +++ b/src/components/TilePropertiesMenu/TilePropertiesMenu.scss @@ -108,7 +108,7 @@ .TilePropertiesMenu__button { position: fixed; - top: 36cqi; + top: 41cqi; left: 5cqi; //background: rgba(211, 197, 122, 0.4); Never used since infinite animation is active. Change global value instead //background-color: rgba(33, 73, 77, 0.702); Never used since infinite animation is active. Change global value instead @@ -156,12 +156,12 @@ left: 50cqi; position: fixed; transform: translate(-50%, 0); - width: 300px; + width: 339px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); height: auto; min-height: 132px; max-height: 90vh; overflow: hidden; - padding: 10px; border: 0; background-color: rgb(33, 73, 77); backdrop-filter: saturate(180%) blur(30px); From fd5edc9ec22a3f89699a54362771f79f19261ed9 Mon Sep 17 00:00:00 2001 From: BuildTools Date: Tue, 24 Sep 2024 23:04:24 +0200 Subject: [PATCH 22/28] Increased animation speed --- src/components/BuildMenu/BuildMenu.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/BuildMenu/BuildMenu.scss b/src/components/BuildMenu/BuildMenu.scss index 9e82f66..be99ea4 100644 --- a/src/components/BuildMenu/BuildMenu.scss +++ b/src/components/BuildMenu/BuildMenu.scss @@ -23,12 +23,12 @@ $build-menu-height: 64px; } .fade-in { - animation: fadeIn 0.5s ; + animation: fadeIn 0.2s ; will-change: opacity, filter; } .fade-out { - animation: fadeOut 0.5s ; + animation: fadeOut 0.2s ; will-change: opacity, filter; } From 50c1f58d09e3780d2ebb8b0deb8a6d8284a21a27 Mon Sep 17 00:00:00 2001 From: BuildTools Date: Tue, 24 Sep 2024 23:07:06 +0200 Subject: [PATCH 23/28] Removed rgb pulse --- .../BuildMenuEntry/BuildMenuEntry.scss | 36 +------------------ 1 file changed, 1 insertion(+), 35 deletions(-) diff --git a/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.scss b/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.scss index 11e6e86..a0119ab 100644 --- a/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.scss +++ b/src/components/BuildMenu/BuildMenuEntry/BuildMenuEntry.scss @@ -20,29 +20,6 @@ } } -@keyframes rgbPulse { - 0% { - background-color: rgb(255, 0, 0); /* Rot */ - } - 16% { - background-color: rgb(255, 255, 0); /* Gelb */ - } - 33% { - background-color: rgb(0, 255, 0); /* Grün */ - } - 50% { - background-color: rgb(0, 255, 255); /* Cyan */ - } - 66% { - background-color: rgb(0, 0, 255); /* Blau */ - } - 83% { - background-color: rgb(255, 0, 255); /* Magenta */ - } - 100% { - background-color: rgb(255, 0, 0); /* Zurück zu Rot */ - } -} @keyframes subtleRing { 0%, @@ -86,16 +63,6 @@ animation: fadeIn 0.18s forwards ease-in-out; - .value-symbol { - font-size: 1.5em; /* Größerer Schriftgrad für das Emoji */ - margin-right: 55px; - display: inline-block; - animation: subtleRing 1s infinite; /* Animation für das Emoji */ - } - - .value-amount { - } - p { font-size: 0.9em; animation: fadeIn 0.4s forwards ease-in-out; @@ -143,8 +110,7 @@ box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); align-self: center; animation: - fadeIn 0.4s forwards ease-in-out, - rgbPulse 3s infinite; + fadeIn 0.4s forwards ease-in-out; cursor: pointer; transition: all 0.2s cubic-bezier(0.67, 0.38, 0.09, 2.1); margin-top: 8px; From 4b5058d224c246032b24eef1b6c866c155881e8b Mon Sep 17 00:00:00 2001 From: BuildTools Date: Tue, 24 Sep 2024 23:10:26 +0200 Subject: [PATCH 24/28] Optimized imports --- src/components/Map/Map.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx index 865ed49..beb411d 100644 --- a/src/components/Map/Map.tsx +++ b/src/components/Map/Map.tsx @@ -1,20 +1,19 @@ import { Instances, Plane } from '@react-three/drei'; import { useFrame, useThree } from '@react-three/fiber'; import { useLayoutEffect, useRef } from 'react'; -import { Euler, InstancedBufferAttribute, InstancedMesh, Mesh, Object3D, Vector3 } from 'three'; +import { Euler, InstancedBufferAttribute, InstancedMesh, Mesh, Object3D, Vector3, MeshPhongMaterial } from 'three'; import debounce from 'lodash.debounce'; import { getTerrainHeight, getTerrainType } from '../../helpers/terrain'; import { Materials } from '../../materials/materials'; import { Tile } from '../Tile/Tile'; import { tileShader } from '../../helpers/shader'; import { useStore } from '../../store/store'; -import * as THREE from 'three'; const RENDER_DISTANCE = 32; const MAP_LENGTH = RENDER_DISTANCE * 2 + 1; const MAP_SIZE = Math.pow(MAP_LENGTH, 2); -const waterMaterial = new THREE.MeshPhongMaterial({ +const waterMaterial = new MeshPhongMaterial({ color: 0x006994, shininess: 60, transparent: true, From 1f1876852ef94e0b4807ea66381f8a826c572c1a Mon Sep 17 00:00:00 2001 From: BuildTools Date: Tue, 24 Sep 2024 23:11:53 +0200 Subject: [PATCH 25/28] Removed unused css properties --- src/components/RessourceMenu/RessourceMenu.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/RessourceMenu/RessourceMenu.scss b/src/components/RessourceMenu/RessourceMenu.scss index a071b06..f1d26d2 100644 --- a/src/components/RessourceMenu/RessourceMenu.scss +++ b/src/components/RessourceMenu/RessourceMenu.scss @@ -126,9 +126,7 @@ $border-radius: 50px; transform: translateX(-50%); transition: height 1s ease-in-out, - //max-height 1s ease-in-out, border-radius 0.4s ease-in-out, - //padding 1s ease-out, width 1s ease-in-out; border-radius: 45px; z-index: 1000; From 741dba22da6d1c96ee0cef7d11501d6ed04f685e Mon Sep 17 00:00:00 2001 From: BuildTools Date: Tue, 24 Sep 2024 23:15:27 +0200 Subject: [PATCH 26/28] Code cleanup --- index.html | 2 +- src/components/TilePropertiesMenu/TilePropertiesMenu.scss | 2 -- src/components/building/buildings.ts | 1 - src/index.tsx | 5 ----- 4 files changed, 1 insertion(+), 9 deletions(-) diff --git a/index.html b/index.html index df7ee75..cba7360 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - + diff --git a/src/components/TilePropertiesMenu/TilePropertiesMenu.scss b/src/components/TilePropertiesMenu/TilePropertiesMenu.scss index 2c446e2..9f0862f 100644 --- a/src/components/TilePropertiesMenu/TilePropertiesMenu.scss +++ b/src/components/TilePropertiesMenu/TilePropertiesMenu.scss @@ -110,8 +110,6 @@ position: fixed; top: 41cqi; left: 5cqi; - //background: rgba(211, 197, 122, 0.4); Never used since infinite animation is active. Change global value instead - //background-color: rgba(33, 73, 77, 0.702); Never used since infinite animation is active. Change global value instead backdrop-filter: saturate(180%) blur(30px); -webkit-backdrop-filter: saturate(180%) blur(30px); padding: 10px 10px; diff --git a/src/components/building/buildings.ts b/src/components/building/buildings.ts index 92b445f..7a5cfb3 100644 --- a/src/components/building/buildings.ts +++ b/src/components/building/buildings.ts @@ -2,7 +2,6 @@ import { Terrain } from '../../helpers/terrain'; import { Ressources } from '../../store/store'; import { BuildingType } from './Building'; -// Definiere die Emojis als Konstanten const EMOJIS = { wood: '🪵', gold: '💰', diff --git a/src/index.tsx b/src/index.tsx index 3b8f828..a1cc752 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -5,11 +5,6 @@ import App from "./App"; import { register } from "./serviceWorkerRegistration"; import reportWebVitals from "./reportWebVitals"; -const meta = document.createElement('meta'); -meta.name = 'viewport'; -meta.content = 'width=device-width, initial-scale=1, maximum-scale=1'; -document.getElementsByTagName('head')[0].appendChild(meta); - const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement ); From 451ed778dac1e01554cdbf069d48ddaab514117b Mon Sep 17 00:00:00 2001 From: BuildTools Date: Tue, 24 Sep 2024 23:18:03 +0200 Subject: [PATCH 27/28] Removed unused function --- src/store/store.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/store/store.ts b/src/store/store.ts index 908e274..833c74b 100644 --- a/src/store/store.ts +++ b/src/store/store.ts @@ -42,7 +42,6 @@ export type Actions = { unlock: (x: number, y: number, range: number) => void; setSelected: (object: SelectedObject | undefined) => void; saveLocation: (title: string, x: number, y: number) => void; - listLocations: () => {}; removeLocation: (title: string) => void; setCamera: (position: Vector3, lookAt: Vector3) => void; reset: () => void; @@ -122,10 +121,6 @@ export const useStore = create()( locations: newLocationType, }; }), - // list saved locations - listLocations: () => { - return get().locations; - }, removeBuilding: (x, y) => set((state) => { const building = state.buildings[x][y]; From 4f176a9ca9187c3ed7d8ecb34b740cde29d08c56 Mon Sep 17 00:00:00 2001 From: BuildTools Date: Wed, 25 Sep 2024 09:28:39 +0200 Subject: [PATCH 28/28] Code cleanup --- src/store/store.ts | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/store/store.ts b/src/store/store.ts index 833c74b..56515a3 100644 --- a/src/store/store.ts +++ b/src/store/store.ts @@ -72,7 +72,7 @@ const initialState: State = { export const useStore = create()( devtools( persist( - (set, get) => ({ + (set) => ({ ...initialState, addBuilding: (x, y, building) => set((state) => { @@ -87,14 +87,14 @@ export const useStore = create()( } // add building output - const newBuildingOutputs = { ...state.buildingOutputs }; + const newBuildingOutputs =state.buildingOutputs; const output = getOutputOfBuilding(building); Object.entries(output).forEach(([key, value]) => { newBuildingOutputs[key as Ressources] += value.amount; }); // add new building - const newBuildingType = { ...state.buildings }; + const newBuildingType = state.buildings; if (!newBuildingType[x]) newBuildingType[x] = {}; newBuildingType[x][y] = building; @@ -106,7 +106,7 @@ export const useStore = create()( // add new saved location saveLocation: (t, x, y) => set((state) => { - const newLocationType = { ...state.locations }; + const newLocationType = state.locations; newLocationType[t] = { positionX: x, positionY: y }; return { locations: newLocationType, @@ -115,7 +115,7 @@ export const useStore = create()( // remove saved location removeLocation: (t) => set((state) => { - const newLocationType = { ...state.locations }; + const newLocationType = state.locations; delete newLocationType[t]; return { locations: newLocationType, @@ -135,7 +135,7 @@ export const useStore = create()( } // remove building output - const newBuildingOutputs = { ...state.buildingOutputs }; + const newBuildingOutputs = state.buildingOutputs; const output = getOutputOfBuilding(building); Object.entries(output).forEach(([key, value]) => { newBuildingOutputs[key as Ressources] -= value.amount; @@ -147,7 +147,7 @@ export const useStore = create()( }), addRessources: (ressourcesToAdd: Partial<{ [key in Ressources]: number }>) => set((state: State) => { - const newRessources = { ...state.ressources }; + const newRessources = state.ressources; Object.entries(ressourcesToAdd).forEach(([key, value]) => { newRessources[key as Ressources] += value!; }); @@ -157,7 +157,7 @@ export const useStore = create()( }), removeRessources: (ressourcesToRemove: Partial<{ [key in Ressources]: number }>) => set((state: State) => { - const newRessources = { ...state.ressources }; + const newRessources = state.ressources ; Object.entries(ressourcesToRemove).forEach(([key, value]) => { newRessources[key as Ressources] -= value!; }); @@ -167,7 +167,7 @@ export const useStore = create()( }), lock: (x, y, range) => set((state: State) => { - const newUnlocked = { ...state.unlocked }; + const newUnlocked = state.unlocked; let distance: number; for (let i = x - range; i <= x + range; i++) { for (let j = y - range; j <= y + range; j++) { @@ -184,7 +184,7 @@ export const useStore = create()( }), unlock: (x, y, range) => set((state: State) => { - const newUnlocked = { ...state.unlocked }; + const newUnlocked = state.unlocked; let distance: number; for (let i = x - range; i <= x + range; i++) { for (let j = y - range; j <= y + range; j++) { @@ -209,7 +209,7 @@ export const useStore = create()( set(() => { return { camera: { position, lookAt } }; }), - reset: () => set({ ...initialState }), + reset: () => set(initialState), }), { name: 'game-state',