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