feat: reload scoreboard btn

1) autoreload scoreboard only when on the same cartridge of the submited log
2) hover effect on reload scoreboard btn and replay btn
3) change youtube videoId to the one on RiVES channel

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?
                                     <>
                                         <span><PublishIcon/></span>
                                         <span>Submit Log</span>
@@ -386,8 +396,11 @@ function CartridgeInfo() {
                             <Tab.Panel
                                 className="game-tab-content"
                             >
+                                <div className="w-full flex">
+                                    <button className="ms-auto scoreboard-btn" onClick={() => setReloadScoreboardCount(reloadScoreboardCount+1)}><span><CachedIcon/></span></button>
+                                </div>
                                 <Suspense fallback={scoreboardFallback()}>
-                                    <CartridgeScoreboard cartridge_id={selectedCartridge.id} reload={reloadScoreboard} replay_function={prepareReplay}/>
+                                    <CartridgeScoreboard cartridge_id={selectedCartridge.id} reload={reloadScoreboardCount} replay_function={prepareReplay}/>
                                 </Suspense>
 
                             </Tab.Panel>

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<Array<ReplayScore>> => {
-    const scores:Array<ReplayScore> = await getOutputs({tags: ["score", cartridge_id]}, {cartesiNodeUrl: envClient.CARTESI_NODE_URL,cache});
+const getGeneralScoreboard = async (cartridge_id:string):Promise<Array<ReplayScore>> => {
+    const scores:Array<ReplayScore> = 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 (
         <div className="relative">
@@ -79,7 +72,7 @@ async function CartridgeScoreboard({cartridge_id, reload, replay_function}:{
                                         {scoreInfo.score.toLocaleString()}
                                     </td>
                                     <td className="py-4">
-                                        <button onClick={() => playReplay(scoreInfo)}><span><OndemandVideoIcon/></span></button>
+                                        <button className='scoreboard-btn' onClick={() => playReplay(scoreInfo)}><span><OndemandVideoIcon/></span></button>
                                     </td>
                                 </tr>
                             );
@@ -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)
+export default React.memo(CartridgeScoreboard, arePropsEqual)

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;
   } */

frontend/app/page.tsx

@@ -17,7 +17,7 @@ export default function Home() {
           </p>
 
           <div className="w-1/2 flex items-center justify-center">
-            <YoutubeVideo videoId="1x5B1xJY7as" />
+            <YoutubeVideo videoId="7y22pdgGIE0" />
           </div>
 
       </section>