Better hints on mousehover
[rpsls-bot.git] / index.html
... / ...
CommitLineData
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 center" id="rpsls">
13 <div class="row">
14 <div class="col s12">
15 <form class="center">
16 <div class="input-field inline" title="The number of human moves remembered by the program. Higher means better performances, generally">
17 <input id="nInput" type="number" v-model.number="nInput" @change="reinitialize()">
18 <label for="nInput">Memory</label>
19 </div>
20 <span class="leftSpacing" title="If activated, the bot consider a draw as a lost game, and therefore tries to win even harder">
21 <input id="drawIsLost" type="checkbox" v-model="drawIsLost">
22 <label for="drawIsLost">Winner bot</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 id="explanations" class="row topSpacing">
36 <hr/>
37 <p>
38 Your play Rock-Paper-Scissors-Lizard-Spock as described by Sheldon in TBBT, season 2 <a href="http://www.imdb.com/title/tt1256039/">episode 8</a>.
39 </p>
40 <img class="block" src="img/rock_paper_scissors_lizard_spock.gif">
41 <p>
42 Your opponent is a bot implementing an algorithm described <a href="https://www.his.se/PageFiles/8158/Henrik_Engstrom.pdf">here</a>.
43 </p>
44 <hr/>
45 <p>
46 <span style="color:purple">Tips</span> to improve computer strength:<br/>
47 [*] check the square "Winner bot";<br/>
48 [*] augment computer memory.
49 </p>
50 <p>Note also that bot performances are expected to get better over time: play a lot!</p>
51 </div>
52 </div>
53 <footer class="center grey-text">
54 <p>Images were found on the web; if they should be removed, let me know <a href="https://github.com/yagu0/rpsls/issues">on github</a></p>
55 </footer>
56 </body>
57
58<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
59<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
60<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
61<script src="js/rpsls.js"></script>