<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)"
span.vname {{ curproblem.vname }}
span.uname ({{ curproblem.uname }})
button.marginleft(@click="backToList()") {{ st.tr["Back to list"] }}
- button.nomargin(@click="gotoPrevNext($event,curproblem,1)")
+ button.nomargin(@click="gotoPrevNext(curproblem,1)")
| {{ st.tr["Previous_p"] }}
- button.nomargin(@click="gotoPrevNext($event,curproblem,-1)")
+ button.nomargin(@click="gotoPrevNext(curproblem,-1)")
| {{ st.tr["Next_p"] }}
p.oneInstructions.clickable(
v-html="parseHtml(curproblem.instruction)"
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";
onlyMine: false,
showOne: false,
infoMsg: "",
- admins: [1], //hard-coded for now. TODO
+ rulesContent: "",
game: {
players: [{ name: "Problem" }, { name: "Problem" }],
mode: "analyze"
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 [...]
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,
// $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);
});
};
);
} 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() {
);
},
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:
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);
}
}
);
};
</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%
@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>