feat: add land

.eslintrc.json

@@ -14,6 +14,13 @@
       "rules": {
         "no-undef": "off"
       }
+    },
+    {
+      "files": ["components/lands/*.tsx"],
+      "rules": {
+        "react/prop-types": "off",
+        "react/no-unknown-property": "off"
+      }
     }
   ],
   "root": true

components/UI/actions/clickable/clickableGithubIcon.tsx

@@ -39,7 +39,7 @@ const ClickableGithubIcon: FunctionComponent<ClickableGithubIconProps> = ({
         <div className={styles.verifiedIcon}>
           <VerifiedIcon width={"18"} color={theme.palette.primary.main} />
         </div>
-        <GithubIcon width={width} color="white" />
+        <GithubIcon width={width} color="#101012" />
       </div>
     </Tooltip>
   ) : null;

components/UI/actions/socialmediaActions.tsx

@@ -35,19 +35,19 @@ const SocialMediaActions: FunctionComponent<SocialMediaActionsProps> = ({
   }, [identity]);
 
   return (
-    <div className="flex flex-row gap-1">
+    <div className="flex flex-row gap-3 w-full justify-evenly">
       <ClickableTwitterIcon
-        width="25"
+        width="16"
         domain={identity?.domain}
         twitterId={apiIdentity?.twitter ?? apiIdentity?.old_twitter}
       />
       <ClickableDiscordIcon
-        width="25"
+        width="16"
         domain={identity?.domain}
         discordId={apiIdentity?.discord ?? apiIdentity?.old_discord}
       />
       <ClickableGithubIcon
-        width="25"
+        width="16"
         domain={identity?.domain}
         githubId={apiIdentity?.github ?? apiIdentity?.old_github}
       />

components/UI/iconsComponents/icons/copyIcon.tsx

@@ -0,0 +1,24 @@
+import React, { FunctionComponent } from "react";
+
+const CopyIcon: FunctionComponent<IconProps> = ({ width, color }) => {
+  return (
+    <svg
+      width={width}
+      height={width}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M16 12.9V17.1C16 20.6 14.6 22 11.1 22H6.9C3.4 22 2 20.6 2 17.1V12.9C2 9.4 3.4 8 6.9 8H11.1C14.6 8 16 9.4 16 12.9Z"
+        fill={color}
+      />
+      <path
+        d="M17.0998 2H12.8998C9.81668 2 8.37074 3.09409 8.06951 5.73901C8.00649 6.29235 8.46476 6.75 9.02167 6.75H11.0998C15.2998 6.75 17.2498 8.7 17.2498 12.9V14.9781C17.2498 15.535 17.7074 15.9933 18.2608 15.9303C20.9057 15.629 21.9998 14.1831 21.9998 11.1V6.9C21.9998 3.4 20.5998 2 17.0998 2Z"
+        fill={color}
+      />
+    </svg>
+  );
+};
+
+export default CopyIcon;

components/UI/iconsComponents/icons/trophyIcon.tsx

@@ -0,0 +1,20 @@
+import React, { FunctionComponent } from "react";
+
+const TrophyIcon: FunctionComponent<IconProps> = ({ width, color }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={width}
+      viewBox="0 0 18 18"
+      fill="none"
+    >
+      <path
+        d="M5.05246 15.4284V13.9999H7.9096V11.7856C7.32627 11.6546 6.80531 11.4075 6.34674 11.0441C5.88817 10.6808 5.55198 10.2256 5.33817 9.67843C4.44531 9.57129 3.69817 9.18153 3.09674 8.50915C2.49531 7.83676 2.19484 7.04796 2.19531 6.14272V5.42843C2.19531 5.03557 2.33531 4.69915 2.61531 4.41915C2.89531 4.13915 3.2315 3.99938 3.62388 3.99986H5.05246V2.57129H12.1953V3.99986H13.6239C14.0167 3.99986 14.3532 4.13986 14.6332 4.41986C14.9132 4.69986 15.0529 5.03605 15.0525 5.42843V6.14272C15.0525 7.04748 14.7517 7.83629 14.1503 8.50915C13.5489 9.182 12.802 9.57176 11.9096 9.67843C11.6953 10.2261 11.3589 10.6815 10.9003 11.0449C10.4417 11.4082 9.92103 11.6551 9.33817 11.7856V13.9999H12.1953V15.4284H5.05246ZM5.05246 8.14272V5.42843H3.62388V6.14272C3.62388 6.5951 3.75484 7.00296 4.01674 7.36629C4.27865 7.72962 4.62388 7.98843 5.05246 8.14272ZM12.1953 8.14272C12.6239 7.98796 12.9691 7.72891 13.231 7.36557C13.4929 7.00224 13.6239 6.59462 13.6239 6.14272V5.42843H12.1953V8.14272Z"
+        fill={color}
+      />
+    </svg>
+  );
+};
+
+export default TrophyIcon;

components/UI/profileCard.tsx

@@ -0,0 +1,20 @@
+import React, { FunctionComponent } from "react";
+import styles from "../../styles/profile.module.css";
+
+const ProfileCard: FunctionComponent<ProfileCard> = ({
+  title,
+  content,
+  isUppercase = false,
+}) => {
+  return (
+    <div className={styles.profileCard}>
+      <h2 className={`${styles.title} ${isUppercase ? "uppercase" : ""}`}>
+        {title}
+      </h2>
+      <div className={styles.divider} />
+      {content}
+    </div>
+  );
+};
+
+export default ProfileCard;

components/lands/buildingItem.tsx

@@ -0,0 +1,70 @@
+import { TileRect, Tileset } from "../../types/ldtk";
+import React, { ReactElement } from "react";
+import { memo, useMemo } from "react";
+import { PlaneGeometry, Texture } from "three";
+
+type IElem = {
+  tileset: Tileset;
+  pos: { posX: number; posY: number };
+  tileData: TileRect;
+  textureLoader: Texture;
+  isNFT: boolean;
+};
+
+const BuildingItem = memo<IElem>(
+  ({ tileset, tileData, pos, textureLoader, isNFT }): ReactElement => {
+    const elemTexture = useMemo(() => {
+      if (tileset && textureLoader) {
+        const localT = textureLoader.clone();
+        localT.needsUpdate = true;
+
+        const spritesPerRow = tileset.pxWid / tileset.tileGridSize; // 80 sprites per row : 1280/16
+        const spritesPerColumn = tileset.pxHei / tileset.tileGridSize; // 80 sprites per column:  1280/16
+        const xIndex = tileData.x / tileset.tileGridSize;
+        const yIndex = tileData.y / tileset.tileGridSize;
+        const xOffset = xIndex / spritesPerRow;
+        const yOffset = 1 - (yIndex + tileData.h / 16) / spritesPerColumn; // Add 1 to yIndex because the y-axis starts from the bottom, not from the top
+
+        localT.offset.set(xOffset, yOffset);
+        localT.repeat.set(
+          1 / (spritesPerRow / (tileData.w / tileset.tileGridSize)),
+          1 / (spritesPerColumn / (tileData.h / tileset.tileGridSize))
+        );
+        return localT;
+      }
+    }, [textureLoader, tileset, tileData]);
+
+    const plane = useMemo(() => {
+      return new PlaneGeometry(tileData.w / 16, tileData.h / 16, 1, 1);
+    }, [tileData.w, tileData.h]);
+
+    return (
+      <>
+        <mesh
+          position={[
+            pos.posX + tileData.w / 32,
+            0.22 + pos.posY * 0.02,
+            pos.posY - tileData.h / 32,
+          ]}
+          name={`${tileData.tilesetUid}_building${
+            isNFT ? "_isNFT" : ""
+          }`.toString()}
+          rotation={[-Math.PI * 0.5, 0, 0]}
+          geometry={plane}
+        >
+          <meshPhongMaterial
+            attach="material"
+            map={elemTexture}
+            name={`${tileData.tilesetUid}_building`.toString() + "_mat"}
+            transparent={true}
+            depthWrite={false}
+            depthTest={true}
+          />
+        </mesh>
+      </>
+    );
+  }
+);
+
+BuildingItem.displayName = "BuildingItem";
+export default BuildingItem;

components/lands/buildingTooltip.tsx

@@ -0,0 +1,23 @@
+import React, { FunctionComponent } from "react";
+import styles from "../../styles/components/tooltip.module.css";
+
+type BuildingTooltipProps = {
+  building?: BuildingsInfo | null;
+  pos: { x: number; y: number };
+};
+
+const BuildingTooltip: FunctionComponent<BuildingTooltipProps> = ({
+  building,
+  pos,
+}) => {
+  if (!building) return null;
+  return (
+    <div className={styles.tooltip} style={{ left: pos.x, top: pos.y }}>
+      <div className={styles.level}>Level {building.level}</div>
+      <div className={styles.name}>{building.name}</div>
+      <div className={styles.description}>{building.description}</div>
+    </div>
+  );
+};
+
+export default BuildingTooltip;

components/lands/buildings.tsx

@@ -0,0 +1,63 @@
+import React, { ReactElement, useMemo } from "react";
+import { TextureLoader, RepeatWrapping, NearestFilter, Vector2 } from "three";
+import { BuildingTileProps } from "../../types/land";
+import BuildingItem from "./buildingItem";
+import { Tileset } from "../../types/ldtk";
+import { useLoader } from "@react-three/fiber";
+
+type IBuildings = {
+  tilesets: Tileset[];
+  buildingData: Array<Array<BuildingTileProps | null>>;
+};
+
+export default function Buildings({
+  tilesets,
+  buildingData,
+}: IBuildings): ReactElement | null {
+  const buildingTexture = useMemo(() => {
+    const texture = useLoader(
+      TextureLoader,
+      "/land/textures/SID_BuildingSheet.png"
+    );
+    const tileset = tilesets[2];
+    texture.repeat = new Vector2(1 / tileset.__cHei, 1 / tileset.__cWid);
+    texture.magFilter = NearestFilter;
+    texture.wrapS = texture.wrapT = RepeatWrapping;
+    return texture;
+  }, [tilesets]);
+
+  return (
+    <>
+      {buildingTexture &&
+        buildingData.map(
+          (tileX: Array<BuildingTileProps | null>, iY: number) => {
+            return tileX.map(
+              (tileData: BuildingTileProps | null, iX: number) => {
+                if (
+                  tileData === null ||
+                  tileData.tile === undefined ||
+                  tileData.tile === null
+                ) {
+                  return null;
+                }
+                return (
+                  <BuildingItem
+                    key={`building-${iX}-${iY}`}
+                    tileset={
+                      tilesets.filter(
+                        (tileset) => tileset.uid === tileData.tile.tilesetUid
+                      )[0]
+                    }
+                    textureLoader={buildingTexture}
+                    tileData={tileData.tile}
+                    pos={{ posX: iX, posY: iY }}
+                    isNFT={tileData.isNFT}
+                  />
+                );
+              }
+            );
+          }
+        )}
+    </>
+  );
+}