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

Get basic setup working for demo.
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Dorian 2020-12-17 00:13:56 -05:00
parent c4007cd873
commit 4b4cacdd82
1 changed files with 59 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
fixed-size.html
View File

@ -195,7 +195,8 @@
$GODOT_HEAD_INCLUDE $GODOT_HEAD_INCLUDE
</head> </head>
<body> <body>
<div id="game_box"> <div id="game_box" class="game_frame hidden">
<h1>Click to Victory!</h1>
<div id="container"> <div id="container">
<canvas id="canvas" width="640" height="480"> <canvas id="canvas" width="640" height="480">
HTML5 canvas appears to be unsupported in the current browser.<br /> HTML5 canvas appears to be unsupported in the current browser.<br />
@ -390,19 +391,44 @@ $GODOT_HEAD_INCLUDE
<!-- Start of Custom Game block --> <!-- Start of Custom Game block -->
<script type="application/javascript"> <script type="application/javascript">
const get_user_name = () => { const setPlayerName = () => {
const current_url = new URL(document.URL); const playerName = document.querySelector("#gameLauncher input[name=playerName]");
return current_url.searchParams.get('FirstName') || document.body.dataset.memberName; window.game = {playerName: playerName.text};
} }
const hide_game_show_score_list = (playerName, score) => { const showGame = () => {
const gameLauncher = document.querySelector("#gameLauncher");
gameLauncher.remove();
const gameFrame = document.querySelector("#game_box");
gameFrame.className = "game_frame";
}
window.addEventListener("load", () => {
// Prevent the game launcher form from redirect on submit.
const launcherForm = document.querySelector("#gameLauncher form");
launcherForm.addEventListener("submit", (event) => {
event.preventDefault();
setPlayerName();
showGame();
});
})
const finishGame = (playerName, score) => {
showScoresAfterGameEnd();
updateScores(playerName, score);
}
const showScoresAfterGameEnd = () => {
const game_box = document.querySelector('#game_box'); const game_box = document.querySelector('#game_box');
game_box.remove(); game_box.remove();
const score_list = document.querySelector('#score_list'); const score_list = document.querySelector('#scoreList');
score_list.className = ""; score_list.className = "game_frame";
}
const updateScores = (playerName, score) => {
// Update the score // Update the score
const title = document.querySelector('#score_title'); const title = document.querySelector('#scoreMessage');
title.textContent = `${playerName}'s score is ${score}!`; title.textContent = `${playerName}'s score is ${score}!`;
} }
@ -413,10 +439,30 @@ $GODOT_HEAD_INCLUDE
visibility: collapse; visibility: collapse;
height: 0px; height: 0px;
} }
.game_frame {
background-color: #383838;
color: #f0f0f0;
width: 85%;
margin: auto;
margin-top: 20px;
padding: 25px;
border-radius: 25px;
}
</style> </style>
<div id="score_list" class=""> <div id="gameLauncher" class="game_frame">
<h1 id="score_title">Buy Points and Redeem Your Bonus!</h1> <h1>Click to Victory!</h1>
<form>
<label for="playerName">Player Name</label>
<input name="playerName" type="text" value="Player 1" />
<input type="submit" value="Start the Game!" />
</form>
</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> <h2>High Scores</h2>
<ul> <ul>
<li>Player: 1000</li> <li>Player: 1000</li>