Made responsive

cian0 · Jul 20, 2024 · 134e1cd · 134e1cd
1 parent 86708d2
commit 134e1cd
Showing 1 changed file with 60 additions and 12 deletions.
diff --git a/emojiworld/emojigame.html b/emojiworld/emojigame.html
@@ -6,12 +6,64 @@
     <title>Responsive Emoji Quest: Phaser 3 Edition</title>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script>
     <style>
-        body { margin: 0; padding: 0; background-color: #f0f0f0; }
-        #game-container { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; }
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: Arial, sans-serif;
+            background-color: #4CAF50;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            color: white;
+        }
+        .game-container {
+            width: 90vw;
+            max-width: 800px;
+            background-color: #2E7D32;
+            border-radius: 20px;
+            padding: 20px;
+            box-shadow: 0 0 20px rgba(0,0,0,0.3);
+        }
+        h1 {
+            text-align: center;
+            margin-top: 0;
+        }
+        .game-border {
+            border: 5px solid #1B5E20;
+            border-radius: 10px;
+            overflow: hidden;
+            aspect-ratio: 1 / 1;
+        }
+        #game-canvas {
+            width: 100%;
+            height: 100%;
+        }
+        .game-info {
+            margin-top: 20px;
+            display: flex;
+            justify-content: space-between;
+        }
+        .game-info div {
+            flex: 1;
+            padding: 10px;
+            background-color: #1B5E20;
+            border-radius: 5px;
+            margin: 0 5px;
+        }
     </style>
 </head>
 <body>
-    <div id="game-container"></div>
+    <div class="game-container">
+        <h1>Emoji Quest</h1>
+        <div class="game-border">
+            <div id="game-canvas"></div>
+        </div>
+        <div class="game-info">
+            <div id="story">Welcome to Emoji Quest: Phaser Edition!</div>
+            <div id="inventory">Inventory: Empty</div>
+        </div>
+    </div>
     <script>
         const MAP_WIDTH = 10;
         const MAP_HEIGHT = 10;
@@ -29,19 +81,18 @@
         let cursors;
         let map = [];
         let inventory = [];
-        let storyText, inventoryText;
         let isMonsterDefeated = false;
         let isFairyCaptured = false;
 
         const config = {
             type: Phaser.AUTO,
-            parent: 'game-container',
+            parent: 'game-canvas',
             backgroundColor: '#9CCC65',
             scale: {
                 mode: Phaser.Scale.FIT,
                 autoCenter: Phaser.Scale.CENTER_BOTH,
                 width: MAP_WIDTH * 60,
-                height: MAP_HEIGHT * 60 + 100 // Extra space for UI
+                height: MAP_HEIGHT * 60
             },
             physics: {
                 default: 'arcade',
@@ -63,13 +114,10 @@
         function create() {
             this.add.rectangle(0, 0, config.scale.width, config.scale.height, 0x9CCC65).setOrigin(0);
 
-            const tileSize = Math.min(config.scale.width / MAP_WIDTH, (config.scale.height - 100) / MAP_HEIGHT);
+            const tileSize = config.scale.width / MAP_WIDTH;
 
             generateMap(this, tileSize);
             cursors = this.input.keyboard.createCursorKeys();
-
-            storyText = this.add.text(10, config.scale.height - 90, 'Welcome to Emoji Quest: Phaser Edition!', { fontSize: '16px', fill: '#000', wordWrap: { width: config.scale.width - 20 } });
-            inventoryText = this.add.text(10, config.scale.height - 40, 'Inventory: Empty', { fontSize: '16px', fill: '#000' });
         }
 
         function generateMap(scene, tileSize) {
@@ -198,11 +246,11 @@
         }
 
         function updateStory(message) {
-            storyText.setText(message);
+            document.getElementById('story').textContent = message;
         }
 
         function updateInventory() {
-            inventoryText.setText('Inventory: ' + (inventory.length > 0 ? inventory.join(', ') : 'Empty'));
+            document.getElementById('inventory').textContent = 'Inventory: ' + (inventory.length > 0 ? inventory.join(', ') : 'Empty');
         }
     </script>
 </body>