Add mobile ui

src/engine/commands.js

@@ -38,6 +38,7 @@ export default class Commands {
         this.context = context;
         this.commands = commands || new Map();
         this.enabled = true;
+        this.mobileCommands = null;
         this.addDefaultCommands();
     }
 
@@ -50,12 +51,15 @@ export default class Commands {
         const split = str.split(" ");
         if (this.commands.get(split[0])) {
             this.commands.get(split[0])(split, this.context);
+            return;
         }
         
+        // Try to match direction (handles both short and full forms)
         const direction = this.matchDirection(split[0]);
+        const actualDirection = direction || split[0]; // Use the input if no mapping found
 
-        if (room.getExit(direction)) {
-            this.context.move(room.getExit(direction));
+        if (room.getExit(actualDirection)) {
+            this.context.move(room.getExit(actualDirection));
         }
     }
 
@@ -77,9 +81,21 @@ export default class Commands {
         this.addCommands(defaultCommands);
     }
 
-    matchDirection(str) {
-        for (let dir of directionMap) {
-            if (dir[0] == str) return dir[1];
+    setMobileCommands(mobileCommands) {
+        this.mobileCommands = mobileCommands;
+    }
+
+    refreshMobileCommands() {
+        if (this.mobileCommands) {
+            this.mobileCommands.refreshCommands();
         }
     }
+
+    matchDirection(str) {
+        for (let dir of directionMap) {
+            if (dir[0] == str) return dir[1]; // short form -> long form
+            if (dir[1] == str) return dir[1]; // long form -> long form
+        }
+        return null;
+    }
 }

src/engine/commands/drop.js

@@ -1,4 +1,4 @@
-export default function DropCommand(args, context) {
+function DropCommand(args, context) {
     const room = context.getRoom(context.player.currentRoom);
     const items = context.player.getInventory();
     let item = null;
@@ -15,5 +15,23 @@ export default function DropCommand(args, context) {
         room.addItem(item.getID());
         context.print(`You set ${item.name} down on the floor.`);
         item.onDrop();
+        
+        // Refresh mobile commands when items change
+        context.commandHandler.refreshMobileCommands();
     }
-}
+}
+
+DropCommand.metadata = {
+    category: "Actions",
+    description: "Drop an object",
+    arguments: [
+        {
+            type: "item",
+            name: "target",
+            optional: false,
+            description: "Object to drop"
+        }
+    ]
+};
+
+export default DropCommand;

src/engine/commands/echo.js

@@ -1,8 +1,24 @@
-export default function EchoCommand(args, context) {
+function EchoCommand(args, context) {
     if (args[1] != "on" && args[1] != "off") {
         context.print(`Usage: echo <on/off>`);
     } else {
         context.setInputEcho(args[1] == "on" ? true : false);
         context.print(`Command echo is now ${args[1]}.`);
     }
-}
+}
+
+EchoCommand.metadata = {
+    category: "System",
+    description: "Toggle command echo",
+    arguments: [
+        {
+            type: "select",
+            name: "state",
+            optional: false,
+            description: "Echo state",
+            options: ["on", "off"]
+        }
+    ]
+};
+
+export default EchoCommand;

src/engine/commands/inventory.js

@@ -1,4 +1,4 @@
-export default function InventoryCommand(args, context) {
+function InventoryCommand(args, context) {
     const items = context.player.getInventory();
     if (items.length < 1) return context.print(`You're not carrying anything.`);
     let itemDescription = `You are carrying `;
@@ -12,4 +12,12 @@ export default function InventoryCommand(args, context) {
         }
     });
     context.print(itemDescription + ".");
-}
+}
+
+InventoryCommand.metadata = {
+    category: "Actions",
+    description: "View inventory",
+    arguments: []
+};
+
+export default InventoryCommand;

src/engine/commands/load.js

@@ -1,4 +1,12 @@
-export default function LoadCommand(args, context) {
+function LoadCommand(args, context) {
     context.print(`Loading game...`);
     context.load();
-}
+}
+
+LoadCommand.metadata = {
+    category: "System",
+    description: "Load game",
+    arguments: []
+};
+
+export default LoadCommand;

src/engine/commands/look.js

@@ -1,4 +1,4 @@
-export default function LookCommand(args, context) {
+function LookCommand(args, context) {
     if (args.length == 1) {
         context.examineRoom();
     } else {
@@ -27,4 +27,19 @@ export default function LookCommand(args, context) {
             context.output.say(item.description);
         }
     }
-}
+}
+
+LookCommand.metadata = {
+    category: "Actions",
+    description: "Examine room or object",
+    arguments: [
+        {
+            type: "item",
+            name: "target",
+            optional: true,
+            description: "Object to examine"
+        }
+    ]
+};
+
+export default LookCommand;

src/engine/commands/save.js

@@ -1,4 +1,12 @@
-export default function SaveCommand(args, context) {
+function SaveCommand(args, context) {
     context.print(`Saving game...`);
     context.save();
-}
+}
+
+SaveCommand.metadata = {
+    category: "System",
+    description: "Save game",
+    arguments: []
+};
+
+export default SaveCommand;

src/engine/commands/take.js

