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

improve front page, add username

Browse Source
This commit is contained in:
evanpelle
2024-08-12 17:21:44 -07:00
parent fc562533e1
commit f41c949af0
4 changed files with 81 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TODO.txt
+4 -3
View File
@@ -10,8 +10,8 @@
* lose troops when attacked DONE 8/12/2024
* slower to attack stronger players DONE 8/12/2024
* move all attack related config to Settings DONE 8/12/2024
* fix boat bugs
* add username in front page
* fix boat bugs DONE 8/12/2024
* add username in front page DONE 8/12/2024
* improve front page
* upload and start server
* fix enemy islands when attacking
@@ -19,4 +19,5 @@
* have boats not get close to shore
* better algorithm for name render placement
* make coasts look better
* add shader to dim border
* add shader to dim border
* remove player.info()
src/client/Client.ts
+10 -1
View File
@@ -84,12 +84,21 @@ class Client {
if (this.game != null) {
return
}
this.game = createClientGame(uuidv4().slice(0, 4), generateUniqueID(), lobbyID, defaultConfig, map)
this.game = createClientGame(getUsername(), generateUniqueID(), lobbyID, defaultConfig, map)
this.game.joinLobby()
})
}
}
function getUsername(): string {
const usernameInput = document.getElementById('username') as HTMLInputElement | null;
if (usernameInput) {
const trimmedValue = usernameInput.value.trim();
return trimmedValue || 'Anon'; // Return 'Anon' if the trimmed value is empty
}
return 'Anon'; // Return 'Anon' if the input element is not found
}
// Initialize the client when the DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
new Client().initialize();
src/client/ClientGame.ts
-1
View File
@@ -169,7 +169,6 @@ export class ClientGame {
this.sendBoatAttackIntent(targetID, cell, this.config.player().boatAttackAmount(this.myPlayer, owner))
}
}
}
private sendSpawnIntent(cell: Cell) {
src/client/index.html
+67 -5
View File
@@ -5,16 +5,78 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Warfront</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f0f0f0;
}
h1 {
text-align: center;
color: #333;
}
#username-container {
margin-bottom: 20px;
}
#username {
width: 100%;
padding: 10px;
font-size: 16px;
border: 2px solid #007bff;
border-radius: 5px;
}
#lobbies-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
}
.lobby-button {
height: 100px;
font-size: 18px;
font-weight: bold;
border: 2px solid #007bff;
background-color: #ffffff;
color: #007bff;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: background-color 0.3s, color 0.3s;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.lobby-button:hover {
background-color: #007bff;
color: #ffffff;
}
.player-count {
font-size: 14px;
margin-top: 5px;
}
</style>
</head>
<body>
<h1>Warfront</h1>
<div id="game-setup">
<div id="lobbies-container">
<h2>Available Lobbies</h2>
<!-- Lobby buttons will be inserted here -->
</div>
<div id="username-container">
<input type="text" id="username" placeholder="Enter your username">
</div>
<div id="lobbies-container">
<!-- Lobby buttons will be inserted here by your existing JavaScript -->
</div>
<!-- Your existing script file -->
<script src="your-existing-script.js"></script>
</body>
</html>