Skip to content

Commit

Permalink
feat: player name input
Browse files Browse the repository at this point in the history
  • Loading branch information
@kenrick95
kenrick95 committed Nov 6, 2023
1 parent 2d6ea2c commit b8b3216
Show file tree
Hide file tree
Showing 8 changed files with 207 additions and 92 deletions.
131 changes: 78 additions & 53 deletions browser/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
Expand Down Expand Up @@ -27,7 +27,7 @@ <h1 class="header-title">c4 - Connect Four</h1>
<canvas class="section-canvas"></canvas>
</section>

<dialog class="mode-chooser">
<dialog class="init-screen">
<h1>c4 - Connect Four</h1>
<h2>How to play?</h2>
<p>Connect Four is a two-player game.</p>
Expand All @@ -47,57 +47,82 @@ <h2>How to play?</h2>
>Connect Four article on Wikipedia</a
>.
</p>
<h2>Choose playing mode:</h2>
<form method="dialog" class="mode-chooser-form">
<ul class="mode-chooser-list">
<li>
<label
><input
class="mode-chooser-input"
type="radio"
name="mode"
value="offline-ai"
checked
autofocus
/>
Offline: Human player vs AI player</label
>
</li>
<li>
<label
><input
class="mode-chooser-input"
type="radio"
name="mode"
value="offline-human"
/>
Offline: Human player vs human player</label
>
</li>
<li>
<label
><input
class="mode-chooser-input"
type="radio"
name="mode"
value="ai-vs-ai"
/>
Spectator: AI player vs AI player</label
>
</li>
<li>
<label
><input
class="mode-chooser-input"
type="radio"
name="mode"
value="online-human"
/>
Online: Human player vs human player</label
>
</li>
</ul>
<button class="mode-chooser-submit" type="submit" value="confirm">
<h2>Game Settings</h2>
<form method="dialog" class="game-settings-form">
<div class="game-settings-form-section">
Playing Mode:
<ul class="game-settings-mode-list">
<li>
<label
><input
class="game-settings-mode-input"
type="radio"
name="mode"
value="offline-ai"
checked
autofocus
/>
Offline: Human player vs AI player</label
>
</li>
<li>
<label
><input
class="game-settings-mode-input"
type="radio"
name="mode"
value="offline-human"
/>
Offline: Human player vs human player</label
>
</li>
<li>
<label
><input
class="game-settings-mode-input"
type="radio"
name="mode"
value="ai-vs-ai"
/>
Spectator: AI player vs AI player</label
>
</li>
<li>
<label
><input
class="game-settings-mode-input"
type="radio"
name="mode"
value="online-human"
/>
Online: Human player vs human player</label
>
</li>
</ul>
</div>
<div class="game-settings-form-section game-settings-player-1-name">
<label class="game-settings-player-1-name-label" for="player-1-name">
Player's name:
</label>
<input
type="text"
class="game-settings-player-1-name-input"
value="Player 1"
name="player-1-name"
/>
</div>
<div class="game-settings-form-section game-settings-player-2-name">
<label class="game-settings-player-2-name-label" for="player-2-name">
Player's name:
</label>
<input
type="text"
class="game-settings-player-2-name-input"
value="Player 2"
name="player-2-name"
/>
</div>
<button class="game-settings-submit" type="submit" value="confirm">
Start game
</button>
</form>
Expand Down
113 changes: 97 additions & 16 deletions browser/src/app.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,10 @@ document.addEventListener('DOMContentLoaded', () => {
console.error('Canvas element not found')
return
}
const modeDOM = document.querySelector('.mode-chooser') as HTMLDialogElement
if (!modeDOM) {
const initScreenDOM = document.querySelector(
'.init-screen',
) as HTMLDialogElement
if (!initScreenDOM) {
console.error('Mode element not found ')
return
}
Expand All @@ -20,8 +22,32 @@ document.addEventListener('DOMContentLoaded', () => {
const searchParams = new URLSearchParams(location.search)
const connectionMatchId = searchParams.get('matchId')
const backToModeSelector = document.querySelector(
'.statusbox-button-back'
'.statusbox-button-back',
) as HTMLDivElement

const settingsForm = document.querySelector(
'.game-settings-form',
) as HTMLFormElement
const player1NameSection = document.querySelector(
'.game-settings-player-1-name',
) as HTMLDivElement
const player2NameSection = document.querySelector(
'.game-settings-player-2-name',
) as HTMLDivElement

const player1NameLabel = player1NameSection.querySelector(
'.game-settings-player-1-name-label',
) as HTMLLabelElement
const player2NameLabel = player2NameSection.querySelector(
'.game-settings-player-2-name-label',
) as HTMLLabelElement
const player1NameInput = player1NameSection.querySelector(
'.game-settings-player-1-name-input',
) as HTMLInputElement
const player2NameInput = player2NameSection.querySelector(
'.game-settings-player-2-name-input',
) as HTMLInputElement

let currentGameHandler:
| {
end: () => void
Expand All @@ -30,38 +56,93 @@ document.addEventListener('DOMContentLoaded', () => {
| null = null

if (!!connectionMatchId) {
currentGameHandler = Game.initGameOnline2p()
console.log('settingsForm', settingsForm)

for (let el of settingsForm.querySelectorAll('.game-settings-mode-input')) {
const checkboxEl = el as HTMLInputElement
checkboxEl.disabled = true
if (checkboxEl.value === 'online-human') {
checkboxEl.checked = true
} else {
checkboxEl.checked = false
}
}

player2NameLabel.textContent = `Your name:`
player1NameInput.disabled = true
player2NameInput.disabled = false
player1NameSection.classList.add('hidden')
player2NameSection.classList.remove('hidden')
backToModeSelector.classList.add('hidden')
initScreenDOM.showModal()
return
}
backToModeSelector?.classList.add('hidden')
modeDOM.showModal()

const modeChooser = document.querySelector(
'.mode-chooser-form'
) as HTMLFormElement
initScreenDOM.showModal()

if (!modeChooser) {
console.error('.mode-chooser-form not found ')
if (!settingsForm) {
console.error('.game-settings-form not found ')
return
}

let chosenMode: string = 'offline-ai'
renderForm()

backToModeSelector?.addEventListener('click', () => {
if (currentGameHandler && currentGameHandler.end) {
currentGameHandler.end()
}
backToModeSelector?.classList.add('hidden')
modeDOM.showModal()
initScreenDOM.showModal()
})

modeDOM.addEventListener('cancel', (ev) => {
initScreenDOM.addEventListener('cancel', (ev) => {
ev.preventDefault()
})

modeDOM.addEventListener('close', (ev) => {
const formData = new FormData(modeChooser)
initScreenDOM.addEventListener('close', (ev) => {
const formData = new FormData(settingsForm)
initGame(formData.get('mode') as string)
})

settingsForm.addEventListener('input', (ev) => {
const formData = new FormData(settingsForm)
chosenMode = formData.get('mode') as string
renderForm()
})

function renderForm() {
if (chosenMode === 'offline-human') {
player1NameLabel.textContent = `First player's name:`
player2NameLabel.textContent = `Second player's name:`
player1NameSection.classList.remove('hidden')
player2NameSection.classList.remove('hidden')
player1NameInput.disabled = false
player2NameInput.disabled = false
} else if (chosenMode === 'offline-ai') {
player1NameLabel.textContent = `Player's name:`
player2NameLabel.textContent = `Player's name:`
player1NameSection.classList.remove('hidden')
player2NameSection.classList.add('hidden')
player1NameInput.disabled = false
player2NameInput.disabled = true
} else if (chosenMode === 'online-human') {
player1NameLabel.textContent = `Your name:`
player2NameLabel.textContent = `Other player's name:`
player1NameSection.classList.remove('hidden')
player2NameSection.classList.add('hidden')
player1NameInput.disabled = false
player2NameInput.disabled = true
} else if (chosenMode === 'ai-vs-ai') {
player1NameLabel.textContent = `Player's name:`
player2NameLabel.textContent = `Player's name:`
player1NameSection.classList.add('hidden')
player2NameSection.classList.add('hidden')
player1NameInput.disabled = true
player2NameInput.disabled = true
}
}

function initGame(chosenMode: string | null) {
console.log('initGame chosenMode:', chosenMode)
backToModeSelector?.classList.remove('hidden')
Expand All @@ -70,7 +151,7 @@ document.addEventListener('DOMContentLoaded', () => {
} else if (chosenMode === 'offline-ai') {
currentGameHandler = Game.initGameLocalAi()
} else if (chosenMode === 'online-human') {
currentGameHandler = Game.initGameOnline2p()
currentGameHandler = Game.initGameOnline2p("meow") // TODO: read from form
} else if (chosenMode === 'ai-vs-ai') {
currentGameHandler = Game.initGameAiVsAi()
} else {
Expand Down
Loading

0 comments on commit b8b3216

Please sign in to comment.