Merge pull request #30 from aptos-labs/refactor

[UI] code refactor
aptos-labs · Oct 26, 2023 · 6b74b34 · 6b74b34
2 parents 0199c7b + 3883b1e
commit 6b74b34
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 117 deletions.
diff --git a/frontend/src/app/home/Mint/index.tsx b/frontend/src/app/home/Mint/index.tsx
@@ -1,62 +1,34 @@
 import { useState } from "react";
 import { useWallet } from "@aptos-labs/wallet-adapter-react";
-import { PetImage, bodies, ears, faces } from "../Pet/Image";
-import { Pet } from "../Pet";
-import { ShuffleButton } from "@/components/ShuffleButton";
-import {
-  NEXT_PUBLIC_BODY_OPTIONS,
-  NEXT_PUBLIC_CONTRACT_ADDRESS,
-  NEXT_PUBLIC_EAR_OPTIONS,
-  NEXT_PUBLIC_FACE_OPTIONS,
-} from "@/utils/env";
+import { NEXT_PUBLIC_CONTRACT_ADDRESS } from "@/utils/env";
 import { getAptosClient } from "@/utils/aptosClient";
+import { ShufflePetImage } from "../Pet/ShufflePetImage";
 
 const aptosClient = getAptosClient();
 
 export interface MintProps {
   fetchPet: () => Promise<void>;
 }
 
