Small style improve (options, Dark)

diff --git a/app.js b/app.js
index c553ce5..21d205c 100644 (file)
--- 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 (file)
--- 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 (file)
--- 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;