dorian
/
godot-html-js-int-demo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update the shell to handle names and scores via local storage.
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Dorian Pula 2020-12-17 10:22:22 -05:00
parent 4b4cacdd82
commit da40b38fd2
1 changed files with 29 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
fixed-size.html
View File

@ -392,9 +392,25 @@ $GODOT_HEAD_INCLUDE
<!-- Start of Custom Game block --> <!-- Start of Custom Game block -->
<script type="application/javascript"> <script type="application/javascript">
const setPlayerName = () => { const setPlayerName = () => {
const playerName = document.querySelector("#gameLauncher input[name=playerName]"); const nameInput = document.querySelector("#gameLauncher input[name=playerName]");
window.game = {playerName: playerName.text}; const store = window.localStorage;
} store.setItem("playerName", nameInput.value);
}
const getPlayerName = () => {
const store = window.localStorage;
return store.getItem("playerName") || "Unknown Player"
}
const setPlayerScore = (score) => {
const store = window.localStorage;
store.setItem("playerScore", score);
}
const getPlayerScore = () => {
const store = window.localStorage;
return store.getItem("playerScore") || "0"
}
const showGame = () => { const showGame = () => {
const gameLauncher = document.querySelector("#gameLauncher"); const gameLauncher = document.querySelector("#gameLauncher");
@ -414,9 +430,10 @@ $GODOT_HEAD_INCLUDE
}); });
}) })
const finishGame = (playerName, score) => { const finishGame = (score) => {
showScoresAfterGameEnd(); showScoresAfterGameEnd();
updateScores(playerName, score); setPlayerScore(score);
updateScoreMessage();
} }
const showScoresAfterGameEnd = () => { const showScoresAfterGameEnd = () => {
@ -426,10 +443,11 @@ $GODOT_HEAD_INCLUDE
score_list.className = "game_frame"; score_list.className = "game_frame";
} }
const updateScores = (playerName, score) => { const updateScoreMessage = () => {
// Update the score const playerName = getPlayerName();
const score = getPlayerScore();
const title = document.querySelector('#scoreMessage'); const title = document.querySelector('#scoreMessage');
title.textContent = `${playerName}'s score is ${score}!`; title.innerHTML = `Congratulations ${playerName}!<br /> Your score is ${score}!`;
} }
</script> </script>
@ -443,7 +461,7 @@ $GODOT_HEAD_INCLUDE
.game_frame { .game_frame {
background-color: #383838; background-color: #383838;
color: #f0f0f0; color: #f0f0f0;
width: 85%; width: 66%;
margin: auto; margin: auto;
margin-top: 20px; margin-top: 20px;
padding: 25px; padding: 25px;
@ -461,12 +479,7 @@ $GODOT_HEAD_INCLUDE
</div> </div>
<div id="scoreList" class="game_frame hidden"> <div id="scoreList" class="game_frame hidden">
<h1>Click to Victory High Scores</h1> <h1 id="scoreMessage">Your Score Here</h2>
<h2 id="scoreMessage">Your Score Here</h2>
<h2>High Scores</h2>
<ul>
<li>Player: 1000</li>
</ul>
</div> </div>
<!-- End of Custom Game block --> <!-- End of Custom Game block -->
</body> </body>