-const defaultPet: Pet = {
-  name: "Unknown",
-  energy_points: 0,
-  parts: [],
-};
-
 export function Mint({ fetchPet }: MintProps) {
   const [newName, setNewName] = useState<string>("");
-  const [parts, setParts] = useState<number[]>([0, 0, 0]);
-  const [selectedAction, setSelectedAction] = useState<"feed" | "play">("feed");
+  const [petParts, setPetParts] = useState<number[]>([0, 0, 0]);
+
   const [transactionInProgress, setTransactionInProgress] =
     useState<boolean>(false);
 
   const { account, network, signAndSubmitTransaction } = useWallet();
 
-  const handleShuffle = () => {
-    const randomParts = [
-      Math.floor(Math.random() * Number(NEXT_PUBLIC_BODY_OPTIONS)),
-      Math.floor(Math.random() * Number(NEXT_PUBLIC_EAR_OPTIONS)),
-      Math.floor(Math.random() * Number(NEXT_PUBLIC_FACE_OPTIONS)),
-    ];
-    setParts(randomParts);
-
-    const actions = ["feed", "play"];
-    const randomAction = actions[Math.floor(Math.random() * actions.length)] as
-      | "feed"
-      | "play";
-    setSelectedAction(randomAction);
-  };
-
   const handleMint = async () => {
     if (!account || !network) return;
 
     setTransactionInProgress(true);
-    console.log("MINT PET: ", newName, parts);
+    console.log("MINT PET: ", newName, petParts);
     const payload = {
       type: "entry_function_payload",
       function: `${NEXT_PUBLIC_CONTRACT_ADDRESS}::main::create_aptogotchi`,
       type_arguments: [],
-      arguments: [newName, parts],
+      arguments: [newName, petParts],
     };
 
     try {
@@ -72,26 +44,10 @@ export function Mint({ fetchPet }: MintProps) {
     }
   };
 
-  function createPetImage([body, ear, face]: number[]) {
-    return (
-      <div onClick={() => setParts([body, ear, face])}>
-        <PetImage
-          pet={defaultPet}
-          selectedAction={selectedAction}
-          petParts={{
-            body: bodies[body],
-            ears: ears[ear],
-            face: faces[face],
-          }}
-        />
-      </div>
-    );
-  }
-
   return (
-    <div className="flex flex-col gap-4 max-w-md self-center m-6">
+    <div className="flex flex-col gap-6 max-w-md self-center m-4">
       <h2 className="text-xl w-full text-center">Create your pet!</h2>
-      <div className="nes-field w-full">
+      <div className="nes-field w-[320px]">
         <label htmlFor="name_field">Name</label>
         <input
           type="text"
@@ -101,20 +57,15 @@ export function Mint({ fetchPet }: MintProps) {
           onChange={(e) => setNewName(e.currentTarget.value)}
         />
       </div>
-      <div className="flex flex-col self-center p-2">
-        {createPetImage(parts)}
-      </div>
-      <div className="flex flex-col gap-6">
-        <ShuffleButton handleShuffle={handleShuffle} />
-        <button
-          type="button"
-          className={`nes-btn ${newName ? "is-success" : "is-disabled"}`}
-          disabled={!newName || transactionInProgress}
-          onClick={handleMint}
-        >
-          {transactionInProgress ? "Loading..." : "Mint Pet"}
-        </button>
-      </div>
+      <ShufflePetImage petParts={petParts} setPetParts={setPetParts} />
+      <button
+        type="button"
+        className={`nes-btn ${newName ? "is-success" : "is-disabled"}`}
+        disabled={!newName || transactionInProgress}
+        onClick={handleMint}
+      >
+        {transactionInProgress ? "Loading..." : "Mint Pet"}
+      </button>
     </div>
   );
 }
diff --git a/frontend/src/app/home/NotConnected.tsx b/frontend/src/app/home/NotConnected.tsx
@@ -2,58 +2,19 @@
 
 import React, { useState } from "react";
 import { useTypingEffect } from "@/utils/useTypingEffect";
-import { Pet } from "./Pet";
-import { PetImage, bodies, ears, faces } from "./Pet/Image";
-import { ShuffleButton } from "@/components/ShuffleButton";
-import {
-  NEXT_PUBLIC_BODY_OPTIONS,
-  NEXT_PUBLIC_EAR_OPTIONS,
-  NEXT_PUBLIC_FACE_OPTIONS,
-} from "@/utils/env";
 
-const defaultPet: Pet = {
-  name: "Unknown",
-  energy_points: 0,
-  parts: [],
-};
+import { ShufflePetImage } from "./Pet/ShufflePetImage";
 
 export function NotConnected() {
-  const [activePet, setActivePet] = useState<number[]>([0, 0, 0]);
-  const [selectedAction, setSelectedAction] = useState<"feed" | "play">("feed");
+  const [petParts, setPetParts] = useState<number[]>([0, 0, 0]);
 
   const text = useTypingEffect(
     `Welcome to Aptogotchi! Once you connect your wallet, you'll be able to mint your new on-chain pet. Once minted, you'll be able to feed, play with, and customize your new best friend!`
   );
 
-  const handleShuffle = () => {
-    const randomPet = [
-      Math.floor(Math.random() * Number(NEXT_PUBLIC_BODY_OPTIONS)),
-      Math.floor(Math.random() * Number(NEXT_PUBLIC_EAR_OPTIONS)),
-      Math.floor(Math.random() * Number(NEXT_PUBLIC_FACE_OPTIONS)),
-    ];
-    setActivePet(randomPet);
-
-    const actions = ["feed", "play"];
-    const randomAction = actions[Math.floor(Math.random() * actions.length)] as
-      | "feed"
-      | "play";
-    setSelectedAction(randomAction);
-  };
-
   return (
     <div className="flex flex-col gap-6 p-6">
-      <div className="flex flex-col gap-6 self-center">
-        <PetImage
-          pet={defaultPet}
-          selectedAction={selectedAction}
-          petParts={{
-            body: bodies[activePet[0]],
-            ears: ears[activePet[1]],
-            face: faces[activePet[2]],
-          }}
-        />
-        <ShuffleButton handleShuffle={handleShuffle} />
-      </div>
+      <ShufflePetImage petParts={petParts} setPetParts={setPetParts} />
       <div className="nes-container is-dark with-title">
         <p className="title">Welcome</p>
         <p>{text}</p>

diff --git a/frontend/src/app/home/Pet/Actions.tsx b/frontend/src/app/home/Pet/Actions.tsx
@@ -130,20 +130,20 @@ export function Actions({
               type="radio"
               className="nes-radio"
               name="action"
-              checked={selectedAction === "feed"}
-              onChange={() => setSelectedAction("feed")}
+              checked={selectedAction === "play"}
+              onChange={() => setSelectedAction("play")}
             />
-            <span>Feed</span>
+            <span>Play</span>
           </label>
           <label>
             <input
               type="radio"
               className="nes-radio"
               name="action"
-              checked={selectedAction === "play"}
-              onChange={() => setSelectedAction("play")}
+              checked={selectedAction === "feed"}
+              onChange={() => setSelectedAction("feed")}
             />
-            <span>Play</span>
+            <span>Feed</span>
           </label>
         </div>
         <div className="flex flex-col gap-4 justify-between">

diff --git a/frontend/src/app/home/Pet/Image.tsx b/frontend/src/app/home/Pet/Image.tsx
@@ -6,7 +6,7 @@ import { PetAction } from "./Actions";
 
 export interface PetImageProps {
   pet: Pet;
-  selectedAction: PetAction;
+  selectedAction?: PetAction;
   petParts: {
     body: string;
     ears: string;
@@ -25,7 +25,7 @@ export function PetImage(props: PetImageProps) {
   const imgClass = "absolute top-0 left-0 w-full h-full object-contain";
 
   const animation =
-    selectedAction === "play" ? "animate-hop" : "animate-wiggle";
+    selectedAction === "play" ? "animate-wiggle" : "animate-hop";
 
   return (
     <div

diff --git a/frontend/src/app/home/Pet/ShufflePetImage.tsx b/frontend/src/app/home/Pet/ShufflePetImage.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import React from "react";
+import { Pet } from ".";
+import { PetImage, bodies, ears, faces } from "./Image";
+import { ShuffleButton } from "@/components/ShuffleButton";
+import {
+  NEXT_PUBLIC_BODY_OPTIONS,
+  NEXT_PUBLIC_EAR_OPTIONS,
+  NEXT_PUBLIC_FACE_OPTIONS,
+} from "@/utils/env";
+
+const defaultPet: Pet = {
+  name: "Unknown",
+  energy_points: 0,
+  parts: [],
+};
+
+export function ShufflePetImage({
+  petParts,
+  setPetParts,
+}: {
+  petParts: number[];
+  setPetParts: React.Dispatch<React.SetStateAction<number[]>>;
+}) {
+  const handleShuffle = () => {
+    const randomPet = [
+      Math.floor(Math.random() * Number(NEXT_PUBLIC_BODY_OPTIONS)),
+      Math.floor(Math.random() * Number(NEXT_PUBLIC_EAR_OPTIONS)),
+      Math.floor(Math.random() * Number(NEXT_PUBLIC_FACE_OPTIONS)),
+    ];
+    setPetParts(randomPet);
+  };
+
+  return (
+    <div className="flex flex-col gap-6 self-center">
+      <PetImage
+        pet={defaultPet}
+        petParts={{
+          body: bodies[petParts[0]],
+          ears: ears[petParts[1]],
+          face: faces[petParts[2]],
+        }}
+      />
+      <ShuffleButton handleShuffle={handleShuffle} />
+    </div>
+  );
+}
diff --git a/frontend/src/app/home/Pet/index.tsx b/frontend/src/app/home/Pet/index.tsx
@@ -19,7 +19,7 @@ interface PetProps {
 }
 
 export function Pet({ pet, setPet }: PetProps) {
-  const [selectedAction, setSelectedAction] = useState<PetAction>("feed");
+  const [selectedAction, setSelectedAction] = useState<PetAction>("play");
 
   return (
     <div className="flex flex-row self-center gap-12 m-8">