From c7bf7b1b10a6d5059f75f540787aba3daaa435f7 Mon Sep 17 00:00:00 2001 From: Benjamin Auder <benjamin.auder@somewhere> Date: Fri, 12 Nov 2021 12:04:44 +0100 Subject: [PATCH] Small style improve (options, Dark) --- app.js | 2 +- base_rules.js | 16 ++++++++-------- common.css | 15 +++++++++++++++ 3 files changed, 24 insertions(+), 9 deletions(-) diff --git a/app.js b/app.js index c553ce5..21d205c 100644 --- a/app.js +++ b/app.js @@ -110,7 +110,7 @@ function prepareOptions(Rules) { if (check.defaut) optHtml += 'checked="true"'; optHtml += '/>'; } - if (Rules.Options.styles.length >= 1) optHtml += "<p>"; + if (Rules.Options.styles.length >= 1) optHtml += '<p class="words">'; for (let style of Rules.Options.styles) { optHtml += ` <span class="word" onClick="toggleStyle(event, '${style}')"> diff --git a/base_rules.js b/base_rules.js index eb01442..68ca909 100644 --- a/base_rules.js +++ b/base_rules.js @@ -628,12 +628,12 @@ export default class ChessRules { const ii = (flipped ? this.size.x - 1 - i : i); const jj = (flipped ? this.size.y - 1 - j : j); let fillOpacity = '1'; - if (this.options["dark"] && !this.enlightened[ii][jj]) - fillOpacity = '0.5'; + let classes = this.getSquareColorClass(ii, jj); + if (this.enlightened && !this.enlightened[ii][jj]) + classes += " in-shadow"; // NOTE: x / y reversed because coordinates system is reversed. - // TODO: CSS "wood" style, rect --> style --> background-image ? - board += `<rect style="fill-opacity:${fillOpacity}; - fill:#${this.getSquareColor(ii, jj)}" + board += `<rect + class="${classes}" id="${this.coordsToId([ii, jj])}" width="10" height="10" @@ -646,8 +646,8 @@ export default class ChessRules { } // Generally light square bottom-right; TODO: user-defined colors at least - getSquareColor(i, j) { - return ((i+j) % 2 == 0 ? "f0d9b5": "b58863"); + getSquareColorClass(i, j) { + return ((i+j) % 2 == 0 ? "light-square": "dark-square"); } setupPieces(r) { @@ -1172,7 +1172,7 @@ export default class ChessRules { } // All possible moves from selected square - getPotentialMovesFrom(sq) { + getPotentialMovesFrom(sq, color) { if (typeof sq[0] == "string") return this.getDropMovesFrom(sq); if (this.options["madrasi"] && this.isImmobilized(sq)) return []; const piece = this.getPiece(sq[0], sq[1]); diff --git a/common.css b/common.css index c0dba37..638a588 100644 --- a/common.css +++ b/common.css @@ -73,9 +73,14 @@ button.block-btn { } /* Options when starting custom game */ +p.words { + line-height: 0.9em; +} .word { cursor: pointer; padding: 3px; + display: inline-block; + margin: 2px; } .highlight-word { background-color: lightblue; @@ -122,6 +127,16 @@ piece { height: 100%; } +.dark-square { + fill: #b58863; +} +.light-square { + fill: #f0d9b5; +} +.in-shadow { + filter: brightness(50%); +} + .reserves { position: absolute; display: block; -- 2.44.0