this.setFlags(fenParsed.flags);
if (this.hasEnpassant)
this.epSquare = this.getEpSquare(fenParsed.enpassant);
- if (this.hasReserve)
+ if (this.hasReserve && !this.isDiagram)
this.initReserves(fenParsed.reserve);
if (this.options["crazyhouse"])
this.initIspawn(fenParsed.ispawn);
// VISUAL METHODS
graphicalInit() {
- // NOTE: not window.onresize = this.re_drawBoardElts because scope (this)
- window.onresize = () => this.re_drawBoardElements();
const g_init = () => {
this.re_drawBoardElements();
- if (!this.isDiagram)
+ if (!this.isDiagram && !this.mouseListeners && !this.touchListeners)
this.initMouseEvents();
};
let container = document.getElementById(this.containerId);
- if (container.getBoundingClientRect().width == 0) {
- // Element not ready yet
- let ro = new ResizeObserver(() => {
- ro.unobserve(container);
- g_init();
- });
- ro.observe(container);
- }
- else
- g_init();
+ this.windowResizeObs = new ResizeObserver(g_init);
+ this.windowResizeObs.observe(container);
}
re_drawBoardElements() {
cbHeight = Math.min(rc.height, 767);
cbWidth = cbHeight * vRatio;
}
- if (this.hasReserve) {
+ if (this.hasReserve && !this.isDiagram) {
const sqSize = cbWidth / this.size.y;
// NOTE: allocate space for reserves (up/down) even if they are empty
// Cannot use getReserveSquareSize() here, but sqSize is an upper bound.
}
}
}
- if (this.hasReserve)
+ if (this.hasReserve && !this.isDiagram)
this.re_drawReserve(['w', 'b'], r);
}
}
}
}
- if (this.hasReserve)
+ if (this.hasReserve && !this.isDiagram)
this.rescaleReserve(newR);
}
}
removeListeners() {
+ let container = document.getElementById(this.containerId);
+ this.windowResizeObs.unobserve(container);
if (this.isDiagram)
return; //no listeners in this case
if ('onmousedown' in window) {
margin: 20px auto;
padding: 0 10px;
}
-.full-rules h2, .full-rules h3, .full-rules h4 {
+.full-rules h1, .full-rules h2, .full-rules h3, .full-rules h4 {
font-weight: bold;
display: block;
}
+.full-rules h1 {
+ font-size: 2.5em;
+ margin: 10px 0 20px 0;
+}
.full-rules h2 {
color: darkred;
- font-size: 2.5em;
+ font-size: 2em;
margin: 10px 0;
}
.full-rules h3 {
color: darkviolet;
- font-size: 2em;
+ font-size: 1.8em;
margin: 10px 0;
}
.full-rules h4 {
margin: 5px 0;
text-align: center;
}
+.full-rules figure {
+ display: block;
+ overflow: visible;
+ margin-top: 20px;
+}
+.full-rules figure:after {
+ content: '';
+ display: block;
+ clear: both;
+ margin-bottom: 20px;
+}
.full-rules .diag {
position: relative;
- margin: -30px auto 0 auto;
+ margin: 0 auto;
+}
+.full-rules .left {
+ float: left;
+}
+.full-rules .right {
+ float: right;
}
.full-rules figcaption {
display: block;
text-align: center;
- margin-top: -50px;
- margin-bottom: 30px;
+ clear: both;
+ font-size: 0.9em;
+ color: #0D1C46;
+ font-weight: bold;
}
/* TODO: use same CSS for rules and full-rules? */
.full-rules p, .full-rules ul, .full-rules ol {
list-style-type: numeric;
padding-left: 30px;
}
-/* From vchess to adapt: */
-/*
-figure.diagram-container
- margin: 15px 0 15px 0
- text-align: center
- width: 100%
- display: block
- .diagram
- display: block
- width: 50%
- margin-left: auto
- margin-right: auto
- @media screen and (max-width: 630px)
- width: 75%
- .diag12
- float: left
- width: 42%
- margin: 0 2% 0 6%
- @media screen and (max-width: 630px)
- width: 49%
- margin: 0 1% 0 0
- .diag22
- float: left
- width: 42%
- margin: 0 6% 0 2%
- @media screen and (max-width: 630px)
- width: 49%
- margin: 0 0 0 1%
- figcaption
- display: block
- clear: both
- padding-top: 5px
- font-size: 0.8em
-*/
#ng-select {
margin-bottom: 20px;
window.V = module.default;
for (const [k, v] of Object.entries(V.Aliases))
window[k] = v;
- drawDiagrams();
+ re_drawDiagrams();
});
}
// TODO: heuristic to improve for ratio != 1 (how?)
-function getDiagSize() {
- if (window.innerWidth > 1000)
- return 500;
- if (window.innerWidth < 800)
- return window.innerWidth;
- return window.innerWidth / 2;
+function getDiagSize(elt) {
+ const baseWidth = Math.min(window.innerWidth, 800);
+ let multFact = 1;
+ if (elt.classList.contains("left") || elt.classList.contains("right"))
+ multFact = 0.45;
+ else if (baseWidth > 630)
+ multFact = 0.5;
+ else
+ multFact = 0.7;
+ return multFact * baseWidth;
}
-function drawDiagrams() {
+let vr = null;
+function re_drawDiagrams() {
const diagrams = document.getElementsByClassName("diag");
+ if (diagrams.length == 0)
+ return;
+ const redrawing = !!vr;
+ if (!redrawing)
+ vr = new Array(diagrams.length);
for (let i=0; i<diagrams.length; i++) {
- let chessboard = document.createElement("div");
- chessboard.classList.add("chessboard");
- diagrams[i].appendChild(chessboard);
- const diagSize = getDiagSize();
+ if (!redrawing) {
+ let chessboard = document.createElement("div");
+ chessboard.classList.add("chessboard");
+ diagrams[i].appendChild(chessboard);
+ diagrams[i].id = "diag_" + i;
+ }
+ const diagSize = getDiagSize(diagrams[i]);
diagrams[i].style.width = diagSize + "px";
diagrams[i].style.height = diagSize + "px";
- diagrams[i].id = "diag_" + i;
- const vr = new V({
- element: "diag_" + i,
- fen: diagrams[i].dataset.fen,
- color: diagrams[i].dataset.col || 'w',
- options: {},
- diagram: true
- });
+ if (!redrawing) {
+ vr[i] = new V({
+ element: "diag_" + i,
+ fen: diagrams[i].dataset.fen,
+ color: diagrams[i].dataset.col || 'w',
+ options: {},
+ diagram: true
+ });
+ }
}
}
+
+window.onresize = re_drawDiagrams;
<div>
<p>
- Pieces move as usual, but they all hide a special "power" inspired by
- Mario Kart:
+ Pieces move as usual, but they all hide a special "power"
+ inspired by Mario Kart:
</p>
<ul>
<li>
- The pawn (Toad) leaves a "turbo" mushroom on its initial square, or on
- the intermediate one in case of a two squares move.
+ The pawn (Toad) leaves a "turbo" mushroom on its initial square,
+ or on the intermediate one in case of a two squares move.
</li>
<li>
- The knight (Yoshi) let a surprise egg on its initial square. See about
- egg effect below.
+ The knight (Yoshi) let a surprise egg on its initial square.
+ See about egg effect below.
</li>
<li>
The rook (Donkey) put a banana on a square diagonally adjacent to the
arrival one, at random, if possible.
</li>
<li>
- The queen (Mario) can play a stealth move once in the game: the opponent
- will only know that a queen moved - to an empty square.
+ The queen (Mario) can play a stealth move once in the game:
+ the opponent will only know that a queen moved - to an empty square.
A promoted queen also has this power if not already used.
</li>
<li>
A king or a pawn arriving on a mushroom advance one square further,
while a knight jump another time in the same direction, if possible.
Pawns can "eat" objects diagonally too.
+ Mushrooms have no effect on sliders (queen, rook, bishop).
</li>
<li>
A piece arriving on a banana (resp. bomb) is redirected at random by one
color!) stands on that square, then it is captured.
</li>
<li>
- The effects can cumulate, as illustrated on the diagram: the bishop
- "captures" the banana on e4, and is then redirected twoard e5: mushroom,
- it jumps over the black pawn to ends on the bomb on e7, which sends it
- on d6 (f6 and f8 were possible too). A bomb is finally put on c6 which
- is the only eligible square. A piece may ends on its initial square,
- move back, and so on. That being said, a given object can only be used
- once on the path.
+ The effects can cumulate, as illustrated on the diagram: the pawn
+ "captures" the banana on e4, and is then redirected toward e5: mushroom,
+ it jumps to the next square, which sends it on d5 eating the white rook.
+ (We can imagine that the hope was to eat the black knight instead).
+ A piece may ends on its initial square, move back, and so on. That being
+ said, a given object can only be used once on the path.
</li>
</ul>
- <!-- TODO: class for left/right + adapt diagrams for new rules -->
<figure>
<div class="diag left"
- data-fen='rn1b2qk/pbppwppp/1w2p3/1p1Rm3/3PdnPr/4P1d1/PPP1mP1P/NNB1KRQB b 1 {"flags":"1111"}'>
+ data-fen='rn1b2qk/pbpp1ppp/1w2wp2/1p1Rm3/3PdnPr/4PPd1/PPP1m2P/NNB1KRQB b 1 {"flags":"1111"}'>
</div>
<div class="diag right"
- data-fen='rn1b2qk/pbpp1ppp/1wwBp3/1p1R4/3P1nPr/4P1d1/PPP1mP1P/NNB1KRQ1 w 2 {"flags":"1111"}'>
+ data-fen='rn1b2qk/pbpp1ppp/1w3p2/1p1P4/3P1nPr/4P1d1/PPP1m2P/NNB1KRQB w 2 {"flags":"1111"}'>
</div>
- <figcaption>Left: before 1.Bxe4. Right: after the move, ending on d6.</figcaption>
+ <figcaption>Left: before 1.fxe4. Right: after the move, ending on d6.</figcaption>
</figure>
</div>
projects / xogo.git / commitdiff