From f2d7c34c92e7c96144c0b9c772e0fcde1ed2673a Mon Sep 17 00:00:00 2001
From: Evan <evanpelle@gmail.com>
Date: Wed, 29 Jan 2025 20:17:40 -0800
Subject: [PATCH] make control panel and events display mobile freindly

---
 src/client/graphics/layers/ControlPanel.ts  |   2 +-
 src/client/graphics/layers/EventsDisplay.ts | 328 +++++++++-----------
 src/client/index.html                       | 318 +++++++++++--------
 3 files changed, 335 insertions(+), 313 deletions(-)

diff --git a/src/client/graphics/layers/ControlPanel.ts b/src/client/graphics/layers/ControlPanel.ts
index 9d769f9b5..6887a1627 100644
--- a/src/client/graphics/layers/ControlPanel.ts
+++ b/src/client/graphics/layers/ControlPanel.ts
@@ -114,7 +114,7 @@ export class ControlPanel extends LitElement implements Layer {
     return html`
       <div
         class="${this._isVisible
-          ? "fixed bottom-0 w-full landscape:w-1/3 landscape:lg:w-72 lg:bottom-3 left-0 lg:left-3 z-50 bg-gray-800/70 p-2 pr-3 lg:p-4 shadow-lg rounded-lg backdrop-blur"
+          ? "w-full lg:w-72 bg-gray-800/70 p-2 pr-3 lg:p-4 shadow-lg rounded-lg backdrop-blur"
           : "hidden"}"
       >
         <div class="hidden lg:block bg-black/30 text-white mb-4 p-2 rounded">
diff --git a/src/client/graphics/layers/EventsDisplay.ts b/src/client/graphics/layers/EventsDisplay.ts
index 2d86f7cbd..7991ba85c 100644
--- a/src/client/graphics/layers/EventsDisplay.ts
+++ b/src/client/graphics/layers/EventsDisplay.ts
@@ -1,10 +1,7 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { LitElement, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
 import { EventBus } from "../../../core/EventBus";
-import {
-  AllPlayers,
-  MessageType,
-} from "../../../core/game/Game";
+import { AllPlayers, MessageType } from "../../../core/game/Game";
 import { DisplayMessageUpdate } from "../../../core/game/GameUpdates";
 import { EmojiUpdate } from "../../../core/game/GameUpdates";
 import { TargetPlayerUpdate } from "../../../core/game/GameUpdates";
@@ -16,13 +13,13 @@ import { GameUpdateType } from "../../../core/game/GameUpdates";
 import { ClientID } from "../../../core/Schemas";
 import { Layer } from "./Layer";
 import { SendAllianceReplyIntentEvent } from "../../Transport";
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { onlyImages, sanitize } from '../../../core/Util';
-import { GameView, PlayerView } from '../../../core/game/GameView';
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { onlyImages, sanitize } from "../../../core/Util";
+import { GameView, PlayerView } from "../../../core/game/GameView";
 
 interface Event {
   description: string;
-  unsafeDescription?: boolean
+  unsafeDescription?: boolean;
   buttons?: {
     text: string;
     className: string;
@@ -34,7 +31,7 @@ interface Event {
   onDelete?: () => void;
 }
 
-@customElement('events-display')
+@customElement("events-display")
 export class EventsDisplay extends LitElement implements Layer {
   public eventBus: EventBus;
   public game: GameView;
@@ -42,131 +39,32 @@ export class EventsDisplay extends LitElement implements Layer {
 
   private events: Event[] = [];
 
-  static styles = css`
-    :host {
-      display: block;
-      position: fixed;
-      bottom: 10px;
-      right: 10px;
-      z-index: 1000;
-      max-width: 800px;
-    }
-
-    .events-table {
-      width: 100%;
-      border-collapse: collapse;
-      background-color: rgba(0, 0, 0, 0.7);
-      color: white;
-      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
-      font-size: 0.9em;
-    }
-
-    .events-table th,
-    .events-table td {
-      padding: 8px 12px;
-      text-align: left;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.0);
-      z-index: 1000;
-    }
-
-    .events-table th {
-      background-color: rgba(0, 0, 0, 0.0);
-      font-size: 1em;
-      text-transform: uppercase;
-    }
-
-    .events-table tr:hover {
-      background-color: rgba(255, 255, 255, 0.0);
-    }
-
-    .btn {
-      display: inline-block;
-      padding: 4px 12px;
-      margin: 3px 8px 3px 0;
-      background-color: #4CAF50;
-      color: white;
-      text-decoration: none;
-      border-radius: 4px;
-      transition: background-color 0.3s;
-      border: none;
-      cursor: pointer;
-      font-size: 0.9em;
-    }
-
-    .btn:hover {
-      background-color: #45a049;
-    }
-
-    .btn-info {
-      background-color: #2196F3;
-    }
-
-    .btn-info:hover {
-      background-color: #0b7dda;
-    }
-
-    .success td { color: rgb(120, 255, 140); }
-    .info td { color: rgb(230, 230, 230); }
-    .warn td { color: rgb(255, 220, 80) }
-    .error td { color: rgb(255, 100, 100); }
-
-    .button-container {
-      display: flex;
-      gap: 6px;
-      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: 6px 10px;
-      }
-      
-      .btn {
-        display: block;
-        margin: 3px 0;
-        width: 100%;
-      }
-
-      .button-container {
-        flex-direction: column;
-      }
-    }
-  `;
-
   private updateMap = new Map([
-    [GameUpdateType.DisplayEvent, u => this.onDisplayMessageEvent(u)],
-    [GameUpdateType.AllianceRequest, u => this.onAllianceRequestEvent(u)],
-    [GameUpdateType.AllianceRequestReply, u => this.onAllianceRequestReplyEvent(u)],
-    [GameUpdateType.BrokeAlliance, u => this.onBrokeAllianceEvent(u)],
-    [GameUpdateType.TargetPlayer, u => this.onTargetPlayerEvent(u)],
-    [GameUpdateType.EmojiUpdate, u => this.onEmojiMessageEvent(u)]
-  ])
+    [GameUpdateType.DisplayEvent, (u) => this.onDisplayMessageEvent(u)],
+    [GameUpdateType.AllianceRequest, (u) => this.onAllianceRequestEvent(u)],
+    [
+      GameUpdateType.AllianceRequestReply,
+      (u) => this.onAllianceRequestReplyEvent(u),
+    ],
+    [GameUpdateType.BrokeAlliance, (u) => this.onBrokeAllianceEvent(u)],
+    [GameUpdateType.TargetPlayer, (u) => this.onTargetPlayerEvent(u)],
+    [GameUpdateType.EmojiUpdate, (u) => this.onEmojiMessageEvent(u)],
+  ]);
 
   constructor() {
     super();
     this.events = [];
   }
 
-  init() {
-  }
+  init() {}
 
   tick() {
-    const updates = this.game.updatesSinceLastTick()
+    const updates = this.game.updatesSinceLastTick();
     for (const [ut, fn] of this.updateMap) {
-      updates[ut]?.forEach(u => fn(u))
+      updates[ut]?.forEach((u) => fn(u));
     }
 
-
-    let remainingEvents = this.events.filter(event => {
+    let remainingEvents = this.events.filter((event) => {
       const shouldKeep = this.game.ticks() - event.createdAt < 80;
       if (!shouldKeep && event.onDelete) {
         event.onDelete();
@@ -180,19 +78,19 @@ export class EventsDisplay extends LitElement implements Layer {
 
     if (this.events.length !== remainingEvents.length) {
       this.events = remainingEvents;
-      this.requestUpdate()
+      this.requestUpdate();
     }
   }
 
   private addEvent(event: Event) {
     this.events = [...this.events, event];
-    this.requestUpdate()
+    this.requestUpdate();
   }
 
   private removeEvent(index: number) {
     this.events = [
       ...this.events.slice(0, index),
-      ...this.events.slice(index + 1)
+      ...this.events.slice(index + 1),
     ];
   }
 
@@ -200,11 +98,14 @@ export class EventsDisplay extends LitElement implements Layer {
     return false;
   }
 
-  renderLayer(): void { }
+  renderLayer(): void {}
 
   onDisplayMessageEvent(event: DisplayMessageUpdate) {
     const myPlayer = this.game.playerByClientID(this.clientID);
-    if (event.playerID != null && (!myPlayer || myPlayer.smallID() !== event.playerID)) {
+    if (
+      event.playerID != null &&
+      (!myPlayer || myPlayer.smallID() !== event.playerID)
+    ) {
       return;
     }
 
@@ -223,8 +124,12 @@ export class EventsDisplay extends LitElement implements Layer {
       return;
     }
 
-    const requestor = this.game.playerBySmallID(update.requestorID) as PlayerView
-    const recipient = this.game.playerBySmallID(update.recipientID) as PlayerView
+    const requestor = this.game.playerBySmallID(
+      update.requestorID
+    ) as PlayerView;
+    const recipient = this.game.playerBySmallID(
+      update.recipientID
+    ) as PlayerView;
 
     this.addEvent({
       description: `${requestor.name()} requests an alliance!`,
@@ -232,24 +137,27 @@ export class EventsDisplay extends LitElement implements Layer {
         {
           text: "Accept",
           className: "btn",
-          action: () => this.eventBus.emit(
-            new SendAllianceReplyIntentEvent(requestor, recipient, true)
-          ),
+          action: () =>
+            this.eventBus.emit(
+              new SendAllianceReplyIntentEvent(requestor, recipient, true)
+            ),
         },
         {
           text: "Reject",
-          className: "btn btn-info",
-          action: () => this.eventBus.emit(
-            new SendAllianceReplyIntentEvent(requestor, recipient, false)
-          ),
-        }
+          className: "btn-info",
+          action: () =>
+            this.eventBus.emit(
+              new SendAllianceReplyIntentEvent(requestor, recipient, false)
+            ),
+        },
       ],
       highlight: true,
       type: MessageType.INFO,
       createdAt: this.game.ticks(),
-      onDelete: () => this.eventBus.emit(
-        new SendAllianceReplyIntentEvent(requestor, recipient, false)
-      )
+      onDelete: () =>
+        this.eventBus.emit(
+          new SendAllianceReplyIntentEvent(requestor, recipient, false)
+        ),
     });
   }
 
@@ -259,10 +167,14 @@ export class EventsDisplay extends LitElement implements Layer {
       return;
     }
 
-    const recipient = this.game.playerBySmallID(update.request.recipientID) as PlayerView
+    const recipient = this.game.playerBySmallID(
+      update.request.recipientID
+    ) as PlayerView;
 
     this.addEvent({
-      description: `${recipient.name()} ${update.accepted ? "accepted" : "rejected"} your alliance request`,
+      description: `${recipient.name()} ${
+        update.accepted ? "accepted" : "rejected"
+      } your alliance request`,
       type: update.accepted ? MessageType.SUCCESS : MessageType.ERROR,
       highlight: true,
       createdAt: this.game.ticks(),
@@ -273,8 +185,8 @@ export class EventsDisplay extends LitElement implements Layer {
     const myPlayer = this.game.playerByClientID(this.clientID);
     if (!myPlayer) return;
 
-    const betrayed = this.game.playerBySmallID(update.betrayedID) as PlayerView
-    const traitor = this.game.playerBySmallID(update.traitorID) as PlayerView
+    const betrayed = this.game.playerBySmallID(update.betrayedID) as PlayerView;
+    const traitor = this.game.playerBySmallID(update.traitorID) as PlayerView;
 
     if (!betrayed.isTraitor() && traitor === myPlayer) {
       this.addEvent({
@@ -297,8 +209,13 @@ export class EventsDisplay extends LitElement implements Layer {
     const myPlayer = this.game.playerByClientID(this.clientID);
     if (!myPlayer) return;
 
-    const otherID = update.player1ID === myPlayer.smallID() ? update.player2ID : update.player2ID === myPlayer.smallID() ? update.player1ID : null;
-    const other = this.game.playerBySmallID(otherID) as PlayerView
+    const otherID =
+      update.player1ID === myPlayer.smallID()
+        ? update.player2ID
+        : update.player2ID === myPlayer.smallID()
+        ? update.player1ID
+        : null;
+    const other = this.game.playerBySmallID(otherID) as PlayerView;
     if (!other || !myPlayer.isAlive() || !other.isAlive()) return;
 
     this.addEvent({
@@ -310,11 +227,11 @@ export class EventsDisplay extends LitElement implements Layer {
   }
 
   onTargetPlayerEvent(event: TargetPlayerUpdate) {
-    const other = this.game.playerBySmallID(event.playerID) as PlayerView
-    const myPlayer = this.game.playerByClientID(this.clientID) as PlayerView
+    const other = this.game.playerBySmallID(event.playerID) as PlayerView;
+    const myPlayer = this.game.playerByClientID(this.clientID) as PlayerView;
     if (!myPlayer || !myPlayer.isAlliedWith(other)) return;
 
-    const target = this.game.playerBySmallID(event.targetID) as PlayerView
+    const target = this.game.playerBySmallID(event.targetID) as PlayerView;
 
     this.addEvent({
       description: `${other.name()} requests you attack ${target.name()}`,
@@ -328,8 +245,13 @@ export class EventsDisplay extends LitElement implements Layer {
     const myPlayer = this.game.playerByClientID(this.clientID);
     if (!myPlayer) return;
 
-    const recipient = update.emoji.recipientID == AllPlayers ? AllPlayers : this.game.playerBySmallID(update.emoji.recipientID)
-    const sender = this.game.playerBySmallID(update.emoji.senderID) as PlayerView
+    const recipient =
+      update.emoji.recipientID == AllPlayers
+        ? AllPlayers
+        : this.game.playerBySmallID(update.emoji.recipientID);
+    const sender = this.game.playerBySmallID(
+      update.emoji.senderID
+    ) as PlayerView;
 
     if (recipient == myPlayer) {
       this.addEvent({
@@ -341,7 +263,9 @@ export class EventsDisplay extends LitElement implements Layer {
       });
     } else if (sender === myPlayer && recipient !== AllPlayers) {
       this.addEvent({
-        description: `Sent ${(recipient as PlayerView).displayName()}: ${update.emoji.message}`,
+        description: `Sent ${(recipient as PlayerView).displayName()}: ${
+          update.emoji.message
+        }`,
         unsafeDescription: true,
         type: MessageType.INFO,
         highlight: true,
@@ -350,39 +274,79 @@ export class EventsDisplay extends LitElement implements Layer {
     }
   }
 
+  private getMessageTypeClasses(type: MessageType): string {
+    switch (type) {
+      case MessageType.SUCCESS:
+        return "text-green-300";
+      case MessageType.INFO:
+        return "text-gray-200";
+      case MessageType.WARN:
+        return "text-yellow-300";
+      case MessageType.ERROR:
+        return "text-red-300";
+      default:
+        return "text-white";
+    }
+  }
+
   render() {
     if (this.events.length === 0) {
       return html``;
     }
 
     return html`
