THE RACCOON ADVENTURER

Okay, let's set up the basic structure for "THE RACCOON ADVENTURER". This will include the HTML, CSS for styling and font, and initial JavaScript files for the core game loop, UI, player, and items. We'll focus on the interface, inventory basics, item ranks/colors, and placeholders for minigames first. THE RACCOON ADVENTURER

body { margin: 0; overflow: hidden; background-color: #1a1a1a; /* Dark background */ color: #e0e0e0; font-family: 'Orbitron', sans-serif; /* Futuristic font */ } canvas { display: block; border: 2px solid #444; /* Outline */ background-color: #2a2a2a; /* Slightly lighter dark grey for canvas */ box-sizing: border-box; /* Include border in size */ } export const ITEM_RANKS = { COMMON: { name: 'Common', color: '#b0b0b0', weight: 500 }, // Grey UNCOMMON: { name: 'Uncommon', color: '#6a9e6a', weight: 250 }, // Green RARE: { name: 'Rare', color: '#5a8dcc', weight: 120 }, // Blue SUPER_RARE: { name: 'Super Rare', color: '#a069d1', weight: 60 }, // Purple EPIC: { name: 'Epic', color: '#d18a69', weight: 35 }, // Orange LEGENDARY: { name: 'Legendary', color: '#d1c869', weight: 20 }, // Gold EXQUISITE: { name: 'Exquisite', color: '#69d1d1', weight: 10 }, // Cyan MYTHICAL: { name: 'Mythical', color: '#d16969', weight: 5 }, // Red }; // Calculate total weight for weighted random selection export const TOTAL_RANK_WEIGHT = Object.values(ITEM_RANKS).reduce((sum, rank) => sum + rank.weight, 0); export const UI_COLORS = { background: '#222228', border: '#555560', text: '#e0e0e0', textHighlight: '#ffffff', button: '#33333a', buttonHover: '#44444f', accent: '#69d1d1', // Use Exquisite color as accent locked: '#777777', currency: '#d1c869', // Gold color for currency }; export const PLAYER_START_COINS = 100; export const DUNGEON_COST = 5000; // Helper function for drawing text with outline export function drawText(ctx, text, x, y, color = 'white', size = 16, font = 'Orbitron', align = 'left', baseline = 'top') { ctx.font = `${size}px ${font}`; ctx.fillStyle = color; ctx.textAlign = align; ctx.textBaseline = baseline; ctx.fillText(text, x, y); } // Helper function for drawing rectangles export function drawRect(ctx, x, y, width, height, fillColor, strokeColor = null, lineWidth = 1) { ctx.fillStyle = fillColor; ctx.fillRect(x, y, width, height); if (strokeColor) { ctx.strokeStyle = strokeColor; ctx.lineWidth = lineWidth; ctx.strokeRect(x, y, width, height); } } // Helper function for weighted random selection export function getWeightedRandomRank(ranks, totalWeight) { let random = Math.random() * totalWeight; for (const rankKey in ranks) { const rank = ranks[rankKey]; if (random < rank.weight) { return rank; } random -= rank.weight; } return ranks.COMMON; // Fallback } import { ITEM_RANKS, TOTAL_RANK_WEIGHT } from './constants.js'; import { getWeightedRandomRank } from './utils.js'; let nextItemId = 0; export class Item { constructor(name, rank, stats = {}) { this.id = nextItemId++; this.name = name; this.rank = rank; // The rank object { name, color, weight } this.stats = this._randomizeStats(stats); // Add slight variation } // Add some randomness to base stats _randomizeStats(baseStats) { const randomized = {}; for (const stat in baseStats) { const baseValue = baseStats[stat]; // Add +/- 10% variation const variation = baseValue * (Math.random() * 0.2 - 0.1); randomized[stat] = Math.round(baseValue + variation); } return randomized; } } // --- Item Generation --- // Simplified: Generate generic items based on rank const ITEM_TEMPLATES = { Weapon: ['Sword', 'Axe', 'Dagger', 'Staff', 'Bow'], Armor: ['Helmet', 'Chestplate', 'Gauntlets', 'Boots', 'Shield'], Accessory: ['Ring', 'Amulet', 'Belt'] }; const STATS_BY_RANK = { [ITEM_RANKS.COMMON.name]: { attack: 5, defense: 3, speed: 1 }, [ITEM_RANKS.UNCOMMON.name]: { attack: 8, defense: 5, speed: 2 }, [ITEM_RANKS.RARE.name]: { attack: 13, defense: 8, speed: 3 }, [ITEM_RANKS.SUPER_RARE.name]: { attack: 20, defense: 12, speed: 5 }, [ITEM_RANKS.EPIC.name]: { attack: 30, defense: 18, speed: 7 }, [ITEM_RANKS.LEGENDARY.name]: { attack: 45, defense: 25, speed: 10 }, [ITEM_RANKS.EXQUISITE.name]: { attack: 60, defense: 35, speed: 13 }, [ITEM_RANKS.MYTHICAL.name]: { attack: 80, defense: 50, speed: 17 }, }; export function generateRandomItem() { const rank = getWeightedRandomRank(ITEM_RANKS, TOTAL_RANK_WEIGHT); const itemTypeKeys = Object.keys(ITEM_TEMPLATES); const randomTypeKey = itemTypeKeys[Math.floor(Math.random() * itemTypeKeys.length)]; const randomTemplate = ITEM_TEMPLATES[randomTypeKey][Math.floor(Math.random() * ITEM_TEMPLATES[randomTypeKey].length)]; const name = `${rank.name} ${randomTemplate}`; const baseStats = STATS_BY_RANK[rank.name] || {}; // Select relevant stats based on type (simplified) let relevantStats = {}; if (randomTypeKey === 'Weapon') { relevantStats = { attack: baseStats.attack || 1 }; } else if (randomTypeKey === 'Armor') { relevantStats = { defense: baseStats.defense || 1 }; } else { // Accessory relevantStats = { speed: baseStats.speed || 1 }; // Maybe add a small amount of other stats too if (Math.random() > 0.5) relevantStats.attack = Math.round(baseStats.attack / 5); if (Math.random() > 0.5) relevantStats.defense = Math.round(baseStats.defense / 5); } return new Item(name, rank, relevantStats); } import { PLAYER_START_COINS } from './constants.js'; export class Player { constructor() { this.x = 50; // Example starting position this.y = 50; this.coins = PLAYER_START_COINS; this.inventory = []; // Array of Item objects this.equipped = { weapon: null, helmet: null, chestplate: null, gauntlets: null, boots: null, shield: null, ring: null, amulet: null, belt: null, }; // Item objects this.stats = { // Base stats + equipment stats attack: 1, defense: 1, speed: 5, }; this.dungeonUnlocked = false; } addCoins(amount) { this.coins += amount; } spendCoins(amount) { if (this.coins >= amount) { this.coins -= amount; return true; } return false; } addItem(item) { // Simple inventory limit for now if (this.inventory.length < 20) { this.inventory.push(item); return true; } console.log("Inventory full!"); return false; } removeItem(itemId) { const index = this.inventory.findIndex(item => item.id === itemId); if (index > -1) { this.inventory.splice(index, 1); return true; } return false; } // Basic equip logic (needs refinement based on item type) equipItem(itemId) { const itemIndex = this.inventory.findIndex(item => item.id === itemId); if (itemIndex === -1) return false; // Item not in inventory const item = this.inventory[itemIndex]; let slot = null; // Determine slot based on item name (very basic) if (item.name.includes('Sword') || item.name.includes('Axe') || item.name.includes('Dagger') || item.name.includes('Staff') || item.name.includes('Bow')) slot = 'weapon'; else if (item.name.includes('Helmet')) slot = 'helmet'; else if (item.name.includes('Chestplate')) slot = 'chestplate'; else if (item.name.includes('Gauntlets')) slot = 'gauntlets'; else if (item.name.includes('Boots')) slot = 'boots'; else if (item.name.includes('Shield')) slot = 'shield'; else if (item.name.includes('Ring')) slot = 'ring'; else if (item.name.includes('Amulet')) slot = 'amulet'; else if (item.name.includes('Belt')) slot = 'belt'; if (slot && this.equipped[slot]) { // Unequip current item in slot and move back to inventory this.addItem(this.equipped[slot]); } if (slot) { this.equipped[slot] = item; this.inventory.splice(itemIndex, 1); // Remove from inventory this.recalculateStats(); return true; } console.log("Cannot determine equipment slot for:", item.name); return false; } unequipItem(slot) { if (this.equipped[slot]) { if (this.addItem(this.equipped[slot])) { // Check if inventory has space this.equipped[slot] = null; this.recalculateStats(); return true; } else { console.log("Cannot unequip, inventory full!"); return false; } } return false; } recalculateStats() { // Reset to base stats this.stats = { attack: 1, defense: 1, speed: 5 }; // Add stats from equipped items for (const slot in this.equipped) { const item = this.equipped[slot]; if (item && item.stats) { for (const stat in item.stats) { this.stats[stat] = (this.stats[stat] || 0) + item.stats[stat]; } } } } buyDungeon() { if (!this.dungeonUnlocked && this.spendCoins(DUNGEON_COST)) { this.dungeonUnlocked = true; return true; } return false; } } import { UI_COLORS, ITEM_RANKS, DUNGEON_COST } from './constants.js'; import { drawText, drawRect } from './utils.js'; export class UI { constructor(canvas, ctx, player, game) { this.canvas = canvas; this.ctx = ctx; this.player = player; this.game = game; // To access game state/methods if needed this.sidebarWidth = 200; this.padding = 10; this.buttonHeight = 30; this.itemSlotSize = 40; this.itemSlotMargin = 5; this.activeTab = 'Inventory'; // 'Inventory', 'Minigames', 'Dungeons' this.hoveredElement = null; // To track mouse hover for buttons/items this.selectedItem = null; // Track selected item in inventory for details } update(mousePos) { this.hoveredElement = null; // Reset hover state each frame // --- Sidebar Button Hover --- const buttonYStart = this.padding * 2 + 20; // Below title const buttonX = this.padding; const buttonWidth = this.sidebarWidth - this.padding * 2; // Inventory Button if (mousePos.x > buttonX && mousePos.x < buttonX + buttonWidth && mousePos.y > buttonYStart && mousePos.y < buttonYStart + this.buttonHeight) { this.hoveredElement = 'tab_inventory'; } // Minigames Button const minigamesButtonY = buttonYStart + this.buttonHeight + this.padding; if (mousePos.x > buttonX && mousePos.x < buttonX + buttonWidth && mousePos.y > minigamesButtonY && mousePos.y < minigamesButtonY + this.buttonHeight) { this.hoveredElement = 'tab_minigames'; } // Dungeons Button const dungeonsButtonY = minigamesButtonY + this.buttonHeight + this.padding; if (mousePos.x > buttonX && mousePos.x < buttonX + buttonWidth && mousePos.y > dungeonsButtonY && mousePos.y < dungeonsButtonY + this.buttonHeight) { this.hoveredElement = this.player.dungeonUnlocked ? 'tab_dungeons' : 'buy_dungeon'; } // --- Tab Specific Hover --- if (this.activeTab === 'Inventory') { this._updateInventoryHover(mousePos); } else if (this.activeTab === 'Minigames') { this._updateMinigamesHover(mousePos); } } _updateInventoryHover(mousePos) { // Inventory Slots Hover const invX = this.padding; const invY = this.padding * 6 + this.buttonHeight * 3 + 20; // Below buttons and title const slotsPerRow = Math.floor((this.sidebarWidth - this.padding * 2) / (this.itemSlotSize + this.itemSlotMargin)); this.player.inventory.forEach((item, index) => { const row = Math.floor(index / slotsPerRow); const col = index % slotsPerRow; const slotX = invX + col * (this.itemSlotSize + this.itemSlotMargin); const slotY = invY + row * (this.itemSlotSize + this.itemSlotMargin); if (mousePos.x > slotX && mousePos.x < slotX + this.itemSlotSize && mousePos.y > slotY && mousePos.y < slotY + this.itemSlotSize) { this.hoveredElement = `inventory_${item.id}`; } }); // Equip Button Hover (if item selected) if (this.selectedItem) { const detailsY = invY + Math.ceil(this.player.inventory.length / slotsPerRow) * (this.itemSlotSize + this.itemSlotMargin) + this.padding * 2 + 100; // Approx below details const equipButtonX = this.padding; const equipButtonWidth = this.sidebarWidth - this.padding * 2; if (mousePos.x > equipButtonX && mousePos.x < equipButtonX + equipButtonWidth && mousePos.y > detailsY && mousePos.y < detailsY + this.buttonHeight) { this.hoveredElement = 'equip_item'; } } } _updateMinigamesHover(mousePos) { const mgYStart = this.padding * 6 + this.buttonHeight * 3 + 20; // Below tab buttons const buttonX = this.padding; const buttonWidth = this.sidebarWidth - this.padding * 2; // Minigame 1 (Coin) if (mousePos.x > buttonX && mousePos.x < buttonX + buttonWidth && mousePos.y > mgYStart && mousePos.y < mgYStart + this.buttonHeight) { this.hoveredElement = 'minigame_coin'; } // Minigame 2 (Loot) const lootGameY = mgYStart + this.buttonHeight + this.padding; if (mousePos.x > buttonX && mousePos.x < buttonX + buttonWidth && mousePos.y > lootGameY && mousePos.y < lootGameY + this.buttonHeight) { this.hoveredElement = 'minigame_loot'; } } handleMouseClick(pos) { // --- Tab Switching --- if (this.hoveredElement === 'tab_inventory') this.activeTab = 'Inventory'; if (this.hoveredElement === 'tab_minigames') this.activeTab = 'Minigames'; if (this.hoveredElement === 'tab_dungeons') this.activeTab = 'Dungeons'; // --- Actions --- if (this.hoveredElement === 'buy_dungeon') { if (this.player.buyDungeon()) { console.log("Dungeon Access Purchased!"); this.activeTab = 'Dungeons'; // Switch to tab after purchase } else { console.log("Not enough coins to buy dungeon access!"); } } // --- Tab Specific Clicks --- if (this.activeTab === 'Inventory') { this._handleInventoryClick(pos); } else if (this.activeTab === 'Minigames') { this._handleMinigamesClick(pos); } } _handleInventoryClick(pos) { let itemClicked = false; // Check inventory item clicks this.player.inventory.forEach((item) => { if (this.hoveredElement === `inventory_${item.id}`) { this.selectedItem = item; itemClicked = true; } }); // If clicked outside an item, deselect if (!itemClicked && !this.hoveredElement?.startsWith('inventory_')) { // Keep item selected if clicking the equip button if (this.hoveredElement !== 'equip_item') { this.selectedItem = null; } } // Equip Button Click if (this.hoveredElement === 'equip_item' && this.selectedItem) { if (this.player.equipItem(this.selectedItem.id)) { console.log(`Equipped ${this.selectedItem.name}`); this.selectedItem = null; // Deselect after equipping } else { console.log(`Failed to equip ${this.selectedItem.name}`); } } } _handleMinigamesClick(pos) { if (this.hoveredElement === 'minigame_coin') { this.game.playCoinMinigame(); // Call game logic } if (this.hoveredElement === 'minigame_loot') { this.game.playLootMinigame(); // Call game logic } } draw() { // Draw Sidebar Background drawRect(this.ctx, 0, 0, this.sidebarWidth, this.canvas.height, UI_COLORS.background, UI_COLORS.border, 2); // Draw Title drawText(this.ctx, 'RACCOON ADV.', this.sidebarWidth / 2, this.padding + 5, UI_COLORS.accent, 18, 'Orbitron', 'center'); // Draw Currency drawText(this.ctx, `₽: ${this.player.coins}`, this.sidebarWidth - this.padding, this.padding * 3 + 20, UI_COLORS.currency, 14, 'Orbitron', 'right'); // --- Draw Tab Buttons --- const buttonYStart = this.padding * 4 + 20; this._drawSidebarButton('Inventory', buttonYStart, 'tab_inventory', this.activeTab === 'Inventory'); this._drawSidebarButton('Minigames', buttonYStart + this.buttonHeight + this.padding, 'tab_minigames', this.activeTab === 'Minigames'); if (this.player.dungeonUnlocked) { this._drawSidebarButton('Dungeons', buttonYStart + (this.buttonHeight + this.padding) * 2, 'tab_dungeons', this.activeTab === 'Dungeons'); } else { this._drawSidebarButton(`Dungeons (${DUNGEON_COST}₽)`, buttonYStart + (this.buttonHeight + this.padding) * 2, 'buy_dungeon', false, true); } // --- Draw Active Tab Content --- const contentY = buttonYStart + (this.buttonHeight + this.padding) * 3 + this.padding; if (this.activeTab === 'Inventory') { this._drawInventoryTab(contentY); } else if (this.activeTab === 'Minigames') { this._drawMinigamesTab(contentY); } else if (this.activeTab === 'Dungeons') { this._drawDungeonsTab(contentY); } // Draw Player Stats (Example - could be elsewhere) this._drawPlayerStats(this.sidebarWidth + this.padding, this.padding); // Draw Equipped Items (Example) this._drawEquippedItems(this.sidebarWidth + this.padding, this.padding + 100); } _drawSidebarButton(text, y, elementId, isActive = false, isLocked = false) { const buttonX = this.padding; const buttonWidth = this.sidebarWidth - this.padding * 2; let bgColor = UI_COLORS.button; let textColor = UI_COLORS.text; if (isLocked) { bgColor = UI_COLORS.locked; textColor = UI_COLORS.textHighlight; // Make locked text clearer if (this.hoveredElement === elementId) { bgColor = UI_COLORS.buttonHover; // Allow hover effect even if locked } } else { if (isActive) { bgColor = UI_COLORS.accent; textColor = UI_COLORS.background; } else if (this.hoveredElement === elementId) { bgColor = UI_COLORS.buttonHover; textColor = UI_COLORS.textHighlight; } } drawRect(this.ctx, buttonX, y, buttonWidth, this.buttonHeight, bgColor, UI_COLORS.border); drawText(this.ctx, text, this.sidebarWidth / 2, y + this.buttonHeight / 2, textColor, 14, 'Orbitron', 'center', 'middle'); } _drawInventoryTab(startY) { drawText(this.ctx, 'Inventory', this.padding, startY, UI_COLORS.textHighlight, 16); const invY = startY + 25; const slotsPerRow = Math.floor((this.sidebarWidth - this.padding * 2) / (this.itemSlotSize + this.itemSlotMargin)); // Draw Inventory Slots this.player.inventory.forEach((item, index) => { const row = Math.floor(index / slotsPerRow); const col = index % slotsPerRow; const slotX = this.padding + col * (this.itemSlotSize + this.itemSlotMargin); const slotY = invY + row * (this.itemSlotSize + this.itemSlotMargin); let borderColor = UI_COLORS.border; if (this.hoveredElement === `inventory_${item.id}`) { borderColor = UI_COLORS.textHighlight; } if (this.selectedItem && this.selectedItem.id === item.id) { borderColor = UI_COLORS.accent; } drawRect(this.ctx, slotX, slotY, this.itemSlotSize, this.itemSlotSize, item.rank.color, borderColor, 2); // Optionally draw a small icon or letter later }); // Draw Selected Item Details if (this.selectedItem) { const detailsY = invY + Math.ceil(this.player.inventory.length / slotsPerRow) * (this.itemSlotSize + this.itemSlotMargin) + this.padding * 2; drawRect(this.ctx, this.padding, detailsY - this.padding, this.sidebarWidth - this.padding * 2, 100, UI_COLORS.button, UI_COLORS.border); drawText(this.ctx, this.selectedItem.name, this.padding + 5, detailsY, this.selectedItem.rank.color, 14); let statY = detailsY + 20; for (const stat in this.selectedItem.stats) { drawText(this.ctx, `${stat}: ${this.selectedItem.stats[stat]}`, this.padding + 5, statY, UI_COLORS.text, 12); statY += 15; } // Draw Equip Button const equipButtonY = detailsY + 100; // Below details box this._drawSidebarButton('Equip', equipButtonY, 'equip_item'); } } _drawMinigamesTab(startY) { drawText(this.ctx, 'Minigames', this.padding, startY, UI_COLORS.textHighlight, 16); const mgY = startY + 25; this._drawSidebarButton('Play for Coins', mgY, 'minigame_coin'); this._drawSidebarButton('Gamble for Loot', mgY + this.buttonHeight + this.padding, 'minigame_loot'); // Add descriptions later } _drawDungeonsTab(startY) { drawText(this.ctx, 'Dungeons', this.padding, startY, UI_COLORS.textHighlight, 16); const contentY = startY + 25; drawText(this.ctx, 'Dungeon content coming soon!', this.padding, contentY, UI_COLORS.text, 12); // Add dungeon selection/info here later } _drawPlayerStats(x, y) { drawText(this.ctx, 'Player Stats', x, y, UI_COLORS.textHighlight, 16); let statY = y + 25; drawText(this.ctx, `ATK: ${this.player.stats.attack}`, x, statY, UI_COLORS.text, 14); statY += 20; drawText(this.ctx, `DEF: ${this.player.stats.defense}`, x, statY, UI_COLORS.text, 14); statY += 20; drawText(this.ctx, `SPD: ${this.player.stats.speed}`, x, statY, UI_COLORS.text, 14); } _drawEquippedItems(x, y) { drawText(this.ctx, 'Equipped', x, y, UI_COLORS.textHighlight, 16); let slotY = y + 25; const slotSize = 30; const slotMargin = 5; for (const slot in this.player.equipped) { const item = this.player.equipped[slot]; const displaySlotName = slot.charAt(0).toUpperCase() + slot.slice(1); // Capitalize drawRect(this.ctx, x, slotY, slotSize, slotSize, UI_COLORS.button, UI_COLORS.border); if (item) { drawRect(this.ctx, x + 2, slotY + 2, slotSize - 4, slotSize - 4, item.rank.color); // Inner color box } drawText(this.ctx, `${displaySlotName}: ${item ? item.name : 'Empty'}`, x + slotSize + slotMargin, slotY + slotSize / 2, item ? item.rank.color : UI_COLORS.text, 12, 'Orbitron', 'left', 'middle'); slotY += slotSize + slotMargin; } } } export class InputHandler { constructor(canvas) { this.canvas = canvas; this.mouse = { x: 0, y: 0, clicked: false, down: false // Track if mouse button is held down }; this.keys = {}; // Track pressed keys // Use arrow function to maintain 'this' context this.canvas.addEventListener('mousemove', (e) => this.onMouseMove(e)); this.canvas.addEventListener('mousedown', (e) => this.onMouseDown(e)); this.canvas.addEventListener('mouseup', (e) => this.onMouseUp(e)); this.canvas.addEventListener('contextmenu', (e) => e.preventDefault()); // Prevent right-click menu window.addEventListener('keydown', (e) => this.onKeyDown(e)); window.addEventListener('keyup', (e) => this.onKeyUp(e)); } getMousePosition(event) { const rect = this.canvas.getBoundingClientRect(); const scaleX = this.canvas.width / rect.width; const scaleY = this.canvas.height / rect.height; return { x: (event.clientX - rect.left) * scaleX, y: (event.clientY - rect.top) * scaleY }; } onMouseMove(e) { const pos = this.getMousePosition(e); this.mouse.x = pos.x; this.mouse.y = pos.y; } onMouseDown(e) { if (e.button === 0) { // Left mouse button this.mouse.down = true; this.mouse.clicked = true; // Register click on down } } onMouseUp(e) { if (e.button === 0) { // Left mouse button this.mouse.down = false; // Click is registered on mouse down, reset happens after processing } } onKeyDown(e) { this.keys[e.key] = true; } onKeyUp(e) { this.keys[e.key] = false; } // Call this at the end of the game loop update phase resetClick() { this.mouse.clicked = false; } isKeyDown(key) { return this.keys[key] || false; } } import { Player } from './player.js'; import { UI } from './ui.js'; import { InputHandler } from './input.js'; import { generateRandomItem } from './item.js'; import { drawText } from './utils.js'; // For potential game messages export class Game { constructor(canvas, ctx) { this.canvas = canvas; this.ctx = ctx; this.player = new Player(); this.ui = new UI(canvas, ctx, this.player, this); this.input = new InputHandler(canvas); this.lastTime = 0; this.deltaTime = 0; this.debugInfo = ""; // For displaying messages } // --- Minigame Logic (Placeholders) --- playCoinMinigame() { const difficulty = 1; // Example: could be dynamic const reward = Math.floor(Math.random() * 10 + 5) * difficulty; // Random reward based on difficulty this.player.addCoins(reward); this.debugInfo = `Minigame: Won ${reward} coins!`; console.log(`Played coin minigame, won ${reward} coins.`); } playLootMinigame() { // Simulate cost? Maybe later. const newItem = generateRandomItem(); if (this.player.addItem(newItem)) { this.debugInfo = `Loot Minigame: Found ${newItem.name}!`; console.log(`Played loot minigame, found:`, newItem); } else { this.debugInfo = `Loot Minigame: Found ${newItem.name}, but inventory is full!`; console.log(`Played loot minigame, found item but inventory full.`); } } // --- Core Game Loop Methods --- update(timestamp) { this.deltaTime = (timestamp - this.lastTime) / 1000; // Delta time in seconds this.lastTime = timestamp; // Update UI based on mouse position first (for hover effects) this.ui.update(this.input.mouse); // Handle Input if (this.input.mouse.clicked) { // Check if click was on the UI sidebar if (this.input.mouse.x <= this.ui.sidebarWidth) { this.ui.handleMouseClick(this.input.mouse); } else { // Handle clicks in the game world area (if any) console.log("Clicked in game area at:", this.input.mouse.x, this.input.mouse.y); } } // Player movement example (if needed later) // if (this.input.isKeyDown('ArrowUp')) this.player.y -= 100 * this.deltaTime; // if (this.input.isKeyDown('ArrowDown')) this.player.y += 100 * this.deltaTime; // if (this.input.isKeyDown('ArrowLeft')) this.player.x -= 100 * this.deltaTime; // if (this.input.isKeyDown('ArrowRight')) this.player.x += 100 * this.deltaTime; // Reset click state after processing this.input.resetClick(); // Clear debug info after a short time (e.g., 2 seconds) if (this.debugInfo) { setTimeout(() => { this.debugInfo = ""; }, 2000); } } draw() { // Clear Canvas (only the game area, sidebar is drawn over) this.ctx.clearRect(this.ui.sidebarWidth, 0, this.canvas.width - this.ui.sidebarWidth, this.canvas.height); // Or fill game area background if different // drawRect(this.ctx, this.ui.sidebarWidth, 0, this.canvas.width - this.ui.sidebarWidth, this.canvas.height, '#333'); // Draw Game World Elements (placeholder) // this.ctx.fillStyle = 'red'; // this.ctx.fillRect(this.player.x, this.player.y, 20, 20); // Simple player representation // Draw UI (drawn last to be on top) this.ui.draw(); // Draw Debug Info/Messages if (this.debugInfo) { drawText(this.ctx, this.debugInfo, this.ui.sidebarWidth + 10, this.canvas.height - 30, 'yellow', 14); } } } import { Game } from './game.js'; // Canvas Setup const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); // Set canvas to full window size initially and on resize function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; // Re-initialize or update game elements that depend on size if necessary // For now, the UI adapts reasonably well, but game world elements might need adjustment. } // Initial resize resizeCanvas(); // Handle window resize window.addEventListener('resize', resizeCanvas); // Create Game Instance const game = new Game(canvas, ctx); // Animation Loop function animate(timestamp) { game.update(timestamp); game.draw(); requestAnimationFrame(animate); } // Start Animation animate(0); // Start the loop, passing initial timestamp 0