Skip to content

Commit

Permalink
fix: controls hard to notice
Browse files Browse the repository at this point in the history
  • Loading branch information
Danimal committed Mar 18, 2024
1 parent 5ffe746 commit f9513f6
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 92 deletions.
2 changes: 0 additions & 2 deletions TODO
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,6 @@ feat: short summaries
feat: speed controls for animation
feat: split captures and checks mini games
fix: UI jumps on incorrect guess
fix: controls hard to notice
fix: gaps in levels
fix: giveup doesn't autoadvance on guess
fix: health resets
fix: number sometimes ignored on enter
Expand Down
76 changes: 38 additions & 38 deletions src/components/ActionBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,53 +34,53 @@ export const ActionBar = ({
onReplayAnimation,
}: ActionBarProps) => {
return (
<div className="flex flex-wrap items-center justify-between gap-4">
<div className="flex flex-wrap items-center justify-between gap-4 px-2">
<div className="flex items-center gap-1">
{(!autoAdvance || playerStatus == "gave-up") && (
<button
onClick={onAdvance}
className="rounded bg-amber-600 px-2 py-1 font-bold text-white hover:bg-amber-700"
>
Advance
</button>
)}
{playerStatus != "gave-up" && (
<>
{allowNoSolution && (
<div className="flex gap-2">
{(!autoAdvance || playerStatus == "gave-up") && (
<button
onClick={onAdvance}
className="rounded bg-amber-600 px-2 py-1 font-bold text-white hover:bg-amber-700"
>
Advance
</button>
)}
{playerStatus != "gave-up" && (
<>
{allowNoSolution && (
<button
className={`${
pulseNoSolution ? "animate-pulse" : ""
} rounded bg-amber-600 px-2 py-1 font-bold text-white hover:bg-amber-700`}
onClick={onAdvance}
>
No Solution
</button>
)}
<button
className={`${
pulseNoSolution ? "animate-pulse" : ""
} rounded bg-amber-600 px-2 py-1 font-bold text-white hover:bg-amber-700`}
onClick={onAdvance}
className="whitespace-nowrap rounded bg-amber-600 px-2 py-1 font-bold text-white hover:bg-amber-700"
onClick={onGiveUp}
>
No Solution
Give Up
</button>
)}
</>
)}
{onReplayAnimation && (
<button
className="whitespace-nowrap rounded bg-amber-600 px-2 py-1 font-bold text-white hover:bg-amber-700"
onClick={onGiveUp}
className="rounded bg-amber-600 px-2 py-1 font-bold text-white hover:bg-amber-700"
onClick={onReplayAnimation}
>
Give Up
Replay
</button>
</>
)}
)}
</div>
</div>
{onReplayAnimation && (
<button
className="rounded bg-amber-600 px-2 py-1 font-bold text-white hover:bg-amber-700"
onClick={onReplayAnimation}
>
Replay
</button>
)}
{solutionType == "number" && onNumberEntry && (
<div className="mx-auto">
<NumberEntryForm
label="Total value"
onSubmit={onNumberEntry}
isWrong={playerStatus == "wrong-guess"}
/>
</div>
<NumberEntryForm
label="Total value"
onSubmit={onNumberEntry}
isWrong={playerStatus == "wrong-guess"}
/>
)}
{playerStatus == "premature-advancement" && (
<div className="flex items-center justify-center pr-6 font-bold text-amber-400">
Expand Down
106 changes: 54 additions & 52 deletions src/components/Game.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,61 +219,14 @@ export const Game = ({ logic, flavor, level, id }: GameProps) => {
/>
)}
{gameStatus == "playing" && (
<>
<div className="flex flex-col justify-between h-full">
<div>
<div className="m-2 text-center font-header text-2xl font-bold">
<div className="text-center font-header text-2xl font-bold">
{title}
</div>
<div className="mt-2 p-4">{rules}</div>
<GameHUD
score={currentScore}
health={health}
highScore={highScore}
maxHealth={MAX_HEALTH}
/>
<div className="p-4 text-center">{rules}</div>
</div>
<Chessboard
viewOnly={solutionType == "number"}
movable={solutionType == "move"}
fen={fens?.[fenPosition]}
gameUrl={gameUrl}
goodSquares={
solutionType == "square" ? (goodGuesses as Square[]) : []
}
badSquares={
solutionType == "square" ? (badGuesses as Square[]) : []
}
highlightedSquares={highlightedSquares}
onSelect={checkGuess}
onMove={checkGuess}
flipped={flipped}
>
<div className="flex h-full flex-wrap items-center justify-between gap-2 px-2">
<div>
{goodGuesses && goodGuesses.length > 0 && (
<div className="flex gap-2 bg-gray-800/50 px-2">
{goodGuesses.map((guess) => (
<div className="text-green-500" key={guess}>
{guess}
</div>
))}
</div>
)}
</div>
<div>
{badGuesses && badGuesses.length > 0 && (
<div className="flex gap-2 bg-gray-800/50 px-2 line-through">
{badGuesses.map((guess) => (
<div className="text-red-500" key={guess}>
{guess}
</div>
))}
</div>
)}
</div>
</div>
</Chessboard>
<div>
<div className="flex flex-col gap-1">
<ActionBar
solutionType={solutionType}
autoAdvance={autoAdvance}
Expand All @@ -287,8 +240,57 @@ export const Game = ({ logic, flavor, level, id }: GameProps) => {
onNumberEntry={(number) => checkGuess(number.toString())}
onReplayAnimation={() => resetAnimation()}
/>
<Chessboard
viewOnly={solutionType == "number"}
movable={solutionType == "move"}
fen={fens?.[fenPosition]}
gameUrl={gameUrl}
goodSquares={
solutionType == "square" ? (goodGuesses as Square[]) : []
}
badSquares={
solutionType == "square" ? (badGuesses as Square[]) : []
}
highlightedSquares={highlightedSquares}
onSelect={checkGuess}
onMove={checkGuess}
flipped={flipped}
>
<div className="flex h-full flex-wrap items-center justify-between gap-2">
<div>
{goodGuesses && goodGuesses.length > 0 && (
<div className="flex gap-2 bg-gray-800/50 px-2">
{goodGuesses.map((guess) => (
<div className="text-green-500" key={guess}>
{guess}
</div>
))}
</div>
)}
</div>
<div>
{badGuesses && badGuesses.length > 0 && (
<div className="flex gap-2 bg-gray-800/50 px-2 line-through">
{badGuesses.map((guess) => (
<div className="text-red-500" key={guess}>
{guess}
</div>
))}
</div>
)}
</div>
</div>
</Chessboard>
</div>
<div>
<GameHUD
score={currentScore}
health={health}
highScore={highScore}
maxHealth={MAX_HEALTH}
/>
</div>
</>
</div>
)}
</>
);
Expand Down

0 comments on commit f9513f6

Please sign in to comment.