force color scheme, fix particles

Status	File	+	-
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


     "node_modules/call-bound": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0joshKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {

frontend/src/components/Game.tsxmodified

    const terminalRef = useRef<HTMLDivElement>(null);
    const inputRef = useRef<HTMLInputElement>(null);
--  // Detect system color scheme preference
--  useEffect(() => {
--    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
--    setIsDarkMode(mediaQuery.matches);
--
--    const handleChange = (e: MediaQueryListEvent) => {
--      setIsDarkMode(e.matches);
--    };
--
--    mediaQuery.addEventListener('change', handleChange);
--    return () => mediaQuery.removeEventListener('change', handleChange);
--  }, []);
--
    // Auto-scroll terminal to bottom
    useEffect(() => {
      if (terminalRef.current) {
      return `rotate(${angle}deg)`;
    };
--  // Terminal color scheme based on dark/light mode
++  // Terminal color scheme - always dark mode
--  const terminalColors = isDarkMode ? {
++  const terminalColors = {
      frame: 'bg-stone-200 border-stone-300',
      header: 'bg-stone-300 border-stone-400',
      headerText: 'text-stone-900',
      content: 'bg-black',
      closeButton: 'text-stone-700 hover:text-stone-900'
--  } : {
--    frame: 'bg-blue-900 border-blue-800',
--    header: 'bg-blue-800 border-blue-700',
--    headerText: 'text-blue-100',
--    content: 'bg-black',
--    closeButton: 'text-blue-300 hover:text-white'
    };
--  // Canvas background color based on dark/light mode
++  // Canvas background color - always dark mode
--  const canvasBackground = isDarkMode ? 'bg-gray-900' : 'bg-stone-100';
++  const canvasBackground = 'bg-gray-900';
    if (gameState.loading) {
      return (
        )}
        {/* Bottom Game Bar */}
--      <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`}>
++      <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">
          <div className="max-w-7xl mx-auto flex justify-between items-center px-4">
            <div className="flex items-center gap-4">
--            <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>
++            <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>
            </div>
            <div className="flex items-center gap-3">
--            <div className={`text-xs ${isDarkMode ? 'text-slate-400' : 'text-blue-700'}`}>
++            <div className="text-xs text-slate-400">
                click adjacent nodes or use the terminal
              </div>
              <button
                onClick={startNewGame}
--              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`}
++              className="px-3 py-1.5 bg-slate-700 hover:bg-slate-600 text-white text-sm rounded transition"
+             >
                New Game
              </button>

frontend/src/components/TreeVisualizer.tsxmodified

      viewBoxMultiplier: 2.5,
      minHeight: 1200,
      background: {
--      color: isDarkMode ? '#0F172A' : '#FEF3C7',
++      color: '#0F172A', // Always dark mode color
        opacity: 1
+     }
    };
      opacity: 0.6,
      dashArray: '5,5',
      colors: {
--      default: isDarkMode ? '#475569' : '#92400E',
++      default: '#475569', // Always dark mode colors
--      hover: isDarkMode ? '#64748B' : '#DC2626',
++      hover: '#64748B',
--      adjacent: isDarkMode ? '#3B82F6' : '#2563EB'
++      adjacent: '#3B82F6'
+     }
    };
      fontWeight: { base: '600', player: '800' },
      offset: { parent: -38, leaf: 44 },
      colors: {
--      player: isDarkMode ? '#93C5FD' : '#1E40AF',
++      player: '#93C5FD', // Always dark mode colors
--      regular: isDarkMode ? '#E5E7EB' : '#451A03',
++      regular: '#E5E7EB',
        mole: '#DC2626'
      },
      background: {
--      fill: isDarkMode ? 'rgba(15, 23, 42, 0.9)' : 'rgba(254, 243, 199, 0.9)',
++      fill: 'rgba(15, 23, 42, 0.9)', // Always dark mode background
        padding: { x: 8, y: 4 },
        radius: 4
+     }
      feMerge2.append('feMergeNode').attr('in', 'offsetblur');
      feMerge2.append('feMergeNode').attr('in', 'SourceGraphic');
--    // Quirky background with floating particles
++    // Create a background group that won't be affected by zoom
--    svg.append('rect')
++    const bgGroup = svg.append('g').attr('class', 'background-group');
--      .attr('width', '100%')
++
--      .attr('height', '100%')
++    // Quirky background that covers the entire viewport
++    bgGroup.append('rect')
++      .attr('x', -width)
++      .attr('y', -height)
++      .attr('width', width * 3)
++      .attr('height', height * 3)
        .attr('fill', LAYOUT_CONFIG.background.color)
        .style('opacity', LAYOUT_CONFIG.background.opacity);
--    // Add floating background particles
++    // Add floating background particles across a larger area
--    const particlesGroup = svg.append('g').attr('class', 'particles');
++    const particlesGroup = bgGroup.append('g').attr('class', 'particles');
++
++    // Create particles across a much larger area to ensure coverage
++    const particleCount = PARTICLE_CONFIG.count * 5;
--    for (let i = 0; i < PARTICLE_CONFIG.count; i++) {
++    for (let i = 0; i < particleCount; i++) {
++      const startX = (Math.random() - 0.5) * width * 3;
        const particle = particlesGroup.append('circle')
--        .attr('cx', Math.random() * width)
++        .attr('cx', startX)
--        .attr('cy', Math.random() * height)
++        .attr('cy', Math.random() * height * 3 - height)
          .attr('r', Math.random() * (PARTICLE_CONFIG.size.max - PARTICLE_CONFIG.size.min) + PARTICLE_CONFIG.size.min)
          .attr('fill', PARTICLE_CONFIG.colors[Math.floor(Math.random() * PARTICLE_CONFIG.colors.length)])
          .attr('opacity', 0.3);
        // Animate particles floating
++      const duration = Math.random() * (PARTICLE_CONFIG.speed.max - PARTICLE_CONFIG.speed.min) + PARTICLE_CONFIG.speed.min;
        particle
          .transition()
--        .duration(Math.random() * (PARTICLE_CONFIG.speed.max - PARTICLE_CONFIG.speed.min) + PARTICLE_CONFIG.speed.min)
++        .duration(duration)
          .ease(d3.easeLinear)
--        .attr('cy', -20)
++        .attr('cy', -height)
          .on('end', function repeat() {
            d3.select(this)
--            .attr('cy', height + 20)
++            .attr('cy', height * 2)
--            .attr('cx', Math.random() * width)
++            .attr('cx', (Math.random() - 0.5) * width * 3)
              .transition()
--            .duration(Math.random() * (PARTICLE_CONFIG.speed.max - PARTICLE_CONFIG.speed.min) + PARTICLE_CONFIG.speed.min)
++            .duration(duration)
              .ease(d3.easeLinear)
--            .attr('cy', -20)
++            .attr('cy', -height)
              .on('end', repeat);
          });
+     }

`@@ -2536,7 +2536,7 @@`
2536	"node_modules/call-bound": {	2536	"node_modules/call-bound": {
2537	"version": "1.0.4",	2537	"version": "1.0.4",
2538	"resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",	2538	"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==",
2540	"dev": true,	2540	"dev": true,
2541	"license": "MIT",	2541	"license": "MIT",
2542	"dependencies": {	2542	"dependencies": {

zeroed-some/bashamole / `f3f39f7`

3 changed files