Property editor

frontend/src/components/Controls.svelte

@@ -1,41 +1,12 @@
 <script lang="ts">
     import { twMerge } from 'tailwind-merge';
     import { store, tickFrame } from '../game';
+    import PropertyEditor from './PropertyEditor.svelte';
     import ChevronDoubleDown from './icons/ChevronDoubleDown.svelte';
 
     let controlsDiv: HTMLDivElement | undefined;
     let showControls = false;
 
-    function insertNoise() {
-        const canvas = document.getElementById('canvas')! as HTMLCanvasElement;
-        const ctx = canvas.getContext('2d')!;
-        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-
-        const colours = [
-            [255, 0, 0, 0],
-            [0, 255, 0],
-            [0, 0, 255],
-        ];
-
-        for (let i = 0; i < imageData.data.length; i += 4) {
-            if (imageData.data[i + 3]) {
-                continue;
-            }
-
-            const y = Math.floor(i / (canvas.width * 4));
-
-            // const [r, g, b] = colours[Math.floor(Math.random() * colours.length)];
-            const [r, g, b] = colours[y % colours.length];
-
-            imageData.data[i] = r;
-            imageData.data[i + 1] = g;
-            imageData.data[i + 2] = b;
-            imageData.data[i + 3] = 255;
-        }
-
-        ctx.putImageData(imageData, 0, 0);
-    }
-
     function clearCanvas() {
         const canvas = document.getElementById('canvas')! as HTMLCanvasElement;
         const ctx = canvas.getContext('2d')!;
@@ -62,18 +33,6 @@
             bind:value={$store.brushSize}
         />
     </label>
-    <label class="flex flex-row items-center justify-between">
-        Brush colour:
-        <input
-            class="rounded-md bg-zinc-800 p-2 outline-none ring-teal-600 transition-all focus:ring-2"
-            type="text"
-            size="8"
-            bind:value={$store.brushColour}
-        />
-    </label>
-    <button class="rounded-md bg-teal-600 p-2 transition-colors hover:bg-teal-700" on:click={insertNoise}>
-        Insert noise
-    </button>
     <button class="rounded-md bg-teal-600 p-2 transition-colors hover:bg-teal-700" on:click={clearCanvas}>
         Clear canvas
     </button>
@@ -88,6 +47,7 @@
     <button class="rounded-md bg-teal-600 p-2 transition-colors hover:bg-teal-700" on:click={tickFrame}>
         Tick frame
     </button>
+    <PropertyEditor />
 </div>
 
 {#if controlsDiv}

frontend/src/components/PropertyEditor.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+    import { store } from '../game';
+
+    const propertyDescriptions: Record<number, string> = {
+        32: 'Enable gravity',
+    };
+
+    let propertyValues = $store.brushColour.split('').map((v) => v === '1');
+
+    $: {
+        $store.brushColour = propertyValues.map((v) => (v ? '1' : '0')).join('');
+    }
+</script>
+
+<div class="col-span-2 flex flex-col items-center">
+    <h2 class="text-xl font-semibold">Pixel properties</h2>
+    <div class="flex w-full gap-4 p-2">
+        {#each Array(4) as _, groupIndex}
+            <div class="flex flex-1 justify-between">
+                {#each Array(8) as _, i}
+                    <div class="flex flex-col items-center justify-between gap-2">
+                        <input type="checkbox" bind:checked={propertyValues[8 * groupIndex + i]} />
+                        <div style:writing-mode="vertical-lr">
+                            {propertyDescriptions[8 * groupIndex + i + 1] || ''}
+                        </div>
+                    </div>
+                {/each}
+            </div>
+        {/each}
+    </div>
+</div>

frontend/src/game.ts

@@ -13,7 +13,7 @@ let state = {
     mouseY: 0,
 
     brushSize: 10,
-    brushColour: 'ff0000ff',
+    brushColour: '11111111000000001111111111111111',
 
     autoTick: true,
 };
@@ -29,7 +29,7 @@ export function tickFrame() {
         state.mouseX,
         state.mouseY,
         state.brushSize,
-        parseInt(state.brushColour, 16),
+        parseInt(state.brushColour, 2),
     );
 
     store.update((lastState) => ({