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