New variant idea
[xogo.git] / variants / _ClickFill / class.js
... / ...
CommitLineData
1import ChessRules from "/base_rules.js";
2
3export 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 setupVisualPieces() {
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};