Separate client and server codes. Keep everything in one git repo for simplicity

[vchess.git] / client / client_OLD / javascripts / components / rules.js

diff --git a/client/client_OLD/javascripts/components/rules.js b/client/client_OLD/javascripts/components/rules.js
new file mode 100644 (file)
index 0000000..0f27d53
--- /dev/null
+++ b/client/client_OLD/javascripts/components/rules.js
@@ -0,0 +1,80 @@
+// Load rules on variant page
+Vue.component('my-rules', {
+       props: ["settings"],
+       data: function() {
+               return {
+                       content: "",
+                       display: "rules",
+                       mode: "computer",
+                       subMode: "", //'auto' for game CPU vs CPU
+                       gameInProgress: false,
+                       mycolor: "w",
+                       allowMovelist: true,
+                       fen: "",
+               };
+       },
+       template: `
+               <div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
+                       <div class="button-group">
+                               <button @click="display='rules'">
+                                       Read the rules
+                               </button>
+                               <button v-show="!gameInProgress" @click="watchComputerGame">
+                                       Observe a sample game
+                               </button>
+                               <button v-show="!gameInProgress" @click="playAgainstComputer">
+                                       Beat the computer!
+                               </button>
+                               <button v-show="gameInProgress" @click="stopGame">
+                                       Stop game
+                               </button>
+                       </div>
+                       <div v-show="display=='rules'" v-html="content" class="section-content"></div>
+                       <my-game v-show="display=='computer'" :mycolor="mycolor" :settings="settings"
+                               :allow-movelist="allowMovelist" :mode="mode" :sub-mode="subMode" :fen="fen"
+                               @computer-think="gameInProgress=false" @game-over="stopGame">
+                       </my-game>
+               </div>
+       `,
+       mounted: function() {
+               // AJAX request to get rules content (plain text, HTML)
+               ajax("/rules/" + variant.name, "GET", response => {
+                       let replaceByDiag = (match, p1, p2) => {
+                               const args = this.parseFen(p2);
+                               return getDiagram(args);
+                       };
+                       this.content = response.replace(/(fen:)([^:]*):/g, replaceByDiag);
+               });
+       },
+       methods: {
+               parseFen(fen) {
+                       const fenParts = fen.split(" ");
+                       return {
+                               position: fenParts[0],
+                               marks: fenParts[1],
+                               orientation: fenParts[2],
+                               shadow: fenParts[3],
+                       };
+               },
+               startGame: function() {
+                       if (this.gameInProgress)
+                               return;
+                       this.gameInProgress = true;
+                       this.mode = "computer";
+                       this.display = "computer";
+                       this.fen = V.GenRandInitFen();
+               },
+               stopGame: function() {
+                       this.gameInProgress = false;
+                       this.mode = "analyze";
+               },
+               playAgainstComputer: function() {
+                       this.subMode = "";
+                       this.startGame();
+               },
+               watchComputerGame: function() {
+                       this.subMode = "auto";
+                       this.startGame();
+               },
+       },
+})