tmemory
Version:
A terminal-based Memory card game built with React Ink. Features multiple grid sizes, AI opponent, and high scores.
54 lines (53 loc) • 2.63 kB
JavaScript
import { Box, Text, useInput } from 'ink';
import Link from 'ink-link';
import React, { useState } from 'react';
import { COLORS } from '../../constants/colors.js';
import { ALL_PRESET_GRIDS } from '../../constants/gridPresets.js';
import { useGame } from '../../context/GameContext/index.js';
import { Leaderboard as LeaderboardComponent } from '../GameOver/components/Leaderboard.js';
// Define available game modes
const gameModes = ['single', 'vs-player', 'vs-ai'];
export const LeaderboardScreen = () => {
const [currentModeIndex, setCurrentModeIndex] = useState(0);
const currentMode = gameModes[currentModeIndex];
const [currentGridIndex, setCurrentGridIndex] = useState(0);
const currentGrid = ALL_PRESET_GRIDS[currentGridIndex];
const { dispatch } = useGame();
useInput((input, key) => {
if (key.leftArrow) {
setCurrentModeIndex((prev) => prev === 0 ? gameModes.length - 1 : prev - 1);
}
else if (key.rightArrow) {
setCurrentModeIndex((prev) => prev === gameModes.length - 1 ? 0 : prev + 1);
}
else if (key.upArrow) {
setCurrentGridIndex((prev) => prev === 0 ? ALL_PRESET_GRIDS.length - 1 : prev - 1);
}
else if (key.downArrow) {
setCurrentGridIndex((prev) => prev === ALL_PRESET_GRIDS.length - 1 ? 0 : prev + 1);
}
else if (input.toLowerCase() === 'b') {
dispatch({ type: 'SET_GAME_STATE', payload: 'welcome' });
}
});
return (React.createElement(Box, { flexDirection: "column", alignItems: "center", padding: 1 },
React.createElement(LeaderboardComponent, { gameMode: currentMode, gridDimension: currentGrid }),
React.createElement(Box, { marginTop: 1 },
React.createElement(Text, { color: COLORS.dim },
"Use ",
React.createElement(Text, { color: 'white' }, "\u21F5"),
" to change grid size. Use",
' ',
React.createElement(Text, { color: 'white' }, "\u21C6"),
" to switch game modes. Press",
' ',
React.createElement(Text, { color: 'white' }, "'b'"),
" to go back to Main Menu.")),
React.createElement(Box, { marginTop: 1 },
React.createElement(Text, { color: COLORS.dim },
React.createElement(Link, { url: "https://tmemory.griffen.codes/#leaderboard" },
"View the",
` `,
React.createElement(Text, { color: "cyan" }, "full leaderboard"))))));
};
export default LeaderboardScreen;