Zum Inhalt

src/ui/NoWebGPUScreen.tsx

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
import { type Component, For } from 'solid-js';

const browsers: ReadonlyArray<{ name: string; version: string }> = [
  { name: 'Chrome', version: '113+' },
  { name: 'Edge', version: '113+' },
  { name: 'Safari', version: '18+' },
  { name: 'Firefox', version: 'stable (2025+)' },
];

export const NoWebGPUScreen: Component = () => {
  return (
    <div
      style={{
        position: 'absolute',
        inset: '0',
        display: 'grid',
        'place-items': 'center',
        background: 'var(--surface-vault)',
        padding: '32px',
      }}
    >
      <div style={{ 'max-width': '480px', 'text-align': 'center' }}>
        <div
          style={{
            'font-family': 'var(--font-display)',
            'font-size': 'var(--text-2xl)',
            'font-weight': '600',
            'letter-spacing': 'var(--tracking-tight)',
            color: 'var(--fg-primary)',
            'margin-bottom': '12px',
          }}
        >
          Your browser is too old for Physarum.
        </div>
        <div
          style={{
            'font-family': 'var(--font-body)',
            'font-size': 'var(--text-base)',
            'line-height': 'var(--leading-relaxed)',
            color: 'var(--fg-secondary)',
            'margin-bottom': '24px',
          }}
        >
          Physarum runs on WebGPU. Most modern browsers support it. Update or switch to one of
          these:
        </div>
        <div
          style={{
            display: 'grid',
            'grid-template-columns': '1fr 1fr',
            gap: '8px',
            'margin-bottom': '24px',
          }}
        >
          <For each={browsers}>
            {(b) => (
              <div
                style={{
                  padding: '12px',
                  background: 'var(--surface-raised)',
                  border: '1px solid var(--border-subtle)',
                  'border-radius': 'var(--radius-md)',
                  display: 'flex',
                  'flex-direction': 'column',
                  gap: '4px',
                }}
              >
                <span
                  style={{
                    'font-family': 'var(--font-body)',
                    'font-size': 'var(--text-sm)',
                    'font-weight': '500',
                    color: 'var(--fg-primary)',
                  }}
                >
                  {b.name}
                </span>
                <span
                  style={{
                    'font-family': 'var(--font-mono)',
                    'font-size': 'var(--text-xs)',
                    color: 'var(--fg-tertiary)',
                    'letter-spacing': '0.08em',
                  }}
                >
                  {b.version}
                </span>
              </div>
            )}
          </For>
        </div>
        <a
          href="https://webgpureport.org"
          target="_blank"
          rel="noopener noreferrer"
          style={{
            'font-family': 'var(--font-mono)',
            'font-size': 'var(--text-xs)',
            color: 'var(--signal-circuit)',
            'letter-spacing': '0.08em',
            'text-decoration': 'none',
          }}
        >
          Check WebGPU support →
        </a>
      </div>
    </div>
  );
};