From dca46f5d41aef695ede0b72a9c2beb617a833cfa Mon Sep 17 00:00:00 2001 From: Iris Date: Thu, 31 Aug 2023 14:06:22 +0200 Subject: [PATCH] refactor: component names --- components/lands/Buildings.tsx | 2 +- components/lands/Ground.tsx | 2 +- components/lands/Land.tsx | 2 +- components/lands/Map.tsx | 6 ++--- components/lands/RoadProps.tsx | 27 +++++++++++++++---- components/lands/Scene.tsx | 6 ++--- .../lands/{PropItem.tsx => roadItem.tsx} | 27 ++++++++++--------- pages/[addressOrDomain].tsx | 2 +- 8 files changed, 47 insertions(+), 27 deletions(-) rename components/lands/{PropItem.tsx => roadItem.tsx} (79%) diff --git a/components/lands/Buildings.tsx b/components/lands/Buildings.tsx index d2fdcd11..849972d6 100644 --- a/components/lands/Buildings.tsx +++ b/components/lands/Buildings.tsx @@ -1,7 +1,7 @@ import React, { ReactElement, useMemo } from "react"; import { TextureLoader, RepeatWrapping, NearestFilter, Vector2 } from "three"; import { CityBuildings } from "../../types/land"; -import BuildingItem from "./BuildingItem"; +import BuildingItem from "./buildingItem"; import { Tileset } from "../../types/ldtk"; import { useLoader } from "@react-three/fiber"; diff --git a/components/lands/Ground.tsx b/components/lands/Ground.tsx index ee32e197..23e45346 100644 --- a/components/lands/Ground.tsx +++ b/components/lands/Ground.tsx @@ -6,7 +6,7 @@ import { Vector2, PlaneGeometry, } from "three"; -import GroundItem from "./GroundItem"; +import GroundItem from "./groundItem"; import { CityBuilded } from "../../types/land"; import { useLoader } from "@react-three/fiber"; import { Tileset } from "../../types/ldtk"; diff --git a/components/lands/Land.tsx b/components/lands/Land.tsx index 5fa822bf..3fd1f016 100644 --- a/components/lands/Land.tsx +++ b/components/lands/Land.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from "react"; -import { Scene } from "./Scene"; +import { Scene } from "./scene"; import { memberSince } from "../../utils/sortNfts"; import styles from "../../styles/profile.module.css"; import Button from "../UI/button"; diff --git a/components/lands/Map.tsx b/components/lands/Map.tsx index 27c2bb03..ef6f2349 100644 --- a/components/lands/Map.tsx +++ b/components/lands/Map.tsx @@ -1,8 +1,8 @@ import React, { FunctionComponent } from "react"; import { LdtkReader } from "../../utils/parser"; -import Ground from "./Ground"; -import RoadProps from "./RoadProps"; -import Buildings from "./Buildings"; +import Ground from "./ground"; +import RoadProps from "./roadProps"; +import Buildings from "./buildings"; import { tileTypes } from "../../constants/tiles"; import { useFrame, useThree } from "@react-three/fiber"; diff --git a/components/lands/RoadProps.tsx b/components/lands/RoadProps.tsx index 9b2b3b97..68cb10cc 100644 --- a/components/lands/RoadProps.tsx +++ b/components/lands/RoadProps.tsx @@ -9,7 +9,7 @@ import { import { CityProps, TileData } from "../../types/land"; import { Tileset } from "../../types/ldtk"; import { useLoader } from "@react-three/fiber"; -import PropItem from "./PropItem"; +import RoadItem from "./roadItem"; type IProps = { tilesets: Tileset[]; @@ -40,9 +40,19 @@ export default function RoadProps({ ); }, []); - // const streetLightPlane = useMemo(() => { - // return new PlaneGeometry(1, 1, 1, 1); - // }, []); + // Reuse same planes for props + const simplePlane = useMemo(() => { + // used for bench, sewerPlate & firehydrant props + return new PlaneGeometry(1, 1, 1, 1); + }, []); + + const streetLightPlane = useMemo(() => { + return new PlaneGeometry(1, 2, 1, 1); + }, []); + + const treePlane = useMemo(() => { + return new PlaneGeometry(2, 2, 1, 1); + }, []); return ( <> @@ -54,13 +64,20 @@ export default function RoadProps({ return null; } return ( - ); }); diff --git a/components/lands/Scene.tsx b/components/lands/Scene.tsx index 81648fd2..5fdbd95d 100644 --- a/components/lands/Scene.tsx +++ b/components/lands/Scene.tsx @@ -1,13 +1,13 @@ import { Canvas } from "@react-three/fiber"; import React, { FunctionComponent, useEffect, useRef, useState } from "react"; import { NoToneMapping } from "three"; -import { Camera } from "./Camera"; +import { Camera } from "./camera"; import { LdtkReader } from "../../utils/parser"; import { iLDtk } from "../../types/ldtk"; import { useGesture } from "@use-gesture/react"; import ZoomSlider from "./zoomSlider"; -import { Map } from "./Map"; -import BuildingTooltip from "./BuildingTooltip"; +import { Map } from "./map"; +import BuildingTooltip from "./buildingTooltip"; type SceneProps = { address: string; diff --git a/components/lands/PropItem.tsx b/components/lands/roadItem.tsx similarity index 79% rename from components/lands/PropItem.tsx rename to components/lands/roadItem.tsx index 37e061a8..1e79b084 100644 --- a/components/lands/PropItem.tsx +++ b/components/lands/roadItem.tsx @@ -1,7 +1,7 @@ import { propsOffset } from "../../constants/tiles"; import { CityProps, TileData } from "../../types/land"; import React, { ReactElement, memo, useMemo, useState } from "react"; -import { Texture } from "three"; +import { PlaneGeometry, Texture } from "three"; import { Tileset } from "../../types/ldtk"; type IElem = { @@ -10,10 +10,18 @@ type IElem = { buildingTexture: Texture; propData: CityProps; tileData: TileData; + plane: PlaneGeometry; }; -const PropItem = memo( - ({ tileset, pos, buildingTexture, propData, tileData }): ReactElement => { +const RoadItem = memo( + ({ + tileset, + pos, + buildingTexture, + propData, + tileData, + plane, + }): ReactElement => { const [offset, setOffset] = useState<{ x: number; y: number; z: number }>({ x: 0, y: 0, @@ -22,6 +30,7 @@ const PropItem = memo( const elemTexture = useMemo(() => { if (tileset && buildingTexture) { + // console.log("tileData", tileData); const localT = buildingTexture.clone(); localT.needsUpdate = true; localT.offset.set(tileData.textureOffset.x, tileData.textureOffset.y); @@ -43,14 +52,8 @@ const PropItem = memo( ]} name={`${tileData.entity.tileRect.tilesetUid}_props`.toString()} rotation={[-Math.PI * 0.5, 0, 0]} + geometry={plane} > - ( } ); -PropItem.displayName = "PropItem"; -export default PropItem; +RoadItem.displayName = "RoadItem"; +export default RoadItem; diff --git a/pages/[addressOrDomain].tsx b/pages/[addressOrDomain].tsx index bb97c2d8..a5df068b 100644 --- a/pages/[addressOrDomain].tsx +++ b/pages/[addressOrDomain].tsx @@ -15,7 +15,7 @@ import { utils } from "starknetid.js"; import ErrorScreen from "../components/UI/screens/errorScreen"; import ProfileCard from "../components/UI/profileCard"; import TrophyIcon from "../components/UI/iconsComponents/icons/trophyIcon"; -import { Land } from "../components/lands/Land"; +import { Land } from "../components/lands/land"; import { getIdentityData, hasVerifiedSocials } from "../utils/identity"; import { useMediaQuery } from "@mui/material";