diff --git a/src/app/(game)/scanner/page.tsx b/src/app/(game)/scanner/page.tsx index df01921..b4cce03 100644 --- a/src/app/(game)/scanner/page.tsx +++ b/src/app/(game)/scanner/page.tsx @@ -1,11 +1,31 @@ "use client"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import Scanner from "@/components/Scanner"; import { InfoWindow } from "@/components/InfoWindow"; -const page = () => { +import { getBoothToken } from "@/lib/getBoothToken"; + +function page() { const [result, setResult] = useState(null); + const [info, setInfo] = useState({ title: "", msg: "" }); + const [showInfo, setShowInfo] = useState(false); + + useEffect(() => { + const handleResult = async () => { + if (typeof result !== "string") return; + var boothToken = await getBoothToken(result); + setResult(null); + if (boothToken) { + console.log(boothToken); + setInfo({ title: "已完成", msg: "恭喜獲得一塊拼圖!!" }); + } else { + setInfo({ title: "失敗", msg: "掃描失敗,請再試一次。" }); + } + setShowInfo(true); + }; + handleResult(); + }); return ( <> @@ -14,24 +34,17 @@ const page = () => { setResult(result); }} /> - console.log(result); - - {result === "success" && ( - setResult(null)} - /> - )} - {result === "fail" && ( + {showInfo && ( setResult(null)} + title={info.title} + msg={info.msg} + onClose={() => { + setShowInfo(false); + }} /> )} ); -}; +} export default page; diff --git a/src/components/Scanner.tsx b/src/components/Scanner.tsx index 6c9daa3..0d70d9d 100644 --- a/src/components/Scanner.tsx +++ b/src/components/Scanner.tsx @@ -1,5 +1,4 @@ "use client"; -import { getBoothToken } from "@/lib/getBoothToken"; import { useEffect, useState } from "react"; import { QrReader } from "react-qr-reader"; // Override console.error @@ -43,15 +42,7 @@ function Scanner({ onResult }: { onResult: (result: string) => void }) { onResult={async (result) => { const text = result?.getText(); if (text) { - console.log(text); - const boothToken = await getBoothToken(text); - console.log(boothToken); - - if (boothToken) { - onResult("success"); - } else { - onResult("fail"); - } + onResult(text); } }} constraints={{