diff --git a/frontend/app/components/CartridgeInfo.tsx b/frontend/app/components/CartridgeInfo.tsx index 55c3b50..1f69347 100644 --- a/frontend/app/components/CartridgeInfo.tsx +++ b/frontend/app/components/CartridgeInfo.tsx @@ -1,7 +1,7 @@ "use client" import { ethers } from "ethers"; -import React, { Suspense, useContext, useRef, useState } from 'react' +import React, { Suspense, useContext, useEffect, useRef, useState } from 'react' import { selectedCartridgeContext } from '../cartridges/selectedCartridgeProvider'; import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew'; import PublishIcon from '@mui/icons-material/Publish'; @@ -11,6 +11,7 @@ import { Tab } from '@headlessui/react' import { Canvas } from '@react-three/fiber'; import DescriptionIcon from '@mui/icons-material/Description'; import LeaderboardIcon from '@mui/icons-material/Leaderboard'; +import CachedIcon from '@mui/icons-material/Cached'; import StadiumIcon from '@mui/icons-material/Stadium'; import CodeIcon from '@mui/icons-material/Code'; import useDownloader from "react-use-downloader"; @@ -40,6 +41,7 @@ enum STATUS { } interface LOG_STATUS { + cartridgeId:string, status:STATUS, error?:string } @@ -142,7 +144,15 @@ function CartridgeInfo() { const [{ wallet }] = useConnectWallet(); const { download } = useDownloader(); const [submitLogStatus, setSubmitLogStatus] = useState({status: STATUS.READY} as LOG_STATUS); - const reloadScoreboard = submitLogStatus.status === STATUS.VALID? true:false; + const [reloadScoreboardCount, setReloadScoreboardCount] = useState(0); + + useEffect(() => { + // auto reload scoreboard only if + // gameplay log sent is valid and the selected cartridge is the same of the gameplay sent + if (submitLogStatus.status === STATUS.VALID && submitLogStatus.cartridgeId === selectedCartridge?.id) { + setReloadScoreboardCount(reloadScoreboardCount+1); + } + }, [submitLogStatus]) if (!selectedCartridge) return <>; @@ -179,12 +189,12 @@ function CartridgeInfo() { } console.log("Replay Outcard hash",selectedCartridge.outhash) - setSubmitLogStatus({status: STATUS.VALIDATING}); + setSubmitLogStatus({cartridgeId: selectedCartridge.id, status: STATUS.VALIDATING}); try { await replay(signer, envClient.DAPP_ADDR, inputData, {cartesiNodeUrl: envClient.CARTESI_NODE_URL}); - setSubmitLogStatus({status: STATUS.VALID}); + setSubmitLogStatus({cartridgeId: selectedCartridge.id, status: STATUS.VALID}); } catch (error) { - setSubmitLogStatus({status: STATUS.INVALID, error: (error as Error).message}); + setSubmitLogStatus({cartridgeId: selectedCartridge.id, status: STATUS.INVALID, error: (error as Error).message}); } } @@ -285,7 +295,7 @@ function CartridgeInfo() { disabled={!selectedCartridge.gameplayLog == undefined || selectedCartridge?.outcard == undefined || selectedCartridge?.outhash == undefined || !wallet || submitLogStatus.status != STATUS.READY}> { - submitLogStatus.status === STATUS.READY? + submitLogStatus.status === STATUS.READY || submitLogStatus.cartridgeId !== selectedCartridge.id? <> Submit Log @@ -386,8 +396,11 @@ function CartridgeInfo() { +
+ +
- +
diff --git a/frontend/app/components/CartridgeScoreboard.tsx b/frontend/app/components/CartridgeScoreboard.tsx index 5dcaffb..15ad325 100644 --- a/frontend/app/components/CartridgeScoreboard.tsx +++ b/frontend/app/components/CartridgeScoreboard.tsx @@ -1,15 +1,13 @@ import { getOutputs, ReplayScore } from '../backend-libs/app/lib'; import MilitaryTechIcon from '@mui/icons-material/MilitaryTech'; import OndemandVideoIcon from '@mui/icons-material/OndemandVideo'; -import {CACHE_OPTIONS_TYPE } from "cartesi-client"; - import { envClient } from '../utils/clientEnv'; import React from 'react'; -const getGeneralScoreboard = async (cartridge_id:string, cache: CACHE_OPTIONS_TYPE):Promise> => { - const scores:Array = await getOutputs({tags: ["score", cartridge_id]}, {cartesiNodeUrl: envClient.CARTESI_NODE_URL,cache}); +const getGeneralScoreboard = async (cartridge_id:string):Promise> => { + const scores:Array = await getOutputs({tags: ["score", cartridge_id]}, {cartesiNodeUrl: envClient.CARTESI_NODE_URL}); return scores; } @@ -28,22 +26,17 @@ const setMedal = (index:number) => { } async function CartridgeScoreboard({cartridge_id, reload, replay_function}:{ - cartridge_id:string, reload:boolean, replay_function(replayScore: ReplayScore): void}) { + cartridge_id:string, reload:number, replay_function(replayScore: ReplayScore): void}) { const playReplay = (replayScore:ReplayScore) => { replay_function(replayScore); } - const reloadScores = async (cacheOption: CACHE_OPTIONS_TYPE | undefined = "force-cache") => { - return (await getGeneralScoreboard(cartridge_id, cacheOption)).sort((a, b) => b.score - a.score); + const reloadScores = async () => { + return (await getGeneralScoreboard(cartridge_id)).sort((a, b) => b.score - a.score); } - let generalScores:ReplayScore[]; - if (reload) { - generalScores = await reloadScores("no-store"); - } else { - generalScores = await reloadScores(); - } + const generalScores:ReplayScore[] = await reloadScores(); return (
@@ -79,7 +72,7 @@ async function CartridgeScoreboard({cartridge_id, reload, replay_function}:{ {scoreInfo.score.toLocaleString()} - + ); @@ -94,11 +87,12 @@ async function CartridgeScoreboard({cartridge_id, reload, replay_function}:{ //export default CartridgeScoreboard; -const notRender = (prevProps:{cartridge_id:string, reload:boolean}, nextProps:{cartridge_id:string, reload:boolean}) => { - if ((prevProps.cartridge_id !== nextProps.cartridge_id) || nextProps.reload) { - return false // will re-render +const arePropsEqual = (prevProps:{cartridge_id:string, reload:number}, nextProps:{cartridge_id:string, reload:number}) => { + // change cartridge || log validated reload or reload btn + if ((prevProps.cartridge_id !== nextProps.cartridge_id) || (prevProps.reload !== nextProps.reload)) { + return false // will re-render } return true // donot re-render } -export default React.memo(CartridgeScoreboard, notRender) \ No newline at end of file +export default React.memo(CartridgeScoreboard, arePropsEqual) \ No newline at end of file diff --git a/frontend/app/globals.css b/frontend/app/globals.css index 9e17906..35631d7 100644 --- a/frontend/app/globals.css +++ b/frontend/app/globals.css @@ -346,6 +346,10 @@ body { @apply text-[var(--foreground-rgb-muted)]; } + + .scoreboard-btn { + @apply hover:text-[var(--highlight-text-end-hex)]; + } /* .leaderboard-card { @apply p-2 bg-[rgb(var(--background-start-rgb))] mb-3 rounded-md transition delay-150 duration-300 ease-in-out hover:scale-105; } */ diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx index 34df55e..601282b 100644 --- a/frontend/app/page.tsx +++ b/frontend/app/page.tsx @@ -17,7 +17,7 @@ export default function Home() {

- +