From 812fd8f47589e9335a0e5d5e2a7973dbe4c5affe Mon Sep 17 00:00:00 2001 From: Andre Padez Date: Wed, 5 Nov 2025 11:29:53 +0000 Subject: [PATCH] Fix text opacity and muting effect on multi-line paragraphs - Set lineOpacity to 1.0 (full brightness) for all lines - Remove opacity reduction based on line position - Fix transition opacity recalculation that was dimming text - Text now maintains full shine and vibrancy on all lines --- src/game.css | 149 --------------------------------------- src/useBoard/useBoard.ts | 13 ++-- 2 files changed, 6 insertions(+), 156 deletions(-) diff --git a/src/game.css b/src/game.css index 5fa79f3..e69de29 100755 --- a/src/game.css +++ b/src/game.css @@ -1,149 +0,0 @@ -/* ========================================================= - 🔧 Controls (tweak these) - ========================================================= */ -:root { - --snake-cell-size: 32px; -} - -/* ========================================================= - Container & Board Base - ========================================================= */ -#snake-board { - position: relative; - background-color: var(--card, #1e2030); - border-radius: 0.5rem; - box-shadow: 0 0 10px rgba(27, 29, 43, 0.6), inset 0 0 6px color-mix(in srgb, var(--primary, #82aaff) 5%, transparent); - padding: 4px; -} - -/* ========================================================= - Snake Board Layout - ========================================================= */ -.snake-row { - display: flex; -} - -.snake-cell { - width: var(--snake-cell-size); - height: var(--snake-cell-size); - background-color: var(--muted, #2f334d); - border: 1px solid var(--border, #3b3f5c); - box-sizing: border-box; - transition: background-color 0.1s ease; -} - -/* ========================================================= - Snake Rendering - ========================================================= */ -.snake-cell.snake-head { - background-color: var(--accent, #ffc777); - box-shadow: - 0 0 8px color-mix(in srgb, var(--accent, #ffc777) 70%, transparent), - inset 0 0 4px color-mix(in srgb, var(--accent, #ffc777) 90%, transparent); - position: relative; -} - -.snake-cell.snake-head.dir-up { - border-radius: 6px 6px 2px 2px; -} - -.snake-cell.snake-head.dir-down { - border-radius: 2px 2px 6px 6px; -} - -.snake-cell.snake-head.dir-left { - border-radius: 6px 2px 2px 6px; -} - -.snake-cell.snake-head.dir-right { - border-radius: 2px 6px 6px 2px; -} - -.snake-cell.snake-head::after { - content: ""; - position: absolute; - top: 25%; - left: 50%; - transform: translateX(-50%); - width: 60%; - height: 30%; - background: radial-gradient(circle, var(--accent-foreground, #1b1d2b) 30%, transparent 60%); - opacity: 0.8; -} - -.snake-cell.snake-body { - background-color: var(--accent, #ffc777); - opacity: 0.7; - box-shadow: inset 0 0 3px color-mix(in srgb, var(--accent, #ffc777) 50%, transparent); -} - -.snake-cell.snake-tail { - background-color: var(--accent, #ffc777); - opacity: 0.5; - box-shadow: 0 0 4px color-mix(in srgb, var(--accent, #ffc777) 40%, transparent); -} - -.snake-cell.snake-tail.dir-up { - border-radius: 6px 6px 2px 2px; -} - -.snake-cell.snake-tail.dir-down { - border-radius: 2px 2px 6px 6px; -} - -.snake-cell.snake-tail.dir-left { - border-radius: 6px 2px 2px 6px; -} - -.snake-cell.snake-tail.dir-right { - border-radius: 2px 6px 6px 2px; -} - -/* ========================================================= - Collision Effect - ========================================================= */ -.snake-cell.collision { - background-color: var(--destructive, #c53b53) !important; - box-shadow: - 0 0 12px color-mix(in srgb, var(--destructive, #c53b53) 90%, transparent), - 0 0 24px color-mix(in srgb, var(--destructive, #c53b53) 60%, transparent), - inset 0 0 8px color-mix(in srgb, var(--destructive, #c53b53) 70%, transparent) !important; - animation: collision-pulse 0.5s ease-in-out infinite alternate; -} - -@keyframes collision-pulse { - 0% { - box-shadow: - 0 0 12px color-mix(in srgb, var(--destructive, #c53b53) 90%, transparent), - 0 0 24px color-mix(in srgb, var(--destructive, #c53b53) 60%, transparent), - inset 0 0 8px color-mix(in srgb, var(--destructive, #c53b53) 70%, transparent); - } - 100% { - box-shadow: - 0 0 20px color-mix(in srgb, var(--destructive, #c53b53) 100%, transparent), - 0 0 40px color-mix(in srgb, var(--destructive, #c53b53) 80%, transparent), - inset 0 0 12px color-mix(in srgb, var(--destructive, #c53b53) 90%, transparent); - } -} - -/* ========================================================= - Food Rendering - ========================================================= */ -.snake-cell.food { - background-color: var(--chart-2, #c3e88d); - border-radius: 50%; - box-shadow: - 0 0 8px color-mix(in srgb, var(--chart-2, #c3e88d) 60%, transparent), - inset 0 0 4px color-mix(in srgb, var(--chart-2, #c3e88d) 80%, transparent); - position: relative; -} - -.snake-cell.food::after { - content: "🍎"; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 12px; -} - diff --git a/src/useBoard/useBoard.ts b/src/useBoard/useBoard.ts index 2e2136d..99c8bbc 100644 --- a/src/useBoard/useBoard.ts +++ b/src/useBoard/useBoard.ts @@ -520,10 +520,10 @@ export function useBoard() { // Calculate Y offset based on number of lines (center the text block vertically) const centerOffset = (numLines - 1) / 2; - // During transition, adjust positions and sizes - let lineY = letter.y + (lineSpacing * (visualIndex - centerOffset)); - let lineFontSize = fontSize * basePerspectiveFactors[visualIndex]; - let lineOpacity = 1.0 - (visualIndex * 0.1); + // During transition, adjust positions and sizes + let lineY = letter.y + (lineSpacing * (visualIndex - centerOffset)); + let lineFontSize = fontSize * basePerspectiveFactors[visualIndex]; + let lineOpacity = 1.0; // If this line just completed and is exploding if (isTransitioning && completedLines[completedLines.length - 1] === lineIndex && transitionProgress < 0.6) { @@ -558,9 +558,8 @@ export function useBoard() { const targetSize = fontSize * basePerspectiveFactors[newVisualIndex]; lineFontSize = lineFontSize + (targetSize - lineFontSize) * transitionProgress; - // Adjust opacity - const targetOpacity = 1.0 - (newVisualIndex * 0.1); - lineOpacity = lineOpacity + (targetOpacity - lineOpacity) * transitionProgress; + // Opacity stays at full value + // (no adjustment needed) } }