projects
/
vchess.git
/ blobdiff
commit
grep
author
committer
pickaxe
?
search:
re
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
Use clientXY and not pageXY for touch screens. Should work better :)
[vchess.git]
/
client
/
src
/
components
/
Board.vue
diff --git
a/client/src/components/Board.vue
b/client/src/components/Board.vue
index
7f2e43e
..
48bdd87
100644
(file)
--- a/
client/src/components/Board.vue
+++ b/
client/src/components/Board.vue
@@
-568,7
+568,11
@@
export default {
this.coordsToXY(line[1], bPos.top, bPos.left, squareWidth);
let path =
document.createElementNS("http://www.w3.org/2000/svg", "path");
this.coordsToXY(line[1], bPos.top, bPos.left, squareWidth);
let path =
document.createElementNS("http://www.w3.org/2000/svg", "path");
- path.classList.add("svg-line");
+ if (line[0][0] == line[1][0] || line[0][1] == line[1][1])
+ path.classList.add("svg-line");
+ else
+ // "Diagonals" are drawn with a lighter color (TODO: generalize)
+ path.classList.add("svg-diag");
path.setAttribute(
"d",
"M" + lStart.x + "," + lStart.y + " " +
path.setAttribute(
"d",
"M" + lStart.x + "," + lStart.y + " " +
@@
-671,12
+675,7
@@
export default {
// Cancel if off boardContainer
const [offsetX, offsetY] =
this.mobileBrowser
// Cancel if off boardContainer
const [offsetX, offsetY] =
this.mobileBrowser
- ?
- [
- e.changedTouches[0].pageX,
- // TODO: fixing attempt for smartphones, removing window.scrollY
- e.changedTouches[0].pageY - window.scrollY
- ]
+ ? [e.changedTouches[0].clientX, e.changedTouches[0].clientY]
: [e.clientX, e.clientY];
if (
offsetX < this.containerPos.left ||
: [e.clientX, e.clientY];
if (
offsetX < this.containerPos.left ||
@@
-756,11
+755,7
@@
export default {
// Obtain the move from start and end squares
const [offsetX, offsetY] =
this.mobileBrowser
// Obtain the move from start and end squares
const [offsetX, offsetY] =
this.mobileBrowser
- ?
- [
- e.changedTouches[0].pageX,
- e.changedTouches[0].pageY - window.scrollY
- ]
+ ? [e.changedTouches[0].clientX, e.changedTouches[0].clientY]
: [e.clientX, e.clientY];
let landing = document.elementFromPoint(offsetX, offsetY);
// Next condition: classList.contains(piece) fails because of marks
: [e.clientX, e.clientY];
let landing = document.elementFromPoint(offsetX, offsetY);
// Next condition: classList.contains(piece) fails because of marks
@@
-844,6
+839,9
@@
export default {
.svg-line
stroke: black
.svg-line
stroke: black
+.svg-diag
+ stroke: grey
+
.arrow-head
fill: #5f0e78
</style>
.arrow-head
fill: #5f0e78
</style>