From 1f4cb6d27b172353a777b18bc0301cb6f5c6ebd2 Mon Sep 17 00:00:00 2001
From: tower1229 <tower1229@foxmail.com>
Date: Thu, 1 Feb 2024 19:44:13 +0800
Subject: [PATCH] feat: user select

---
 src/pages/game/_components/GameOver.tsx | 161 ++++++++++++++----------
 1 file changed, 93 insertions(+), 68 deletions(-)

diff --git a/src/pages/game/_components/GameOver.tsx b/src/pages/game/_components/GameOver.tsx
index 296f4d2..5738df3 100644
--- a/src/pages/game/_components/GameOver.tsx
+++ b/src/pages/game/_components/GameOver.tsx
@@ -7,7 +7,7 @@ import {
   useBlockNumber,
   useAccount,
 } from "wagmi";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import FileSaver from "file-saver";
 import { generatePublicInput, gameState } from "../_utils";
 import {
@@ -31,52 +31,7 @@ const canisterId = import.meta.env.VITE_APP_CANISTERID;
 const actor = Actor.createActor(idlFactory, { agent, canisterId });
 
 const ContractAddress = import.meta.env.VITE_APP_CONTRACT_ADDRESS;
-{
-  /* 2000000000000000n */
-}
-/**
- * <button
-                className="btn btn-sm btn-success btn-outline"
-                onClick={() => {
-                  window.open("https://arbitrum-faucet.com/");
-                }}
-              >
-                <svg
-                  className="h-5 w-5"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                >
-                  <path
-                    d="M9.16488 17.6505C8.92513 17.8743 8.73958 18.0241 8.54996 18.1336C7.62175 18.6695 6.47816 18.6695 5.54996 18.1336C5.20791 17.9361 4.87912 17.6073 4.22153 16.9498C3.56394 16.2922 3.23514 15.9634 3.03767 15.6213C2.50177 14.6931 2.50177 13.5495 3.03767 12.6213C3.23514 12.2793 3.56394 11.9505 4.22153 11.2929L7.04996 8.46448C7.70755 7.80689 8.03634 7.47809 8.37838 7.28062C9.30659 6.74472 10.4502 6.74472 11.3784 7.28061C11.7204 7.47809 12.0492 7.80689 12.7068 8.46448C13.3644 9.12207 13.6932 9.45086 13.8907 9.7929C14.4266 10.7211 14.4266 11.8647 13.8907 12.7929C13.7812 12.9825 13.6314 13.1681 13.4075 13.4078M10.5919 10.5922C10.368 10.8319 10.2182 11.0175 10.1087 11.2071C9.57284 12.1353 9.57284 13.2789 10.1087 14.2071C10.3062 14.5492 10.635 14.878 11.2926 15.5355C11.9502 16.1931 12.279 16.5219 12.621 16.7194C13.5492 17.2553 14.6928 17.2553 15.621 16.7194C15.9631 16.5219 16.2919 16.1931 16.9495 15.5355L19.7779 12.7071C20.4355 12.0495 20.7643 11.7207 20.9617 11.3787C21.4976 10.4505 21.4976 9.30689 20.9617 8.37869C20.7643 8.03665 20.4355 7.70785 19.7779 7.05026C19.1203 6.39267 18.7915 6.06388 18.4495 5.8664C17.5212 5.3305 16.3777 5.3305 15.4495 5.8664C15.2598 5.97588 15.0743 6.12571 14.8345 6.34955"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                  />
-                </svg>
-                Faucet by Alchemy
-              </button>
 
-              <button
-                className="btn btn-sm btn-success btn-outline"
-                onClick={() => {
-                  window.open("https://faucet.quicknode.com/arbitrum/sepolia/");
-                }}
-              >
-                <svg
-                  className="h-5 w-5"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                >
-                  <path
-                    d="M9.16488 17.6505C8.92513 17.8743 8.73958 18.0241 8.54996 18.1336C7.62175 18.6695 6.47816 18.6695 5.54996 18.1336C5.20791 17.9361 4.87912 17.6073 4.22153 16.9498C3.56394 16.2922 3.23514 15.9634 3.03767 15.6213C2.50177 14.6931 2.50177 13.5495 3.03767 12.6213C3.23514 12.2793 3.56394 11.9505 4.22153 11.2929L7.04996 8.46448C7.70755 7.80689 8.03634 7.47809 8.37838 7.28062C9.30659 6.74472 10.4502 6.74472 11.3784 7.28061C11.7204 7.47809 12.0492 7.80689 12.7068 8.46448C13.3644 9.12207 13.6932 9.45086 13.8907 9.7929C14.4266 10.7211 14.4266 11.8647 13.8907 12.7929C13.7812 12.9825 13.6314 13.1681 13.4075 13.4078M10.5919 10.5922C10.368 10.8319 10.2182 11.0175 10.1087 11.2071C9.57284 12.1353 9.57284 13.2789 10.1087 14.2071C10.3062 14.5492 10.635 14.878 11.2926 15.5355C11.9502 16.1931 12.279 16.5219 12.621 16.7194C13.5492 17.2553 14.6928 17.2553 15.621 16.7194C15.9631 16.5219 16.2919 16.1931 16.9495 15.5355L19.7779 12.7071C20.4355 12.0495 20.7643 11.7207 20.9617 11.3787C21.4976 10.4505 21.4976 9.30689 20.9617 8.37869C20.7643 8.03665 20.4355 7.70785 19.7779 7.05026C19.1203 6.39267 18.7915 6.06388 18.4495 5.8664C17.5212 5.3305 16.3777 5.3305 15.4495 5.8664C15.2598 5.97588 15.0743 6.12571 14.8345 6.34955"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                  />
-                </svg>
-                Faucet by QuickNode
-              </button>
- * **/
 export const GameOver = ({
   onRefresh,
   onExit,
@@ -84,15 +39,21 @@ export const GameOver = ({
   onRefresh: () => void;
   onExit: () => void;
 }) => {
+  const balanceData = useRef<bigint>(0n);
   const { address } = useAccount();
   const { data: blockNumber } = useBlockNumber({ watch: true });
-  const { data: balanceData, queryKey } = useBalance({
+  const { data: balance, queryKey } = useBalance({
     address,
   });
   const queryClient = useQueryClient();
   useEffect(() => {
     void queryClient.invalidateQueries({ queryKey });
   }, [blockNumber, queryClient, queryKey]);
+  useEffect(() => {
+    if (balance?.value) {
+      balanceData.current = balance.value;
+    }
+  }, [balance]);
 
   const { path } = gameState;
   const [step, setStep] = useState(0);
@@ -121,6 +82,10 @@ export const GameOver = ({
     }
   }, [contractResult, onRefresh]);
 
+  const userSelect = useRef<boolean>();
+
+  const hiddenStepIndex = useRef<number[]>([]);
+
   const SettlementProgress = [
     {
       prefix: "$",
@@ -191,24 +156,82 @@ export const GameOver = ({
       prefix: "$",
       content: (
         <>
-          Go next?
+          Verify result to Arbitrum Sepolia blockchain?
+          {userSelect.current !== false && (
+            <button
+              className="rounded-none text-warning btn btn-xs btn-ghost"
+              disabled={userSelect.current !== undefined}
+              onClick={() => {
+                userSelect.current === undefined && (userSelect.current = true);
+              }}
+            >
+              [Yes]
+            </button>
+          )}
+          {userSelect.current !== true && (
+            <button
+              className="rounded-none text-warning btn btn-xs btn-ghost"
+              disabled={userSelect.current !== undefined}
+              onClick={() => {
+                userSelect.current === undefined &&
+                  (userSelect.current = false);
+              }}
+            >
+              [No]
+            </button>
+          )}
+        </>
+      ),
+      class: "",
+      run: () => {
+        return new Promise((resolve, reject) => {
+          const timer = setInterval(() => {
+            if (userSelect.current === true) {
+              clearInterval(timer);
+              resolve(true);
+            } else if (userSelect.current === false) {
+              clearInterval(timer);
+              reject(`User Cancel!`);
+            }
+          }, 200);
+        });
+      },
+    },
+    {
+      prefix: "$",
+      content: (
+        <>
+          Minimum 0.002 ETH required.
           <button
-            className="rounded-none text-success btn btn-xs btn-ghost"
-            onClick={() => {}}
+            className="rounded-none text-warning btn btn-xs btn-ghost"
+            onClick={() => {
+              window.open("https://arbitrum-faucet.com/");
+            }}
           >
-            [Yes]
+            [Faucet by Alchemy]
           </button>
           <button
-            className="rounded-none text-success btn btn-xs btn-ghost"
-            onClick={() => {}}
+            className="rounded-none text-warning btn btn-xs btn-ghost"
+            onClick={() => {
+              window.open("https://faucet.quicknode.com/arbitrum/sepolia/");
+            }}
           >
-            [No]
+            [Faucet by QuickNode]
           </button>
         </>
       ),
-      class: "text-warning",
+      class: "text-error",
       run: () => {
-        return new Promise((resolve) => resolve(true));
+        return new Promise((resolve) => {
+          const timer = setInterval(() => {
+            console.log("balance=", balanceData.current);
+            if (balanceData.current > 2000000000000000n) {
+              hiddenStepIndex.current = [4];
+              clearInterval(timer);
+              resolve(true);
+            }
+          }, 1000);
+        });
       },
     },
     {
@@ -331,18 +354,20 @@ export const GameOver = ({
   return (
     <div className="flex flex-col h-full text-white w-full p-4 top-0 left-0 absolute justify-center items-center">
       <div className="bg-base-100 text-base-content min-h-20 mockup-code">
-        {SettlementProgress.slice(0, step + 1).map((log, index) => (
-          <pre
-            data-prefix={log.prefix}
-            className={errorMsg && step === index ? " text-error" : log.class}
-            key={index}
-          >
-            {step === index && !errorMsg && (
-              <span className="loading loading-ball loading-xs"></span>
-            )}
-            <code>{log.content}</code>
-          </pre>
-        ))}
+        {SettlementProgress.slice(0, step + 1).map((log, index) => {
+          return hiddenStepIndex.current.includes(index) ? null : (
+            <pre
+              data-prefix={log.prefix}
+              className={errorMsg && step === index ? " text-error" : log.class}
+              key={index}
+            >
+              {step === index && !errorMsg && (
+                <span className="loading loading-ball loading-xs"></span>
+              )}
+              <code>{log.content}</code>
+            </pre>
+          );
+        })}
 
         {SettlementOver && (
           <pre