From: Benjamin Auder <benjamin.auder@somewhere> Date: Tue, 18 Dec 2018 11:04:44 +0000 (+0100) Subject: Some fixes, add basic preview logic for new problem X-Git-Url: https://git.auder.net/%7B%7B%20asset%28%27mixstore/images/img/doc/css/%24%7BgetWhatsApp%28link%29%7D?a=commitdiff_plain;h=45109880413a50dec3a07298b987fb07d60630b2;p=vchess.git Some fixes, add basic preview logic for new problem --- diff --git a/TODO b/TODO index 4d99536b..3684a842 100644 --- a/TODO +++ b/TODO @@ -1,4 +1,4 @@ +Set problems style (maybe will fix strange flashing bug?) global lang cookie, + display (remember in each variant what is shown...) translations (how ? switch on index page only, then find ideas...) -for each variant, adapt FEN (Crazyhouse, Grand, Loser, ...) Improve style for various screen sizes diff --git a/public/javascripts/base_rules.js b/public/javascripts/base_rules.js index ae0800cd..7f27e855 100644 --- a/public/javascripts/base_rules.js +++ b/public/javascripts/base_rules.js @@ -273,7 +273,7 @@ class ChessRules turn: fenParts[1], }; let nextIdx = 2; - if (V.hasFlags) + if (V.HasFlags) Object.assign(res, {flags: fenParts[nextIdx++]}); if (V.HasEnpassant) Object.assign(res, {enpassant: fenParts[nextIdx]}); @@ -307,7 +307,7 @@ class ChessRules position += emptyCount; emptyCount = 0; } - fen += V.board2fen(this.board[i][j]); + position += V.board2fen(this.board[i][j]); } } if (emptyCount > 0) @@ -438,7 +438,7 @@ class ChessRules // Set flags and enpassant: const parsedFen = V.ParseFen(fen); if (V.HasFlags) - this.setFlags(fenParsed.flags); + this.setFlags(parsedFen.flags); if (V.HasEnpassant) { const epSq = parsedFen.enpassant != "-" @@ -1013,7 +1013,7 @@ class ChessRules if (!!ingame) { // Hash of current game state *after move*, to detect repetitions - move.hash = hex_md5(this.getFen(); + move.hash = hex_md5(this.getFen()); } } diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js index 9d7bb1fb..16e1fdbb 100644 --- a/public/javascripts/components/game.js +++ b/public/javascripts/components/game.js @@ -1162,7 +1162,7 @@ Vue.component('my-game', { { this.mycolor = Math.random() < 0.5 ? 'w' : 'b'; if (this.mycolor == 'b') - this.playComputerMove(); + setTimeout(this.playComputerMove, 100); //small delay for drawing board } //else: against a (IRL) friend or problem solving: nothing more to do }, @@ -1170,7 +1170,7 @@ Vue.component('my-game', { const timeStart = Date.now(); const compMove = this.vr.getComputerMove(); // (first move) HACK: avoid selecting elements before they appear on page: - const delay = Math.max(500-(Date.now()-timeStart), 0); + const delay = Math.max(250-(Date.now()-timeStart), 0); setTimeout(() => { if (this.mode == "computer") //Warning: mode could have changed! this.play(compMove, "animate") @@ -1360,7 +1360,7 @@ Vue.component('my-game', { } } if (this.mode == "computer" && this.vr.turn != this.mycolor) - this.playComputerMove; + setTimeout(this.playComputerMove, 250); //small delay for animation }, undo: function() { // Navigate after game is over diff --git a/public/javascripts/components/problems.js b/public/javascripts/components/problems.js index 68830a4f..3bd13f63 100644 --- a/public/javascripts/components/problems.js +++ b/public/javascripts/components/problems.js @@ -1,7 +1,13 @@ Vue.component('my-problems', { data: function () { return { - problems: problemArray //initial value + problems: problemArray, //initial value + newProblem: { + fen: V.GenRandInitFen(), + instructions: "", + solution: "", + stage: "nothing", //or "preview" after new problem is filled + }, }; }, template: ` @@ -14,32 +20,31 @@ Vue.component('my-problems', { </my-problem-summary> <input type="checkbox" id="modal-newproblem" class="modal"> <div role="dialog" aria-labelledby="newProblemTxt"> - <div class="card newproblem"> + <div v-show="newProblem.stage=='nothing'" class="card newproblem-form"> <label for="modal-newproblem" class="modal-close"></label> <h3 id="newProblemTxt">Add problem</h3> - <form @submit.prevent="postNewProblem"> + <form @submit.prevent="previewNewProblem"> <fieldset> <label for="newpbFen">Fen</label> - <input type="text" id="newpbFen" - placeholder="Position [+ flags [+ turn]]"/> + <input id="newpbFen" type="text" v-model="newProblem.fen"/> </fieldset> <fieldset> - <p class="emphasis"> - Allowed HTML tags: - <p>,<br>,<,ul>,<ol>,<li> - </p> + <p class="emphasis">Safe HTML tags allowed</p> <label for="newpbInstructions">Instructions</label> - <textarea id="newpbInstructions" placeholder="Explain the problem here"/> + <textarea id="newpbInstructions" v-model="newProblem.instructions" + placeholder="Explain the problem here"/> <label for="newpbSolution">Solution</label> - <textarea id="newpbSolution" placeholder="How to solve the problem?"/> - <button class="center-btn">Send</button> + <textarea id="newpbSolution" v-model="newProblem.solution" + placeholder="How to solve the problem?"/> + <button class="center-btn">Preview</button> </fieldset> - <p class="mistake-newproblem"> - Note: if you made a mistake, please let me know at - <a :href="mailErrProblem">contact@vchess.club</a> - </p> </form> </div> + <div v-show="newProblem.stage=='preview'" class="card newproblem-preview"> + // TODO: we don't want exactly the same display (-date +solution) + <my-problem-summary v-bind:prob="newProblem"></my-problem-summary> + <button @click="sendNewProblem()" class="center-btn">Send</button> + </div> </div> </div> `, @@ -82,18 +87,20 @@ Vue.component('my-problems', { showNewproblemModal: function() { document.getElementById("modal-newproblem").checked = true; }, - postNewProblem: function() { - const fen = document.getElementById("newpbFen").value; - if (!V.IsGoodFen(fen)) + previewNewProblem: function() { + if (!V.IsGoodFen(this.newProblem.fen)) return alert("Bad FEN string"); - const instructions = document.getElementById("newpbInstructions").value; - const solution = document.getElementById("newpbSolution").value; + this.newProblem.stage = "preview"; + }, + sendNewProblem: function() { + // Send it to the server and close modal ajax("/problems/" + variant, "POST", { - fen: fen, - instructions: instructions, - solution: solution, + fen: this.newProblem.fen, + instructions: this.newProblem.instructions, + solution: this.newProblem.solution, }, response => { document.getElementById("modal-newproblem").checked = false; + this.newProblem.stage = "nothing"; }); }, },