mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-07-25 04:17:17 +00:00
improve front page
This commit is contained in:
Evan
@@ -14,8 +14,8 @@ export class UsernameInput extends LitElement {
|
||||
|
||||
static styles = css`
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
width: 200px;
|
||||
padding: 0.5rem;
|
||||
background-color: white;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.375rem;
|
||||
|
||||
+48
-94
@@ -17,105 +17,60 @@
|
||||
}
|
||||
gtag("js", new Date());
|
||||
|
||||
gtag("config", "AW-16702609763");
|
||||
</script>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>OpenFront (ALPHA)</title>
|
||||
<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>
|
||||
<style>
|
||||
body {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<style>
|
||||
body {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1><img src="../../resources/images/OpenFrontLogo.svg" alt="OpenFront.io"></h1>
|
||||
<h3 class="version">(v0.14.0)</h3>
|
||||
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl mb-2">
|
||||
OpenFront.io
|
||||
</h1>
|
||||
<h2 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl mb-4">
|
||||
(v0.14.0)
|
||||
</h2>
|
||||
<div class="flex justify-center items-start">
|
||||
<div class="w-full max-w-3xl p-4 space-y-4">
|
||||
<username-input></username-input>
|
||||
<div class="flex space-x-2 max-w-xs mx-auto">
|
||||
<a
|
||||
href="https://youtu.be/jvHEvbko3uw?si=znspkP84P76B1w5I"
|
||||
id="how-to-play"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex-1 px-4 py-2 text-lg font-bold text-white bg-emerald-600 hover:bg-emerald-700 rounded-mg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition duration-300 ease-in-out text-center"
|
||||
>
|
||||
How to Play
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex space-x-2 max-w-xs mx-auto">
|
||||
<a
|
||||
href="https://discord.gg/k22YrnAzGp"
|
||||
id="how-to-play"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex-1 px-4 py-2 text-lg font-bold text-white bg-indigo-600 hover:bg-indigo-700 rounded-mg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out text-center"
|
||||
>
|
||||
Join the Discord!
|
||||
</a>
|
||||
</div>
|
||||
<username-input></username-input>
|
||||
|
||||
<!-- Button layout -->
|
||||
<div class="flex space-x-4 max-w-xs mx-auto">
|
||||
<!-- Single Player button -->
|
||||
<button
|
||||
id="single-player"
|
||||
class="flex-1 h-31 px-6 py-8 text-xl font-bold text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition duration-300 ease-in-out"
|
||||
>
|
||||
Single Player
|
||||
</button>
|
||||
<div class="lobby-section">
|
||||
<public-lobby></public-lobby>
|
||||
</div>
|
||||
|
||||
<!-- Create and Join Lobby buttons stacked -->
|
||||
<div class="flex-1 space-y-4">
|
||||
<button
|
||||
id="host-lobby-button"
|
||||
class="w-full h-12 px-4 py-4 text-sm font-medium text-blue-700 bg-blue-100 rounded-md hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-300 ease-in-out"
|
||||
>
|
||||
Create Lobby
|
||||
</button>
|
||||
<button
|
||||
id="join-private-lobby-button"
|
||||
class="w-full h-12 px-4 py-4 text-sm font-medium text-blue-700 bg-blue-100 rounded-md hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-300 ease-in-out"
|
||||
>
|
||||
Join Lobby
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-container">
|
||||
<button id="single-player" class="primary-button">Single Player</button>
|
||||
<div style="display: flex; flex-direction: column; gap: 1rem; flex: 1;">
|
||||
<button id="host-lobby-button" class="secondary-button">Create Lobby</button>
|
||||
<button id="join-private-lobby-button" class="secondary-button">Join Lobby</button>
|
||||
</div>
|
||||
</div>
|
||||
<a href="https://youtu.be/jvHEvbko3uw?si=znspkP84P76B1w5I" class="link-button green" target="_blank"
|
||||
rel="noopener noreferrer">
|
||||
How to Play
|
||||
</a>
|
||||
|
||||
<h3
|
||||
class="text-xl sm:text-2xl md:text-3xl lg:text-4xl mt-2 mb-16 tracking-wide pt-2"
|
||||
>
|
||||
Public Games
|
||||
</h3>
|
||||
<public-lobby></public-lobby>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="https://discord.gg/k22YrnAzGp" class="link-button purple" target="_blank" rel="noopener noreferrer">
|
||||
Join the Discord!
|
||||
</a>
|
||||
|
||||
<div id="customMenu">
|
||||
<ul></ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="app"></div>
|
||||
<div id="radialMenu" class="radial-menu"></div>
|
||||
|
||||
<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>
|
||||
<player-info-overlay></player-info-overlay>
|
||||
<div id="customMenu">
|
||||
<ul></ul>
|
||||
</div>
|
||||
<div id="app"></div>
|
||||
<div id="radialMenu" class="radial-menu"></div>
|
||||
|
||||
<single-player-modal></single-player-modal>
|
||||
<host-lobby-modal></host-lobby-modal>
|
||||
@@ -128,6 +83,7 @@
|
||||
<options-menu></options-menu>
|
||||
<player-info-overlay></player-info-overlay>
|
||||
<win-modal></win-modal>
|
||||
|
||||
<script>
|
||||
window.addEventListener('DOMContentLoaded', (event) => {
|
||||
document.body.style.visibility = 'visible';
|
||||
@@ -135,10 +91,8 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Cloudflare Web Analytics -->
|
||||
<script defer src='https://static.cloudflareinsights.com/beacon.min.js'
|
||||
data-cf-beacon='{"token": "03d93e6fefb349c28ee69b408fa25a13"}'></script>
|
||||
<!-- End Cloudflare Web Analytics -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+82
-139
@@ -1,11 +1,9 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
html,
|
||||
body {
|
||||
touch-action: manipulation;
|
||||
-ms-touch-action: manipulation;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -17,7 +15,6 @@ body {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Overpass';
|
||||
src: url('/resources/fonts/overpass.woff') format('woff');
|
||||
@@ -35,27 +32,33 @@ body {
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
background-blend-mode: overlay;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.content {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
h1 {
|
||||
font-family: Arial, serif;
|
||||
text-align: center;
|
||||
color: #2e2e2e;
|
||||
font-size: 3em;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 1em;
|
||||
margin: 1em 0 10px;
|
||||
}
|
||||
|
||||
h1 img {
|
||||
height: auto;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
transform: scale(2);
|
||||
}
|
||||
|
||||
h2 {
|
||||
@@ -70,9 +73,16 @@ h3 {
|
||||
font-family: Arial, serif;
|
||||
text-align: center;
|
||||
color: #000000;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.version {
|
||||
font-family: Arial, serif;
|
||||
text-align: center;
|
||||
color: #000000;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* Username input */
|
||||
#username-container {
|
||||
margin-bottom: 50px;
|
||||
display: flex;
|
||||
@@ -92,13 +102,63 @@ h3 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.joining-message {
|
||||
font-size: 24px;
|
||||
color: rgb(0, 0, 0);
|
||||
text-align: center;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
/* Buttons */
|
||||
.button-container {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.primary-button {
|
||||
background-color: #2563eb;
|
||||
color: white;
|
||||
padding: 2rem 1.5rem;
|
||||
font-weight: bold;
|
||||
font-size: 1.25rem;
|
||||
border-radius: 0.5rem;
|
||||
flex: 1;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.secondary-button {
|
||||
background-color: #dbeafe;
|
||||
color: #1e40af;
|
||||
padding: 1rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
border-radius: 0.375rem;
|
||||
width: 100%;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.link-button {
|
||||
display: block;
|
||||
max-width: 400px;
|
||||
margin: 1rem auto;
|
||||
padding: 0.5rem 1rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
border-radius: 0.375rem;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.link-button.green {
|
||||
background-color: #059669;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.link-button.purple {
|
||||
background-color: #4f46e5;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Discord */
|
||||
.discord-link {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
@@ -122,17 +182,15 @@ h3 {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
/* Media Queries */
|
||||
@media (min-width: 768px) {
|
||||
h1 {
|
||||
font-size: 6em;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 2em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
#username {
|
||||
@@ -164,119 +222,4 @@ h3 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
#customMenu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #ccc;
|
||||
padding: 10px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
#customMenu ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#customMenu ul li {
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#customMenu ul li:hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
#table-container {
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
/* Events Table Styles */
|
||||
.events-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
color: white;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.events-table th,
|
||||
.events-table td {
|
||||
padding: 15px;
|
||||
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: 1.2em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.events-table tr:hover {
|
||||
background-color: rgba(255, 255, 255, 0.0);
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 8px 16px;
|
||||
margin: 5px 10px 5px 0;
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
background-color: #2196F3;
|
||||
}
|
||||
|
||||
.btn-info:hover {
|
||||
background-color: #0b7dda;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
|
||||
.events-table th,
|
||||
.events-table td {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: block;
|
||||
margin: 5px 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Radial Menu */
|
||||
.radial-menu {
|
||||
position: absolute;
|
||||
display: none;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
+1
-1
@@ -232,7 +232,7 @@ const ClientBaseMessageSchema = z.object({
|
||||
|
||||
export const ClientSendWinnerSchema = ClientBaseMessageSchema.extend({
|
||||
type: z.literal('winner'),
|
||||
winner: ID,
|
||||
winner: ID.nullable(),
|
||||
})
|
||||
|
||||
export const ClientLogMessageSchema = ClientBaseMessageSchema.extend({
|
||||
|
||||
@@ -30,23 +30,23 @@ export class DevConfig extends DefaultConfig {
|
||||
return info
|
||||
}
|
||||
|
||||
percentageTilesOwnedToWin(): number {
|
||||
return 1
|
||||
}
|
||||
// percentageTilesOwnedToWin(): number {
|
||||
// return 1
|
||||
// }
|
||||
|
||||
populationIncreaseRate(player: Player): number {
|
||||
return this.maxPopulation(player)
|
||||
}
|
||||
// populationIncreaseRate(player: Player): number {
|
||||
// return this.maxPopulation(player)
|
||||
// }
|
||||
|
||||
// boatMaxDistance(): number {
|
||||
// return 5000
|
||||
// }
|
||||
|
||||
numBots(): number {
|
||||
return 0
|
||||
}
|
||||
spawnNPCs(): boolean {
|
||||
return false
|
||||
}
|
||||
// numBots(): number {
|
||||
// return 0
|
||||
// }
|
||||
// spawnNPCs(): boolean {
|
||||
// return false
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user