-      <table class="events-table">
-        <tbody>
-          ${this.events.map((event, index) => html`
-            <tr class="${event.highlight ? 'highlight' : ''} ${MessageType[event.type].toLowerCase()}">
-              <td>
-                ${event.unsafeDescription ? unsafeHTML(onlyImages(event.description)) : event.description}
-                ${event.buttons ? html`
-                  <div class="button-container">
-                    ${event.buttons.map(btn => html`
-                      <button 
-                        class="${btn.className}"
-                        @click=${() => {
-        btn.action();
-        this.removeEvent(index);
-        this.requestUpdate()
-      }}
-                      >
-                        ${btn.text}
-                      </button>
-                    `)}
-                  </div>
-                ` : ''}
-              </td>
-            </tr>
-          `)}
-        </tbody>
-      </table>
+      <div
+        class="w-full lg:bottom-2.5 lg:right-2.5 z-50 lg:max-w-3xl lg:w-full lg:w-auto"
+      >
+        <table
+          class="w-full border-collapse bg-black bg-opacity-70 text-white shadow-lg text-sm"
+        >
+          <tbody>
+            ${this.events.map(
+              (event, index) => html`
+                <tr
+                  class="border-b border-opacity-0 ${this.getMessageTypeClasses(
+                    event.type
+                  )}"
+                >
+                  <td class="p-2 text-left">
+                    ${event.unsafeDescription
+                      ? unsafeHTML(onlyImages(event.description))
+                      : event.description}
+                    ${event.buttons
+                      ? html`
+                          <div class="flex flex-wrap gap-1.5 mt-1">
+                            ${event.buttons.map(
+                              (btn) => html`
+                                <button
+                                  class="inline-block px-3 py-1 text-white rounded text-sm cursor-pointer transition-colors duration-300
+                            ${btn.className.includes("btn-info")
+                                    ? "bg-blue-500 hover:bg-blue-600"
+                                    : "bg-green-600 hover:bg-green-700"}"
+                                  @click=${() => {
+                                    btn.action();
+                                    this.removeEvent(index);
+                                    this.requestUpdate();
+                                  }}
+                                >
+                                  ${btn.text}
+                                </button>
+                              `
+                            )}
+                          </div>
+                        `
+                      : ""}
+                  </td>
+                </tr>
+              `
+            )}
+          </tbody>
+        </table>
+      </div>
     `;
   }
-}
\ No newline at end of file
+
+  createRenderRoot() {
+    return this; // Required for Tailwind classes to work with Lit
+  }
+}
diff --git a/src/client/index.html b/src/client/index.html
index da675a0c7..98c3402b2 100644
--- a/src/client/index.html
+++ b/src/client/index.html
@@ -1,151 +1,209 @@
 <!DOCTYPE html>
 <html lang="en" class="h-full">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>OpenFront (ALPHA)</title>
 
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>OpenFront (ALPHA)</title>
+    <!-- Preload critical assets -->
+    <link
+      rel="preload"
+      href="../../resources/images/OpenFrontLogo.svg"
+      as="image"
+    />
+    <link
+      rel="preload"
+      href="../../resources/images/DiscordIcon.svg"
+      as="image"
+    />
 
-	<!-- Preload critical assets -->
-	<link rel="preload" href="../../resources/images/OpenFrontLogo.svg" as="image">
-	<link rel="preload" href="../../resources/images/DiscordIcon.svg" as="image">
+    <!-- Critical CSS to prevent FOUC -->
+    <style>
+      .preload * {
+        -webkit-transition: none !important;
+        -moz-transition: none !important;
+        -ms-transition: none !important;
+        -o-transition: none !important;
+        transition: none !important;
+      }
 
-	<!-- Critical CSS to prevent FOUC -->
-	<style>
-		.preload * {
-			-webkit-transition: none !important;
-			-moz-transition: none !important;
-			-ms-transition: none !important;
-			-o-transition: none !important;
-			transition: none !important;
-		}
+      html {
+        visibility: visible;
+        opacity: 1;
+      }
 
-		html {
-			visibility: visible;
-			opacity: 1;
-		}
+      html.preload {
+        visibility: hidden;
+        opacity: 0;
+      }
 
-		html.preload {
-			visibility: hidden;
-			opacity: 0;
-		}
+      body::before {
+        content: "";
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        backdrop-filter: blur(4px);
+        -webkit-backdrop-filter: blur(4px);
+        z-index: -1;
+      }
 
-		body::before {
-			content: '';
-			position: fixed;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-			backdrop-filter: blur(4px);
-			-webkit-backdrop-filter: blur(4px);
-			z-index: -1;
-		}
+      /* Critical styles to prevent layout shift */
+      .container {
+        opacity: 1;
+        transition: opacity 0.3s ease-in-out;
+      }
+    </style>
 
-		/* Critical styles to prevent layout shift */
-		.container {
-			opacity: 1;
-			transition: opacity 0.3s ease-in-out;
-		}
-	</style>
+    <!-- Immediate execution to prevent FOUC -->
+    <script>
+      document.documentElement.className = "preload";
+    </script>
 
-	<!-- Immediate execution to prevent FOUC -->
-	<script>
-		document.documentElement.className = 'preload';
-	</script>
+    <!-- Analytics -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=AW-16702609763"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+      gtag("config", "AW-16702609763");
+    </script>
+  </head>
 
-	<!-- Analytics -->
-	<script async src="https://www.googletagmanager.com/gtag/js?id=AW-16702609763"></script>
-	<script>
-		window.dataLayer = window.dataLayer || [];
-		function gtag() { dataLayer.push(arguments); }
-		gtag('js', new Date());
-		gtag('config', 'AW-16702609763');
-	</script>
-</head>
+  <body
+    class="h-full overflow-hidden select-none font-sans min-h-screen bg-opacity-0 bg-cover bg-center bg-fixed transition-opacity duration-300 ease-in-out"
+  >
+    <!-- Main container with responsive padding -->
+    <!-- Logo section remains the same -->
+    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8">
+      <img
+        src="../../resources/images/OpenFrontLogo.svg"
+        alt="OpenFront.io"
+        class="pt-6 md:pt-12 h-auto w-3/4 md:w-1/2 lg:w-1/3 mx-auto transform sm:scale-125 md:scale-150 lg:scale-175"
+      />
+      <h3
+        class="font-sans text-center text-black pb-6 md:pb-12 text-sm sm:text-base lg:text-lg"
+      >
+        (v0.14.0)
+      </h3>
 
-<body
-	class="h-full overflow-hidden select-none font-sans min-h-screen bg-opacity-0 bg-cover bg-center bg-fixed transition-opacity duration-300 ease-in-out">
-	<!-- Main container with responsive padding -->
-	<!-- Logo section remains the same -->
-	<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8">
-		<img src="../../resources/images/OpenFrontLogo.svg" alt="OpenFront.io"
-			class="pt-6 md:pt-12 h-auto w-3/4 md:w-1/2 lg:w-1/3 mx-auto transform sm:scale-125 md:scale-150 lg:scale-175">
-		<h3 class="font-sans text-center text-black pb-6 md:pb-12 text-sm sm:text-base lg:text-lg">(v0.14.0)</h3>
+      <div
+        class="max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto p-2 pb-4"
+      >
+        <username-input class="w-full"></username-input>
+      </div>
 
-		<div class="max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto p-2 pb-4">
-			<username-input class="w-full"></username-input>
-		</div>
+      <div class="max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto p-2">
+        <public-lobby class="w-full"></public-lobby>
+      </div>
 
-		<div class="max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto p-2">
-			<public-lobby class="w-full"></public-lobby>
-		</div>
+      <div
+        class="pt-4 flex gap-4 sm:gap-6 lg:gap-8 max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto"
+      >
+        <button
+          id="host-lobby-button"
+          class="bg-blue-100 hover:bg-blue-200 text-blue-900 p-3 sm:p-4 lg:p-5 font-medium text-sm sm:text-base lg:text-lg rounded-md w-full border-none cursor-pointer transition-colors duration-300"
+        >
+          Create Lobby
+        </button>
+        <button
+          id="join-private-lobby-button"
+          class="bg-blue-100 hover:bg-blue-200 text-blue-900 p-3 sm:p-4 lg:p-5 font-medium text-sm sm:text-base lg:text-lg rounded-md w-full border-none cursor-pointer transition-colors duration-300"
+        >
+          Join Lobby
+        </button>
+      </div>
 
-		<div class="pt-4 flex gap-4 sm:gap-6 lg:gap-8 max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto">
-			<button id="host-lobby-button"
-				class="bg-blue-100 hover:bg-blue-200 text-blue-900 p-3 sm:p-4 lg:p-5 font-medium text-sm sm:text-base lg:text-lg rounded-md w-full border-none cursor-pointer transition-colors duration-300">
-				Create Lobby
-			</button>
-			<button id="join-private-lobby-button"
-				class="bg-blue-100 hover:bg-blue-200 text-blue-900 p-3 sm:p-4 lg:p-5 font-medium text-sm sm:text-base lg:text-lg rounded-md w-full border-none cursor-pointer transition-colors duration-300">
-				Join Lobby
-			</button>
-		</div>
+      <div
+        class="max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto mt-4 sm:mt-6 lg:mt-8"
+      >
+        <button
+          id="single-player"
+          class="w-full bg-blue-600 hover:bg-blue-700 text-white p-3 sm:p-4 lg:p-5 font-bold text-lg sm:text-xl lg:text-2xl rounded-lg border-none cursor-pointer transition-colors duration-300"
+        >
+          Single Player
+        </button>
+      </div>
 
-		<div class="max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto mt-4 sm:mt-6 lg:mt-8">
-			<button id="single-player"
-				class="w-full bg-blue-600 hover:bg-blue-700 text-white p-3 sm:p-4 lg:p-5 font-bold text-lg sm:text-xl lg:text-2xl rounded-lg border-none cursor-pointer transition-colors duration-300">
-				Single Player
-			</button>
-		</div>
+      <!-- Links section -->
+      <div class="flex justify-center mt-4">
+        <a
+          href="https://discord.gg/k22YrnAzGp"
+          id="discord-link"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="flex items-center justify-center px-6 py-2 bg-blue-200 hover:bg-blue-200 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out mx-2"
+        >
+          <img
+            src="../../resources/images/DiscordIcon.svg"
+            alt="Discord"
+            class="w-12 h-12"
+          />
+        </a>
+        <a
+          href="https://youtu.be/jvHEvbko3uw?si=znspkP84P76B1w5I"
+          id="yt-link"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="flex items-center justify-center px-2 py-0 bg-blue-200 hover:bg-blue-200 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out mx-2"
+        >
+          <img
+            src="../../resources/images/QuestionMarkIcon.svg"
+            alt="Question Mark"
+            class="mt-4 w-20 h-20"
+          />
+        </a>
+      </div>
+    </div>
 
-		<!-- Links section -->
-		<div class="flex justify-center mt-4">
-			<a href="https://discord.gg/k22YrnAzGp" id="discord-link" target="_blank" rel="noopener noreferrer"
-				class="flex items-center justify-center px-6 py-2 bg-blue-200 hover:bg-blue-200  rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out mx-2">
-				<img src="../../resources/images/DiscordIcon.svg" alt="Discord" class="w-12 h-12" />
-			</a>
-			<a href="https://youtu.be/jvHEvbko3uw?si=znspkP84P76B1w5I" id="yt-link" target="_blank"
-				rel="noopener noreferrer"
-				class="flex items-center justify-center px-2 py-0 bg-blue-200 hover:bg-blue-200 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out mx-2">
-				<img src="../../resources/images/QuestionMarkIcon.svg" alt="Question Mark" class="mt-4 w-20 h-20" />
-			</a>
-		</div>
-	</div>
+    <!-- Game components -->
+    <div id="customMenu" class="mt-4 sm:mt-6 lg:mt-8">
+      <ul></ul>
+    </div>
+    <div id="app"></div>
+    <div id="radialMenu" class="radial-menu"></div>
 
-	<!-- Game components -->
-	<div id="customMenu" class="mt-4 sm:mt-6 lg:mt-8">
-		<ul></ul>
-	</div>
-	<div id="app"></div>
-	<div id="radialMenu" class="radial-menu"></div>
+    <!-- Game modals and overlays -->
+    <single-player-modal></single-player-modal>
+    <host-lobby-modal></host-lobby-modal>
+    <join-private-lobby-modal></join-private-lobby-modal>
+    <emoji-table></emoji-table>
+    <leader-board></leader-board>
+    <build-menu></build-menu>
+    <options-menu></options-menu>
+    <player-info-overlay></player-info-overlay>
+    <win-modal></win-modal>
 
-	<!-- Game modals and overlays -->
-	<single-player-modal></single-player-modal>
-	<host-lobby-modal></host-lobby-modal>
-	<join-private-lobby-modal></join-private-lobby-modal>
-	<emoji-table></emoji-table>
-	<leader-board></leader-board>
-	<control-panel></control-panel>
-	<events-display></events-display>
-	<build-menu></build-menu>
-	<options-menu></options-menu>
-	<player-info-overlay></player-info-overlay>
-	<win-modal></win-modal>
+    <div class="fixed bottom-0 flex w-full flex-col-reverse sm:flex-row z-50">
+      <div class="w-full sm:w-1/3">
+        <control-panel></control-panel>
+      </div>
+      <div class="w-full sm:w-2/3 sm:fixed sm:right-0 sm:bottom-0 sm:flex sm:justify-end">
+        <events-display></events-displayflex >
+      </div>
+    </div>
 
-	<!-- Scripts -->
-	<script>
-		// Remove preload class after everything is loaded
-		window.addEventListener('load', function () {
-			requestAnimationFrame(() => {
-				document.documentElement.classList.remove('preload');
-			});
-		});
-	</script>
+    <!-- Scripts -->
+    <script>
+      // Remove preload class after everything is loaded
+      window.addEventListener("load", function () {
+        requestAnimationFrame(() => {
+          document.documentElement.classList.remove("preload");
+        });
+      });
+    </script>
 
-	<!-- Analytics -->
-	<script defer src='https://static.cloudflareinsights.com/beacon.min.js'
-		data-cf-beacon='{"token": "03d93e6fefb349c28ee69b408fa25a13"}'></script>
-</body>
-
-</html>
\ No newline at end of file
+    <!-- Analytics -->
+    <script
+      defer
+      src="https://static.cloudflareinsights.com/beacon.min.js"
+      data-cf-beacon='{"token": "03d93e6fefb349c28ee69b408fa25a13"}'
+    ></script>
+  </body>
+</html>