public/javascripts/components/rules.js

   1 // Load rules on variant page
   2 Vue.component('my-rules', {
   3     props: ["settings"],
   4     data: function() {
   5         return {
   6             content: "",
   7             display: "rules",
   8             mode: "computer",
   9             subMode: "", //'auto' for game CPU vs CPU
  10             gameInProgress: false,
  11             mycolor: "w",
  12             allowMovelist: true,
  13             fen: "",
  14         };
  15     },
  16     template: `
  17         <div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
  18             <div class="button-group">
  19                 <button @click="display='rules'">
  20                     Read the rules
  21                 </button>
  22                 <button v-show="!gameInProgress" @click="watchComputerGame">
  23                     Observe a sample game
  24                 </button>
  25                 <button v-show="!gameInProgress" @click="playAgainstComputer">
  26                     Beat the computer!
  27                 </button>
  28                 <button v-show="gameInProgress" @click="stopGame">
  29                     Stop game
  30                 </button>
  31             </div>
  32             <div v-show="display=='rules'" v-html="content" class="section-content"></div>
  33             <my-game v-show="display=='computer'" :mycolor="mycolor" :settings="settings"
  34                 :allow-movelist="allowMovelist" :mode="mode" :sub-mode="subMode" :fen="fen"
  35                 @computer-think="gameInProgress=false" @game-over="stopGame">
  36             </my-game>
  37         </div>
  38     `,
  39     mounted: function() {
  40         // AJAX request to get rules content (plain text, HTML)
  41         ajax("/rules/" + variant.name, "GET", response => {
  42             let replaceByDiag = (match, p1, p2) => {
  43                 const args = this.parseFen(p2);
  44                 return getDiagram(args);
  45             };
  46             this.content = response.replace(/(fen:)([^:]*):/g, replaceByDiag);
  47         });
  48     },
  49     methods: {
  50         parseFen(fen) {
  51             const fenParts = fen.split(" ");
  52             return {
  53                 position: fenParts[0],
  54                 marks: fenParts[1],
  55                 orientation: fenParts[2],
  56                 shadow: fenParts[3],
  57             };
  58         },
  59         startGame: function() {
  60             if (this.gameInProgress)
  61                 return;
  62             this.gameInProgress = true;
  63             this.mode = "computer";
  64             this.display = "computer";
  65             this.fen = V.GenRandInitFen();
  66         },
  67         stopGame: function() {
  68             this.gameInProgress = false;
  69             this.mode = "analyze";
  70         },
  71         playAgainstComputer: function() {
  72             this.subMode = "";
  73             this.startGame();
  74         },
  75         watchComputerGame: function() {
  76             this.subMode = "auto";
  77             this.startGame();
  78         },
  79     },
  80 })