alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-06-21 13:40:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve front page UI

Browse Source
This commit is contained in:
evanpelle
2025-01-27 16:45:19 -08:00
committed by Evan
parent 031a452558
commit 3d58ef185c
2 changed files with 23 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/PublicLobby.ts
+17 -21
View File
@@ -52,31 +52,27 @@ export class PublicLobby extends LitElement {
render() {
if (this.lobbies.length === 0) return html``;
const lobby = this.lobbies[0];
const timeRemaining = Math.max(0, Math.floor(lobby.msUntilStart / 1000));
// return html`
// <div class="bg-blue-500 p-4 rounded-lg text-white hover:bg-blue-600">
// Test Tailwind
// </div>
// `;
return html`
<button
@click=${() => this.lobbyClicked(lobby)}
class="w-full mx-auto p-16 md:py-6 md:px-8 ${this.isLobbyHighlighted
? 'bg-gradient-to-r from-green-600 to-green-500'
: 'bg-gradient-to-r from-blue-600 to-blue-500'
} text-white font-medium rounded-xl transition-opacity duration-200 hover:opacity-90"
>
<div class="text-xl md:text-2xl font-semibold mb-4">Next Game</div>
<div class="flex justify-center gap-8 text-blue-100 text-m md:text-lg">
<div>Starts in: ${timeRemaining}s</div>
<div>Players: ${lobby.numClients}</div>
<div>ID: ${lobby.id}</div>
</div>
</button>
`;
<button
@click=${() => this.lobbyClicked(lobby)}
class="w-full mx-auto p-4 md:p-6 ${
this.isLobbyHighlighted
? 'bg-gradient-to-r from-green-600 to-green-500'
: 'bg-gradient-to-r from-blue-600 to-blue-500'
} text-white font-medium rounded-xl transition-opacity duration-200 hover:opacity-90"
>
<div class="text-lg md:text-2xl font-semibold mb-2">Next Game</div>
<div class="flex flex-col gap-1 md:gap-2 text-blue-100 text-sm md:text-base">
<div>Starts in: ${timeRemaining}s</div>
<div>Players: ${lobby.numClients}</div>
<div>ID: ${lobby.id}</div>
</div>
</button>
`;
}
private lobbyClicked(lobby: Lobby) {
src/client/index.html
+6 -6
View File
@@ -70,7 +70,7 @@
<!-- 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 lg:w-1/4 mx-auto transform sm:scale-125 md:scale-150 lg:scale-175">
class="pt-6 md:pt-12 h-auto w-3/4 lg:w-1/2 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">
@@ -101,15 +101,15 @@
<!-- 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-4 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-4 py-2 bg-white hover:bg-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out mx-2">
class="flex items-center justify-center px-4 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/QuestionMarkIcon.svg" alt="Question Mark" class="w-12 h-12" />
</a>
<a href="https://discord.gg/k22YrnAzGp" id="discord-link" target="_blank" rel="noopener noreferrer"
class="flex items-center justify-center px-4 py-2 bg-white hover:bg-gray-100 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>
</div>
</div>