X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FProblems.vue;h=057035acae3e6d25914b0d658cb93cb4e2f9f555;hb=eaa5ad3e93b761fefb16b32071be0b439761f843;hp=7f8632da5e58879a0837dc2cfa07b428f0788f45;hpb=29d33c8ac72a9ea5d72d8c48c426d8380e188bd7;p=vchess.git

diff --git a/client/src/views/Problems.vue b/client/src/views/Problems.vue
index 7f8632da..057035ac 100644
--- a/client/src/views/Problems.vue
+++ b/client/src/views/Problems.vue
@@ -8,7 +8,7 @@ main
     .card
       label.modal-close(for="modalRules")
       a#variantNameInProblems(:href="'/#/variants/'+game.vname")
-        | {{ game.vname }}
+        | {{ curproblem.vdisp }}
       div(v-html="rulesContent")
   input#modalNewprob.modal(
     type="checkbox"
@@ -42,17 +42,19 @@ 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)")
+        .instructions(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)")
+        .solution(v-html="parseHtml(curproblem.solution)")
       button(@click="sendProblem()") {{ st.tr["Send"] }}
       #dialog.text-center {{ st.tr[infoMsg] }}
   .row(v-if="showOne")
@@ -61,19 +63,19 @@ main
         .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.vname {{ curproblem.vdisp }}
         span.uname ({{ curproblem.uname }})
         button.marginleft(@click="backToList()") {{ st.tr["Back to list"] }}
         button.nomargin(@click="gotoPrevNext(curproblem,1)")
           | {{ st.tr["Previous_p"] }}
         button.nomargin(@click="gotoPrevNext(curproblem,-1)")
           | {{ st.tr["Next_p"] }}
-      p.oneInstructions.clickable(
+      .instructions.oneInstructions.clickable(
         v-html="parseHtml(curproblem.instruction)"
         @click="curproblem.showSolution=!curproblem.showSolution"
       )
         | {{ st.tr["Show solution"] }}
-      p(
+      .solution(
         v-show="curproblem.showSolution"
         v-html="parseHtml(curproblem.solution)"
       )
@@ -106,7 +108,7 @@ main
           v-show="onlyMine || !selectedVar || p.vid == selectedVar"
           @click="setHrefPid(p)"
         )
-          td {{ p.vname }}
+          td {{ p.vdisp }}
           td {{ firstChars(p.instruction) }}
           td {{ p.id }}
       button#loadMoreBtn(
@@ -129,6 +131,7 @@ import params from "@/parameters";
 import { getDiagram, replaceByDiag } from "@/utils/printDiagram";
 import { processModalClick } from "@/utils/modalClick";
 import { ArrayFun } from "@/utils/array";
+import afterRawLoad from "@/utils/afterRawLoad";
 import BaseGame from "@/components/BaseGame.vue";
 export default {
   name: "my-problems",
@@ -138,10 +141,7 @@ export default {
   data: function() {
     return {
       st: store.state,
-      emptyVar: {
-        vid: 0,
-        vname: ""
-      },
+      emptyVar: { vid: 0 },
       // Problem currently showed, or edited:
       curproblem: {
         id: 0, //used in case of edit
@@ -210,8 +210,16 @@ 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;
+      const variant = this.st.variants.find(v => v.id == prob.vid);
+      prob.vname = variant.name;
+      prob.vdisp = variant.display;
     },
     // Add vname and user names:
     decorate: function(problems, callback) {
@@ -241,7 +249,8 @@ export default {
             }
           }
         );
-      } else if (!!callback) callback();
+      }
+      else if (!!callback) callback();
     },
     firstChars: function(text) {
       let preparedText = text
@@ -273,6 +282,7 @@ export default {
       this.curproblem.uid = 0;
       this.curproblem.vid = "";
       this.curproblem.vname = "";
+      this.curproblem.vdisp = "";
       this.curproblem.fen = "";
       this.curproblem.diag = "";
       this.curproblem.instruction = "";
@@ -281,7 +291,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) {
@@ -302,19 +315,13 @@ 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);
+        afterRawLoad(
+          require(
+            "raw-loader!@/translations/rules/" + variant.name + "/" +
+            this.st.lang + ".pug"
+          ).default
+        ).replace(/(fen:)([^:]*):/g, replaceByDiag);
     },
     trySetDiagram: function(prob) {
       // Problem edit: FEN could be wrong or incomplete,
@@ -372,7 +379,8 @@ export default {
             }
           }
         );
-      } else processWhenWeHaveProb();
+      }
+      else processWhenWeHaveProb();
     },
     gotoPrevNext: function(prob, dir) {
       const mode = (this.onlyMine ? "mine" : "others");
@@ -394,6 +402,8 @@ export default {
     },
     prepareNewProblem: function() {
       this.resetCurProb();
+      this.adjustHeight("instructions");
+      this.adjustHeight("solution");
       window.doClick("modalNewprob");
     },
     sendProblem: function() {
@@ -441,6 +451,8 @@ export default {
       // 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) {
@@ -479,13 +491,14 @@ 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
                 // single problem...)
                 .sort((p1, p2) => p2.added - p1.added);
-            } else this.hasMore[mode] = false;
+            }
+            else this.hasMore[mode] = false;
             if (!!cb) cb(L);
           }
         }
@@ -498,6 +511,13 @@ export default {
 <style lang="sass">
 @import "@/styles/_board_squares_img.sass"
 @import "@/styles/_rules.sass"
+.instructions, .solution
+  margin: 0 var(--universal-margin)
+  p, ul, ol, pre, table, h3, h4, h5, h6, blockquote
+    margin: var(--universal-margin) 0
+  .br
+    display: block
+    margin: 10px 0
 </style>
 
 <style lang="sass" scoped>
@@ -521,6 +541,10 @@ export default {
 
 textarea
   width: 100%
+  &.instructions-edit
+    min-height: 70px
+  &.solution-edit
+    min-height: 100px
 
 #diagram
   margin: 0 auto
@@ -540,7 +564,7 @@ button#loadMoreBtn
   & > *
     margin: 0
 
-p.oneInstructions
+.oneInstructions
   margin: 0
   padding: 2px 5px
   background-color: lightgreen
@@ -549,7 +573,7 @@ p.oneInstructions
   display: inline-block
 
 #topPage
-  span.vname
+  span.vdisp
     font-weight: bold
     padding-left: var(--universal-margin)
   span.uname