@@ -1,4 +1,4 @@
-export default function TakeCommand(args, context) {
+function TakeCommand(args, context) {
     const room = context.getRoom(context.player.currentRoom);
     const items = room.getItems();
     let item = null;
@@ -18,6 +18,24 @@ export default function TakeCommand(args, context) {
             context.player.addItem(item.id);
             context.print(`You take ${item.name}.`);
             item.onTake();
+            
+            // Refresh mobile commands when items change
+            context.commandHandler.refreshMobileCommands();
         }
     }
-}
+}
+
+TakeCommand.metadata = {
+    category: "Actions",
+    description: "Take an object",
+    arguments: [
+        {
+            type: "item",
+            name: "target",
+            optional: false,
+            description: "Object to take"
+        }
+    ]
+};
+
+export default TakeCommand;

src/engine/commands/use.js

@@ -1,4 +1,4 @@
-export default async function UseCommand(args, context) {
+async function UseCommand(args, context) {
     const room = context.getRoom(context.player.currentRoom);
     const items = room.getItems();
     let item = null;
@@ -22,4 +22,19 @@ export default async function UseCommand(args, context) {
     } else {
         await item.onUse();
     }
-}
+}
+
+UseCommand.metadata = {
+    category: "Actions",
+    description: "Use an object",
+    arguments: [
+        {
+            type: "item",
+            name: "target",
+            optional: false,
+            description: "Object to use"
+        }
+    ]
+};
+
+export default UseCommand;

src/engine/commands/volume.js

@@ -1,4 +1,4 @@
-export default function VolumeCommand(args, context) {
+function VolumeCommand(args, context) {
     if (args.length < 3) {
         return context.print(`Usage: volume <music/sfx/ambience> <0-100>`);
     }
@@ -16,4 +16,26 @@ export default function VolumeCommand(args, context) {
         return context.print(`Invalid channel. Either ambience, sfx or music is allowed.`);
     }
     context.print(`${args[1]} volume set to ${value}%`)
-}
+}
+
+VolumeCommand.metadata = {
+    category: "System",
+    description: "Adjust volume",
+    arguments: [
+        {
+            type: "select",
+            name: "channel",
+            optional: false,
+            description: "Audio channel",
+            options: ["music", "sfx", "ambience"]
+        },
+        {
+            type: "text",
+            name: "level",
+            optional: false,
+            description: "Volume level (1-100)"
+        }
+    ]
+};
+
+export default VolumeCommand;

src/engine/index.js

@@ -5,6 +5,7 @@ import Output from './output';
 import Input from './input';
 import Commands from './commands';
 import Serialization from './serialization';
