Better hints on mousehover
[rpsls-bot.git] / index.html
index 7b2639b..c31bbd9 100644 (file)
@@ -9,17 +9,17 @@
        </head>
 
        <body>
-               <div class="container" id="rpsls">
+               <div class="container center" id="rpsls">
                        <div class="row">
                                <div class="col s12">
                                        <form class="center">
-                                               <div class="input-field inline">
-                                                       <input id="nInput" type="number" v-model="nInput" @change="reinitialize()">
-                                                       <label for="nInput">Number of inputs</label>
+                                               <div class="input-field inline" title="The number of human moves remembered by the program. Higher means better performances, generally">
+                                                       <input id="nInput" type="number" v-model.number="nInput" @change="reinitialize()">
+                                                       <label for="nInput">Memory</label>
                                                </div>
-                                               <span class="leftSpacing">
+                                               <span class="leftSpacing" title="If activated, the bot consider a draw as a lost game, and therefore tries to win even harder">
                                                        <input id="drawIsLost" type="checkbox" v-model="drawIsLost">
-                                                       <label for="drawIsLost"> Draw count as loss ?</label>
+                                                       <label for="drawIsLost">Winner bot</label>
                                                </span>
                                        </form>
                                </div>
                                        <span class="score">{{ gameState }}</span>
                                </p>
                        </div>
+                       <div id="explanations" class="row topSpacing">
+                               <hr/>
+                               <p>
+                                       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>.
+                               </p>
+                               <img class="block" src="img/rock_paper_scissors_lizard_spock.gif">
+                               <p>
+                                       Your opponent is a bot implementing an algorithm described <a href="https://www.his.se/PageFiles/8158/Henrik_Engstrom.pdf">here</a>.
+                               </p>
+                               <hr/>
+                               <p>
+                                       <span style="color:purple">Tips</span> to improve computer strength:<br/>
+                                       [*] check the square "Winner bot";<br/>
+                                       [*] augment computer memory.
+                               </p>
+                               <p>Note also that bot performances are expected to get better over time: play a lot!</p>
+                       </div>
                </div>
                <footer class="center grey-text">
-                       <p>Images were found on the web; if they should be removed, let me know: yagu0 on github</p>
+                       <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>
                </footer>
        </body>