mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-06-30 21:33:29 +00:00
make control panel and events display mobile freindly
This commit is contained in:
Evan
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
createRenderRoot() {
|
||||
return this; // Required for Tailwind classes to work with Lit
|
||||
}
|
||||
}
|
||||
|
||||
+188
-130
@@ -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>
|
||||
<!-- Analytics -->
|
||||
<script
|
||||
defer
|
||||
src="https://static.cloudflareinsights.com/beacon.min.js"
|
||||
data-cf-beacon='{"token": "03d93e6fefb349c28ee69b408fa25a13"}'
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user