cm-chessboard 4.0.2 → 4.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +57 -33
- package/docs/PositionsAnimation.md +11 -0
- package/docs/PreMoves.md +3 -0
- package/examples/accessible-chessboard.html +1 -1
- package/examples/enable-input.html +1 -1
- package/examples/pieces-animation.html +25 -15
- package/examples/validate-moves.html +5 -7
- package/package.json +1 -1
- package/src/cm-chessboard/Chessboard.js +47 -91
- package/src/cm-chessboard/{ChessboardMoveInput.js → core/MoveInput.js} +16 -19
- package/src/cm-chessboard/{Position.js → core/Position.js} +26 -5
- package/src/cm-chessboard/core/PositionAnimationsQueue.js +274 -0
- package/src/cm-chessboard/{ChessboardState.js → core/State.js} +19 -12
- package/src/cm-chessboard/{ChessboardView.js → core/View.js} +16 -45
- package/src/cm-chessboard/{ChessboardViewAccessible.js → core/ViewAccessible.js} +6 -6
- package/test/TestPiecesAnimation.js +13 -16
- package/test/TestPosition.js +1 -1
- package/src/cm-chessboard/ChessboardPiecesAnimation.js +0 -142
- package/src/cm-chessboard/Observed.js +0 -40
|
@@ -1,142 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Author and copyright: Stefan Haack (https://shaack.com)
|
|
3
|
-
* Repository: https://github.com/shaack/cm-chessboard
|
|
4
|
-
* License: MIT, see file 'LICENSE'
|
|
5
|
-
*/
|
|
6
|
-
import {Position} from "./Position.js"
|
|
7
|
-
|
|
8
|
-
const CHANGE_TYPE = {
|
|
9
|
-
move: 0,
|
|
10
|
-
appear: 1,
|
|
11
|
-
disappear: 2
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
export class ChessboardPiecesAnimation {
|
|
15
|
-
|
|
16
|
-
constructor(view, fromSquares, toSquares, duration, callback) {
|
|
17
|
-
this.view = view
|
|
18
|
-
if (fromSquares && toSquares) {
|
|
19
|
-
this.animatedElements = this.createAnimation(fromSquares, toSquares)
|
|
20
|
-
this.duration = duration
|
|
21
|
-
this.callback = callback
|
|
22
|
-
this.frameHandle = requestAnimationFrame(this.animationStep.bind(this))
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
seekChanges(fromSquares, toSquares) {
|
|
27
|
-
const appearedList = [], disappearedList = [], changes = []
|
|
28
|
-
for (let i = 0; i < 64; i++) {
|
|
29
|
-
const previousSquare = fromSquares[i]
|
|
30
|
-
const newSquare = toSquares[i]
|
|
31
|
-
if (newSquare !== previousSquare) {
|
|
32
|
-
if (newSquare) {
|
|
33
|
-
appearedList.push({piece: newSquare, index: i})
|
|
34
|
-
}
|
|
35
|
-
if (previousSquare) {
|
|
36
|
-
disappearedList.push({piece: previousSquare, index: i})
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
appearedList.forEach((appeared) => {
|
|
41
|
-
let shortestDistance = 8
|
|
42
|
-
let foundMoved = undefined
|
|
43
|
-
disappearedList.forEach((disappeared) => {
|
|
44
|
-
if (appeared.piece === disappeared.piece) {
|
|
45
|
-
const moveDistance = this.squareDistance(appeared.index, disappeared.index)
|
|
46
|
-
if (moveDistance < shortestDistance) {
|
|
47
|
-
foundMoved = disappeared
|
|
48
|
-
shortestDistance = moveDistance
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
})
|
|
52
|
-
if (foundMoved) {
|
|
53
|
-
disappearedList.splice(disappearedList.indexOf(foundMoved), 1) // remove from disappearedList, because it is moved now
|
|
54
|
-
changes.push({
|
|
55
|
-
type: CHANGE_TYPE.move,
|
|
56
|
-
piece: appeared.piece,
|
|
57
|
-
atIndex: foundMoved.index,
|
|
58
|
-
toIndex: appeared.index
|
|
59
|
-
})
|
|
60
|
-
} else {
|
|
61
|
-
changes.push({type: CHANGE_TYPE.appear, piece: appeared.piece, atIndex: appeared.index})
|
|
62
|
-
}
|
|
63
|
-
})
|
|
64
|
-
disappearedList.forEach((disappeared) => {
|
|
65
|
-
changes.push({type: CHANGE_TYPE.disappear, piece: disappeared.piece, atIndex: disappeared.index})
|
|
66
|
-
})
|
|
67
|
-
return changes
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
createAnimation(fromSquares, toSquares) {
|
|
71
|
-
const changes = this.seekChanges(fromSquares, toSquares)
|
|
72
|
-
const animatedElements = []
|
|
73
|
-
changes.forEach((change) => {
|
|
74
|
-
const animatedItem = {
|
|
75
|
-
type: change.type
|
|
76
|
-
}
|
|
77
|
-
switch (change.type) {
|
|
78
|
-
case CHANGE_TYPE.move:
|
|
79
|
-
animatedItem.element = this.view.getPiece(Position.indexToSquare(change.atIndex))
|
|
80
|
-
animatedItem.atPoint = this.view.indexToPoint(change.atIndex)
|
|
81
|
-
animatedItem.toPoint = this.view.indexToPoint(change.toIndex)
|
|
82
|
-
break
|
|
83
|
-
case CHANGE_TYPE.appear:
|
|
84
|
-
animatedItem.element = this.view.drawPiece(Position.indexToSquare(change.atIndex), change.piece)
|
|
85
|
-
animatedItem.element.style.opacity = 0
|
|
86
|
-
break
|
|
87
|
-
case CHANGE_TYPE.disappear:
|
|
88
|
-
animatedItem.element = this.view.getPiece(Position.indexToSquare(change.atIndex))
|
|
89
|
-
break
|
|
90
|
-
}
|
|
91
|
-
animatedElements.push(animatedItem)
|
|
92
|
-
})
|
|
93
|
-
return animatedElements
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
animationStep(time) {
|
|
97
|
-
if (!this.startTime) {
|
|
98
|
-
this.startTime = time
|
|
99
|
-
}
|
|
100
|
-
const timeDiff = time - this.startTime
|
|
101
|
-
if (timeDiff <= this.duration) {
|
|
102
|
-
this.frameHandle = requestAnimationFrame(this.animationStep.bind(this))
|
|
103
|
-
} else {
|
|
104
|
-
cancelAnimationFrame(this.frameHandle)
|
|
105
|
-
this.callback()
|
|
106
|
-
return
|
|
107
|
-
}
|
|
108
|
-
const t = Math.min(1, timeDiff / this.duration)
|
|
109
|
-
const progress = t < .5 ? 2 * t * t : -1 + (4 - 2 * t) * t // easeInOut
|
|
110
|
-
this.animatedElements.forEach((animatedItem) => {
|
|
111
|
-
if (animatedItem.element) {
|
|
112
|
-
switch (animatedItem.type) {
|
|
113
|
-
case CHANGE_TYPE.move:
|
|
114
|
-
animatedItem.element.transform.baseVal.removeItem(0)
|
|
115
|
-
const transform = (this.view.svg.createSVGTransform())
|
|
116
|
-
transform.setTranslate(
|
|
117
|
-
animatedItem.atPoint.x + (animatedItem.toPoint.x - animatedItem.atPoint.x) * progress,
|
|
118
|
-
animatedItem.atPoint.y + (animatedItem.toPoint.y - animatedItem.atPoint.y) * progress)
|
|
119
|
-
animatedItem.element.transform.baseVal.appendItem(transform)
|
|
120
|
-
break
|
|
121
|
-
case CHANGE_TYPE.appear:
|
|
122
|
-
animatedItem.element.style.opacity = progress
|
|
123
|
-
break
|
|
124
|
-
case CHANGE_TYPE.disappear:
|
|
125
|
-
animatedItem.element.style.opacity = 1 - progress
|
|
126
|
-
break
|
|
127
|
-
}
|
|
128
|
-
} else {
|
|
129
|
-
console.warn("animatedItem has no element", animatedItem)
|
|
130
|
-
}
|
|
131
|
-
})
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
squareDistance(index1, index2) {
|
|
135
|
-
const file1 = index1 % 8
|
|
136
|
-
const rank1 = Math.floor(index1 / 8)
|
|
137
|
-
const file2 = index2 % 8
|
|
138
|
-
const rank2 = Math.floor(index2 / 8)
|
|
139
|
-
return Math.max(Math.abs(rank2 - rank1), Math.abs(file2 - file1))
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
}
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Author and copyright: Stefan Haack (https://shaack.com)
|
|
3
|
-
* Repository: https://github.com/shaack/cm-chessboard
|
|
4
|
-
* License: MIT, see file 'LICENSE'
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
export function Observed(target) {
|
|
8
|
-
const self = this
|
|
9
|
-
this.target = target
|
|
10
|
-
this.observers = []
|
|
11
|
-
this.target.addObserver = (callback, propertyName = undefined) => {
|
|
12
|
-
self.observers.push({callback: callback, property: propertyName})
|
|
13
|
-
// console.log(this.observers)
|
|
14
|
-
}
|
|
15
|
-
this.target.destruct = () => {
|
|
16
|
-
self.observers = []
|
|
17
|
-
}
|
|
18
|
-
this.proxy = new Proxy(this.target, {
|
|
19
|
-
set(target, property, value) {
|
|
20
|
-
const oldValue = target[property]
|
|
21
|
-
target[property] = value
|
|
22
|
-
// console.log("set", "property", property, "value", value)
|
|
23
|
-
for (const observer of self.observers) {
|
|
24
|
-
clearTimeout(observer.callbackDebounce)
|
|
25
|
-
observer.callbackDebounce = setTimeout(() => {
|
|
26
|
-
if (!observer.property || observer.property === property) {
|
|
27
|
-
observer.callback({
|
|
28
|
-
target: target,
|
|
29
|
-
property: property,
|
|
30
|
-
value: value,
|
|
31
|
-
oldValue: oldValue
|
|
32
|
-
})
|
|
33
|
-
}
|
|
34
|
-
})
|
|
35
|
-
}
|
|
36
|
-
return true
|
|
37
|
-
}
|
|
38
|
-
})
|
|
39
|
-
return this.proxy
|
|
40
|
-
}
|