From 7bb3948f7a8f17d978a4552e39335957d252f9ed Mon Sep 17 00:00:00 2001 From: Benjamin Auder <benjamin.auder@somewhere> Date: Sun, 29 Dec 2019 23:22:59 +0100 Subject: [PATCH] Drop client/next_src/: almost finished now --- client/next_src/components/TestComp.vue | 52 ---- client/next_src/components/problemSummary.js | 39 --- client/next_src/views/Game.vue | 12 - client/next_src/views/Problem.vue | 94 ------- client/next_src/views/Problems.vue | 267 ------------------- 5 files changed, 464 deletions(-) delete mode 100644 client/next_src/components/TestComp.vue delete mode 100644 client/next_src/components/problemSummary.js delete mode 100644 client/next_src/views/Game.vue delete mode 100644 client/next_src/views/Problem.vue delete mode 100644 client/next_src/views/Problems.vue diff --git a/client/next_src/components/TestComp.vue b/client/next_src/components/TestComp.vue deleted file mode 100644 index 71793bf1..00000000 --- a/client/next_src/components/TestComp.vue +++ /dev/null @@ -1,52 +0,0 @@ -<template> - <div class="test"> - <h3>Ecosystem</h3> - <p>Test comp</p> - </div> -</template> - -<script> -export default { - name: "HelloWorld", - props: { - vname: String - }, - created: async function() { - //console.log("@variants/" + this.vname + ".js"); - // En fait "V" est une variable globale, donc juste "V = vModule.V;" - const vModule = await import("../variants/" + this.vname + ".js"); - const V = vModule.V; - var instance = new V(); - instance.show(); - //import("/src/variants/" + this.vname + ".js") - // .then((V) => { - // console.log(V); - // }); - //console.log(this.$variants); - - // TODO: components which need to access user.name and user.id should - // import a module with a function to get this from localStorage (or anonymous) - }, - methods: { - //... - }, -}; -</script> - -<!-- Add "scoped" attribute to limit CSS to this component only --> -<style scoped lang="scss"> -h3 { - margin: 40px 0 0; -} -ul { - list-style-type: none; - padding: 0; -} -li { - display: inline-block; - margin: 0 10px; -} -a { - color: #42b983; -} -</style> diff --git a/client/next_src/components/problemSummary.js b/client/next_src/components/problemSummary.js deleted file mode 100644 index 7321c234..00000000 --- a/client/next_src/components/problemSummary.js +++ /dev/null @@ -1,39 +0,0 @@ -// Preview a problem on variant page -Vue.component('my-problem-summary', { - props: ['prob','userid','preview'], - template: ` - <div class="row problem"> - <div class="col-sm-12 col-md-6 diagram" - v-html="getDiagram(prob.fen)"> - </div> - <div class="col-sm-12 col-md-6"> - <p v-html="prob.instructions"></p> - <p v-if="!!prob.preview" v-html="prob.solution"></p> - <p v-else class="problem-time">{{ timestamp2date(prob.added) }}</p> - <button v-show="!preview" @click="$emit('show-problem')">Show</button> - <div v-show="prob.uid==userid && !preview" class="button-group"> - <button @click="$emit('edit-problem')">Edit</button> - <button @click="$emit('delete-problem')">Delete</button> - </div> - </div> - </div> - `, - methods: { - getDiagram: function(fen) { - const fenParsed = V.ParseFen(fen); - return getDiagram({ - position: fenParsed.position, - turn: fenParsed.turn, - // No need for flags here - }); - }, - timestamp2date(ts) { - return getDate(new Date(ts)); - }, - }, -}) - if (this.mode == "analyze") - { - this.mycolor = V.ParseFen(fen).turn; - this.orientation = this.mycolor; - } diff --git a/client/next_src/views/Game.vue b/client/next_src/views/Game.vue deleted file mode 100644 index 2c877b7d..00000000 --- a/client/next_src/views/Game.vue +++ /dev/null @@ -1,12 +0,0 @@ -<template> - <div class="about"> - <h1>This is an about page</h1> - </div> -</template> - methods: { - // Game is over, clear storage and put it in indexedDB - archiveGame: function() { - // TODO: ... - //clearStorage(); - }, - }, diff --git a/client/next_src/views/Problem.vue b/client/next_src/views/Problem.vue deleted file mode 100644 index b30a22e9..00000000 --- a/client/next_src/views/Problem.vue +++ /dev/null @@ -1,94 +0,0 @@ -//TODO: new problem form + problem visualisation, like Game.vue (but simpler) -// --> mode analyze, moves = [], "load problem" - <div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2"> - <input type="checkbox" id="modal-newproblem" class="modal"/> - <div role="dialog" aria-labelledby="modalProblemTxt"> - <div v-show="!modalProb.preview" class="card newproblem-form"> - <label for="modal-newproblem" class="modal-close"> - </label> - <h3 id="modalProblemTxt">{{ translate("Add a problem") }}</h3> - <form @submit.prevent="previewProblem()"> - <fieldset> - <label for="newpbFen">FEN</label> - <input id="newpbFen" type="text" v-model="modalProb.fen" - :placeholder='translate("Full FEN description")'/> - </fieldset> - <fieldset> - <p class="emphasis">{{ translate("Safe HTML tags allowed") }}</p> - <label for="newpbInstructions">{{ translate("Instructions") }}</label> - <textarea id="newpbInstructions" v-model="modalProb.instructions" - :placeholder='translate("Describe the problem goal")'> - </textarea> - <label for="newpbSolution">{{ translate("Solution") }}</label> - <textarea id="newpbSolution" v-model="modalProb.solution" - :placeholder='translate("How to solve the problem?")'> - </textarea> - <button class="center-btn">{{ translate("Preview") }}</button> - </fieldset> - </form> - </div> - <div v-show="modalProb.preview" class="card newproblem-preview"> - <label for="modal-newproblem" class="modal-close" - @click="modalProb.preview=false"> - </label> - <my-problem-summary :prob="modalProb" :userid="userId" :preview="true"> - </my-problem-summary> - <div class="button-group"> - <button @click="modalProb.preview=false">{{ translate("Cancel") }}</button> - <button @click="sendProblem()">{{ translate("Send") }}</button> - </div> - </div> - </div> - previewProblem: function() { - if (!V.IsGoodFen(this.modalProb.fen)) - return alert(translations["Bad FEN description"]); - if (this.modalProb.instructions.trim().length == 0) - return alert(translations["Empty instructions"]); - if (this.modalProb.solution.trim().length == 0) - return alert(translations["Empty solution"]); - Vue.set(this.modalProb, "preview", true); - }, - editProblem: function(prob) { - this.modalProb = prob; - Vue.set(this.modalProb, "preview", false); - document.getElementById("modal-newproblem").checked = true; - }, - deleteProblem: function(pid) { - ajax( - "/problems/" + pid, - "DELETE", - response => { - // Delete problem from the list on client side - let problems = this.curProblems(); - const pIdx = problems.findIndex(p => p.id == pid); - problems.splice(pIdx, 1); - } - ); - }, - sendProblem: function() { - // Send it to the server and close modal - ajax( - "/problems/" + variant.id, - (this.modalProb.id > 0 ? "PUT" : "POST"), - this.modalProb, - response => { - document.getElementById("modal-newproblem").checked = false; - Vue.set(this.modalProb, "preview", false); - if (this.modalProb.id == 0) - { - this.myProblems.unshift({ - added: Date.now(), - id: response.id, - uid: user.id, - fen: this.modalProb.fen, - instructions: this.modalProb.instructions, - solution: this.modalProb.solution, - }); - if (!this.curProb && this.display != "mine") - this.display = "mine"; - } - else - this.modalProb.id = 0; - } - ); - }, diff --git a/client/next_src/views/Problems.vue b/client/next_src/views/Problems.vue deleted file mode 100644 index 368e09a7..00000000 --- a/client/next_src/views/Problems.vue +++ /dev/null @@ -1,267 +0,0 @@ -<template> - <div class="test"> - <TestComp :vname="variant.name"/> - </div> -</template> - -<script> -// @ is an alias to /src -import TestComp from "@/components/TestComp.vue"; - -export default { - name: "test", - components: { - TestComp, - }, - data: function() { - return { - variant: {name: "Atomic", id: 3}, - }; - } -}; -</script> -Vue.component('my-problems', { - props: ["probId","settings"], - data: function () { - return { - userId: user.id, - problems: [], //oldest first - myProblems: [], //same, but only mine - singletons: [], //requested problems (using #num) - display: "others", //or "mine" - curProb: null, //(reference to) current displayed problem (if any) - showSolution: false, - nomoreMessage: "", - mode: "analyze", //for game component - pbNum: 0, //to navigate directly to some problem - // New problem (to upload), or existing problem to edit: - modalProb: { - id: 0, //defined if it's an edit - uid: 0, //...also - fen: "", - instructions: "", - solution: "", - preview: false, - }, - }; - }, - // NOTE: always modals first, because otherwise "scroll to the end" undesirable effect - template: ` - <div id="problemControls" class="button-group"> - <button :aria-label='translate("Previous problem(s)")' class="tooltip" - @click="showNext('backward')" - > - <i class="material-icons">skip_previous</i> - </button> - <button v-if="!!userId" :aria-label='translate("Add a problem")' - class="tooltip" onClick="doClick('modal-newproblem')" - > - {{ translate("New") }} - </button> - <button :aria-label='translate("Next problem(s)")' class="tooltip" - @click="showNext('forward')" - > - <i class="material-icons">skip_next</i> - </button> - </div> - <div id="mainBoard" v-if="!!curProb"> - <div id="instructions-div" class="section-content"> - <p id="problem-instructions">{{ curProb.instructions }}</p> - </div> - <my-game :fen="curProb.fen" :mode="mode" :allowMovelist="true" - :settings="settings"> - </my-game> - <div id="solution-div" class="section-content"> - <h3 class="clickable" @click="showSolution = !showSolution"> - {{ translate("Show solution") }} - </h3> - <p id="problem-solution" v-show="showSolution">{{ curProb.solution }}</p> - </div> - <button @click="displayList">Back to list display</button> - </div> - <div> - <input type="text" placeholder="Type problem number" v-model="pbNum"/> - <button @click="() => showProblem(pbNum)">Show problem</button> - </div> - <button v-if="!!userId" @click="toggleListDisplay" - :class="{'only-mine':display=='mine'}" - > - My problems (only) - </button> - <my-problem-summary v-show="!curProb" - v-on:edit-problem="editProblem(p)" v-on:delete-problem="deleteProblem(p.id)" - v-on:show-problem="() => showProblem(p.id)" - v-for="p in curProblems()" @click="curProb=p" - v-bind:prob="p" v-bind:userid="userId" v-bind:key="p.id"> - </my-problem-summary> - </div> - `, - watch: { - probId: function() { - this.showProblem(this.probId); - }, - }, - created: function() { - if (!!this.probId) - this.showProblem(this.probId); - else - this.firstFetch(); - }, - methods: { - translate: translate, - firstFetch: function() { - // Fetch most recent problems from server, for both lists - this.fetchProblems("others", "bacwkard"); - this.fetchProblems("mine", "bacwkard"); - this.listsInitialized = true; - }, - showProblem: function(pid) { - location.hash = "#problems?id=" + pid; - for (let parray of [this.singletons,this.problems,this.myProblems]) - { - const pIdx = parray.findIndex(p => p.id == pid); - if (pIdx >= 0) - { - this.curProb = parray[pIdx]; - break; - } - } - if (!this.curProb) - { - // Cannot find problem in current set; get from server, and add to singletons. - ajax( - "/problems/" + variant.id + "/" + pid, //TODO: variant ID should not be required - "GET", - response => { - if (!!response.problem) - { - this.singletons.push(response.problem); - this.curProb = response.problem; - this.display = (response.problem.uid == this.userId ? "mine" : "others"); - } - else - this.noMoreProblems("Sorry, problem " + pid + " does not exist"); - } - ); - } - else - this.display = (this.curProb.uid == this.userId ? "mine" : "others"); - }, - curProblems: function() { - switch (this.display) - { - case "others": - return this.problems; - case "mine": - return this.myProblems; - } - }, - // TODO?: get 50 from server but only show 10 at a time (for example) - showNext: function(direction) { - const nomorePb = - problems => { - if (!problems || problems.length == 0) - this.noMoreProblems("No more problems in this direction"); - }; - if (!this.curProb) - return this.fetchProblems(this.display, direction, nomorePb); - // Show next problem (older or newer): - let curProbs = this.curProblems(); - // Try to find a neighbour problem in the direction, among current set - const neighbor = this.findClosestNeighbor(this.curProb, curProbs, direction); - if (!!neighbor) - { - this.curProb = neighbor; - return; - } - // Boundary case: nothing in current set, need to fetch from server - const curSize = curProbs.length; - this.fetchProblems(this.display, direction, problems => { - if (problems.length > 0) - { - // Ok, found something: - this.curProb = - this.findClosestNeighbor(this.curProb, curProbs, direction); - } - else - nomorePb(); - }); - }, - findClosestNeighbor: function(problem, probList, direction) { - let neighbor = undefined; - let smallestDistance = Number.MAX_SAFE_INTEGER; - for (let prob of probList) - { - const delta = Math.abs(prob.id - problem.id); - if (delta < smallestDistance && - ((direction == "backward" && prob.id < problem.id) - || (direction == "forward" && prob.id > problem.id))) - { - neighbor = prob; - smallestDistance = delta; - } - } - return neighbor; - }, - noMoreProblems: function(message) { - this.nomoreMessage = message; - let modalNomore = document.getElementById("modalNomore"); - modalNomore.checked = true; - setTimeout(() => modalNomore.checked = false, 2000); - }, - displayList: function() { - this.curProb = null; - location.hash = "#problems"; - // Fetch problems if first call (if #num, and then lists) - if (!this.listsInitialized) - this.firstFetch(); - }, - toggleListDisplay: function() { - const displays = ["mine","others"]; - const curIndex = displays.findIndex(item => item == this.display); - this.display = displays[1-curIndex]; - }, - fetchProblems: function(type, direction, cb) { - let problems = (type == "others" ? this.problems : this.myProblems); - // "last datetime" set at a value OK for an empty initial array - let last_dt = (direction=="forward" ? 0 : Number.MAX_SAFE_INTEGER); - if (problems.length > 0) - { - // Search for newest date (or oldest) - last_dt = problems[0].added; - for (let i=1; i<problems.length; i++) - { - if ((direction == "forward" && problems[i].added > last_dt) || - (direction == "backward" && problems[i].added < last_dt)) - { - last_dt = problems[i].added; - } - } - } - ajax( - "/problems/" + variant.id, - "GET", - { - type: type, - direction: direction, - last_dt: last_dt, - }, - response => { - if (response.problems.length > 0) - { - Array.prototype.push.apply(problems, response.problems.sort( - (p1,p2) => { return p2.added - p1.added; })); - // If one list is empty but not the other, show the non-empty - const otherArray = - (type == "mine" ? this.problems : this.myProblems); - if (otherArray.length == 0) - this.display = type; - this.$forceUpdate(); //TODO... - } - if (!!cb) - cb(response.problems); - } - ); - }, - }, -}) -- 2.44.0