|
class LoginScreen extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.app = null;
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.innerHTML = `
|
|
<div style="background: var(--bg-medium); padding: 40px; border: 2px solid var(--border-color); text-align: center;">
|
|
<h1 style="margin-bottom: 30px; font-size: 32px;">City Builder</h1>
|
|
<p style="margin-bottom: 20px;">Enter your nickname to start</p>
|
|
<input
|
|
type="text"
|
|
id="nicknameInput"
|
|
placeholder="Nickname"
|
|
style="width: 300px; margin-bottom: 20px;"
|
|
maxlength="20"
|
|
/>
|
|
<br>
|
|
<button class="button" id="startButton">Start Game</button>
|
|
</div>
|
|
`;
|
|
|
|
const input = this.querySelector('#nicknameInput');
|
|
const button = this.querySelector('#startButton');
|
|
|
|
// Enter key to submit
|
|
input.addEventListener('keypress', (e) => {
|
|
if (e.key === 'Enter') {
|
|
this.startGame();
|
|
}
|
|
});
|
|
|
|
button.addEventListener('click', () => this.startGame());
|
|
|
|
// Focus input
|
|
setTimeout(() => input.focus(), 100);
|
|
}
|
|
|
|
startGame() {
|
|
const input = this.querySelector('#nicknameInput');
|
|
const nickname = input.value.trim();
|
|
|
|
if (!nickname) {
|
|
alert('Please enter a nickname');
|
|
return;
|
|
}
|
|
|
|
if (nickname.length < 2) {
|
|
alert('Nickname must be at least 2 characters');
|
|
return;
|
|
}
|
|
|
|
if (this.app) {
|
|
this.app.startGame(nickname);
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define('login-screen', LoginScreen);
|