Skip to content

Commit

Permalink
feat: user select
Browse files Browse the repository at this point in the history
  • Loading branch information
@tower1229
tower1229 committed Feb 1, 2024
1 parent 04239fa commit 1f4cb6d
Showing 1 changed file with 93 additions and 68 deletions.
161 changes: 93 additions & 68 deletions src/pages/game/_components/GameOver.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -31,68 +31,29 @@ 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,
}: {
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);
Expand Down Expand Up @@ -121,6 +82,10 @@ export const GameOver = ({
}
}, [contractResult, onRefresh]);

const userSelect = useRef<boolean>();

const hiddenStepIndex = useRef<number[]>([]);

const SettlementProgress = [
{
prefix: "$",
Expand Down Expand Up @@ -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);
});
},
},
{
Expand Down Expand Up @@ -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
Expand Down

0 comments on commit 1f4cb6d

Please sign in to comment.