Skip to content

Commit

Permalink
Merge pull request #23 from prototyp3-dev/fix/scoreboard
Browse files Browse the repository at this point in the history 
fix: scoreboard making several requests to the Cartesi Node
  • Loading branch information
@arthuravianna
arthuravianna authored Mar 13, 2024
2 parents 9ea7097 + e115705 commit 454ed3b
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 87 deletions.
2 changes: 1 addition & 1 deletion frontend/app/cartridges/selectedCartridgeProvider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export function SelectedCartridgeProvider({ children }:{ children: React.ReactNo
const changeCartridge = (cartridge:Cartridge) => {
if (selectedCartridge?.downloading) return; // change only if download already finished

const aux = {...cartridge, play:false, downloading:false, cartridgeData:undefined, inCard:undefined,
let aux = {...cartridge, play:false, downloading:false, cartridgeData:undefined, inCard:undefined,
args:undefined, scoreFunction:undefined, replay:undefined, gameplayLog:undefined,
outcard:undefined, outhash:undefined, initCanvas:selectedCartridge?.initCanvas};

Expand Down
71 changes: 1 addition & 70 deletions frontend/app/components/CartridgeInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ import CartridgeDescription from './CartridgeDescription';
import Link from 'next/link';
import CartridgeScoreboard from './CartridgeScoreboard';
import { envClient } from "../utils/clientEnv";
import { delay } from "../utils/util";
import ErrorIcon from '@mui/icons-material/Error';
import CloseIcon from "@mui/icons-material/Close";
import { sha256 } from "js-sha256";
Expand Down Expand Up @@ -69,72 +68,6 @@ function logFeedback(logStatus:LOG_STATUS, setLogStatus:Function) {
}


function scoreboardFallback() {
const arr = Array.from(Array(3).keys());

return (
<table className="w-full text-xs text-left">
<thead className="text-xsuppercase">
<tr>
<th scope="col" className="px-2 py-3">
User
</th>
<th scope="col" className="px-2 py-3">
Timestamp
</th>
<th scope="col" className="px-2 py-3">
Score
</th>
<th scope="col" className="px-2 py-3">
Status
</th>
<th scope="col" className="px-2 py-3">

</th>
</tr>
</thead>
<tbody className='animate-pulse'>
{
arr.map((num, index) => {
return (
<tr key={index}>
<td className="px-2 py-4 break-all">
<div className='ps-4 fallback-bg-color rounded-md'>
0xf39F...2266
</div>
</td>

<td className="px-2 py-4">
<div className='fallback-bg-color rounded-md'>
31/12/1969, 21:06:36 PM
</div>
</td>

<td className="px-2 py-4">
<div className='fallback-bg-color rounded-md'>
100
</div>
</td>
<td className="px-2 py-4">
<div className='fallback-bg-color rounded-md'>
100
</div>
</td>
<td className="w-[50px] h-[56px]">
<div className='fallback-bg-color rounded-md'>
100
</div>
</td>
</tr>
);
})
}

</tbody>
</table>
)
}

function CartridgeInfo() {
const {selectedCartridge, playCartridge, setGameplay, setReplay} = useContext(selectedCartridgeContext);
const fileRef = useRef<HTMLInputElement | null>(null);
Expand Down Expand Up @@ -502,9 +435,7 @@ function CartridgeInfo() {
<div className="w-full flex">
<button title="Reload Scores (cached for 3 mins)" className="ms-auto scoreboard-btn" onClick={() => setReloadScoreboardCount(reloadScoreboardCount+1)}><span><CachedIcon/></span></button>
</div>
<Suspense fallback={scoreboardFallback()}>
<CartridgeScoreboard cartridge_id={selectedCartridge.id} reload={reloadScoreboardCount} replay_function={prepareReplay}/>
</Suspense>
<CartridgeScoreboard cartridge_id={selectedCartridge.id} reload={reloadScoreboardCount} replay_function={prepareReplay}/>

</Tab.Panel>

Expand Down
98 changes: 82 additions & 16 deletions frontend/app/components/CartridgeScoreboard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
"use client"

import { getOutputs, ReplayScore } from '../backend-libs/app/lib';
import MilitaryTechIcon from '@mui/icons-material/MilitaryTech';
import OndemandVideoIcon from '@mui/icons-material/OndemandVideo';
import CheckIcon from '@mui/icons-material/Check';
import DoneAllIcon from '@mui/icons-material/DoneAll';
import ImageIcon from '@mui/icons-material/Image';
import { envClient } from '../utils/clientEnv';
import React from 'react';
import React, { useEffect, useState } from 'react';



Expand All @@ -32,8 +34,75 @@ const setMedal = (index:number) => {
return <span className='ms-7'></span>;
}

async function CartridgeScoreboard({cartridge_id, reload, replay_function}:{
function scoreboardFallback() {
const arr = Array.from(Array(3).keys());

return (
<table className="w-full text-xs text-left">
<thead className="text-xsuppercase">
<tr>
<th scope="col" className="px-2 py-3">
User
</th>
<th scope="col" className="px-2 py-3">
Timestamp
</th>
<th scope="col" className="px-2 py-3">
Score
</th>
<th scope="col" className="px-2 py-3">
Status
</th>
<th scope="col" className="px-2 py-3">

</th>
</tr>
</thead>
<tbody className='animate-pulse'>
{
arr.map((num, index) => {
return (
<tr key={index}>
<td className="px-2 py-4 break-all">
<div className='ps-4 fallback-bg-color rounded-md'>
0xf39F...2266
</div>
</td>

<td className="px-2 py-4">
<div className='fallback-bg-color rounded-md'>
31/12/1969, 21:06:36 PM
</div>
</td>

<td className="px-2 py-4">
<div className='fallback-bg-color rounded-md'>
100
</div>
</td>
<td className="px-2 py-4">
<div className='fallback-bg-color rounded-md'>
100
</div>
</td>
<td className="w-[50px] h-[56px]">
<div className='fallback-bg-color rounded-md'>
100
</div>
</td>
</tr>
);
})
}

</tbody>
</table>
)
}

function CartridgeScoreboard({cartridge_id, reload, replay_function}:{
cartridge_id:string, reload:number, replay_function(replayScore: ReplayScore): void}) {
const [generalScores, setGeneralScore] = useState<ReplayScore[]|null>(null);

const playReplay = (replayScore:ReplayScore) => {
replay_function(replayScore);
Expand All @@ -43,7 +112,15 @@ async function CartridgeScoreboard({cartridge_id, reload, replay_function}:{
return (await getGeneralScoreboard(cartridge_id)).sort((a, b) => b.score - a.score);
}

const generalScores:ReplayScore[] = await reloadScores();
useEffect(() => {
if (generalScores) setGeneralScore(null) // set to null to trigger the loading effect

reloadScores().then((scores) => setGeneralScore(scores));
}, [cartridge_id, reload])

if (!generalScores) {
return scoreboardFallback();
}

return (
<div className="relative">
Expand Down Expand Up @@ -71,7 +148,7 @@ async function CartridgeScoreboard({cartridge_id, reload, replay_function}:{
{
generalScores.map((scoreInfo, index) => {
return (
<tr key={`${scoreInfo.user_address}-${scoreInfo.timestamp}`} className="">
<tr key={index}>
<td title={scoreInfo.user_address.toLowerCase()} scope="row" className="px-2 py-4 break-all">
{setMedal(index)} {scoreInfo.user_alias? scoreInfo.user_alias:scoreInfo.user_address.substring(0,6)+"..."+scoreInfo.user_address.substring(scoreInfo.user_address.length-4,scoreInfo.user_address.length)}
</td>
Expand Down Expand Up @@ -103,15 +180,4 @@ async function CartridgeScoreboard({cartridge_id, reload, replay_function}:{
)
}

//export default CartridgeScoreboard;


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, arePropsEqual)
export default CartridgeScoreboard;

0 comments on commit 454ed3b

Please sign in to comment.