diff --git a/src/index.ts b/src/index.ts index 3182c54..18b3081 100644 --- a/src/index.ts +++ b/src/index.ts @@ -23,27 +23,40 @@ const createHowToPlayButton = () => { howToPlayButton.addEventListener("click", () => { showModal(infoModal, "flex"); }); - hideModal(infoModal); + hideModal(infoModal); }; + const activateStartButton = () => { - const player1NameInput = document.querySelector('#enter-player1-name') as HTMLInputElement; - const player2NameInput = document.querySelector('#enter-player2-name') as HTMLInputElement; - const startButton = document.querySelector("#start-game-button") as HTMLDivElement; - player1NameInput.addEventListener("keyup", () => { - activateStart(player1NameInput, player2NameInput, startButton) - }) - player2NameInput.addEventListener("keyup", () => { - activateStart(player1NameInput, player2NameInput, startButton) - }) + const player1NameInput = document.querySelector('#enter-player1-name') as HTMLInputElement; + const player2NameInput = document.querySelector('#enter-player2-name') as HTMLInputElement; + const startButton = document.querySelector("#start-game-button") as HTMLDivElement; + player1NameInput.addEventListener("keyup", () => { + activateStart(player1NameInput, player2NameInput, startButton) + }) + player2NameInput.addEventListener("keyup", () => { + activateStart(player1NameInput, player2NameInput, startButton) + }) }; +const renderChoosePokemonScreen = (appDiv: HTMLDivElement) => { + const playButton = document.querySelector( + "#start-game-button" + ) as HTMLDivElement; + playButton?.addEventListener("click", () => { + const choosePokemonScreen = document.querySelector( + "#choose-page-template" + ) as HTMLTemplateElement; + appDiv.innerHTML = choosePokemonScreen.innerHTML; + }); +} + const renderApp = () => { const app = document.querySelector("#app") as HTMLDivElement; renderStartingPage(app); renderHowToPlayModal(app); activateStartButton(); createHowToPlayButton(); - + renderChoosePokemonScreen(app); }; setTimeout(renderApp, 2000);