textareas fit to content in UserBio and Problems

[vchess.git] / client / src / views / Problems.vue

diff --git a/client/src/views/Problems.vue b/client/src/views/Problems.vue
index 3c9327d..b989fbc 100644 (file)
--- 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)"
@@ -32,14 +42,16 @@ main
         )
         #diagram(v-html="curproblem.diag")
       fieldset
-        textarea(
+        textarea.instructions-edit(
           :placeholder="st.tr['Instructions']"
+          @input="adjustHeight('instructions')"
           v-model="curproblem.instruction"
         )
         p(v-html="parseHtml(curproblem.instruction)")
       fieldset
-        textarea(
+        textarea.solution-edit(
           :placeholder="st.tr['Solution']"
+          @input="adjustHeight('solution')"
           v-model="curproblem.solution"
         )
         p(v-html="parseHtml(curproblem.solution)")
@@ -115,7 +127,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";
@@ -154,7 +167,7 @@ export default {
       onlyMine: false,
       showOne: false,
       infoMsg: "",
-      admins: [1], //hard-coded for now. TODO
+      rulesContent: "",
       game: {
         players: [{ name: "Problem" }, { name: "Problem" }],
         mode: "analyze"
@@ -167,8 +180,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 [...]
@@ -197,6 +212,12 @@ export default {
         document.getElementById("inputFen").focus();
       }
     },
+    adjustHeight: function(elt) {
+      // https://stackoverflow.com/a/48460773
+      let t = document.querySelector("." + elt + "-edit");
+      t.style.height = "";
+      t.style.height = (t.scrollHeight + 3) + "px";
+    },
     setVname: function(prob) {
       prob.vname = this.st.variants.find(v => v.id == prob.vid).name;
     },
@@ -268,7 +289,10 @@ export default {
     },
     parseHtml: function(txt) {
       return !txt.match(/<[/a-zA-Z]+>/)
-        ? txt.replace(/\n/g, "<br/>") //no HTML tag
+        ?
+          // No HTML tag
+          txt.replace(/\n\n/g, "<br/><div class='br'></div>")
+             .replace(/\n/g, "<br/>")
         : txt;
     },
     changeVariant: function(prob) {
@@ -289,6 +313,19 @@ 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,
@@ -319,6 +356,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);
         });
       };
@@ -367,6 +405,8 @@ export default {
     },
     prepareNewProblem: function() {
       this.resetCurProb();
+      this.adjustHeight("instructions");
+      this.adjustHeight("solution");
       window.doClick("modalNewprob");
     },
     sendProblem: function() {
@@ -408,12 +448,14 @@ export default {
       );
     },
     canIedit: function(puid) {
-      return this.admins.concat([puid]).includes(this.st.user.id);
+      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
       this.copyProblem(prob, this.curproblem);
+      this.adjustHeight("instructions");
+      this.adjustHeight("solution");
       window.doClick("modalNewprob");
     },
     deleteProblem: function(prob) {
@@ -452,7 +494,7 @@ export default {
               this.decorate(res.problems);
               this.problems[mode] =
                 this.problems[mode].concat(res.problems)
-                // TODO: problems are alrady sorted, would just need to insert
+                // TODO: problems are already 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
@@ -468,16 +510,39 @@ export default {
 };
 </script>
 
+<style lang="sass">
+@import "@/styles/_board_squares_img.sass"
+@import "@/styles/_rules.sass"
+.br
+  display: block
+  margin: 10px 0
+</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%
 
 textarea
   width: 100%
+  &.instructions-edit
+    min-height: 70px
+  &.solution-edit
+    min-height: 100px
 
 #diagram
   margin: 0 auto
@@ -520,4 +585,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>