syffy

2025-09-16 11:19:34 +02:00
parent 63dff39be2
commit 40e8c5e0ab
8 changed files with 790 additions and 17 deletions
--- a/server/frontend/progen.html
+++ b/server/frontend/progen.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>WebSocket MUD</title>
+        <link rel="stylesheet" href="progen.scss" />
+    </head>
+    <body>
+        <div class="editor-container">
+            <h1>9×9 Pixel Art Editor</h1>
+            <div class="grid-container" id="gridContainer" onmouseleave="painter.updatePreview()">
+                <!-- Pixels will be generated by JavaScript -->
+            </div>
+            <div class="status" id="status">Click a pixel to start drawing</div>
+        </div>
+
+        <div class="controls-panel">
+            <div class="color-picker-section">
+                <h3>Current Color</h3>
+                <div class="current-color" id="currentColor" onclick="painter.openColorPicker()"></div>
+                <input
+                    type="color"
+                    id="colorPicker"
+                    value="#000000"
+                    onchange="setCurrentColor(this.value)"
+                    style="display: none"
+                />
+
+                <h3>Color Palette</h3>
+                <div class="color-palette" id="colorPalette">
+                    <!-- Color swatches will be generated -->
+                </div>
+            </div>
+
+            <div class="tools">
+                <div class="tool-group">
+                    <h3>Tools</h3>
+                    <button id="drawBtn" class="active" onclick="painter.setTool('draw')">Draw</button>
+                    <button id="fillBtn" onclick="painter.setTool('fill')">Fill</button>
+                    <button onclick="painter.toggleDrawingMode()" id="drawModeBtn">Toggle Drawing Mode</button>
+                </div>
+
+                <div class="tool-group">
+                    <button onclick="painter.clearCanvas()">Clear All</button>
+                    <button onclick="painter.randomFill()">Random Fill</button>
+                    <button onclick="painter.invertColors()">Invert</button>
+                </div>
+            </div>
+
+            <div class="export-section">
+                <div class="preview" id="preview"></div>
+                <button onclick="painter.exportAsImage()">Export png</button>
+                <button onclick="painter.exportAsData()">Export json</button>
+                <button onclick="painter.importData()">Import json</button>
+            </div>
+        </div>
+
+        <script type="module" src="progen.js"></script>
+    </body>
+</html>