116 lines
4.7 KiB
HTML
116 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Rock Paper Scissors</title>
|
|
</head>
|
|
<link href="{{ url_for('static', path='/css/bulma.min.css') }}" rel="stylesheet">
|
|
<body>
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="columns is-vcentered">
|
|
<div class="column">
|
|
<div class="field">
|
|
<label class="label">Player 1 Name</label>
|
|
<div class="control">
|
|
<input id="player1-name" class="input" type="text" placeholder="Name">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label">Player 2 Name (Optional)</label>
|
|
<div class="control">
|
|
<input id="player2-name" class="input" type="text" placeholder="Name">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="control">
|
|
<button id="play-btn" class="button is-link" onclick="playGame()">Play Game!</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="columns is-vcentered">
|
|
<div class="column">
|
|
<div class="field is-horizontal is-justify-content-center">
|
|
<div class="field-body">
|
|
<div class="field-label">
|
|
<label class="label">OR</label>
|
|
</div>
|
|
<div class="field has-addons">
|
|
<div class="control">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="columns is-vcentered">
|
|
<div class="column">
|
|
<div class="field">
|
|
<label class="label">Game Code</label>
|
|
<div class="control">
|
|
<input id="game-code" class="input" type="text" placeholder="Game Code: JDPB">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="control">
|
|
<button id="resume-btn" class="button is-link" onclick="resumeGame()">Resume Game!</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script type="text/javascript">
|
|
function playGame() {
|
|
let p1Name = document.getElementById("player1-name").value;
|
|
let p2Name = document.getElementById("player2-name").value;
|
|
let data = {}
|
|
if (typeof p1Name === 'string' && p1Name.trim().length === 0){
|
|
alert("Player 1 name must be filled!");
|
|
return;
|
|
}
|
|
|
|
if (typeof p2Name === 'string' && p2Name.trim().length === 0){
|
|
data = {
|
|
player1_name: p1Name
|
|
};
|
|
}
|
|
else {
|
|
data = {
|
|
player1_name: p1Name,
|
|
player2_name: p2Name
|
|
};
|
|
}
|
|
|
|
fetch("{{url_for('start_game')}}", {
|
|
method: 'POST', // or 'PUT'
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(data),
|
|
})
|
|
.then((response) => response.json())
|
|
.then(data => {
|
|
window.location.href = data.game_url;
|
|
})
|
|
.catch(function(err) {
|
|
console.info(err + " url: " + url);
|
|
});
|
|
|
|
}
|
|
function resumeGame() {
|
|
let gameCode = document.getElementById("game-code").value;
|
|
if (typeof gameCode === 'string' && gameCode.trim().length === 0){
|
|
// handle error
|
|
alert("Game code must be filled!");
|
|
return;
|
|
}
|
|
console.log(gameCode);
|
|
window.location.href = "{{url_for('game')}}" + "?game_code="+ gameCode;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|