refactor: component names

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";
 

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";

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";

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";
 

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 (
-              <PropItem
+              <RoadItem
                 key={`props-${iX}-${iY}`}
                 tileset={tileset}
                 buildingTexture={buildingTexture}
                 tileData={tileData[elem.entityType]}
                 pos={{ posX: iX, posY: iY }}
                 propData={elem}
+                plane={
+                  elem.entityType === 0
+                    ? streetLightPlane
+                    : elem.entityType === 1
+                    ? treePlane
+                    : simplePlane
+                }
               />
             );
           });

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;

components/lands/PropItem.tsx → 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<IElem>(
-  ({ tileset, pos, buildingTexture, propData, tileData }): ReactElement => {
+const RoadItem = memo<IElem>(
+  ({
+    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<IElem>(
 
     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<IElem>(
         ]}
         name={`${tileData.entity.tileRect.tilesetUid}_props`.toString()}
         rotation={[-Math.PI * 0.5, 0, 0]}
+        geometry={plane}
       >
-        <planeGeometry
-          name={
-            `${tileData.entity.tileRect.tilesetUid}_props`.toString() + "_geom"
-          }
-          attach="geometry"
-          args={[tileData.plane.w, tileData.plane.h, 1, 1]}
-        />
         <meshPhongMaterial
           attach="material"
           map={elemTexture}
@@ -66,5 +69,5 @@ const PropItem = memo<IElem>(
   }
 );
 
-PropItem.displayName = "PropItem";
-export default PropItem;
+RoadItem.displayName = "RoadItem";
+export default RoadItem;

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";