tmemory
Version:
A terminal-based Memory card game built with React Ink. Features multiple grid sizes, AI opponent, and high scores.
35 lines (34 loc) • 1.6 kB
JavaScript
import { Box, Text } from 'ink';
import TextInput from 'ink-text-input';
import React, { useEffect, useState } from 'react';
import { COLORS } from '../../../constants/colors.js';
import { useHighScores } from '../../../context/HighScoreContext/index.js';
export const PlayerNameInput = ({ isNewRecord, onNameSubmit, }) => {
const { getPlayerName, setPlayerName } = useHighScores();
const [name, setName] = useState(getPlayerName() || '');
const [submitted, setSubmitted] = useState(false);
// If not a new record, auto-submit the existing name
useEffect(() => {
if (!isNewRecord && name) {
onNameSubmit(name);
setSubmitted(true);
}
}, [isNewRecord, name, onNameSubmit]);
const handleSubmit = (value) => {
const trimmedName = value.trim() || 'Anonymous';
setPlayerName(trimmedName);
onNameSubmit(trimmedName);
setSubmitted(true);
};
if (submitted || (!isNewRecord && !name)) {
return null;
}
return (React.createElement(Box, { flexDirection: "column", marginY: 1 },
React.createElement(Text, { color: COLORS.gold }, isNewRecord
? '🏆 New high score! Enter your name:'
: 'Enter your name for the leaderboard:'),
React.createElement(Box, { marginTop: 1 },
React.createElement(TextInput, { value: name, onChange: setName, onSubmit: handleSubmit, placeholder: "Your name (max 12 chars)", showCursor: true, focus: true,
// mask={useMask ? '*' : undefined}
highlightPastedText: true }))));
};