From c9029b8fb505887f9ffdee5c2905e8360fc5747b Mon Sep 17 00:00:00 2001
From: chahinebrini <chahinebrini@gmail.com>
Date: Sat, 9 May 2026 15:46:17 +0200
Subject: [PATCH] fix(games): Tetris controls centered + Snake icon visibility
 + digital score-dashboard
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

User-Wünsche:
1. Tetris bedien-buttons mittig zum Spielfeld (war off-center)
2. Snake geklickte button-icons NICHT weiß (sonst light-theme unsichtbar)
3. Beide games: digital score-counter über playfield

Tetris:
- Controls in alignItems:'center'-wrapper mit width:boardWidth child +
  justifyContent:'space-between' → Move-Pad+Action-Pad bündig zum Feld
  unabhängig von screen-width
- Old Score/Level/Lines header entfernt → DigitalScore übernimmt

Snake:
- DPadBtn: ALWAYS color={tint} (#007aff iOS-blue) für Ionicons
- Active-state via borderColor + scale(1.04), NICHT mehr durch white-icon
- Semi-transparent blue bg (rgba) sichtbar in beiden themes
- Android-Branches + elevation entfernt (überall einheitlich)

DigitalScore (neu):
- 7-segment-feel via Courier New monospace + letterSpacing 2 + tabular-nums
- padStart(5,'0') Score+Best, padStart(2,'0') Level/Length
- Dunkles Panel (#0d1117) + border #1f2937, intentional contrast
- width:boardWidth, alignSelf:center
- Snake: SCORE+BEST | Tetris: SCORE+BEST+LVL

TS clean. Frontend-only, Metro reload reicht.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/urge/UrgeGames.tsx             | 156 ++++++++++++------
 1 file changed, 107 insertions(+), 49 deletions(-)

diff --git a/apps/rebreak-native/components/urge/UrgeGames.tsx b/apps/rebreak-native/components/urge/UrgeGames.tsx
index 1deaf6e..e3f6a51 100644
--- a/apps/rebreak-native/components/urge/UrgeGames.tsx
+++ b/apps/rebreak-native/components/urge/UrgeGames.tsx
@@ -9,6 +9,7 @@ import * as Haptics from 'expo-haptics';
 import Slider from '@react-native-community/slider';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { memorySvg, snakeSvg, tetrisSvg, tictactoeSvg } from './gameSvgs';
+import { useColors } from '../../lib/theme';
 
 // Haptic helper — fire-and-forget, swallow errors on platforms without taptic engine
 function tapHaptic() {
@@ -282,23 +283,16 @@ export function SnakeGame({
   return (
     <View style={{ paddingHorizontal: 16, paddingTop: 4, paddingBottom: Math.max(insets.bottom, 16) }}>
       {/* Header */}
-      <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
+      <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
         <Text style={{ fontSize: 11, color: '#6b7280', flex: 1, marginRight: 8 }} numberOfLines={2}>{lyraMessage}</Text>
-        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 14 }}>
-          <View style={{ alignItems: 'center' }}>
-            <Text style={{ fontSize: 9, color: '#9ca3af', textTransform: 'uppercase', letterSpacing: 0.5 }}>Score</Text>
-            <Text style={{ fontSize: 18, fontFamily: 'Nunito_800ExtraBold', color: '#16a34a' }}>{score}</Text>
-          </View>
-          <View style={{ alignItems: 'center' }}>
-            <Text style={{ fontSize: 9, color: '#9ca3af', textTransform: 'uppercase', letterSpacing: 0.5 }}>Best</Text>
-            <Text style={{ fontSize: 18, fontFamily: 'Nunito_800ExtraBold', color: '#111827' }}>{highScore}</Text>
-          </View>
-          <Pressable onPress={onAbandon} hitSlop={10} style={{ width: 28, height: 28, alignItems: 'center', justifyContent: 'center' }}>
-            <Text style={{ fontSize: 18, color: '#6b7280' }}>✕</Text>
-          </Pressable>
-        </View>
+        <Pressable onPress={onAbandon} hitSlop={10} style={{ width: 28, height: 28, alignItems: 'center', justifyContent: 'center' }}>
+          <Text style={{ fontSize: 18, color: '#6b7280' }}>✕</Text>
+        </Pressable>
       </View>
 
+      {/* Digital score dashboard */}
+      <DigitalScore score={score} best={highScore} boardWidth={boardW} />
+
       {/* Board */}
       <View style={{ alignItems: 'center' }} {...panResponder.panHandlers}>
         <View style={{ width: boardW, height: boardH, borderRadius: 12, overflow: 'hidden', borderWidth: 1, borderColor: 'rgba(0,230,128,0.2)', backgroundColor: '#0d1117' }}>
@@ -352,8 +346,6 @@ export function SnakeGame({
   );
 }
 
-// Platform-native D-Pad button: iOS uses system-blue tinted circle (SF-symbol look),
-// Android uses Material elevated surface with ripple.
 function DPadBtn({ dir, active, onPress }: { dir: Dir; active: boolean; onPress: () => void }) {
   const icons: Record<Dir, 'chevron-up' | 'chevron-down' | 'chevron-back' | 'chevron-forward'> = {
     up: 'chevron-up', down: 'chevron-down', left: 'chevron-back', right: 'chevron-forward',
@@ -366,29 +358,24 @@ function DPadBtn({ dir, active, onPress }: { dir: Dir; active: boolean; onPress:
       hitSlop={12}
       android_ripple={{ color: 'rgba(0,122,255,0.22)', borderless: true, radius: 32 }}
       style={({ pressed }) => {
-        const bgIdle = isIOS ? 'rgba(0,122,255,0.10)' : '#ffffff';
-        const bgPressed = isIOS ? 'rgba(0,122,255,0.22)' : '#f5f5f5';
-        const bgActive = tint;
-        const bg = active ? bgActive : (pressed && isIOS ? bgPressed : bgIdle);
+        const bgIdle = 'rgba(0,122,255,0.10)';
+        const bgPressed = 'rgba(0,122,255,0.22)';
+        const bgActive = 'rgba(0,122,255,0.22)';
+        const bg = active ? bgActive : pressed ? bgPressed : bgIdle;
         return {
           width: 60, height: 60, borderRadius: 30,
           backgroundColor: bg,
+          borderWidth: 1.5,
+          borderColor: active ? tint : 'rgba(0,122,255,0.30)',
           alignItems: 'center', justifyContent: 'center',
-          ...(isIOS ? {} : {
-            elevation: active ? 4 : 2,
-            shadowColor: '#000',
-            shadowOffset: { width: 0, height: 1 },
-            shadowOpacity: 0.15,
-            shadowRadius: 2,
-          }),
-          transform: [{ scale: pressed && isIOS ? 0.96 : 1 }],
+          transform: [{ scale: pressed ? 0.96 : active ? 1.04 : 1 }],
         };
       }}
     >
       <Ionicons
         name={icons[dir]}
         size={28}
-        color={active ? '#ffffff' : tint}
+        color={tint}
       />
     </Pressable>
   );
@@ -966,20 +953,19 @@ export function TetrisGame({
 
   const speedColors = ['#22c55e', '#84cc16', '#eab308', '#f97316', '#ef4444'];
 
+  const boardWidth = TETRIS_COLS * CELL;
+
   return (
     <View style={{ paddingHorizontal: 16, paddingTop: 4, paddingBottom: Math.max(insets.bottom, 16) }}>
       {/* Header */}
-      <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
+      <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
         <Text style={{ fontSize: 11, color: '#6b7280', flex: 1, marginRight: 8 }} numberOfLines={2}>{lyraMessage}</Text>
-        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
-          <Stat label="Score" value={score} color="#111827" />
-          {highScore > 0 && <Stat label="Best" value={highScore} color="#f59e0b" />}
-          <Stat label="Lvl" value={level} color="#3b82f6" />
-          <Stat label="Lines" value={lines} color="#111827" />
-          <Pressable onPress={onAbandon} hitSlop={10}><Text style={{ fontSize: 18, color: '#6b7280' }}>✕</Text></Pressable>
-        </View>
+        <Pressable onPress={onAbandon} hitSlop={10}><Text style={{ fontSize: 18, color: '#6b7280' }}>✕</Text></Pressable>
       </View>
 
+      {/* Digital score dashboard */}
+      <DigitalScore score={score} best={highScore} extra={level} extraLabel="LVL" boardWidth={boardWidth} />
+
       {/* Board */}
       <View style={{ alignItems: 'center', marginVertical: 4 }}>
         <View style={{ width: TETRIS_COLS * CELL, height: TETRIS_ROWS * CELL, borderRadius: 12, overflow: 'hidden', backgroundColor: '#0d1117', borderWidth: 1, borderColor: '#1f2937' }}>
@@ -1037,17 +1023,24 @@ export function TetrisGame({
         />
       </View>
 
-      {/* Controls — Move Pad (links) + Action Pad (rechts) */}
-      <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginTop: 18 }}>
-        {/* Move Pad */}
-        <View style={{ flexDirection: 'row', gap: 14 }}>
-          <DPadBtn dir="left" active={false} onPress={moveLeft} />
-          <DPadBtn dir="right" active={false} onPress={moveRight} />
-        </View>
-        {/* Action Pad */}
-        <View style={{ flexDirection: 'row', gap: 14 }}>
-          <TetrisActionBtn icon="sync" label="Drehen" accent="#7c3aed" onPress={rotatePiece} />
-          <TetrisActionBtn icon="arrow-down" label="Drop" accent="#0ea5e9" onPress={softDrop} />
+      {/* Controls — aligned to board width, centered on screen */}
+      <View style={{ alignItems: 'center', marginTop: 18 }}>
+        <View style={{
+          width: boardWidth,
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}>
+          {/* Move Pad */}
+          <View style={{ flexDirection: 'row', gap: 14 }}>
+            <DPadBtn dir="left" active={false} onPress={moveLeft} />
+            <DPadBtn dir="right" active={false} onPress={moveRight} />
+          </View>
+          {/* Action Pad */}
+          <View style={{ flexDirection: 'row', gap: 14 }}>
+            <TetrisActionBtn icon="sync" label="Drehen" accent="#7c3aed" onPress={rotatePiece} />
+            <TetrisActionBtn icon="arrow-down" label="Drop" accent="#0ea5e9" onPress={softDrop} />
+          </View>
         </View>
       </View>
 
@@ -1062,10 +1055,75 @@ export function TetrisGame({
 }
 
 function Stat({ label, value, color }: { label: string; value: number; color: string }) {
+  const colors = useColors();
   return (
     <View style={{ alignItems: 'center' }}>
-      <Text style={{ fontSize: 9, color: '#9ca3af', textTransform: 'uppercase', letterSpacing: 0.5 }}>{label}</Text>
+      <Text style={{ fontSize: 9, color: colors.textMuted, textTransform: 'uppercase', letterSpacing: 0.5 }}>{label}</Text>
       <Text style={{ fontSize: 16, fontFamily: 'Nunito_800ExtraBold', color }}>{value}</Text>
     </View>
   );
 }
+
+function DigitalScore({
+  score,
+  best,
+  extra,
+  extraLabel,
+  boardWidth,
+}: {
+  score: number;
+  best: number;
+  extra?: number;
+  extraLabel?: string;
+  boardWidth: number;
+}) {
+  const fmt = (n: number, digits = 5) => String(n).padStart(digits, '0');
+  return (
+    <View style={{
+      width: boardWidth,
+      alignSelf: 'center',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      backgroundColor: '#0d1117',
+      borderRadius: 10,
+      borderWidth: 1,
+      borderColor: '#1f2937',
+      paddingHorizontal: 12,
+      paddingVertical: 7,
+      marginBottom: 6,
+    }}>
+      <ScoreCell label="SCORE" value={fmt(score)} bright />
+      <View style={{ width: 1, height: 28, backgroundColor: '#1f2937' }} />
+      <ScoreCell label="BEST" value={fmt(best)} />
+      {extra !== undefined && extraLabel !== undefined && (
+        <>
+          <View style={{ width: 1, height: 28, backgroundColor: '#1f2937' }} />
+          <ScoreCell label={extraLabel} value={fmt(extra, 2)} />
+        </>
+      )}
+    </View>
+  );
+}
+
+function ScoreCell({ label, value, bright }: { label: string; value: string; bright?: boolean }) {
+  return (
+    <View style={{ alignItems: 'center', flex: 1 }}>
+      <Text style={{
+        fontSize: 9,
+        color: '#4b5563',
+        letterSpacing: 1.5,
+        fontFamily: 'Nunito_600SemiBold',
+        textTransform: 'uppercase',
+      }}>{label}</Text>
+      <Text style={{
+        fontSize: 18,
+        fontFamily: 'Courier New' as any,
+        fontVariant: ['tabular-nums'],
+        color: bright ? '#00e680' : '#6b7280',
+        letterSpacing: 2,
+        lineHeight: 22,
+      }}>{value}</Text>
+    </View>
+  );
+}