Tony_tech/chess-project
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bug fixes and first try of github docker

Browse Source
This commit is contained in:
Stefan
2025-11-23 16:43:47 +01:00
parent 74016f08c6
commit 0aa4370f64
12 changed files with 695 additions and 350 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/EvaluationBar.tsx
+20 -22
View File
@@ -5,9 +5,10 @@ import clsx from "clsx";
interface EvaluationBarProps {
score?: number | null; // centipawns
mate?: number | null; // moves to mate
isPlayerWhite: boolean;
}
export function EvaluationBar({ score, mate }: EvaluationBarProps) {
export function EvaluationBar({ score, mate, isPlayerWhite }: EvaluationBarProps) {
// Calculate white's percentage height
// Using sigmoid-like function for score: P = 1 / (1 + 10^(-score/400))
// This is a standard way to visualize CP advantage.
@@ -18,7 +19,7 @@ export function EvaluationBar({ score, mate }: EvaluationBarProps) {
// Mate detected
if (mate > 0) {
whiteHeightPercent = 100;
label = `M${mate}`;
label = `M${Math.abs(mate)}`;
} else {
whiteHeightPercent = 0;
label = `M${Math.abs(mate)}`;
@@ -30,37 +31,34 @@ export function EvaluationBar({ score, mate }: EvaluationBarProps) {
whiteHeightPercent = winChance * 100;
// Format label: +1.5 or -0.3
const pawnScore = score / 100;
label = pawnScore > 0 ? `+${pawnScore.toFixed(1)}` : pawnScore.toFixed(1);
// If player is NOT white, we invert the score for display (so + means Player advantage)
let displayScore = score / 100;
if (!isPlayerWhite) {
displayScore = -displayScore;
}
label = displayScore > 0 ? `+${displayScore.toFixed(1)}` : displayScore.toFixed(1);
if (score === 0) label = "0.0";
}
// Invert label color based on background
// If whiteHeightPercent is high, top is white, text should be black if it's at the top?
// Actually, usually the text is placed based on who is winning or fixed.
// Let's place text at top for White advantage and bottom for Black?
// Or just center it? Standard is usually top/bottom or floating.
// Let's keep it simple: Text always visible, color contrasting with the bar it's on.
// We'll put the text in a small badge that floats?
// Or just inside the bar.
return (
<div className="w-8 h-full bg-gray-800 border border-gray-400 flex flex-col-reverse relative overflow-hidden rounded shadow-inner">
<div className="w-8 h-full bg-gray-800 border border-gray-400 relative overflow-hidden rounded shadow-inner">
{/* Black background is the container (h-full) */}
{/* White bar grows from bottom (flex-col-reverse) */}
{/* White bar grows from bottom if player is white, from top if player is black */}
<div
className="w-full bg-white transition-all duration-500 ease-in-out"
className={clsx(
"absolute w-full bg-white transition-all duration-500 ease-in-out",
isPlayerWhite ? "bottom-0" : "top-0"
)}
style={{ height: `${whiteHeightPercent}%` }}
/>
{/* Score Label */}
<div className={clsx(
"absolute w-full text-center text-xs font-bold py-1 select-none",
whiteHeightPercent > 50 ? "top-0 text-gray-800" : "bottom-0 text-white"
)}>
{label}
<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
<span className="text-xs font-bold text-white mix-blend-difference select-none">
{label}
</span>
</div>
</div>
);