tmemory
Version:
A terminal-based Memory card game built with React Ink. Features multiple grid sizes, AI opponent, and high scores.
64 lines (63 loc) • 3.13 kB
JavaScript
import { Box, Text } from 'ink';
import React, { useEffect, useState } from 'react';
import { fetchLeaderboard } from '../../../api/scoreApi.js';
import { COLORS } from '../../../constants/colors.js';
import { formatTime } from '../../../utils/time.js';
export const Leaderboard = ({ gameMode, gridDimension, }) => {
const [scores, setScores] = useState([]);
const [error, setError] = useState(null);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
setIsLoading(true);
setScores([]);
fetchLeaderboard({
gameMode,
rows: gridDimension.rows,
cols: gridDimension.cols,
})
.then((data) => {
if (data.leaderboard) {
setScores(data.leaderboard);
setIsLoading(false);
}
})
.catch((err) => {
setError(err.message);
});
}, [gameMode, gridDimension]);
return (React.createElement(Box, { flexDirection: "column", marginY: 1, width: 50 },
React.createElement(Text, { color: COLORS.gold, bold: true },
"\uD83C\uDFC6 Leaderboard (Remote): ",
gridDimension.rows,
"x",
gridDimension.cols,
" -",
' ',
gameMode),
React.createElement(Box, { flexDirection: "column", marginTop: 1 },
React.createElement(Box, null,
React.createElement(Box, { width: 20 },
React.createElement(Text, { color: COLORS.info, bold: true }, "Player")),
React.createElement(Box, { width: 15 },
React.createElement(Text, { color: COLORS.info, bold: true }, "Time")),
React.createElement(Box, { width: 15 },
React.createElement(Text, { color: COLORS.info, bold: true }, "Date"))),
isLoading && (React.createElement(Box, { marginY: 1 },
React.createElement(Text, { dimColor: true }, "Loading..."))),
scores.length === 0 && !isLoading && (React.createElement(Box, { marginY: 1 }, error ? (React.createElement(Text, { color: "red" },
"Error: ",
error)) : (React.createElement(Text, { color: COLORS.dim }, "No remote scores available yet.")))),
scores.length && scores.length > 0
? scores.map((score, index) => {
const date = new Date(score.date);
const formattedDate = date.toLocaleDateString();
return (React.createElement(Box, { key: index },
React.createElement(Box, { width: 20 },
React.createElement(Text, { color: COLORS.p1 }, score.playerName || 'Anonymous')),
React.createElement(Box, { width: 15 },
React.createElement(Text, null, formatTime(score.time))),
React.createElement(Box, { width: 15 },
React.createElement(Text, { color: COLORS.dim }, formattedDate))));
})
: null)));
};