brush picker!

static/index.js

@@ -16,6 +16,7 @@ const updateInterval = 1000 / 60;
 let main = document.querySelector("main");
 let canvasRenderer = main.querySelector("rkgk-canvas-renderer");
 let reticleRenderer = main.querySelector("rkgk-reticle-renderer");
+let brushBox = main.querySelector("rkgk-brush-box");
 let brushEditor = main.querySelector("rkgk-brush-editor");
 let brushPreview = main.querySelector("rkgk-brush-preview");
 let brushCostGauges = main.querySelector("rkgk-brush-cost-gauges");
@@ -134,6 +135,7 @@ function readUrl(urlString) {
     });
 
     let wall = new Wall(session.wallInfo);
+    brushBox.initialize(session.wallInfo.hakuLimits);
     canvasRenderer.initialize(wall);
 
     for (let onlineUser of session.wallInfo.online) {
@@ -290,6 +292,45 @@ function readUrl(urlString) {
         });
     });
 
+    // Brush box
+
+    function updateBrushBoxDirtyState() {
+        if (brushBox.currentPresetId == null) return;
+
+        let currentPreset = brushBox.findBrushPreset(brushBox.currentPresetId);
+        if (brushEditor.name != currentPreset.name || brushEditor.code != currentPreset.code) {
+            brushBox.markDirty();
+        } else {
+            brushBox.markClean();
+        }
+    }
+
+    updateBrushBoxDirtyState();
+    brushEditor.addEventListener(".nameChanged", updateBrushBoxDirtyState);
+    brushEditor.addEventListener(".codeChanged", updateBrushBoxDirtyState);
+
+    brushBox.addEventListener(".clickNew", () => {
+        let id = brushBox.saveUserPreset({ name: brushEditor.name, code: brushEditor.code });
+        brushBox.updateBrushes();
+        brushBox.renderBrushes();
+        brushBox.setCurrentBrush(id);
+        brushBox.markClean();
+    });
+
+    brushBox.addEventListener(".brushChange", (event) => {
+        let preset = event.preset;
+        brushEditor.setName(preset.name);
+        brushEditor.setCode(preset.code);
+        brushBox.setCurrentBrush(preset.id);
+        brushBox.markClean();
+    });
+
+    brushBox.addEventListener(".overwritePreset", (event) => {
+        let preset = event.preset;
+        preset.name = brushEditor.name;
+        preset.code = brushEditor.code;
+    });
+
     // Zoom indicator
 
     canvasRenderer.addEventListener(".viewportUpdate", () => {