X-Git-Url: https://git.auder.net/js/rpsls.js?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FProblems.vue;h=7f8632da5e58879a0837dc2cfa07b428f0788f45;hb=e20b2a442f49e4109b5658c482133b871e48a41b;hp=cfc0637eae55458546c86ce35a3e18201b9e956b;hpb=84fc0f02d3d399af66c40b3e9994f67b415ffd0e;p=vchess.git

diff --git a/client/src/views/Problems.vue b/client/src/views/Problems.vue
index cfc0637e..7f8632da 100644
--- a/client/src/views/Problems.vue
+++ b/client/src/views/Problems.vue
@@ -1,5 +1,15 @@
 <template lang="pug">
 main
+  input#modalRules.modal(type="checkbox")
+  div#rulesDiv(
+    role="dialog"
+    data-checkbox="modalRules"
+  )
+    .card
+      label.modal-close(for="modalRules")
+      a#variantNameInProblems(:href="'/#/variants/'+game.vname")
+        | {{ game.vname }}
+      div(v-html="rulesContent")
   input#modalNewprob.modal(
     type="checkbox"
     @change="fenFocusIfOpened($event)"
@@ -18,6 +28,7 @@ main
         )
           option(
             v-for="v in [emptyVar].concat(st.variants)"
+            v-if="!v.noProblems"
             :value="v.id"
             :selected="curproblem.vid==v.id"
           )
@@ -47,15 +58,15 @@ main
   .row(v-if="showOne")
     .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
       #topPage
-        .button-group(v-if="st.user.id == curproblem.uid")
+        .button-group(v-if="canIedit(curproblem.uid)")
           button(@click="editProblem(curproblem)") {{ st.tr["Edit"] }}
           button(@click="deleteProblem(curproblem)") {{ st.tr["Delete"] }}
         span.vname {{ curproblem.vname }}
         span.uname ({{ curproblem.uname }})
         button.marginleft(@click="backToList()") {{ st.tr["Back to list"] }}
