CellPond/index.html at main · TodePond/CellPond · GitHub

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
<head>
  <title>CellPond</title>
  <!-- 	<link rel="shortcut icon" href=" ready when you are tode-friend! " /> -->
  <meta name="twitter:card" content="summary" />
  <meta property="og:title" content="CellPond" />
  <meta property="og:site_name" content="CellPond" />
  <meta property="og:description" content="Surreal Cellular Automata" />
  <meta property="og:type" content="website" />
  <meta
    property="og:image"
    content="https://www.cellpond.cool/assets/cellpond-og-image.png" />
  <meta
    property="og:image:alt"
    content="An example ruleset made with CellPond" />
</head>
<script src="libraries/habitat-embed.js"></script>
<script src="libraries/show.js"></script>
<script src="libraries/linked-list.js"></script>
<script>
  Habitat.install(this);
</script>
<script src="libraries/colour.js"></script>
<script src="libraries/lz-string.js"></script>
<script src="the-one-true-todey-file-of-cellpond.js"></script>
<script type="module">
  import {
    addPondiverseButton,
    fetchPondiverseCreation,
  } from "/libraries/pondiverse.js";

  const offscreenCanvas = document.createElement("canvas");
  const offscreenContext = offscreenCanvas.getContext("2d");

  requestAnimationFrame(() => {
    addPondiverseButton(() => {
      const canvases = document.querySelectorAll("canvas");
      const canvas = canvases[0];
      const paddleCanvas = canvases[1];
      offscreenCanvas.width = canvas.width;
      offscreenCanvas.height = canvas.height;
      offscreenContext.fillStyle = Colour.Void;
      offscreenContext.fillRect(0, 0, canvas.width, canvas.height);
      offscreenContext.drawImage(canvas, 0, 0);
      offscreenContext.drawImage(paddleCanvas, 0, 0);
      // const world = packWorld();
      return {
        type: "cellpond",
        data: JSON.stringify({
          paddles: packPaddles(),
          // world,
        }),
        image: offscreenCanvas.toDataURL("image/png"),
      };
    });
  });

  const urlSearchParams = new URLSearchParams(window.location.search);
  const pondiverseCreation = urlSearchParams.get("creation");
  if (pondiverseCreation) {
    fetchPondiverseCreation(pondiverseCreation).then((creation) => {
      const file = JSON.parse(creation.data);
      const paddles = file.paddles;
      unpackPaddles(paddles);
      const world = file.world;
      if (world) {
        // unpackWorld(world);
      }
    });
  }
</script>