Add basic backend logic and frontend templates/css

This commit is contained in:
Joey Yakimowich-Payne 2022-09-18 14:47:07 -06:00
commit 8864bacd1e
8 changed files with 324 additions and 22 deletions

27
html/error.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<title>Error | 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">
<article class="message is-danger">
<div class="message-header">
<p>Error</p>
</div>
<div class="message-body">
{{ message }}
</div>
</article>
</div>
</div>
</div>
</section>
<script type="text/javascript">
</script>
</body>
</html>

14
html/game.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<title>Rock Paper Scissors</title>
</head>
<link href="{{ url_for('static', path='/css/bulma.min.css') }}" rel="stylesheet">
<body>
<div>
Hello {{ game.player1.name }} and {{ game.player2.name }}
</div>
<script type="text/javascript">
</script>
</body>
</html>

69
html/index.html Normal file
View file

@ -0,0 +1,69 @@
<!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">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">Resume Game!</button>
</div>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript">
</script>
</body>
</html>