@alepot55/chessboardjs 2.2.2 → 2.3.0

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.
@@ -1,7 +1,3 @@
1
- /* Main stylesheet for Chessboard.js */
2
- @import './board.css';
3
- @import './pieces.css';
4
- @import './animations.css';
5
1
  :root {
6
2
  --dimBoard: 600px;
7
3
  --pieceRatio: 0.9;
@@ -20,8 +16,8 @@
20
16
  }
21
17
 
22
18
  .board {
23
- display: grid;
24
- grid-template: repeat(8, 1fr) / repeat(8, 1fr);
19
+ display: flex;
20
+ flex-wrap: wrap;
25
21
  width: var(--dimBoard);
26
22
  height: var(--dimBoard);
27
23
  /* Enable hardware acceleration for better performance */
@@ -29,6 +25,12 @@
29
25
  will-change: auto;
30
26
  }
31
27
 
28
+ /* Flipped board - reverse visual order using flexbox */
29
+ .board.flipped {
30
+ flex-direction: row-reverse;
31
+ flex-wrap: wrap-reverse;
32
+ }
33
+
32
34
  .square {
33
35
  width: var(--square-size);
34
36
  height: var(--square-size);
@@ -52,6 +54,16 @@
52
54
  /* IE10+/Edge */
53
55
  user-select: none;
54
56
  /* Standard */
57
+
58
+ /* Animation optimization */
59
+ transform-origin: center center;
60
+ backface-visibility: hidden;
61
+ }
62
+
63
+ /* During drag, enable GPU acceleration */
64
+ .piece.dragging {
65
+ will-change: transform;
66
+ z-index: 100;
55
67
  }
56
68
 
57
69
  .choicable {
@@ -110,7 +122,10 @@
110
122
 
111
123
  .highlighted {
112
124
  box-shadow: inset 0 0 10px var(--highlightSquare);
113
- }/* Piece-specific styles */
125
+ }
126
+
127
+ /* Note: Flexbox-based flip is instant by design for best UX.
128
+ No CSS transform on board means pieces can animate freely without conflict. *//* Piece-specific styles */
114
129
  .piece {
115
130
  position: absolute;
116
131
  cursor: pointer;