make more mobile friendly

src/client/graphics/GameRenderer.ts

@@ -32,6 +32,7 @@ export function createRenderer(canvas: HTMLCanvasElement, game: Game, eventBus:
 	}
 	buildMenu.game = game
 	buildMenu.eventBus = eventBus
+	buildMenu.init()
 
 	const leaderboard = document.querySelector('leader-board') as Leaderboard;
 	if (!emojiTable || !(leaderboard instanceof Leaderboard)) {

src/client/graphics/layers/ControlPanel.ts

@@ -110,158 +110,223 @@ export class ControlPanel extends LitElement implements Layer {
         return d;
     }
 
+
     static styles = css`
-        :host {
+    :host {
-            display: block;
+    display: block;
-        }
+}
-        
+
-        .control-panel {
+.control-panel {
-            position: fixed;
+    position: fixed;
-            bottom: 10px;
+    bottom: 10px;
-            left: 10px;
+    left: 10px;
-            z-index: 9999;
+    z-index: 9999;
-            background-color: rgba(30, 30, 30, 0.7);
+    background-color: rgba(30, 30, 30, 0.7);
-            padding: 15px;
+    padding: 15px;
-            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
-            border-radius: 10px;
+    border-radius: 10px;
-            width: 250px;
+    width: 250px;
-            backdrop-filter: blur(5px);
+    backdrop-filter: blur(5px);
-            transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
+    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
-        }
+    box-sizing: border-box;
-        
+}
-        .hidden {
+
-            opacity: 0;
+.hidden {
-            visibility: hidden;
+    opacity: 0;
-        }
+    visibility: hidden;
-        
+}
-        .slider-container {
+
-            position: relative;
+.slider-container {
-            margin-bottom: 15px;
+    position: relative;
-            height: 48px;
+    margin-bottom: 15px;
-        }
+    height: 48px;
-        
+}
-        .slider-track {
+
-            position: absolute;
+.slider-track {
-            width: 100%;
+    position: absolute;
-            height: 8px;
+    width: 100%;
-            background: rgba(255, 255, 255, 0.2);
+    height: 8px;
-            border-radius: 4px;
+    background: rgba(255, 255, 255, 0.2);
-            top: 20px;
+    border-radius: 4px;
-        }
+    top: 20px;
-        
+}
-        .slider-fill {
+
-            position: absolute;
+.slider-fill {
-            height: 8px;
+    position: absolute;
-            background: rgba(0, 150, 255, 0.6);
+    height: 8px;
-            border-radius: 4px;
+    background: rgba(0, 150, 255, 0.6);
-            top: 20px;
+    border-radius: 4px;
-            transition: width 0.3s ease-out;
+    top: 20px;
-        }
+    transition: width 0.3s ease-out;
-        
+}
-        .slider-thumb {
+
-            position: absolute;
+.slider-thumb {
-            width: 16px;
+    position: absolute;
-            height: 16px;
+    width: 16px;
-            background: white;
+    height: 16px;
-            border: 2px solid rgb(0, 150, 255);
+    background: white;
-            border-radius: 50%;
+    border: 2px solid rgb(0, 150, 255);
-            top: 16px;
+    border-radius: 50%;
-            transform: translateX(-50%);
+    top: 16px;
-            cursor: pointer;
+    transform: translateX(-50%);
-            transition: transform 0.1s ease;
+    cursor: pointer;
-        }
+    transition: transform 0.1s ease;
-        
+}
-        .slider-thumb:hover {
+
-            transform: translateX(-50%) scale(1.1);
+.slider-thumb:hover {
-        }
+    transform: translateX(-50%) scale(1.1);
-        
+}
-        input[type="range"] {
+
-            position: absolute;
+input[type="range"] {
-            width: 100%;
+    position: absolute;
-            top: 12px;
+    width: 100%;
-            margin: 0;
+    top: 12px;
-            opacity: 0;
+    margin: 0;
-            cursor: pointer;
+    opacity: 0;
-        }
+    cursor: pointer;
-        
+}
-        .control-panel-info {
+
-            color: white;
+.control-panel-info {
-            margin-bottom: 15px;
+    color: white;
-            padding: 10px;
+    margin-bottom: 15px;
-            background-color: rgba(0, 0, 0, 0.3);
+    padding: 10px;
-            border-radius: 5px;
+    background-color: rgba(0, 0, 0, 0.3);
-        }
+    border-radius: 5px;
-        
+}
-        .info-row {
+
-            display: flex;
+.info-row {
-            justify-content: space-between;
+    display: flex;
-            margin-bottom: 5px;
+    justify-content: space-between;
-        }
+    margin-bottom: 5px;
-        
+}
-        .info-label {
+
-            font-weight: bold;
+.info-label {
-        }
+    font-weight: bold;
-        
+}
-        label {
+
-            display: block;
+label {
-            color: white;
+    display: block;
-            margin-bottom: 5px;
+    color: white;
-        }
+    margin-bottom: 5px;
-        
+}
-        .slider-value {
+
-            color: white;
+.slider-value {
-            text-align: right;
+    color: white;
-        }
+    text-align: right;
-        
+}
-        .attack-slider {
+
-            position: relative;
+.attack-slider {
-            margin-bottom: 15px;
+    position: relative;
-            height: 48px;
+    margin-bottom: 15px;
-        }
+    height: 48px;
-        
+}
-        .attack-slider .slider-track {
+
-            position: absolute;
+.attack-slider .slider-track {
-            width: 100%;
+    position: absolute;
-            height: 8px;
+    width: 100%;
-            background: rgba(255, 255, 255, 0.2);
+    height: 8px;
-            border-radius: 4px;
+    background: rgba(255, 255, 255, 0.2);
-            top: 20px;
+    border-radius: 4px;
-        }
+    top: 20px;
-        
+}
-        .attack-slider .slider-fill {
+
-            position: absolute;
+.attack-slider .slider-fill {
-            height: 8px;
+    position: absolute;
-            background: rgba(255, 0, 0, 0.6);
+    height: 8px;
-            border-radius: 4px;
+    background: rgba(255, 0, 0, 0.6);
-            top: 20px;
+    border-radius: 4px;
-            transition: width 0.3s ease-out;
+    top: 20px;
-        }
+    transition: width 0.3s ease-out;
-        
+}
-        .attack-slider .slider-thumb {
+
-            position: absolute;
+.attack-slider .slider-thumb {
-            width: 16px;
+    position: absolute;
-            height: 16px;
+    width: 16px;
-            background: white;
+    height: 16px;
-            border: 2px solid rgb(255, 0, 0);
+    background: white;
-            border-radius: 50%;
+    border: 2px solid rgb(255, 0, 0);
-            top: 16px;
+    border-radius: 50%;
-            transform: translateX(-50%);
+    top: 16px;
-            cursor: pointer;
+    transform: translateX(-50%);
-            transition: transform 0.1s ease;
+    cursor: pointer;
-        }
+    transition: transform 0.1s ease;
-        
+}
-        .attack-slider .slider-thumb:hover {
+
-            transform: translateX(-50%) scale(1.1);
+.attack-slider .slider-thumb:hover {
-        }
+    transform: translateX(-50%) scale(1.1);
-        
+}
-        .attack-slider input[type="range"] {
+
-            position: absolute;
+.attack-slider input[type="range"] {
-            width: 100%;
+    position: absolute;
-            top: 12px;
+    width: 100%;
-            margin: 0;
+    top: 12px;
-            opacity: 0;
+    margin: 0;
-            cursor: pointer;
+    opacity: 0;
-        }
+    cursor: pointer;
+}
+
+@media (max-width: 768px) {
+    .control-panel {
+        bottom: 0;
+        left: 0;
+        right: 0;
+        width: 100%;
+        max-width: 100%;
+        padding: 8px;
+        border-radius: 0;
+        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
+        margin: 0;
+        box-sizing: border-box;
+        overflow-x: hidden;
+    }
+
+    .control-panel > * {
+        max-width: 100%;
+    }
+
+    .slider-container {
+        margin-bottom: 8px;
+        height: 40px;
+    }
+
+    .slider-track, .attack-slider .slider-track {
+        height: 6px;
+        top: 18px;
+    }
+
+    .slider-fill, .attack-slider .slider-fill {
+        height: 6px;
+        top: 18px;
+    }
+
+    .slider-thumb, .attack-slider .slider-thumb {
+        width: 14px;
+        height: 14px;
+        top: 14px;
+    }
+
+    .control-panel-info {
+        margin-bottom: 8px;
+        padding: 6px;
+    }
+
+    .info-row {
+        margin-bottom: 2px;
+    }
+
+    label {
+        margin-bottom: 2px;
+        font-size: 0.9em;
+    }
+
+    .info-label {
+        font-size: 0.9em;
+    }
+
+    input[type="range"], .attack-slider input[type="range"] {
+        top: 10px;
+    }
+}
     `;
 
     render() {
@@ -269,20 +334,12 @@ export class ControlPanel extends LitElement implements Layer {
             <div class="control-panel ${this._isVisible ? '' : 'hidden'}">
                 <div class="control-panel-info">
                     <div class="info-row">
-                        <span class="info-label">Population:</span>
+                        <span class="info-label">Pop:</span>
-                        <span>${renderTroops(this._population)} / ${renderTroops(this._maxPopulation)}</span>
+                        <span>${renderTroops(this._population)} / ${renderTroops(this._maxPopulation)} (+${renderTroops(this.popRate)})</span>
-                    </div>
-                    <div class="info-row">
-                        <span class="info-label">Population/s:</span>
-                        <span>${renderTroops(this.popRate)}</span>
                     </div>
                     <div class="info-row">
                         <span class="info-label">Gold:</span>
-                        <span>${renderNumber(this._gold)}</span>
+                        <span>${renderNumber(this._gold)} (+${renderNumber(this._goldPerSecond)})</span>
-                    </div>
-                    <div class="info-row">
-                        <span class="info-label">Gold/s:</span>
-                        <span>${renderNumber(this._goldPerSecond)}</span>
                     </div>
                 </div>
                 

src/client/graphics/layers/EventsDisplay.ts

@@ -122,7 +122,21 @@ export class EventsDisplay extends LitElement implements Layer {
     .warn td { color: rgb(255, 220, 80) }
     .error td { color: rgb(255, 100, 100); }
 
+    .button-container {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+
     @media (max-width: 600px) {
+      :host {
+        bottom: auto;
+        top: 10px;
+        right: 10px;
+        left: 10px;
+        max-width: calc(100% - 20px);
+      }
+
       .events-table th,
       .events-table td {
         padding: 10px;
@@ -131,16 +145,9 @@ export class EventsDisplay extends LitElement implements Layer {
       .btn {
         display: block;
         margin: 5px 0;
+        width: 100%;
       }
-    }
 
-    .button-container {
-      display: flex;
-      gap: 8px;
-      flex-wrap: wrap;
-    }
-
-    @media (max-width: 600px) {
       .button-container {
         flex-direction: column;
       }

src/client/graphics/layers/radial/BuildMenu.ts

@@ -6,6 +6,7 @@ import { SendNukeIntentEvent } from '../../../Transport';
 import nukeIcon from '../../../../../resources/images/NukeIconWhite.svg';
 import goldCoinIcon from '../../../../../resources/images/GoldCoinIcon.svg';
 import { renderNumber } from '../../Utils';
+import { ContextMenuEvent } from '../../../InputHandler';
 
 interface BuildItem {
     item: Item
@@ -27,6 +28,10 @@ export class BuildMenu extends LitElement {
     private myPlayer: Player;
     private clickedCell: Cell;
 
+    init() {
+        this.eventBus.on(ContextMenuEvent, (e) => { this.hideMenu() })
+    }
+
     static styles = css`
         :host {
             display: block;