Zum Inhalt

src/ui/InteractionMatrixGrid.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
import { type Component, For, Index } from 'solid-js';
import type { InteractionMatrix } from '~/engine/types';
import { MatrixCell } from './MatrixCell';

interface Props {
  matrix: InteractionMatrix;
  colors: readonly [string, string, string]; // CSS colour per species
  onChange: (row: number, col: number, value: number) => void;
}

const Dot: Component<{ color: string }> = (p) => (
  <span
    style={{
      width: '8px',
      height: '8px',
      'border-radius': '50%',
      background: p.color,
      'box-shadow': `0 0 6px ${p.color}`,
      display: 'inline-block',
    }}
  />
);

export const InteractionMatrixGrid: Component<Props> = (props) => {
  return (
    <div
      style={{
        display: 'grid',
        'grid-template-columns': '46px 1fr 1fr 1fr',
        gap: '4px',
        'align-items': 'center',
      }}
    >
      {/* header row: corner + one tinted dot per channel */}
      <span />
      <For each={[0, 1, 2]}>
        {(c) => (
          <div style={{ display: 'flex', 'justify-content': 'center' }}>
            <Dot color={props.colors[c] ?? ''} />
          </div>
        )}
      </For>

      {/* one row per sensing species */}
      <Index each={props.matrix}>
        {(row, r) => (
          <>
            <div style={{ display: 'flex', 'justify-content': 'flex-end', 'padding-right': '4px' }}>
              <Dot color={props.colors[r] ?? ''} />
            </div>
            <For each={[0, 1, 2]}>
              {(c) => (
                <MatrixCell
                  value={row()[c] ?? 0}
                  tint={props.colors[r] ?? ''}
                  onChange={(v) => props.onChange(r, c, v)}
                />
              )}
            </For>
          </>
        )}
      </Index>
    </div>
  );
};