X-Git-Url: https://git.auder.net/variants/Baroque/style.css?a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2Fproblems.js;h=a95529234fbe9ebaa7766d984395661271424e9a;hb=b955c65b942d09d24b5c3bed0d755d4f2f8f71f1;hp=60aa9c430833caa145aa522d7060a9e6e3a9d91b;hpb=a9f262f38d7ae9ea4c935c549309bd2f773aa6c2;p=vchess.git
diff --git a/public/javascripts/components/problems.js b/public/javascripts/components/problems.js
index 60aa9c43..a9552923 100644
--- a/public/javascripts/components/problems.js
+++ b/public/javascripts/components/problems.js
@@ -1,11 +1,21 @@
Vue.component('my-problems', {
+ props: ["probId","settings"],
data: function () {
return {
+ userId: user.id,
problems: [], //oldest first
- myProblems: [], //same
- curProblems: [], //assigned to either of the ones above
- curIdx: 0, //index in (current) problems array
- newProblem: {
+ 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: "",
@@ -13,220 +23,322 @@ Vue.component('my-problems', {
},
};
},
+ // NOTE: always modals first, because otherwise "scroll to the end" undesirable effect
template: `
-
-
-
-
-
- --> OK, mais ces flèches n'ont pas la même action selon les vues
- --> fetchN si liste, problème suivant/précédent sinon
-
-
-board qui bouge et activé que si #hash donnant numéro du problème
-deux listes : tous les problèmes sauf les miens
- + les miens
-
-
-//TODO: filter "my problems" ==> liste séparée (lors de la requête serveur)
---> bouton plutôt sous l'échiquier après soluce (sauf si anonymous)
---> puis dans la vue "my problems (listing échiquier gauche / instrus + soluce cachée à droite
-if (this.mode == "problem")
- {
- // Show problem instructions
- elementArray.push(
- h('div',
- {
- attrs: { id: "instructions-div" },
- "class": {
- "clearer": true,
- "section-content": true,
- },
- },
- [
- h('p',
- {
- attrs: { id: "problem-instructions" },
- domProps: { innerHTML: this.problem.instructions }
- }
- )
- ]
- )
- );
- }
-
-
- // TODO ici :: instrus + diag interactif + solution
- my-board + pilotage via movesList + VariantRules !
-
-
-
- if (this.mode == "problem")
- {
- // Show problem solution (on click)
- elementArray.push(
- h('div',
- {
- attrs: { id: "solution-div" },
- "class": { "section-content": true },
- },
- [
- h('h3',
- {
- "class": { clickable: true },
- domProps: { innerHTML: translations["Show solution"] },
- on: { click: this.toggleShowSolution },
- }
- ),
- h('p',
- {
- attrs: { id: "problem-solution" },
- domProps: { innerHTML: this.problem.solution }
- }
- )
- ]
- )
- );
- }
-
-
-