-        button.nomargin(@click="gotoPrevNext($event,curproblem,1)")
-          | {{ st.tr["Previous"] }}
-        button.nomargin(@click="gotoPrevNext($event,curproblem,-1)")
+        button.nomargin(@click="gotoPrevNext(curproblem,1)")
+          | {{ st.tr["Previous_p"] }}
+        button.nomargin(@click="gotoPrevNext(curproblem,-1)")
           | {{ st.tr["Next_p"] }}
       p.oneInstructions.clickable(
         v-html="parseHtml(curproblem.instruction)"
@@ -81,6 +92,7 @@ main
         select#selectVariant(v-model="selectedVar")
           option(
             v-for="v in [emptyVar].concat(st.variants)"
+            v-if="!v.noProblems"
             :value="v.id"
           )
             | {{ v.name }}
@@ -113,7 +125,8 @@ main
 import { store } from "@/store";
 import { ajax } from "@/utils/ajax";
 import { checkProblem } from "@/data/problemCheck";
-import { getDiagram } from "@/utils/printDiagram";
+import params from "@/parameters";
+import { getDiagram, replaceByDiag } from "@/utils/printDiagram";
 import { processModalClick } from "@/utils/modalClick";
 import { ArrayFun } from "@/utils/array";
 import BaseGame from "@/components/BaseGame.vue";
@@ -144,14 +157,15 @@ export default {
       problems: { "mine": [], "others": [] },
       // timestamp of oldest showed problem:
       cursor: {
-        "mine": Number.MAX_SAFE_INTEGER,
-        "others": Number.MAX_SAFE_INTEGER
+        mine: Number.MAX_SAFE_INTEGER,
+        others: Number.MAX_SAFE_INTEGER
       },
       // hasMore == TRUE: a priori there could be more problems to load
-      hasMore: { "mine": true, "others": true },
+      hasMore: { mine: true, others: true },
       onlyMine: false,
       showOne: false,
       infoMsg: "",
+      rulesContent: "",
       game: {
         players: [{ name: "Problem" }, { name: "Problem" }],
         mode: "analyze"
@@ -164,8 +178,10 @@ export default {
     else this.loadMore("others", () => { this.loadMore("mine"); });
   },
   mounted: function() {
-    document.getElementById("newprobDiv")
-      .addEventListener("click", processModalClick);
+    ["rulesDiv","newprobDiv"].forEach(eltName => {
+      document.getElementById(eltName)
+      .addEventListener("click", processModalClick)
+    });
   },
   watch: {
     // st.variants changes only once, at loading from [] to [...]
@@ -273,6 +289,7 @@ export default {
       this.loadVariant(prob.vid, () => {
         // Set FEN if possible (might not be correct yet)
         if (V.IsGoodFen(prob.fen)) this.setDiagram(prob);
+        else prob.diag = "";
       });
     },
     loadVariant: async function(vid, cb) {
@@ -285,12 +302,26 @@ export default {
         this.loadedVar = vid;
         cb();
       });
+      // (AJAX) Request to get rules content (plain text, HTML)
+      this.rulesContent =
+        require(
+          "raw-loader!@/translations/rules/" +
+          variant.name + "/" +
+          this.st.lang + ".pug"
+        )
+        // Next two lines fix a weird issue after last update (2019-11)
+        .replace(/\\n/g, " ")
+        .replace(/\\"/g, '"')
+        .replace('module.exports = "', "")
+        .replace(/"$/, "")
+        .replace(/(fen:)([^:]*):/g, replaceByDiag);
     },
     trySetDiagram: function(prob) {
       // Problem edit: FEN could be wrong or incomplete,
       // variant could not be ready, or not defined
       if (prob.vid > 0 && this.loadedVar == prob.vid && V.IsGoodFen(prob.fen))
         this.setDiagram(prob);
+      else prob.diag = "";
     },
     setDiagram: function(prob) {
       // Condition: prob.fen is correct and global V is ready
@@ -314,6 +345,7 @@ export default {
           // $nextTick to be sure $refs["basegame"] exists
           this.$nextTick(() => {
             this.$refs["basegame"].re_setVariables(this.game); });
+          this.curproblem.showSolution = false; //in case of
           this.copyProblem(p, this.curproblem);
         });
       };
@@ -342,14 +374,22 @@ export default {
         );
       } else processWhenWeHaveProb();
     },
-    gotoPrevNext: function(e, prob, dir) {
+    gotoPrevNext: function(prob, dir) {
       const mode = (this.onlyMine ? "mine" : "others");
       const problems = this.problems[mode];
       const startIdx = problems.findIndex(p => p.id == prob.id);
       const nextIdx = startIdx + dir;
       if (nextIdx >= 0 && nextIdx < problems.length)
         this.setHrefPid(problems[nextIdx]);
-      else if (this.hasMore[mode]) this.loadMore(mode);
+      else if (this.hasMore[mode]) {
+        this.loadMore(
+          mode,
+          (nbProbs) => {
+            if (nbProbs > 0) this.gotoPrevNext(prob, dir);
+            else alert(this.st.tr["No more problems"]);
+          }
+        );
+      }
       else alert(this.st.tr["No more problems"]);
     },
     prepareNewProblem: function() {
@@ -371,7 +411,12 @@ export default {
           data: { prob: this.curproblem },
           success: (ret) => {
             if (edit) {
-              let editedP = this.problems.find(p => p.id == this.curproblem.id);
+              let editedP = this.problems["mine"]
+                .find(p => p.id == this.curproblem.id);
+              if (!editedP)
+                // I'm an admin and edit another user' problem
+                editedP = this.problems["others"]
+                  .find(p => p.id == this.curproblem.id);
               this.copyProblem(this.curproblem, editedP);
               this.showProblem(editedP);
             }
@@ -380,7 +425,8 @@ export default {
               newProblem.id = ret.id;
               newProblem.uid = this.st.user.id;
               newProblem.uname = this.st.user.name;
-              this.problems["mine"] = [newProblem].concat(this.problems["mine"]);
+              this.problems["mine"] =
+                [newProblem].concat(this.problems["mine"]);
             }
             document.getElementById("modalNewprob").checked = false;
             this.infoMsg = "";
@@ -388,6 +434,9 @@ export default {
         }
       );
     },
+    canIedit: function(puid) {
+      return params.devs.concat([puid]).includes(this.st.user.id);
+    },
     editProblem: function(prob) {
       // prob.diag might correspond to some other problem or be empty:
       this.setDiagram(prob); //V is loaded at this stage
@@ -428,9 +477,16 @@ export default {
               const pids = this.problems[mode].map(p => p.id);
               ArrayFun.remove(res.problems, p => pids.includes(p.id), "all");
               this.decorate(res.problems);
-              this.problems[mode] = this.problems[mode].concat(res.problems);
+              this.problems[mode] =
+                this.problems[mode].concat(res.problems)
+                // TODO: problems are alrady sorted, would just need to insert
+                // the current individual problem in list; more generally
+                // there is probably only one misclassified problem.
+                // (Unless the user navigated several times by URL to show a
+                // single problem...)
+                .sort((p1, p2) => p2.added - p1.added);
             } else this.hasMore[mode] = false;
-            if (!!cb) cb();
+            if (!!cb) cb(L);
           }
         }
       );
@@ -439,11 +495,27 @@ export default {
 };
 </script>
 
+<style lang="sass">
+@import "@/styles/_board_squares_img.sass"
+@import "@/styles/_rules.sass"
+</style>
+
 <style lang="sass" scoped>
 [type="checkbox"].modal+div .card
   max-width: 767px
   max-height: 100%
 
+#rulesDiv > .card
+  padding: 5px 0
+  max-width: 50%
+  max-height: 100%
+  @media screen and (max-width: 1500px)
+    max-width: 67%
+  @media screen and (max-width: 1024px)
+    max-width: 85%
+  @media screen and (max-width: 767px)
+    max-width: 100%
+
 #inputFen
   width: 100%
 
@@ -491,4 +563,12 @@ p.oneInstructions
 @media screen and (max-width: 767px)
   #topPage
     text-align: center
+
+a#variantNameInProblems
+  color: var(--card-fore-color)
+  text-align: center
+  font-weight: bold
+  font-size: calc(1rem * var(--heading-ratio))
+  line-height: 1.2
+  margin: calc(1.5 * var(--universal-margin))
 </style>