0xFableOrg · ultraviolet10 · Mar 4, 2024 · Mar 3, 2024 · Mar 3, 2024 · Mar 3, 2024
diff --git a/packages/webapp/.prettierrc.json b/packages/webapp/.prettierrc.json
@@ -1,8 +1,8 @@
 {
-  "semi": false,
-  "trailingComma": "es5",
-  "singleQuote": false,
-  "tabWidth": 4,
-  "useTabs": false,
-  "printWidth": 120
+    "semi": false,
+    "trailingComma": "es5",
+    "singleQuote": false,
+    "tabWidth": 4,
+    "useTabs": false,
+    "printWidth": 120
 }
diff --git a/packages/webapp/.vscode/settings.json b/packages/webapp/.vscode/settings.json
@@ -1,4 +1,4 @@
 {
     "javascript.validate.enable": false,
     "typescript.validate.enable": false
-}
+}
diff --git a/packages/webapp/Makefile b/packages/webapp/Makefile
@@ -27,7 +27,7 @@ lint:
 # Runs code quality checks.
 check: 
 	pnpm eslint .
-	pnpm prettier --check "**/*.{js,jsx,ts,tsx,json,css}"
+	pnpm prettier --check "src/**/*.{js,jsx,ts,tsx,json,css}"
 .PHONY: check
 
 # Runs prettier formatting across webapp files with specified file extensions.

diff --git a/packages/webapp/package.json b/packages/webapp/package.json
@@ -1,59 +1,60 @@
 {
-	"name": "@xfable/webapp",
-	"version": "0.1.0",
-	"private": true,
-	"browser": {
-		"fs": false,
-		"path": false,
-		"os": false
-	},
-	"dependencies": {
-		"@dnd-kit/core": "^6.0.8",
-		"@dnd-kit/sortable": "^7.0.2",
-		"@dnd-kit/utilities": "^3.2.1",
-		"@emotion/react": "^11.11.1",
-		"@radix-ui/react-dialog": "^1.0.5",
-		"@radix-ui/react-navigation-menu": "^1.1.4",
-		"@radix-ui/react-slot": "^1.0.2",
-		"circomlibjs": "^0.1.7",
-		"class-variance-authority": "^0.7.0",
-		"clsx": "^2.1.0",
-		"connectkit": "^1.5.3",
-		"eslint-config-prettier": "^9.1.0",
-		"jotai": "^2.4.3",
-		"jotai-devtools": "^0.7.0",
-		"lodash": "^4.17.21",
-		"lucide-react": "^0.309.0",
-		"next": "^13.5.6",
-		"next-themes": "^0.2.1",
-		"next-transpile-modules": "^10.0.1",
-		"react": "18.2.0",
-		"react-dom": "18.2.0",
-		"react-icons": "^4.11.0",
-		"snarkjs": "^0.7.1",
-		"sonner": "^1.4.0",
-		"tailwind-merge": "^2.2.0",
-		"tailwindcss-animate": "^1.0.7",
-		"viem": "^1.16.6",
-		"wagmi": "^1.4.5"
-	},
-	"devDependencies": {
-		"@swc-jotai/debug-label": "^0.1.0",
-		"@swc-jotai/react-refresh": "^0.1.0",
-		"@types/eslint": "^8.44.6",
-		"@types/lodash": "^4.14.200",
-		"@types/node": "^20.8.7",
-		"@types/react": "^18.2.31",
-		"@types/react-dom": "^18.2.14",
-		"@typescript-eslint/eslint-plugin": "^6.8.0",
-		"@typescript-eslint/parser": "^6.8.0",
-		"@wagmi/cli": "^1.5.2",
-		"@welldone-software/why-did-you-render": "^7.0.1",
-		"autoprefixer": "^10.4.16",
-		"eslint": "^8.52.0",
-		"eslint-config-next": "^13.5.6",
-		"postcss": "^8.4.31",
-		"tailwindcss": "^3.3.3",
-		"typescript": "^5.2.2"
-	}
+    "name": "@xfable/webapp",
+    "version": "0.1.0",
+    "private": true,
+    "browser": {
+        "fs": false,
+        "path": false,
+        "os": false
+    },
+    "dependencies": {
+        "@dnd-kit/core": "^6.0.8",
+        "@dnd-kit/sortable": "^7.0.2",
+        "@dnd-kit/utilities": "^3.2.1",
+        "@emotion/react": "^11.11.1",
+        "@radix-ui/react-dialog": "^1.0.5",
+        "@radix-ui/react-navigation-menu": "^1.1.4",
+        "@radix-ui/react-slot": "^1.0.2",
+        "circomlibjs": "^0.1.7",
+        "class-variance-authority": "^0.7.0",
+        "clsx": "^2.1.0",
+        "connectkit": "^1.5.3",
+        "eslint-config-prettier": "^9.1.0",
+        "jotai": "^2.4.3",
+        "jotai-devtools": "^0.7.0",
+        "lodash": "^4.17.21",
+        "lucide-react": "^0.309.0",
+        "next": "^13.5.6",
+        "next-themes": "^0.2.1",
+        "next-transpile-modules": "^10.0.1",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "react-icons": "^4.11.0",
+        "snarkjs": "^0.7.1",
+        "sonner": "^1.4.0",
+        "tailwind-merge": "^2.2.0",
+        "tailwindcss-animate": "^1.0.7",
+        "viem": "^1.16.6",
+        "wagmi": "^1.4.5"
+    },
+    "devDependencies": {
+        "@swc-jotai/debug-label": "^0.1.0",
+        "@swc-jotai/react-refresh": "^0.1.0",
+        "@types/eslint": "^8.44.6",
+        "@types/lodash": "^4.14.200",
+        "@types/node": "^20.8.7",
+        "@types/react": "^18.2.31",
+        "@types/react-dom": "^18.2.14",
+        "@typescript-eslint/eslint-plugin": "^6.8.0",
+        "@typescript-eslint/parser": "^6.8.0",
+        "@wagmi/cli": "^1.5.2",
+        "@welldone-software/why-did-you-render": "^7.0.1",
+        "autoprefixer": "^10.4.16",
+        "eslint": "^8.52.0",
+        "eslint-config-next": "^13.5.6",
+        "postcss": "^8.4.31",
+        "prettier": "2.8.8",
+        "tailwindcss": "^3.3.3",
+        "typescript": "^5.2.2"
+    }
 }