+import MobileCommands from './mobile-commands';
 
 export default class Game {
     constructor(newGame = true) {
@@ -16,6 +17,7 @@ export default class Game {
         this.output = new Output();
         this.commandHandler = new Commands(this);
         this.input = new Input(this.commandHandler, this.output);
+        this.mobileCommands = null;
         this.visitedRooms = new Map();
         this.interval = null;
         this.Serialization = new Serialization(this);
@@ -139,6 +141,9 @@ export default class Game {
             this.player.currentRoom = roomID;
             this.examineRoom();
             this.visitedRooms.set(roomID, true);
+            
+            // Refresh mobile commands when room changes
+            this.commandHandler.refreshMobileCommands();
         }
     }
 

src/engine/mobile-commands.js

@@ -0,0 +1,367 @@
+export default class MobileCommands {
+    constructor(commandHandler, gameContext) {
+        this.commandHandler = commandHandler;
+        this.gameContext = gameContext;
+        this.isVisible = false;
+        this.currentCommand = null;
+        this.isMobileMode = false;
+        
+        this.init();
+    }
+
+    init() {
+        // Mode toggle elements
+        this.modeToggleButton = document.getElementById('toggle-input-mode');
+        this.textInputMode = document.getElementById('text-input-mode');
+        this.mobileCommandMode = document.getElementById('mobile-command-mode');
+        
+        // Dialog elements
+        this.commandDialog = document.getElementById('command-dialog');
+        this.commandTitle = document.getElementById('command-title');
+        this.commandArguments = document.getElementById('command-arguments');
+        this.executeButton = document.getElementById('execute-command');
+        this.cancelButton = document.getElementById('cancel-command');
+
+        this.setupEventListeners();
+        this.populateCommands();
+    }
+
+    setupEventListeners() {
+        this.modeToggleButton.addEventListener('click', () => this.toggleInputMode());
+        this.executeButton.addEventListener('click', () => this.executeCommand());
+        this.cancelButton.addEventListener('click', () => this.closeDialog());
+    }
+
+    populateCommands() {
+        // Get all available commands and their metadata
+        const commands = this.getAvailableCommands();
+        const categories = this.groupCommandsByCategory(commands);
+        
+        // Clear existing commands
+        document.querySelectorAll('.command-list').forEach(list => {
+            list.innerHTML = '';
+        });
+
+        // Populate each category
+        Object.entries(categories).forEach(([category, commandList]) => {
+            const container = document.querySelector(`[data-category="${category}"]`);
+            if (container) {
+                commandList.forEach(command => {
+                    const button = this.createCommandButton(command);
+                    container.appendChild(button);
+                });
+            }
+        });
+    }
+
+    getAvailableCommands() {
+        const commands = [];
+        const seenFunctions = new Set();
+        
+        // Get commands from the command handler, avoiding duplicates
+        if (this.commandHandler.commands) {
+            for (const [name, func] of this.commandHandler.commands) {
+                // Skip if we've already seen this function (it's an alias)
+                if (seenFunctions.has(func)) {
+                    continue;
+                }
+                
+                if (func.metadata) {
+                    commands.push({
+                        name: name,
+                        ...func.metadata
+                    });
+                    seenFunctions.add(func);
+                }
+            }
+        }
+        
+        // Add direction commands based on current room exits
+        const currentRoom = this.gameContext.getRoom(this.gameContext.player.currentRoom);
+        if (currentRoom && currentRoom.exits) {
+            const availableExits = Array.from(currentRoom.exits.keys());
+            availableExits.forEach(direction => {
+                commands.push({
+                    name: direction,
+                    category: 'Movement',
+                    description: `Go ${direction}`,
+                    arguments: []
+                });
+            });
+        }
+        
+        return commands;
+    }
+
+    groupCommandsByCategory(commands) {
+        const categories = {};
+        
+        commands.forEach(command => {
+            const category = command.category || 'Other';
+            if (!categories[category]) {
+                categories[category] = [];
+            }
+            categories[category].push(command);
+        });
+        
+        return categories;
+    }
+
+    createCommandButton(command) {
+        const button = document.createElement('button');
+        button.className = 'command-button';
+        button.innerHTML = `
+            <div class="command-name">${command.name}</div>
+            <div class="command-description">${command.description}</div>
+        `;
+        
+        button.addEventListener('click', () => {
+            this.selectCommand(command);
+        });
+        
+        return button;
+    }
+
+    selectCommand(command) {
+        this.currentCommand = command;
+        
+        if (command.arguments && command.arguments.length > 0) {
+            this.showArgumentDialog(command);
+        } else {
+            // Execute command immediately if no arguments needed
+            this.executeCommand();
+        }
+    }
+
+    showArgumentDialog(command) {
+        this.commandTitle.textContent = `${command.name} - ${command.description}`;
+        this.commandArguments.innerHTML = '';
+        
+        command.arguments.forEach((arg, index) => {
+            const argElement = this.createArgumentInput(arg, index);
+            this.commandArguments.appendChild(argElement);
+        });
+        
+        this.commandDialog.showModal();
+    }
+
+    createArgumentInput(arg, index) {
+        const group = document.createElement('div');
+        group.className = 'argument-group';
+        
+        const label = document.createElement('label');
+        label.textContent = `${arg.description}${arg.optional ? ' (optional)' : ''}`;
+        label.htmlFor = `arg-${index}`;
+        
+        let input;
+        
+        switch (arg.type) {
+            case 'item':
+                input = this.createItemSelector(arg, index);
+                break;
+                
+            case 'select':
+                input = this.createSelectInput(arg, index);
+                break;
+                
+            case 'text':
+            default:
+                input = document.createElement('input');
+                input.type = 'text';
+                input.id = `arg-${index}`;
+                input.placeholder = arg.description;
+                break;
+        }
+        
+        group.appendChild(label);
+        group.appendChild(input);
+        
+        return group;
+    }
+
+    createItemSelector(arg, index) {
+        const container = document.createElement('fieldset');
+        container.className = 'item-selector';
+        
+        // Create legend for accessibility
+        const legend = document.createElement('legend');
+        legend.textContent = `Select ${arg.description.toLowerCase()}`;
+        legend.className = 'item-selector-legend';
+        container.appendChild(legend);
+        
+        // Get available items from room and inventory
+        const room = this.gameContext.getRoom(this.gameContext.player.currentRoom);
+        const roomItems = room.getItems();
+        const inventoryItems = this.gameContext.player.getInventory();
+        
+        const allItems = [...roomItems, ...inventoryItems];
+        
+        if (allItems.length === 0) {
+            const noItemsMessage = document.createElement('div');
+            noItemsMessage.className = 'no-items-message';
+            noItemsMessage.textContent = 'No items available';
+            noItemsMessage.setAttribute('aria-live', 'polite');
+            container.appendChild(noItemsMessage);
+            return container;
+        }
+        
+        // Group items by location for better accessibility
+        const itemsByLocation = {};
+        
+        // Add "look at room" option for optional arguments (put first)
+        if (arg.optional) {
+            const roomOption = {
+                id: 'room',
+                name: 'the room',
+                description: 'Look around the current room'
+            };
+            itemsByLocation['General'] = [roomOption];
+        }
+        
+        // Add room and inventory items
+        itemsByLocation['Room'] = roomItems;
+        itemsByLocation['Inventory'] = inventoryItems;
+        
+        Object.entries(itemsByLocation).forEach(([location, items]) => {
+            if (items.length === 0) return;
+            
+            // Create a section for each location
+            const locationSection = document.createElement('div');
+            locationSection.className = 'item-location-section';
+            
+            const locationHeading = document.createElement('h4');
+            locationHeading.textContent = location;
+            locationHeading.className = 'item-location-heading';
+            locationSection.appendChild(locationHeading);
+            
+            items.forEach((item, itemIndex) => {
+                const radioId = `item-${index}-${location}-${itemIndex}`;
+                const radioContainer = document.createElement('div');
+                radioContainer.className = 'item-radio-container';
+                
+                const radio = document.createElement('input');
+                radio.type = 'radio';
+                radio.id = radioId;
+                radio.name = `item-selector-${index}`;
+                radio.value = item.name;
+                radio.className = 'item-radio';
+                radio.setAttribute('aria-describedby', `${radioId}-desc`);
+                
+                const label = document.createElement('label');
+                label.htmlFor = radioId;
+                label.className = 'item-radio-label';
+                label.textContent = item.name;
+                
+                // Add description for screen readers
+                const description = document.createElement('span');
+                description.id = `${radioId}-desc`;
+                description.className = 'item-radio-description';
+                description.textContent = `${item.description || 'Item'} (in ${location.toLowerCase()})`;
+                
+                radio.addEventListener('change', (e) => {
+                    if (e.target.checked) {
+                        this.selectedItems.set(index, item.name);
+                    }
+                });
+                
+                radioContainer.appendChild(radio);
+                radioContainer.appendChild(label);
+                radioContainer.appendChild(description);
+                locationSection.appendChild(radioContainer);
+            });
+            
+            container.appendChild(locationSection);
+        });
+        
+        return container;
+    }
+
+    createSelectInput(arg, index) {
+        const select = document.createElement('select');
+        select.id = `arg-${index}`;
+        
+        if (arg.options) {
+            arg.options.forEach(option => {
+                const optionElement = document.createElement('option');
+                optionElement.value = option;
+                optionElement.textContent = option;
+                select.appendChild(optionElement);
+            });
+        }
+        
+        return select;
+    }
+
+    executeCommand() {
+        if (!this.currentCommand) return;
+        
+        let commandString = this.currentCommand.name;
+        
+        // Collect arguments
+        if (this.currentCommand.arguments && this.currentCommand.arguments.length > 0) {
+            const args = [];
+            
+            this.currentCommand.arguments.forEach((arg, index) => {
+                let value = '';
+                
+                if (arg.type === 'item') {
+                    // Check for selected radio button
+                    const radioButton = document.querySelector(`input[name="item-selector-${index}"]:checked`);
+                    if (radioButton) {
+                        // If "the room" is selected, don't add any argument (empty string)
+                        value = radioButton.value === 'the room' ? '' : radioButton.value;
+                    } else {
+                        value = '';
+                    }
+                } else {
+                    const input = document.getElementById(`arg-${index}`);
+                    if (input) {
+                        value = input.value;
+                    }
+                }
+                
+                if (value) {
+                    args.push(value);
+                }
+            });
+            
+            if (args.length > 0) {
+                commandString += ' ' + args.join(' ');
+            }
+        }
+        
+        // Execute the command
+        console.log('Executing command:', commandString);
+        this.commandHandler.doCommand(commandString);
+        
+        // Clean up
+        this.closeDialog();
+    }
+
+    closeDialog() {
+        this.commandDialog.close();
+        this.currentCommand = null;
+    }
+
+    toggleInputMode() {
+        this.isMobileMode = !this.isMobileMode;
+        
+        if (this.isMobileMode) {
+            this.textInputMode.hidden = true;
+            this.mobileCommandMode.hidden = false;
+            this.modeToggleButton.textContent = '⌨️ Text Mode';
+            this.populateCommands(); // Refresh commands when switching to mobile mode
+        } else {
+            this.textInputMode.hidden = false;
+            this.mobileCommandMode.hidden = true;
+            this.modeToggleButton.textContent = '📱 Mobile Mode';
+        }
+    }
+
+    // Update available commands when game state changes
+    refreshCommands() {
+        if (this.isMobileMode) {
+            this.populateCommands();
+        }
+    }
+}

src/game/commands/dark.js

@@ -1,3 +1,11 @@
-export default async function DarkCommand(args, context) {
+async function DarkCommand(args, context) {
     document.body.classList.toggle('dark-theme');
-}
+}
+
+DarkCommand.metadata = {
+    category: "System",
+    description: "Toggle dark theme",
+    arguments: []
+};
+
+export default DarkCommand;

src/game/commands/meow.js

@@ -1,3 +1,11 @@
-export default async function MeowCommand(args, context) {
+async function MeowCommand(args, context) {
     context.print(`You meow.`);
-}
+}
+
+MeowCommand.metadata = {
+    category: "Actions",
+    description: "Make a cat sound",
+    arguments: []
+};
+
+export default MeowCommand;

src/game/index.html

@@ -3,139 +3,580 @@
 <head>
     <title>Assassin bug</title>
     <style>
-        /* General reset for browser default styles */
-        * {
+        /* ===== CSS RESET & BASE STYLES ===== */
+        *,
+        *::before,
+        *::after {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }
 
-        /* Root CSS variables for easy customization */
+        /* ===== CSS CUSTOM PROPERTIES ===== */
         :root {
+            /* Colors */
             --background-color: #2d3142;
+            --surface-color: rgba(255, 255, 255, 0.05);
             --primary-color: #ef8354;
             --secondary-color: #ffd462;
             --text-color: #f5e7dc;
-            --font-family: 'Roboto', sans-serif;
-            --heading-font-family: 'Pacifico', cursive;
-            --font-size: 18px;
+            --text-muted: rgba(245, 231, 220, 0.7);
+            --border-color: rgba(239, 131, 84, 0.3);
+            --focus-color: #ffd462;
+            --success-color: #4caf50;
+            --error-color: #f44336;
+            --warning-color: #ff9800;
+            
+            /* Typography */
+            --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            --heading-font-family: Georgia, 'Times New Roman', serif;
+            --font-size-base: 16px;
+            --font-size-small: 0.875rem;
+            --font-size-large: 1.125rem;
             --line-height: 1.6;
+            --font-weight-normal: 400;
+            --font-weight-bold: 600;
+            
+            /* Spacing */
+            --spacing-xs: 0.25rem;
+            --spacing-sm: 0.5rem;
+            --spacing-md: 1rem;
+            --spacing-lg: 1.5rem;
+            --spacing-xl: 2rem;
+            --spacing-xxl: 3rem;
+            
+            /* Borders & Radii */
+            --border-radius: 8px;
+            --border-radius-sm: 4px;
+            --border-radius-lg: 12px;
+            --border-width: 1px;
+            
+            /* Shadows */
+            --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
+            --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+            --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+            --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
+            
+            /* Transitions */
+            --transition-fast: 0.15s ease-out;
+            --transition-normal: 0.3s ease-out;
+            --transition-slow: 0.5s ease-out;
+            
+            /* Layout */
+            --max-width: 800px;
+            --dialog-width: 500px;
+            --mobile-breakpoint: 768px;
+        }
+
+        /* Dark theme adjustments */
+        :root[data-theme="dark"] {
+            --background-color: #1a1a1a;
+            --surface-color: rgba(255, 255, 255, 0.08);
+            --text-color: #f0f0f0;
+            --border-color: rgba(255, 255, 255, 0.2);
+        }
+
+        /* ===== BASE TYPOGRAPHY & LAYOUT ===== */
+        html {
+            font-size: var(--font-size-base);
+            scroll-behavior: smooth;
         }
 
-        /* Basic styling for the body, set background color, font-family, font-size and line-height */
         body {
-            background-color: var(--background-color);
+            background: var(--background-color);
             color: var(--text-color);
             font-family: var(--font-family);
-            font-size: var(--font-size);
+            font-size: var(--font-size-base);
             line-height: var(--line-height);
-            padding: 2rem;
+            padding: var(--spacing-xl);
+            min-height: 100vh;
+            font-weight: var(--font-weight-normal);
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
         }
 
-        /* Header styles */
-        h1,
-        h2,
-        h3,
-        h4,
-        h5,
-        h6 {
+        /* Typography */
+        h1, h2, h3, h4, h5, h6 {
             font-family: var(--heading-font-family);
             color: var(--primary-color);
-            margin-bottom: 1rem;
+            margin-bottom: var(--spacing-md);
+            font-weight: var(--font-weight-bold);
+            line-height: 1.2;
         }
 
-        /* Paragraph and links styles */
+        h1 { font-size: 2.5rem; }
+        h2 { font-size: 2rem; }
+        h3 { font-size: 1.75rem; }
+        h4 { font-size: 1.5rem; }
+        h5 { font-size: 1.25rem; }
+        h6 { font-size: 1.125rem; }
+
         p {
-            margin-bottom: 1rem;
+            margin-bottom: var(--spacing-md);
         }
 
         a {
             color: var(--primary-color);
             text-decoration: none;
+            transition: color var(--transition-fast);
         }
 
         a:hover,
         a:focus {
             color: var(--secondary-color);
+            outline: 2px solid var(--focus-color);
+            outline-offset: 2px;
         }
 
-        /* Game container styles */
+        /* Focus styles for accessibility */
+        :focus-visible {
+            outline: 2px solid var(--focus-color);
+            outline-offset: 2px;
+        }
+
+        /* ===== LAYOUT COMPONENTS ===== */
         .game-container {
-            max-width: 800px;
+            max-width: var(--max-width);
             margin: 0 auto;
-            padding: 2rem;
-            background-color: rgba(255, 255, 255, 0.9);
-            border-radius: 8px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            padding: var(--spacing-xl);
+            background: var(--surface-color);
+            border-radius: var(--border-radius);
+            box-shadow: var(--shadow-lg);
+            backdrop-filter: blur(10px);
+            border: var(--border-width) solid var(--border-color);
         }
 
-        /* Game command input styles */
-        input[type="text"] {
+        /* ===== FORM CONTROLS ===== */
+        input[type="text"],
+        input[type="email"],
+        input[type="password"],
+        select,
+        textarea {
             width: 100%;
-            padding: 0.5rem;
-            font-size: 1rem;
-            margin-top: 1rem;
-            margin-bottom: 1rem;
-            border: 1px solid #ccc;
-            border-radius: 4px;
+            padding: var(--spacing-sm) var(--spacing-md);
+            font-size: var(--font-size-base);
+            font-family: var(--font-family);
+            margin: var(--spacing-sm) 0;
+            border: var(--border-width) solid var(--border-color);
+            border-radius: var(--border-radius-sm);
+            background: var(--surface-color);
+            color: var(--text-color);
+            transition: all var(--transition-fast);
         }
 
-        input[type="text"]:focus {
+        input:focus,
+        select:focus,
+        textarea:focus {
             outline: none;
-            border-color: var(--secondary-color);
-            box-shadow: 0 0 0 2px var(--secondary-color);
+            border-color: var(--focus-color);
+            box-shadow: 0 0 0 3px rgba(255, 212, 98, 0.1);
         }
 
         /* Button styles */
         button {
-            background-color: var(--primary-color);
-            color: #fff;
-            padding: 0.5rem 1rem;
-            font-size: 1rem;
+            background: var(--primary-color);
+            color: white;
+            padding: var(--spacing-sm) var(--spacing-md);
+            font-size: var(--font-size-base);
+            font-family: var(--font-family);
+            font-weight: var(--font-weight-bold);
             border: none;
-            border-radius: 4px;
+            border-radius: var(--border-radius-sm);
             cursor: pointer;
-            transition: background-color 0.3s ease;
+            transition: all var(--transition-fast);
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: var(--spacing-xs);
+            min-height: 44px; /* Minimum touch target size */
+            text-align: center;
         }
 
-        button:hover,
-        button:focus {
-            background-color: var(--secondary-color);
-            outline: none;
+        button:hover:not(:disabled) {
+            background: var(--secondary-color);
+            transform: translateY(-1px);
+            box-shadow: var(--shadow-md);
         }
 
-        /* Dark theme styles */
+        button:active {
+            transform: translateY(0);
+        }
+
+        button:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
+
+        /* Button variants */
+        .btn-secondary {
+            background: var(--surface-color);
+            color: var(--text-color);
+            border: var(--border-width) solid var(--border-color);
+        }
+
+        .btn-secondary:hover:not(:disabled) {
+            background: var(--primary-color);
+            color: white;
+        }
+
+        /* ===== DARK THEME SUPPORT ===== */
         body.dark-theme {
-            background-color: #2d3142;
-            color: #f5e7dc;
+            --background-color: #1a1a1a;
+            --surface-color: rgba(255, 255, 255, 0.08);
+            --text-color: #f0f0f0;
+            --border-color: rgba(255, 255, 255, 0.2);
         }
 
-        body.dark-theme h1,
-        body.dark-theme h2,
-        body.dark-theme h3,
-        body.dark-theme h4,
-        body.dark-theme h5,
-        body.dark-theme h6 {
+        /* Reduced motion support */
+        @media (prefers-reduced-motion: reduce) {
+            * {
+                animation-duration: 0.01ms !important;
+                animation-iteration-count: 1 !important;
+                transition-duration: 0.01ms !important;
+            }
+        }
+
+        /* High contrast support */
+        @media (prefers-contrast: high) {
+            :root {
+                --border-color: var(--text-color);
+                --surface-color: transparent;
+            }
+        }
+
+        /* ===== MOBILE COMMAND INTERFACE ===== */
+        .mode-toggle {
+            text-align: center;
+            margin-bottom: var(--spacing-md);
+        }
+
+        .mode-button {
+            padding: var(--spacing-sm) var(--spacing-md);
+            font-size: var(--font-size-small);
+            min-width: 120px;
+            position: relative;
+        }
+
+        .input-mode {
+            margin-top: var(--spacing-md);
+        }
+
+        .mobile-mode {
+            position: sticky;
+            bottom: 0;
+            background: var(--background-color);
+            border-top: 2px solid var(--primary-color);
+            padding: var(--spacing-md);
+            margin: var(--spacing-md) calc(-1 * var(--spacing-xl)) calc(-1 * var(--spacing-xl)) calc(-1 * var(--spacing-xl));
+            max-height: 50vh;
+            overflow-y: auto;
+            border-radius: var(--border-radius) var(--border-radius) 0 0;
+        }
+
+        .command-interface h3 {
+            margin-top: 0;
+            margin-bottom: var(--spacing-md);
+            color: var(--primary-color);
+            text-align: center;
+        }
+
+        .command-categories-permanent {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: var(--spacing-md);
+        }
+
+        .command-category {
+            background: var(--surface-color);
+            border: var(--border-width) solid var(--border-color);
+            border-radius: var(--border-radius);
+            padding: var(--spacing-sm);
+            transition: all var(--transition-fast);
+        }
+
+        .command-category:hover {
+            border-color: var(--primary-color);
+            box-shadow: var(--shadow-md);
+        }
+
+        .command-category summary {
+            cursor: pointer;
+            padding: var(--spacing-sm);
+            background: var(--primary-color);
+            color: white;
+            border-radius: var(--border-radius-sm);
+            font-weight: var(--font-weight-bold);
+            margin-bottom: var(--spacing-sm);
+            transition: all var(--transition-fast);
+            list-style: none;
+        }
+
+        .command-category summary::-webkit-details-marker {
+            display: none;
+        }
+
+        .command-category summary::before {
+            content: "▶";
+            margin-right: var(--spacing-xs);
+            transition: transform var(--transition-fast);
+        }
+
+        .command-category[open] summary::before {
+            transform: rotate(90deg);
+        }
+
+        .command-category summary:hover {
+            background: var(--secondary-color);
+            transform: translateY(-1px);
+        }
+
+        .command-list {
+            padding: var(--spacing-sm) 0;
+        }
+
+        .command-button {
+            display: block;
+            width: 100%;
+            margin-bottom: var(--spacing-sm);
+            padding: var(--spacing-sm);
+            text-align: left;
+            border: var(--border-width) solid var(--border-color);
+            background: var(--surface-color);
+            color: var(--text-color);
+            border-radius: var(--border-radius-sm);
+            font-size: var(--font-size-small);
+            transition: all var(--transition-fast);
+        }
+
+        .command-button:hover {
+            background: var(--primary-color);
+            color: white;
+            transform: translateY(-1px);
+            box-shadow: var(--shadow-sm);
+        }
+
+        .command-description {
+            font-size: var(--font-size-small);
+            opacity: 0.8;
+            margin-top: var(--spacing-xs);
+        }
+
+        /* ===== DIALOG STYLES ===== */
+        dialog {
+            border: 2px solid var(--primary-color);
+            border-radius: var(--border-radius);
+            padding: var(--spacing-xl);
+            background: var(--background-color);
+            color: var(--text-color);
+            max-width: var(--dialog-width);
+            width: 90%;
+            box-shadow: var(--shadow-xl);
+            backdrop-filter: blur(10px);
+        }
+
+        dialog::backdrop {
+            background: rgba(0, 0, 0, 0.6);
+            backdrop-filter: blur(2px);
+        }
+
+        .dialog-buttons {
+            display: flex;
+            gap: var(--spacing-md);
+            justify-content: flex-end;
+            margin-top: var(--spacing-lg);
+        }
+
+        .argument-group {
+            margin-bottom: var(--spacing-lg);
+        }
+
+        .argument-group label {
+            display: block;
+            margin-bottom: var(--spacing-sm);
+            font-weight: var(--font-weight-bold);
             color: var(--primary-color);
         }
 
-        body.dark-theme a {
-            color: var(--primary-color);
+        /* ===== ACCESSIBLE ITEM SELECTOR ===== */
+        .item-selector {
+            border: var(--border-width) solid var(--border-color);
+            border-radius: var(--border-radius);
+            padding: var(--spacing-md);
+            background: var(--surface-color);
+            max-height: 300px;
+            overflow-y: auto;
         }
 
-        body.dark-theme a:hover,
-        body.dark-theme a:focus {
+        .item-selector-legend {
+            font-weight: var(--font-weight-bold);
+            color: var(--primary-color);
+            padding: 0 var(--spacing-sm);
+        }
+
+        .item-location-section {
+            margin-bottom: var(--spacing-md);
+        }
+
+        .item-location-heading {
+            margin: 0 0 var(--spacing-sm) 0;
+            font-size: var(--font-size-small);
             color: var(--secondary-color);
+            font-weight: var(--font-weight-bold);
         }
 
-        body.dark-theme input[type="text"]:focus {
-            border-color: var(--secondary-color);
-            box-shadow: 0 0 0 2px var(--secondary-color);
+        .item-radio-container {
+            margin-bottom: var(--spacing-sm);
+            padding: var(--spacing-sm);
+            border-radius: var(--border-radius-sm);
+            transition: all var(--transition-fast);
         }
 
-        body.dark-theme button:hover,
-        body.dark-theme button:focus {
-            background-color: var(--secondary-color);
+        .item-radio-container:hover {
+            background: var(--surface-color);
+        }
+
+        .item-radio-container:focus-within {
+            background: rgba(255, 212, 98, 0.1);
+            outline: 2px solid var(--focus-color);
+            outline-offset: 2px;
+        }
+
+        .item-radio {
+            margin-right: var(--spacing-sm);
+            accent-color: var(--primary-color);
+        }
+
+        .item-radio-label {
+            cursor: pointer;
+            font-weight: var(--font-weight-bold);
+            display: block;
+            margin-bottom: var(--spacing-xs);
+        }
+
+        .item-radio-description {
+            font-size: var(--font-size-small);
+            color: var(--text-muted);
+            display: block;
+            margin-left: 1.5rem;
+        }
+
+        .no-items-message {
+            text-align: center;
+            padding: var(--spacing-md);
+            color: var(--text-muted);
+            font-style: italic;
+        }
+
+        /* ===== RESPONSIVE DESIGN ===== */
+        
+        /* Tablet and Mobile */
+        @media (max-width: 768px) {
+            body {
+                padding: var(--spacing-md);
+            }
+            
+            .game-container {
+                padding: var(--spacing-md);
+            }
+            
+            .command-categories-permanent {
+                grid-template-columns: 1fr;
+            }
+            
+            .mobile-mode {
+                margin: var(--spacing-md) calc(-1 * var(--spacing-md)) calc(-1 * var(--spacing-md)) calc(-1 * var(--spacing-md));
+            }
+            
+            dialog {
+                margin: var(--spacing-md);
+                max-width: calc(100% - 2 * var(--spacing-md));
+            }
+            
+            /* Mobile mode hint */
+            .mode-button {
+                position: relative;
+            }
+            
+            .mode-button::after {
+                content: "👆 Try this for easier mobile play!";
+                position: absolute;
+                top: -35px;
+                left: 50%;
+                transform: translateX(-50%);
+                background: var(--secondary-color);
+                color: var(--background-color);
+                padding: var(--spacing-xs) var(--spacing-sm);
+                border-radius: var(--border-radius-sm);
+                font-size: var(--font-size-small);
+                white-space: nowrap;
+                opacity: 0.9;
+                pointer-events: none;
+                z-index: 1000;
+            }
+            
+            /* Typography adjustments for mobile */
+            h1 { font-size: 2rem; }
+            h2 { font-size: 1.75rem; }
+            h3 { font-size: 1.5rem; }
+        }
+        
+        /* Small Mobile */
+        @media (max-width: 480px) {
+            body {
+                padding: var(--spacing-sm);
+            }
+            
+            .game-container {
+                padding: var(--spacing-sm);
+            }
+            
+            .mobile-mode {
+                margin: var(--spacing-sm) calc(-1 * var(--spacing-sm)) calc(-1 * var(--spacing-sm)) calc(-1 * var(--spacing-sm));
+            }
+            
+            .command-categories-permanent {
+                gap: var(--spacing-sm);
+            }
+            
+            h1 { font-size: 1.75rem; }
+            h2 { font-size: 1.5rem; }
+            h3 { font-size: 1.25rem; }
+        }
+        
+        /* Large screens */
+        @media (min-width: 1200px) {
+            .game-container {
+                max-width: 1000px;
+            }
+            
+            .command-categories-permanent {
+                grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+            }
+        }
+        
+        /* Dark mode preference */
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --background-color: #1a1a1a;
+                --surface-color: rgba(255, 255, 255, 0.08);
+                --text-color: #f0f0f0;
+                --border-color: rgba(255, 255, 255, 0.2);
+            }
+        }
+        
+        /* Print styles */
+        @media print {
+            body {
+                background: white;
+                color: black;
+                font-size: 12pt;
+            }
+            
+            .mobile-mode,
+            .mode-toggle,
+            button {
+                display: none;
+            }
         }
     </style>
 </head>
@@ -143,8 +584,51 @@
 <body>
     <h1>Assassin bug</h1>
     <div class="game-container" id="play-area" hidden=true>
+        <!-- Mode Toggle -->
+        <div class="mode-toggle">
+            <button id="toggle-input-mode" class="mode-button">📱 Mobile Mode</button>
+        </div>
+        
+        <!-- Output Area -->
         <div aria-live="polite" id="output-area"></div>
-        <input type="text" id="input-area" placeholder="Type command" />
+        
+        <!-- Text Input Mode -->
+        <div id="text-input-mode" class="input-mode">
+            <input type="text" id="input-area" placeholder="Type command" />
+        </div>
+        
+        <!-- Mobile Command Mode -->
+        <div id="mobile-command-mode" class="input-mode mobile-mode" hidden>
+            <div class="command-interface">
+                <h3>Commands</h3>
+                <div class="command-categories-permanent">
+                    <details class="command-category" open>
+                        <summary>Movement</summary>
+                        <div class="command-list" data-category="Movement"></div>
+                    </details>
+                    <details class="command-category" open>
+                        <summary>Actions</summary>
+                        <div class="command-list" data-category="Actions"></div>
+                    </details>
+                    <details class="command-category" open>
+                        <summary>System</summary>
+                        <div class="command-list" data-category="System"></div>
+                    </details>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Command Argument Dialog -->
+        <dialog id="command-dialog" aria-labelledby="command-title" aria-describedby="command-arguments">
+            <form method="dialog">
+                <h3 id="command-title">Command</h3>
+                <div id="command-arguments" role="group" aria-label="Command arguments"></div>
+                <div class="dialog-buttons">
+                    <button type="button" id="execute-command" aria-describedby="command-title">Execute Command</button>
+                    <button type="button" id="cancel-command">Cancel</button>
+                </div>
+            </form>
+        </dialog>
     </div>
 
     <div id="save-game-found" hidden=true>

src/game/index.js

@@ -3,6 +3,7 @@ import Rooms from './rooms';
 import Items from './items';
 import MeowCommand from './commands/meow';
 import DarkCommand from "./commands/dark";
+import MobileCommands from '../engine/mobile-commands';
 
 const states = {
     BEFORE_PLAY: "before-play",
@@ -54,4 +55,15 @@ function startGame(newGame) {
         ],
         items: Items
     });
+    
+    // Initialize mobile commands interface
+    if (document.getElementById('mobile-command-mode')) {
+        game.mobileCommands = new MobileCommands(game.commandHandler, game);
+        game.commandHandler.setMobileCommands(game.mobileCommands);
+        
+        // Auto-enable mobile mode on touch devices
+        if ('ontouchstart' in window || navigator.maxTouchPoints > 0) {
+            game.mobileCommands.toggleInputMode();
+        }
+    }
 }