6 files changed, 123 insertions, 0 deletions
diff --git a/html/rogue/index.html b/html/rogue/index.html
index 362fa7a..e019a46 100644
--- a/html/rogue/index.html
+++ b/html/rogue/index.html
@@ -27,5 +27,9 @@
     <script src="js/inventory-ui.js"></script>
     <script src="js/player.js"></script>
     <script src="js/game.js"></script>
+    <script src="js/utils.js"></script>
+    <script src="js/state.js"></script>
+    <script src="js/renderer.js"></script>
+    <script src="js/events.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/html/rogue/js/config.js b/html/rogue/js/config.js
index 90c1f49..3bb9d6a 100644
--- a/html/rogue/js/config.js
+++ b/html/rogue/js/config.js
@@ -34,5 +34,37 @@ const Config = {
         FOLLOW_SPEED: 0.1, // Camera smoothing factor
         DEADZONE_X: 200, // Horizontal deadzone in pixels
         DEADZONE_Y: 150 // Vertical deadzone in pixels
+    },
+
+    ui: {
+        inventory: {
+            PADDING: 20,
+            WIDTH: 300,
+            HEIGHT: 400,
+            TITLE_FONT: '20px Arial',
+            ITEM_FONT: '16px Arial',
+            ITEM_SPACING: 30,
+            TITLE_OFFSET: 20,
+            ITEMS_START_OFFSET: 60,
+            BACKGROUND_COLOR: 'rgba(0, 0, 0, 0.7)',
+            WINDOW_COLOR: '#ffffff',
+            TEXT_COLOR: '#000000'
+        }
+    },
+    
+    items: {
+        SPAWN_COUNT: 10,
+        types: {
+            COIN: {
+                name: 'Coin',
+                color: '#FFD700',
+                size: 0.2
+            },
+            GEM: {
+                name: 'Gem',
+                color: '#50C878',
+                size: 0.25
+            }
+        }
     }
 }; 
\ No newline at end of file
diff --git a/html/rogue/js/events.js b/html/rogue/js/events.js
new file mode 100644
index 0000000..9ae8241
--- /dev/null
+++ b/html/rogue/js/events.js
@@ -0,0 +1,16 @@
+const EventSystem = {
+    listeners: new Map(),
+    
+    on(event, callback) {
+        if (!this.listeners.has(event)) {
+            this.listeners.set(event, new Set());
+        }
+        this.listeners.get(event).add(callback);
+    },
+    
+    emit(event, data) {
+        if (this.listeners.has(event)) {
+            this.listeners.get(event).forEach(callback => callback(data));
+        }
+    }
+}; 
\ No newline at end of file
diff --git a/html/rogue/js/renderer.js b/html/rogue/js/renderer.js
new file mode 100644
index 0000000..3e64666
--- /dev/null
+++ b/html/rogue/js/renderer.js
@@ -0,0 +1,29 @@
+const Renderer = {
+    drawHex(ctx, hex, x, y, size, fillStyle, strokeStyle) {
+        ctx.beginPath();
+        for (let i = 0; i < 6; i++) {
+            const angle = 2 * Math.PI / 6 * i;
+            const xPos = x + size * Math.cos(angle);
+            const yPos = y + size * Math.sin(angle);
+            if (i === 0) ctx.moveTo(xPos, yPos);
+            else ctx.lineTo(xPos, yPos);
+        }
+        ctx.closePath();
+        
+        if (fillStyle) {
+            ctx.fillStyle = fillStyle;
+            ctx.fill();
+        }
+        if (strokeStyle) {
+            ctx.strokeStyle = strokeStyle;
+            ctx.stroke();
+        }
+    },
+    
+    drawCircle(ctx, x, y, radius, fillStyle) {
+        ctx.fillStyle = fillStyle;
+        ctx.beginPath();
+        ctx.arc(x, y, radius, 0, Math.PI * 2);
+        ctx.fill();
+    }
+}; 
\ No newline at end of file
diff --git a/html/rogue/js/state.js b/html/rogue/js/state.js
new file mode 100644
index 0000000..f5c713d
--- /dev/null
+++ b/html/rogue/js/state.js
@@ -0,0 +1,17 @@
+const GameState = {
+    canvas: null,
+    ctx: null,
+    lastFrameTime: 0,
+    
+    init() {
+        this.canvas = document.getElementById('gameCanvas');
+        this.ctx = this.canvas.getContext('2d');
+        this.lastFrameTime = 0;
+    },
+    
+    resize() {
+        this.canvas.width = window.innerWidth;
+        this.canvas.height = window.innerHeight;
+        Camera.centerOn(player.position);
+    }
+}; 
\ No newline at end of file
diff --git a/html/rogue/js/utils.js b/html/rogue/js/utils.js
new file mode 100644
index 0000000..bd329fb
--- /dev/null
+++ b/html/rogue/js/utils.js
@@ -0,0 +1,25 @@
+const Utils = {
+    hexToKey(hex) {
+        return `${hex.q},${hex.r}`;
+    },
+    
+    keyToHex(key) {
+        const [q, r] = key.split(',').map(Number);
+        return { q, r };
+    },
+    
+    // Screen/canvas coordinate utilities
+    screenToCanvas(x, y, camera) {
+        return {
+            x: x + camera.x,
+            y: y + camera.y
+        };
+    },
+    
+    canvasToScreen(x, y, camera) {
+        return {
+            x: x - camera.x,
+            y: y - camera.y
+        };
+    }
+}; 
\ No newline at end of file