diff --git a/packages/webapp/src/actions/attack.ts b/packages/webapp/src/actions/attack.ts
@@ -9,13 +9,13 @@ import { getOpponentIndex } from "src/store/read"
 // =================================================================================================
 
 export type AttackArgs = {
-  gameID: bigint
-  playerAddress: Address
-  setLoading: (label: string | null) => void
-  /**
-   * A list of attacking creatures indexes.
-   */
-  selectedCreaturesIndexes: number[]
+    gameID: bigint
+    playerAddress: Address
+    setLoading: (label: string | null) => void
+    /**
+     * A list of attacking creatures indexes.
+     */
+    selectedCreaturesIndexes: number[]
 }
 
 // -------------------------------------------------------------------------------------------------
@@ -27,32 +27,30 @@ export type AttackArgs = {
  * Returns `true` iff the player successfully declared the attack.
  */
 export async function attack(args: AttackArgs): Promise<boolean> {
-  try {
-    return await attackImpl(args)
-  } catch (err) {
-    args.setLoading(null)
-    return defaultErrorHandling("attack", err)
-  }
+    try {
+        return await attackImpl(args)
+    } catch (err) {
+        args.setLoading(null)
+        return defaultErrorHandling("attack", err)
+    }
 }
 
 // -------------------------------------------------------------------------------------------------
 
 async function attackImpl(args: AttackArgs): Promise<boolean> {
-
-  checkFresh(await freshWrap(
-    contractWriteThrowing({
-      contract: deployment.Game,
-      abi: gameABI,
-      functionName: "attack",
-      args: [
-        args.gameID,
-        getOpponentIndex()!,
-        args.selectedCreaturesIndexes
-      ],
-      setLoading: args.setLoading
-    })))
-
-  return true
+    checkFresh(
+        await freshWrap(
+            contractWriteThrowing({
+                contract: deployment.Game,
+                abi: gameABI,
+                functionName: "attack",
+                args: [args.gameID, getOpponentIndex()!, args.selectedCreaturesIndexes],
+                setLoading: args.setLoading,
+            })
+        )
+    )
+
+    return true
 }
 
-// =================================================================================================
+// =================================================================================================
diff --git a/packages/webapp/src/actions/concede.ts b/packages/webapp/src/actions/concede.ts
@@ -8,10 +8,10 @@ import { gameABI } from "src/generated"
 // =================================================================================================
 
 export type ConcedeArgs = {
-  gameID: bigint
-  playerAddress: Address
-  setLoading: (label: string | null) => void
-  onSuccess: () => void
+    gameID: bigint
+    playerAddress: Address
+    setLoading: (label: string | null) => void
+    onSuccess: () => void
 }
 
 // -------------------------------------------------------------------------------------------------
@@ -22,31 +22,31 @@ export type ConcedeArgs = {
  * Returns `true` iff the player successfully conceded the defenders.
  */
 export async function concede(args: ConcedeArgs): Promise<boolean> {
-  try {
-    return await concedeImpl(args)
-  } catch (err) {
-    args.setLoading(null)
-    return defaultErrorHandling("concede", err)
-  }
+    try {
+        return await concedeImpl(args)
+    } catch (err) {
+        args.setLoading(null)
+        return defaultErrorHandling("concede", err)
+    }
 }
 
 // -------------------------------------------------------------------------------------------------
 
 async function concedeImpl(args: ConcedeArgs): Promise<boolean> {
-
-  checkFresh(await freshWrap(
-    contractWriteThrowing({
-      contract: deployment.Game,
-      abi: gameABI,
-      functionName: "concedeGame",
-      args: [
-        args.gameID,
-      ],
-      setLoading: args.setLoading
-    })))
-
-  args.onSuccess()
-  return true
+    checkFresh(
+        await freshWrap(
+            contractWriteThrowing({
+                contract: deployment.Game,
+                abi: gameABI,
+                functionName: "concedeGame",
+                args: [args.gameID],
+                setLoading: args.setLoading,
+            })
+        )
+    )
+
+    args.onSuccess()
+    return true
 }
 
-// =================================================================================================
+// =================================================================================================
diff --git a/packages/webapp/src/actions/defend.ts b/packages/webapp/src/actions/defend.ts
@@ -8,15 +8,15 @@ import { gameABI } from "src/generated"
 // =================================================================================================
 
 export type DefendArgs = {
-  gameID: bigint
-  playerAddress: Address
-  setLoading: (label: string | null) => void
-  /**
-   * A list of defending creatures indexes. This array must be the same length as the list of
-   * attacking creatures, and maybe contain 0 to signal that an attacking creature should not be
-   * blocked.
-   */
-  defendingCreaturesIndexes: number[]
+    gameID: bigint
+    playerAddress: Address
+    setLoading: (label: string | null) => void
+    /**
+     * A list of defending creatures indexes. This array must be the same length as the list of
+     * attacking creatures, and maybe contain 0 to signal that an attacking creature should not be
+     * blocked.
+     */
+    defendingCreaturesIndexes: number[]
 }
 
 // -------------------------------------------------------------------------------------------------
@@ -27,31 +27,30 @@ export type DefendArgs = {
  * Returns `true` iff the player successfully declared the defenders.
  */
 export async function defend(args: DefendArgs): Promise<boolean> {
-  try {
-    return await defendImpl(args)
-  } catch (err) {
-    args.setLoading(null)
-    return defaultErrorHandling("defend", err)
-  }
+    try {
+        return await defendImpl(args)
+    } catch (err) {
+        args.setLoading(null)
+        return defaultErrorHandling("defend", err)
+    }
 }
 
 // -------------------------------------------------------------------------------------------------
 
 async function defendImpl(args: DefendArgs): Promise<boolean> {
-
-  checkFresh(await freshWrap(
-    contractWriteThrowing({
-      contract: deployment.Game,
-      abi: gameABI,
-      functionName: "defend",
-      args: [
-        args.gameID,
-        args.defendingCreaturesIndexes
-      ],
-      setLoading: args.setLoading
-    })))
-
-  return true
+    checkFresh(
+        await freshWrap(
+            contractWriteThrowing({
+                contract: deployment.Game,
+                abi: gameABI,
+                functionName: "defend",
+                args: [args.gameID, args.defendingCreaturesIndexes],
+                setLoading: args.setLoading,
+            })
+        )
+    )
+
+    return true
 }
 
-// =================================================================================================
+// =================================================================================================