mirror of
https://github.com/Aviortheking/Puissance4.git
synced 2025-04-22 19:02:13 +00:00
147 lines
3.7 KiB
TypeScript
147 lines
3.7 KiB
TypeScript
import './style.css'
|
|
|
|
import Game from './Game'
|
|
import { DOMElement } from '@dzeio/dom-manager'
|
|
|
|
/**
|
|
* Mise en place de l'environnement de jeu
|
|
*/
|
|
const table = document.querySelector('table')
|
|
|
|
if (!table) {
|
|
throw new Error('Table not found')
|
|
}
|
|
|
|
const game = new Game(table)
|
|
game.playerColor = 'yellow'
|
|
|
|
/**
|
|
* Récupération des éléments nécéssaires
|
|
*/
|
|
|
|
const btnWrapper = DOMElement.get('.chooseSetup')
|
|
const multiplayerOptions = DOMElement.get('.playerOption')
|
|
const input = DOMElement.get<HTMLInputElement>('#sessionID')
|
|
const giveUpWrapper = DOMElement.get('.giveUp')
|
|
const btnJoinGame = DOMElement.get('.joinSession')
|
|
const btnCreateGame = DOMElement.get('.createSession')
|
|
const btnBackInMenu = DOMElement.get('#backInMenu')
|
|
const userMessage = DOMElement.get('#usermessage')
|
|
const messageVictoire = DOMElement.get('.victoire')
|
|
const continueBtn = DOMElement.get('.continueBtn')
|
|
|
|
|
|
/**
|
|
* Comportement du DOM lors du reset de la partie
|
|
*/
|
|
game.onReset = () => {
|
|
btnWrapper?.style('display', '')
|
|
multiplayerOptions?.style('display', 'none')
|
|
giveUpWrapper?.style('display', 'none')
|
|
messageVictoire?.text('')
|
|
continueBtn?.style('display', 'none')
|
|
}
|
|
|
|
/**
|
|
* Comportement du DOM lors d'une victoire
|
|
*/
|
|
game.onWin = (winner) => {
|
|
console.log(winner)
|
|
if (!winner) {
|
|
messageVictoire?.text('Égalité !')
|
|
} else {
|
|
messageVictoire?.text(`Le Joueur ${winner} à gagné !`)
|
|
}
|
|
continueBtn?.style('display', '')
|
|
}
|
|
|
|
/**
|
|
* Comportement du DOM lors du lancement d'une partie
|
|
*/
|
|
game.onMultiStart = () => {
|
|
giveUpWrapper?.style('display', '')
|
|
multiplayerOptions?.style('display', 'none')
|
|
userMessage?.style('display', 'none')
|
|
}
|
|
/**
|
|
* Comportement du DOM et du jeu lorsqu'un utilisateur rejoins une partie
|
|
*/
|
|
btnJoinGame?.on('click', () => {
|
|
const numberSession = input?.item.valueAsNumber || 0
|
|
game.joinMultiplayerGame(numberSession)
|
|
})
|
|
|
|
/**
|
|
* Comportement du DOM et du jeu lorsqu'un utilisateur créer une partie
|
|
*/
|
|
|
|
btnCreateGame?.on('click', async () => {
|
|
const id = await game.createMultiplayerGame()
|
|
if (!input) {
|
|
return
|
|
}
|
|
input.item.valueAsNumber = id
|
|
input.attr('readOnly', true)
|
|
userMessage?.style('display', '')
|
|
btnCreateGame?.style('display', 'none')
|
|
btnJoinGame?.style('display', 'none')
|
|
|
|
})
|
|
/**
|
|
* Comportement du DOM et du jeu lorsqu'un utilisateur relance une partie
|
|
*/
|
|
|
|
continueBtn?.on('click', () => {
|
|
game.continueGame()
|
|
messageVictoire?.text('')
|
|
continueBtn?.style('display', 'none')
|
|
})
|
|
|
|
/**
|
|
* Comportement du DOMlorsqu'un utilisateur retourne sur le menu
|
|
*/
|
|
DOMElement.get('#backInMenu', multiplayerOptions)?.on('click', () => {
|
|
btnWrapper?.style('display', 'flex')
|
|
btnBackInMenu?.style('display', 'none')
|
|
btnCreateGame?.style('display', 'flex')
|
|
userMessage?.style('display', 'none')
|
|
|
|
multiplayerOptions?.style('display', 'none')
|
|
game.cleanMultiplayer()
|
|
})
|
|
/**
|
|
* Comportement du DOM et du jeu lorsqu'un utilisateur lance une partie contre l'IA
|
|
*/
|
|
|
|
DOMElement.get('.vsAI', btnWrapper)?.on('click', () => {
|
|
game.startSinglePlayer()
|
|
btnWrapper?.style('display', 'none')
|
|
giveUpWrapper?.style('display', '')
|
|
userMessage?.style('display', 'none')
|
|
})
|
|
|
|
/**
|
|
* Comportement du DOM et du jeu lorsqu'un utilisateur souhaite lancer une partie en multijoueur
|
|
*/
|
|
DOMElement.get('.vsPlayer', btnWrapper)?.on('click', () => {
|
|
multiplayerOptions?.style('display', 'flex')
|
|
btnJoinGame?.style('display', 'flex')
|
|
|
|
game.setupMultiplayer()
|
|
btnWrapper?.style('display', 'none')
|
|
multiplayerOptions?.style('display', '')
|
|
if (input?.item) {
|
|
input.item.value = ''
|
|
}
|
|
btnBackInMenu?.style('display', 'flex')
|
|
|
|
})
|
|
/**
|
|
* Comportement du DOM et du jeu lorsqu'un utilisateur recommence une partie
|
|
*/
|
|
const restartBtn = DOMElement.get('.restartBtn')?.on('click', () => {
|
|
game.resetGame()
|
|
})
|
|
|
|
window.game = game
|