variants/_ClickFill/class.js

   1 import ChessRules from "/base_rules.js";
   2
   3 export default class AbstractClickFillRules extends ChessRules {
   4
   5   static get Aliases() {
   6     return Object.assign({'A': AbstractClickFillRules}, ChessRules.Aliases);
   7   }
   8
   9   static get Options() {
  10     return {}
  11   }
  12
  13   setupPieces() {
  14     for (let i=0; i<this.size.x; i++) {
  15       for (let j=0; j<this.size.y; j++) {
  16         const markHere =
  17           !!this.marks && this.marks.some(m => m[0] == i && m[1] == j);
  18         if (this.board[i][j] != "" || markHere) {
  19           let elt = document.getElementById(this.coordsToId({x: i, y: j}));
  20           elt.classList.remove("neutral-square");
  21           if (markHere)
  22             elt.classList.add("bg-mark");
  23           else {
  24             const sqColor = (this.getColor(i, j) == 'w' ? "white" : "black");
  25             elt.classList.add("bg-" + sqColor);
  26           }
  27         }
  28       }
  29     }
  30   }
  31
  32   playVisual(move) {
  33     move.vanish.forEach(v => {
  34       let elt = document.getElementById(this.coordsToId({x: v.x, y: v.y}));
  35       elt.classList.remove("bg-" + (v.c == 'w' ? "white" : "black"));
  36     });
  37     move.appear.forEach(a => {
  38       let elt = document.getElementById(this.coordsToId({x: a.x, y: a.y}));
  39       elt.classList.add("bg-" + (a.c == 'w' ? "white" : "black"));
  40     });
  41   }
  42
  43   animateFading(arr, cb) {
  44     const animLength = 350; //TODO: 350ms? More? Less?
  45     arr.forEach(e => {
  46       let fadingSquare =
  47         document.getElementById(this.coordsToId({x: e.x, y: e.y}));
  48       fadingSquare.style.transitionDuration = (animLength / 1000) + "s";
  49       //fadingSquare.style.backgroundColor = "0"; //TODO: type in or out
  50       if (this.board[e.x][e.y] != "") {
  51         // TODO: fade out curCol --> neutral
  52       }
  53       else {
  54         // TODO: fade in neutral --> this.getColor(e.x, e.y)
  55       }
  56     });
  57     setTimeout(cb, animLength);
  58   }
  59
  60   animate(move, callback) {
  61     // No movement, but use fading effects: TODO
  62     // https://stackoverflow.com/questions/14350126/transition-color-fade-on-hover
  63     // https://stackoverflow.com/questions/22581789/fade-in-fade-out-background-color-of-an-html-element-with-javascript-or-jquer
  64     if (true || this.noAnimate || move.noAnimate) {
  65       callback();
  66       return;
  67     }
  68     let targetObj = new TargetObj(callback);
  69     const allChanges = move.appear.concat(move.vanish);
  70     if (allChanges.length > 0) {
  71       targetObj.target++;
  72       this.animateFading(allChanges, () => targetObj.increment());
  73     }
  74     targetObj.target +=
  75       this.customAnimate(move, segments, () => targetObj.increment());
  76     if (targetObj.target == 0)
  77       callback();
  78   }
  79
  80 };