Fix bug when entering nInput
[rpsls-bot.git] / index.html
1 <!doctype html>
2 <html lang="en">
3
4 <head>
5 <meta charset="utf-8">
6 <title>Rock Paper Scissors Lizard Spock</title>
7 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
8 <link rel="stylesheet" href="css/rpsls.css">
9 </head>
10
11 <body>
12 <div class="container" id="rpsls">
13 <div class="row">
14 <div class="col s12">
15 <form class="center">
16 <div class="input-field inline">
17 <input id="nInput" type="number" v-model.number="nInput" @change="reinitialize()">
18 <label for="nInput">Number of inputs</label>
19 </div>
20 <span class="leftSpacing">
21 <input id="drawIsLost" type="checkbox" v-model="drawIsLost">
22 <label for="drawIsLost"> Draw count as loss ?</label>
23 </span>
24 </form>
25 </div>
26 </div>
27 <div class="row topSpacing">
28 <img v-for="(symb,i) in symbols" class="image" :class="{compChoice:compMove==i,humanChoice:humanMove==i}" :src="imgSource(symb)" @click="play(i)">
29 <p class="blue-text center message topSpacing" v-if="humanMove>=0 && compMove>=0">{{ symbols[humanMove] + " " + messages[humanMove][compMove] + " " + symbols[compMove] }}</p>
30 <p class="center scoreMsg topSpacing">
31 <span>Score: </span>
32 <span class="score">{{ gameState }}</span>
33 </p>
34 </div>
35 </div>
36 <footer class="center grey-text">
37 <p>Images were found on the web; if they should be removed, let me know: <a href="https://github.com/yagu0/rpsls">yagu0 on github</a></p>
38 </footer>
39 </body>
40
41 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
42 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
43 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
44 <script src="js/rpsls.js"></script>