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 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>