zeroed-some/bashamole / f3f39f7

Browse files

force color scheme, fix particles

Authored by mfwolffe <wolffemf@dukes.jmu.edu>
SHA
f3f39f7fccc129027b9c5d5a0e84e0c874c280b6
Parents
09d4e1c
Tree
f6badd4

3 changed files

StatusFile+-
M frontend/package-lock.json 1 1
M frontend/src/components/Game.tsx 8 27
M frontend/src/components/TreeVisualizer.tsx 32 22
frontend/package-lock.jsonmodified
@@ -2536,7 +2536,7 @@
25362536
     "node_modules/call-bound": {
25372537
       "version": "1.0.4",
25382538
       "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
2539
-      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
2539
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0joshKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
25402540
       "dev": true,
25412541
       "license": "MIT",
25422542
       "dependencies": {
frontend/src/components/Game.tsxmodified
@@ -44,19 +44,6 @@ const Game: React.FC = () => {
4444
   const terminalRef = useRef<HTMLDivElement>(null);
4545
   const inputRef = useRef<HTMLInputElement>(null);
4646
47
-  // Detect system color scheme preference
48
-  useEffect(() => {
49
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
50
-    setIsDarkMode(mediaQuery.matches);
51
-
52
-    const handleChange = (e: MediaQueryListEvent) => {
53
-      setIsDarkMode(e.matches);
54
-    };
55
-
56
-    mediaQuery.addEventListener('change', handleChange);
57
-    return () => mediaQuery.removeEventListener('change', handleChange);
58
-  }, []);
59
-
6047
   // Auto-scroll terminal to bottom
6148
   useEffect(() => {
6249
     if (terminalRef.current) {
@@ -334,23 +321,17 @@ const Game: React.FC = () => {
334321
     return `rotate(${angle}deg)`;
335322
   };
336323
337
-  // Terminal color scheme based on dark/light mode
338
-  const terminalColors = isDarkMode ? {
324
+  // Terminal color scheme - always dark mode
325
+  const terminalColors = {
339326
     frame: 'bg-stone-200 border-stone-300',
340327
     header: 'bg-stone-300 border-stone-400',
341328
     headerText: 'text-stone-900',
342329
     content: 'bg-black',
343330
     closeButton: 'text-stone-700 hover:text-stone-900'
344
-  } : {
345
-    frame: 'bg-blue-900 border-blue-800',
346
-    header: 'bg-blue-800 border-blue-700',
347
-    headerText: 'text-blue-100',
348
-    content: 'bg-black',
349
-    closeButton: 'text-blue-300 hover:text-white'
350331
   };
351332
352
-  // Canvas background color based on dark/light mode
353
-  const canvasBackground = isDarkMode ? 'bg-gray-900' : 'bg-stone-100';
333
+  // Canvas background color - always dark mode
334
+  const canvasBackground = 'bg-gray-900';
354335
355336
   if (gameState.loading) {
356337
     return (
@@ -716,19 +697,19 @@ const Game: React.FC = () => {
716697
       )}
717698
718699
       {/* Bottom Game Bar */}
719
-      <div className={`absolute bottom-0 left-0 right-0 ${isDarkMode ? 'bg-slate-800/90' : 'bg-blue-50/90'} backdrop-blur-sm border-t ${isDarkMode ? 'border-slate-700' : 'border-blue-200'} p-3 z-20`}>
700
+      <div className="absolute bottom-0 left-0 right-0 bg-slate-800/90 backdrop-blur-sm border-t border-slate-700 p-3 z-20">
720701
         <div className="max-w-7xl mx-auto flex justify-between items-center px-4">
721702
           <div className="flex items-center gap-4">
722
-            <h1 className={`text-2xl font-bold ${isDarkMode ? 'text-white' : 'text-gray-900'}`}><span className='font-terminal bg-gray-200 dark:bg-gray-500 text-red-900 dark:text-red-400 px-0.5 py-0 rounded'>bash</span> amole</h1>
703
+            <h1 className="text-2xl font-bold text-white"><span className='font-terminal bg-gray-200 dark:bg-gray-500 text-red-900 dark:text-red-400 px-0.5 py-0 rounded'>bash</span> amole</h1>
723704
           </div>
724705
725706
           <div className="flex items-center gap-3">
726
-            <div className={`text-xs ${isDarkMode ? 'text-slate-400' : 'text-blue-700'}`}>
707
+            <div className="text-xs text-slate-400">
727708
               click adjacent nodes or use the terminal
728709
             </div>
729710
             <button
730711
               onClick={startNewGame}
731
-              className={`px-3 py-1.5 ${isDarkMode ? 'bg-slate-700 hover:bg-slate-600' : 'bg-blue-200 hover:bg-blue-300'} ${isDarkMode ? 'text-white' : 'text-blue-900'} text-sm rounded transition`}
712
+              className="px-3 py-1.5 bg-slate-700 hover:bg-slate-600 text-white text-sm rounded transition"
732713
             >
733714
               New Game
734715
             </button>
frontend/src/components/TreeVisualizer.tsxmodified
@@ -116,7 +116,7 @@ const TreeVisualizer: React.FC<TreeVisualizerProps> = ({
116116
     viewBoxMultiplier: 2.5,
117117
     minHeight: 1200,
118118
     background: {
119
-      color: isDarkMode ? '#0F172A' : '#FEF3C7',
119
+      color: '#0F172A', // Always dark mode color
120120
       opacity: 1
121121
     }
122122
   };
@@ -126,9 +126,9 @@ const TreeVisualizer: React.FC<TreeVisualizerProps> = ({
126126
     opacity: 0.6,
127127
     dashArray: '5,5',
128128
     colors: {
129
-      default: isDarkMode ? '#475569' : '#92400E',
130
-      hover: isDarkMode ? '#64748B' : '#DC2626',
131
-      adjacent: isDarkMode ? '#3B82F6' : '#2563EB'
129
+      default: '#475569', // Always dark mode colors
130
+      hover: '#64748B',
131
+      adjacent: '#3B82F6'
132132
     }
133133
   };
134134
@@ -137,12 +137,12 @@ const TreeVisualizer: React.FC<TreeVisualizerProps> = ({
137137
     fontWeight: { base: '600', player: '800' },
138138
     offset: { parent: -38, leaf: 44 },
139139
     colors: {
140
-      player: isDarkMode ? '#93C5FD' : '#1E40AF',
141
-      regular: isDarkMode ? '#E5E7EB' : '#451A03',
140
+      player: '#93C5FD', // Always dark mode colors
141
+      regular: '#E5E7EB',
142142
       mole: '#DC2626'
143143
     },
144144
     background: {
145
-      fill: isDarkMode ? 'rgba(15, 23, 42, 0.9)' : 'rgba(254, 243, 199, 0.9)',
145
+      fill: 'rgba(15, 23, 42, 0.9)', // Always dark mode background
146146
       padding: { x: 8, y: 4 },
147147
       radius: 4
148148
     }
@@ -238,38 +238,48 @@ const TreeVisualizer: React.FC<TreeVisualizerProps> = ({
238238
     feMerge2.append('feMergeNode').attr('in', 'offsetblur');
239239
     feMerge2.append('feMergeNode').attr('in', 'SourceGraphic');
240240
241
-    // Quirky background with floating particles
242
-    svg.append('rect')
243
-      .attr('width', '100%')
244
-      .attr('height', '100%')
241
+    // Create a background group that won't be affected by zoom
242
+    const bgGroup = svg.append('g').attr('class', 'background-group');
243
+
244
+    // Quirky background that covers the entire viewport
245
+    bgGroup.append('rect')
246
+      .attr('x', -width)
247
+      .attr('y', -height)
248
+      .attr('width', width * 3)
249
+      .attr('height', height * 3)
245250
       .attr('fill', LAYOUT_CONFIG.background.color)
246251
       .style('opacity', LAYOUT_CONFIG.background.opacity);
247252
248
-    // Add floating background particles
249
-    const particlesGroup = svg.append('g').attr('class', 'particles');
253
+    // Add floating background particles across a larger area
254
+    const particlesGroup = bgGroup.append('g').attr('class', 'particles');
255
+
256
+    // Create particles across a much larger area to ensure coverage
257
+    const particleCount = PARTICLE_CONFIG.count * 5;
250258
251
-    for (let i = 0; i < PARTICLE_CONFIG.count; i++) {
259
+    for (let i = 0; i < particleCount; i++) {
260
+      const startX = (Math.random() - 0.5) * width * 3;
252261
       const particle = particlesGroup.append('circle')
253
-        .attr('cx', Math.random() * width)
254
-        .attr('cy', Math.random() * height)
262
+        .attr('cx', startX)
263
+        .attr('cy', Math.random() * height * 3 - height)
255264
         .attr('r', Math.random() * (PARTICLE_CONFIG.size.max - PARTICLE_CONFIG.size.min) + PARTICLE_CONFIG.size.min)
256265
         .attr('fill', PARTICLE_CONFIG.colors[Math.floor(Math.random() * PARTICLE_CONFIG.colors.length)])
257266
         .attr('opacity', 0.3);
258267
259268
       // Animate particles floating
269
+      const duration = Math.random() * (PARTICLE_CONFIG.speed.max - PARTICLE_CONFIG.speed.min) + PARTICLE_CONFIG.speed.min;
260270
       particle
261271
         .transition()
262
-        .duration(Math.random() * (PARTICLE_CONFIG.speed.max - PARTICLE_CONFIG.speed.min) + PARTICLE_CONFIG.speed.min)
272
+        .duration(duration)
263273
         .ease(d3.easeLinear)
264
-        .attr('cy', -20)
274
+        .attr('cy', -height)
265275
         .on('end', function repeat() {
266276
           d3.select(this)
267
-            .attr('cy', height + 20)
268
-            .attr('cx', Math.random() * width)
277
+            .attr('cy', height * 2)
278
+            .attr('cx', (Math.random() - 0.5) * width * 3)
269279
             .transition()
270
-            .duration(Math.random() * (PARTICLE_CONFIG.speed.max - PARTICLE_CONFIG.speed.min) + PARTICLE_CONFIG.speed.min)
280
+            .duration(duration)
271281
             .ease(d3.easeLinear)
272
-            .attr('cy', -20)
282
+            .attr('cy', -height)
273283
             .on('end', repeat);
274284
         });
275285
     }