Connected addUnit

app/src/components/Army.tsx

@@ -3,17 +3,22 @@ import styles from '../styles/Army.module.css';
 
 const Army = () => {
 
-  const { army } = usePlayer()
-
+  const { army, addUnit } = usePlayer()
 
   return <div className="styles.armyGathering">
     <div className={`${styles.tavern_keeper} ${styles.person} ${styles.static}`} />
-    <div className={`${styles.scribe} ${styles.person} ${styles.moloch_denier} ${styles.static}`}>
-      <div className="supply"></div>
+    <div onClick={() => addUnit(0)} className={`${styles.scribe} ${styles.person} ${styles.moloch_denier} ${styles.static}`}>
+      <div className={styles.supply}>Moloch denier: {army?.moloch_denier.level}</div>
+    </div>
+    <div onClick={() => addUnit(1)} className={`${styles.druid} ${styles.person} ${styles.apprentice} ${styles.static}`} >
+      <div className={styles.supply}>Apprentice: {army?.apprentice.level}</div>
+    </div>
+    <div onClick={() => addUnit(2)} className={`${styles.ranger} ${styles.person} ${styles.anointed} ${styles.static}`} >
+      <div className={styles.supply}>Anointed: {army?.anointed.level}</div>
+    </div>
+    <div onClick={() => addUnit(3)} className={`${styles.warrior} ${styles.person} ${styles.champion} ${styles.static}`} >
+      <div className={styles.supply}>Champion: {army?.champion.level}</div>
     </div>
-    <div className={`${styles.druid} ${styles.person} ${styles.apprentice} ${styles.static}`} ></div>
-    <div className={`${styles.ranger} ${styles.person} ${styles.anointed} ${styles.static}`} ></div>
-    <div className={`${styles.warrior} ${styles.person} ${styles.champion} ${styles.static}`} ></div>
   </div>
 }
 

app/src/components/Header.tsx

@@ -43,7 +43,6 @@ const Header = () => {
   }, [isRegistered, register])
 
   return <header onClick={onRegister} className={styles.header}>
-    {count.current} {balance}
     <h1 className={styles.title}>{title}</h1>
     {subtitle}
     {perSecondParagraph}

app/src/providers/PlayerProvider.tsx

@@ -6,17 +6,28 @@ import { parseEther } from 'viem'
 const contractAddress = "0xbd06B0878888bf4c6895704fa603a5ADf7e65c66"
 const abi = contractAbi.abi
 
-export interface PlayerContextType {
-  isRegistered: boolean,
-  player: null | string,
-  army: null | { profit_per_second: bigint },
-  balance: bigint,
-  register: () => void;
-  raid: () => void
+export interface Player {
+  created_at: bigint,
+  last_raided_at: bigint,
+  total_minted: bigint
+}
+export interface Army {
+  anointed: { level: number }
+  apprentice: { level: number }
+  champion: { level: number }
+  moloch_denier: { level: number }
+  profit_per_second: bigint
 }
 
-export interface Player { }
-export interface Army { }
+export interface PlayerContextType {
+  isRegistered: boolean,
+  player: null | Player,
+  army: null | Army,
+  balance: bigint,
+  register: () => void,
+  raid: () => void,
+  addUnit: (unit: number) => void
+}
 
 const PlayerContext = createContext<PlayerContextType>({
   isRegistered: false,
@@ -25,6 +36,7 @@ const PlayerContext = createContext<PlayerContextType>({
   balance: BigInt(0),
   register: () => { },
   raid: () => { },
+  addUnit: () => { }
 });
 
 const PlayerProvider = ({ children }: { children: ReactNode }) => {
@@ -96,16 +108,26 @@ const PlayerProvider = ({ children }: { children: ReactNode }) => {
     })
   }, [writeContract])
 
+  const addUnit = useCallback((unit: number) => {
+    writeContract({
+      abi,
+      address: contractAddress,
+      functionName: 'addUnit',
+      args: [unit, 1]
+    })
+  }, [writeContract])
+
   console.log(player, army)
 
   return (
     <PlayerContext.Provider value={{
       isRegistered: isRegistered as boolean,
-      player: player,
-      army: army,
+      player: player as Player,
+      army: army as Army,
       balance: balance as bigint,
       register,
-      raid
+      raid,
+      addUnit
     }}>
       {children}
     </PlayerContext.Provider>

app/src/styles/Army.module.css

@@ -113,3 +113,12 @@
 .champion {
   filter: saturate(2);
 }
+
+.supply {
+  position: absolute;
+  bottom: -40px;
+  background: rgba(0, 0, 0, 0.89);
+  padding: 0.5rem 1rem;
+  font-size: 0.8rem;
+  user-select: none;
+}