Use palette from decoded file

frontend/src/App.svelte

@@ -35,6 +35,14 @@
   let refresh = {}
 
   let files: LoadedFile[] = []
+  let focusedFileIndex: number = -1
+  let focusedFile: LoadedFile = null
+  $: focusedFile = files[focusedFileIndex] ?? null
+  
+  function selectFile(file: LoadedFile, index: number) {
+    focusedFileIndex = index
+    refresh = {}
+  }
 
   function engageImport() {
     if (importValid) {
@@ -72,12 +80,12 @@
   </menu>
   <section class='content'>
     <section class='left'>
-      <PaletteSection bind:palette bind:primaryColorIndex bind:secondaryColorIndex />
+      <PaletteSection bind:palette bind:primaryColorIndex bind:secondaryColorIndex file={focusedFile} />
     </section>
     <section class='middle'>
       <Tabs>
         {#each files as file, index}
-          <Tab on:click={()=>refresh={}}>
+          <Tab on:click={()=>selectFile(file, index)}>
             <span class='tab'>
               <span>{file.title}</span>
               <Button size="small" kind="ghost" iconDescription="close" icon={Close} href="#" on:click={(e)=>{e.preventDefault();closeFile(index)}} />

frontend/src/sections/Importer.svelte

@@ -60,19 +60,13 @@
       path = /[^/\\]*$/.exec(filepath)[0]
       img = await loadImage(bytes)
       
-      console.log('oops', bytes, typeof bytes)
-      console.log('gonna do it...')
       let arr = Uint8Array.from(atob(bytes), (v) => v.charCodeAt(0))
-      console.log('arr', arr)
       let png = new IndexedPNG(arr)
-      console.log('hmm', png)
       await png.decode()
       
       canvas = new Canvas(png.width, png.height)
-      console.log('made canvas', canvas)
       
       if (png.pixelBitlength === 32) {
-        console.log('yee', png.decodedPixels)
         for (let i = 0; i < png.decodedPixels.length; i += 4) {
           let y = Math.floor(i / (png.width * 4))
           let x = (i / 4) % png.width
@@ -82,17 +76,12 @@
         // RGB
       } else if (png.pixelBitlength === 8) {
         canvas.setPaletteFromUint8Array(png.decodedPalette)
-        for (let i = 0; i < png.decodedPixels.length; i++) {
-          let y = Math.floor(i / (png.width * 4))
-          let x = (i / 4) % png.width
-          canvas.setPixel(x, y, png.decodedPixels[i])
-        }
+        canvas.setPixelsFromUint8Array(png.decodedPixels)
       } else {
         error = "pixel format"
         error2 = "unsupported pixel format"
         return
       }
-      console.log('wowww', canvas)
       canvas.refreshCanvas()
 
       recalc()

frontend/src/sections/Palette.svelte

@@ -1,7 +1,8 @@
 <script lang='ts'>
-  import { Palette, defaultPalette } from '../types/palette'
+  import type { LoadedFile } from '../types/file'
+
+  export let file: LoadedFile
   
-  export let palette: Palette = defaultPalette()
   export let primaryColorIndex: number = 1
   export let secondaryColorIndex: number = 0
   
@@ -17,9 +18,11 @@
 </script>
 
 <main>
-  {#each palette.entries as color, index}
-    <span on:click={paletteClick} style="background-color: {color.color}" x-index={index} class="color {index===primaryColorIndex?'primary':''} {index===secondaryColorIndex?'secondary':''}"></span>
-  {/each}
+  {#if file}
+    {#each file.canvas.palette as palette, paletteIndex}
+      <span on:click={paletteClick} style="background-color: rgba({palette&0xFF},{(palette>>8)&0xFF},{(palette>>16)&0xFF},{(palette>>24)&0xFF})" x-index={paletteIndex} class="color {paletteIndex===primaryColorIndex?'primary':''} {paletteIndex===secondaryColorIndex?'secondary':''}"></span>
+    {/each}
+  {/if}
 </main>
 
 <style>

frontend/src/types/canvas.ts

@@ -32,7 +32,7 @@ export class Canvas {
   setPaletteFromUint8Array(palette: Uint8Array) {
     this.palette = new Uint32Array(palette.length / 4)
     for (let i = 0; i < palette.length; i += 4) {
-      this.palette[i / 4] = (palette[i + 3] << 24) | (palette[i] << 16) | (palette[i + 1] << 8) | palette[i + 2]
+      this.palette[i / 4] = new Uint32Array(palette.buffer.slice(i, i + 4))[0]
     }
   }
   setPixelsFromUint8Array(pixels: Uint8Array) {
@@ -49,10 +49,14 @@ export class Canvas {
   setPixel(x: number, y: number, index: number) {
     this.pixels[y * this.width + x] = index
     let color = this.palette[index]
-    this.imageData.data[(y * this.width + x) * 4 + 0] = color & 0xFF
-    this.imageData.data[(y * this.width + x) * 4 + 1] = (color >> 8) & 0xFF
-    this.imageData.data[(y * this.width + x) * 4 + 2] = (color >> 16) & 0xFF
-    this.imageData.data[(y * this.width + x) * 4 + 3] = (color >> 24) & 0xFF
+    let r = color & 0xFF
+    let g = (color >> 8) & 0xFF
+    let b = (color >> 16) & 0xFF
+    let a = (color >> 24) & 0xFF
+    this.imageData.data[(y * this.width + x) * 4 + 0] = r
+    this.imageData.data[(y * this.width + x) * 4 + 1] = g
+    this.imageData.data[(y * this.width + x) * 4 + 2] = b
+    this.imageData.data[(y * this.width + x) * 4 + 3] = a
   }
   setPixelRGBA(x: number, y: number, r: number, g: number, b: number, a: number) {
     this.pixels[y * this.width + x] = this.addPaletteColor(r, g, b, a)