Element selector

Author: nint8835

frontend/src/App.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount } from 'svelte';
     import Controls from './components/Controls.svelte';
+    import ElementSelector from './components/ElementSelector.svelte';
     import Framerate from './components/Framerate.svelte';
     import { init } from './game';
 
@@ -9,14 +10,18 @@
     });
 </script>
 
-<div class="flex w-[640px] flex-col">
-    <canvas
-        class="scale z-10 h-[480px] w-full bg-black"
-        style="image-rendering: pixelated"
-        id="canvas"
-        width="640"
-        height="480"
-    ></canvas>
-    <Controls />
+<div class="flex w-full flex-row">
+    <div class="flex-1"></div>
+    <div class="w-[640px]">
+        <canvas
+            class="scale relative z-10 h-[480px] w-full bg-black"
+            style="image-rendering: pixelated"
+            id="canvas"
+            width="640"
+            height="480"
+        ></canvas>
+        <Controls />
+    </div>
+    <div class="h-[480px] flex-1"><ElementSelector /></div>
 </div>
 <Framerate />

frontend/src/components/Controls.svelte

@@ -52,7 +52,7 @@
 
 {#if controlsDiv}
     <button
-        class="flex items-center justify-between rounded-b-lg bg-zinc-950 p-2 text-xl font-semibold text-teal-700 transition-all hover:bg-teal-700 hover:text-white"
+        class="flex w-full items-center justify-between rounded-b-lg bg-zinc-950 p-2 text-xl font-semibold text-teal-700 transition-all hover:bg-teal-700 hover:text-white"
         style:transform={showControls ? 'none' : `translateY(-${controlsDiv?.clientHeight || '300'}px)`}
         on:click={() => {
             showControls = !showControls;

frontend/src/components/ElementSelector.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+    import { twMerge } from 'tailwind-merge';
+    import { store } from '../game';
+
+    const selectableElements = {
+        Eraser: 0x00000000,
+        Sand: 0xffd880ff,
+        Water: 0x0000ffff,
+        Plant: 0x00ff00ff,
+        Wall: 0x808080fe,
+    };
+
+    function toHex(value: number): string {
+        return value.toString(16).padStart(8, '0');
+    }
+
+    function toBinary(value: number): string {
+        return value.toString(2).padStart(32, '0');
+    }
+
+    function computeTextColour(value: number): string {
+        const r = (value & 0xff000000) >> 24;
+        const g = (value & 0x00ff0000) >> 16;
+        const b = (value & 0x0000ff00) >> 8;
+
+        // https://graphicdesign.stackexchange.com/a/17562
+        const gamma = 2.2;
+        return 0.2126 * Math.pow(r, gamma) + 0.7152 * Math.pow(g, gamma) + 0.0722 * Math.pow(b, gamma) > 0.5
+            ? 'black'
+            : 'white';
+    }
+</script>
+
+<div class="h-full rounded-r-lg bg-zinc-950">
+    {#each Object.entries(selectableElements) as [name, value]}
+        <button
+            class={twMerge(
+                'w-full p-2 text-xl font-semibold transition-all hover:opacity-75',
+                $store.brushColour === toBinary(value) && 'font-black',
+            )}
+            style:background-color={'#' + toHex(value)}
+            style:color={computeTextColour(value)}
+            on:click={() => {
+                $store.brushColour = toBinary(value);
+            }}
+        >
+            {name}
+        </button>
+    {/each}
+</div>

frontend/src/game.ts

@@ -13,7 +13,7 @@ let state = {
     mouseY: 0,
 
     brushSize: 10,
-    brushColour: '11111111000000001111111111111111',
+    brushColour: '11111111110110001000000011111111',
 
     autoTick: true,
 };