Merge pull request #41 from topology-foundation/Mugen/palette

Mugen/palette

src/lib/components/Player.svelte

@@ -6,7 +6,7 @@
     import { PerspectiveCamera, Vector3, Raycaster, Vector2, CircleGeometry, MeshBasicMaterial, Mesh } from 'three'
     import PointerLockControls from './PointerLockControls.svelte'
     import { selectedKeyboard } from '$lib/store/settings'
-    import { paintMode, isMouseDown, mousePosition, isIntersect, color } from '$lib/store/player'
+    import { paintMode, isMouseDown, mousePosition, isIntersect, selectedColor } from '$lib/store/player'
     import { get } from 'svelte/store'
     import { updatePixels } from '$lib/store/wall';
     import { setCanPaint } from '$lib/store/player';
@@ -253,7 +253,7 @@
         updatePixels(updates);
     }
     function drawCircle(updates: { x: number; y: number; r: number; g: number; b: number; a: number }[], x: number, y: number): void {
-        const { r, g, b, a } = get(color);
+        const { r, g, b, a } = get(selectedColor);
         for (let i = -10; i < 10; i++) {
             for (let j = -10; j < 10; j++) {
                 if (i * i + j * j < 100) {

src/lib/components/ui/paintMode/Ui.svelte

@@ -1,20 +1,34 @@
 <script lang="ts">
-    import { paintMode } from "$lib/store/player";
+    import { paintMode, palette, selectedColor } from "$lib/store/player";
+    import type { Color } from "$lib/store/player"
     import { fly } from "svelte/transition";
-    
-    const colors = [
-        '#FF5733', '#33FF57', '#3357FF', '#FF33A1', '#33FFF5',
-        '#FF8C33', '#B833FF', '#F5FF33', '#FF335E', '#33FF8A', 
-    ];
+    import { get } from 'svelte/store';
+
+    let colors: Color[] = get(palette);
+    let selected: Color = get(selectedColor);
+
+    function selectColor(color: Color): void {
+        selectedColor.set(color);
+        selected = color;  // Update the local selected color
+    }
+
+    // Update colors and selected color when stores change
+    $: colors = $palette;
+    $: selected = $selectedColor;
 </script>
 
 {#if $paintMode}
     <div transition:fly="{{ x: -100, duration: 500 }}" class="fixed z-50 left-0 top-1/2 transform -translate-y-1/2 h-[50vh] w-[100px] bg-white flex items-center justify-center p-2">
         <div class="grid grid-cols-2 grid-rows-5 gap-2 w-full h-full">
             {#each colors as color}
-                <div class="relative w-full pb-full rounded-lg" style="background-color: {color};">
-                    <div class="absolute top-0 left-0 w-full h-full rounded-lg" style="background-color: {color};"></div>
-                </div>
+                <button 
+                    type="button" 
+                    class="relative w-full pb-full rounded-lg focus:outline-none" 
+                    style="background-color: rgba({color.r}, {color.g}, {color.b}, {color.a / 255}); border: 3px solid {selected.r === color.r && selected.g === color.g && selected.b === color.b && selected.a === color.a ? 'black' : 'transparent'};" 
+                    on:click={() => selectColor(color)}
+                    on:keydown={(e) => e.key === 'Enter' && selectColor(color)}
+                    aria-label="Select color">
+                </button>
             {/each}
         </div>
     </div>

src/lib/store/player.ts

@@ -11,7 +11,21 @@ export const mousePosition = writable<Coords>({ x: 0, y: 0 });
 export const isMouseDown = writable<boolean>(false);
 export const isIntersect = writable<boolean>(false);
 
-export const color = writable({ r: 255, g: 155, b: 0, a: 255 }); // default red
+export type Color = { r: number, g: number, b: number, a: number };
+export const selectedColor = writable<Color>({ r: 255, g: 0, b: 0, a: 255 });
+
+export const palette = writable([
+  { r: 255, g: 0, b: 0, a: 255 },   // Red
+  { r: 0, g: 255, b: 0, a: 255 },   // Green
+  { r: 0, g: 0, b: 255, a: 255 },   // Blue
+  { r: 255, g: 255, b: 0, a: 255 }, // Yellow
+  { r: 255, g: 0, b: 255, a: 255 }, // Magenta
+  { r: 0, g: 255, b: 255, a: 255 }, // Cyan
+  { r: 128, g: 128, b: 128, a: 255 }, // Gray
+  { r: 0, g: 0, b: 0, a: 255 },     // Black
+  { r: 255, g: 165, b: 0, a: 255 }, // Orange
+  { r: 75, g: 0, b: 130, a: 255 }   // Indigo
+]);
 
 export const canPaint = writable(false);
 export function setCanPaint(value: boolean) {