1import { code2hash } from '@strudel/core';
2
3import { UdelFrame } from './UdelFrame';
4import { useState } from 'react';
5import UdelsHeader from './UdelsHeader';
6
7const defaultHash = 'c3RhY2soCiAgCik%3D';
8
9const getHashesFromUrl = () => {
10  return window.location.hash?.slice(1).split(',');
11};
12const updateURLHashes = (hashes) => {
13  const newHash = '#' + hashes.join(',');
14  window.location.hash = newHash;
15};
16export function Udels() {
17  const hashes = getHashesFromUrl();
18
19  const [numWindows, setNumWindows] = useState(hashes?.length ?? 1);
20  const numWindowsOnChange = (num) => {
21    setNumWindows(num);
22    const hashes = getHashesFromUrl();
23    const newHashes = [];
24    for (let i = 0; i < num; i++) {
25      newHashes[i] = hashes[i] ?? defaultHash;
26    }
27    updateURLHashes(newHashes);
28  };
29
30  const onEvaluate = (key, code) => {
31    const hashes = getHashesFromUrl();
32    hashes[key] = code2hash(code);
33
34    updateURLHashes(hashes);
35  };
36
37  return (
38    <div
39      style={{
40        margin: 0,
41        display: 'flex',
42        flex: 1,
43        height: '100vh',
44        width: '100%',
45        flexDirection: 'column',
46      }}
47    >
48      <UdelsHeader numWindows={numWindows} setNumWindows={numWindowsOnChange} />
49      <div
50        style={{
51          display: 'flex',
52          flex: 1,
53          flexDirection: 'row',
54          flexWrap: 'wrap',
55        }}
56      >
57        {hashes.map((hash, key) => {
58          return (
59            <UdelFrame
60              instance={key}
61              onEvaluate={(code) => {
62                onEvaluate(key, code);
63              }}
64              hash={hash}
65              key={key}
66            />
67          );
68        })}
69      </div>
70    </div>
71  );
72}