Support in-board coordinate display & Better board coordinate CSS & M…

…inor fixes Signed-off-by: yjf2002ghty <[email protected]>
yjf2002ghty · Dec 10, 2024 · 2ebd8bb · 2ebd8bb
1 parent 476ab8e
commit 2ebd8bb
Show file tree

Hide file tree

Showing 10 changed files with 287 additions and 34 deletions.
diff --git a/generate_css.js b/generate_css.js
@@ -1,7 +1,7 @@
 /* 
  * 
  * Generates SVG files for generic boards and CSS files for "FEN Style Letters" theme and generic boards.
- * node generate_css.js [--silent] [--max-rank <int>] [--max-file <int>]
+ * "node generate_css.js --help" for more information.
  * 
  */ 
 
@@ -74,10 +74,7 @@ function GenerateGenericBoardSVGTiling(width, height, squareWidth, squareHeight,
     for (i=0;i<width;i+=1) { //From left to right, 0 to N-1
         for (j=0;j<height;j+=1) { //From bottom to top, 0 to N-1
             //Square at bottom left corner is always dark
-            if ((j&1)==0 && (i&1)==0) {
-                result+=`<rect x="${i*squareWidth}" y="${(height-j-1)*squareHeight}" width="${squareWidth}" height="${squareHeight}"/>`;
-            }
-            else if ((j&1)==1 && (i&1)==1) {
+            if ((j&1)==(i&1)) {
                 result+=`<rect x="${i*squareWidth}" y="${(height-j-1)*squareHeight}" width="${squareWidth}" height="${squareHeight}"/>`;
             }
         }
@@ -636,7 +633,7 @@ const colors= ((colorsparam.length==0) ? [
 result="";
 
 for (k=0;k<colors.length;k++){
-    result="/* Automatically generated, do not edit!!! */\n";
+    result=`/* Automatically generated, do not edit!!! */\n.${colors[k].color}board{--dark-square-color:${colors[k].colorCodeDark};--light-square-color:${colors[k].colorCodeLight}}`;
     if (!directoryExists(`./public/assets/images/board/${colors[k].color}`)) {
         if (!makeDirectory(`./public/assets/images/board/${colors[k].color}`)) {
             console.error(`Failed to make directory: ./public/assets/images/board/${colors[k].color}`);

diff --git a/public/assets/chessground.css b/public/assets/chessground.css
@@ -144,20 +144,31 @@ cg-board piece.fading {
   position: absolute;
   display: flex;
   pointer-events: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
   opacity: 1;
   font-size: 14px;
   font-weight: bold;
   font-family: "Arial";
 }
+.inner .cg-wrap coords {
+  z-index: 1;
+  font-size: 18px;
+}
 .cg-wrap.micro coords {
-    display: none;
+  display: none;
 }
 .cg-wrap coords.side {
   right: -20px;
   top: 0;
   flex-flow: column-reverse;
   height: 100%;
-  width: 16px;
+  width: 20px;
+}
+.inner .cg-wrap coords.side {
+  right: 0;
 }
 .cg-wrap coords.side.black {
   flex-flow: column;
@@ -171,59 +182,94 @@ cg-board piece.fading {
   text-transform: uppercase;
   text-align: center;
 }
+.inner .cg-wrap coords.bottom {
+  bottom: 0;
+}
 .cg-wrap coords.top {
-    top: -16px;
-    left: 0;
-    flex-flow: row;
-    width: 100%;
-    height: 20px;
-    text-transform: uppercase;
-    text-align: center;
+  top: -20px;
+  left: 0;
+  flex-flow: row;
+  width: 100%;
+  height: 20px;
+  text-transform: uppercase;
+  text-align: center;
+}
+.inner .cg-wrap coords.top {
+  top: 0;
 }
 .cg-wrap coords.bottom.black {
   flex-flow: row-reverse;
 }
 .cg-wrap coords.top.black {
-    flex-flow: row-reverse;
+  flex-flow: row-reverse;
 }
 
 .shogi .cg-wrap coords.top.black {
-    flex-flow: row;
+  flex-flow: row;
 }
 .shogi .cg-wrap coords.top {
-    flex-flow: row-reverse;
+  flex-flow: row-reverse;
 }
 .shogi .cg-wrap coords.side.black {
-    flex-flow: column-reverse;
+  flex-flow: column-reverse;
 }
 .shogi .cg-wrap coords.side {
-    flex-flow: column;
+  flex-flow: column;
 }
 .xiangqi .cg-wrap coords.top {
-    flex-flow: row;
+  flex-flow: row;
 }
 .xiangqi .cg-wrap coords.top.black {
-    flex-flow: row-reverse;
+  flex-flow: row-reverse;
 }
 .xiangqi .cg-wrap coords.bottom.black {
-    flex-flow: row;
+  flex-flow: row;
 }
 .xiangqi .cg-wrap coords.bottom {
-    flex-flow: row-reverse;
+  flex-flow: row-reverse;
 }
 
 .cg-wrap coords.bottom coord {
   flex: 1;
-  text-align: center;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
 }
 .cg-wrap coords.top coord {
-    flex: 1;
-    text-align: center;
+  flex: 1;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
 }
 .cg-wrap coords.side coord {
   flex: 1;
   display: flex;
   align-items: center;
+  justify-content: left;
+  padding-left: 2px;
+}
+.inner .cg-wrap coords.bottom coord {
+  align-items: flex-end;
+  justify-content: right;
+  padding-right: 3px;
+}
+.inner .cg-wrap coords.top coord {
+  align-items: flex-start;
+  justify-content: left;
+  padding-left: 3px;
+}
+.inner .cg-wrap coords.side coord {
+  align-items: flex-start;
+  justify-content: right;
+  padding-top: 2px;
+  padding-right: 3px;
+}
+
+.inner .cg-wrap coords coord.dark {
+  color: var(--dark-square-color,#000);
+}
+.inner .cg-wrap coords coord.light {
+  color: var(--light-square-color,#000);
 }
 
 /* Drop variants */

diff --git a/public/assets/theme-board-blueboard.css b/public/assets/theme-board-blueboard.css
@@ -1,3 +1,7 @@
+.blueboard {
+  --dark-square-color: #8ca2ad;
+  --light-square-color: #dee3e6;
+}
 .blueboard.board1x1 cg-board {
   background-image: url('images/board/blue/blue1x1.svg');
 }

diff --git a/public/assets/theme-board-brownboard.css b/public/assets/theme-board-brownboard.css
@@ -1,3 +1,7 @@
+.brownboard {
+  --dark-square-color: #b58863;
+  --light-square-color: #f0d9b5;
+}
 .brownboard.board1x1 cg-board {
   background-image: url('images/board/brown/brown1x1.svg');
 }

diff --git a/public/assets/theme-board-cobaltboard.css b/public/assets/theme-board-cobaltboard.css
@@ -1,3 +1,7 @@
+.cobaltboard {
+  --dark-square-color: #6882a8;
+  --light-square-color: #9bb5db;
+}
 .cobaltboard.board1x1 cg-board {
   background-image: url('images/board/cobalt/cobalt_1x1.svg');
 }

diff --git a/public/assets/theme-board-greenboard.css b/public/assets/theme-board-greenboard.css
@@ -1,3 +1,7 @@
+.greenboard {
+  --dark-square-color: #86a666;
+  --light-square-color: #ffffdd;
+}
 .greenboard.board1x1 cg-board {
   background-image: url('images/board/green/green1x1.svg');
 }

diff --git a/public/assets/theme-board-purpleboard.css b/public/assets/theme-board-purpleboard.css
@@ -1,3 +1,7 @@
+.purpleboard {
+  --dark-square-color: #a781b1;
+  --light-square-color: #eadfed;
+}
 .purpleboard.board1x1 cg-board {
   background-image: url('images/board/purple/purple1x1.svg');
 }

diff --git a/public/assets/theme-ui-landscape.css b/public/assets/theme-ui-landscape.css
@@ -244,6 +244,10 @@ coord {
     text-shadow: var(--text-shadow-style-black);
 }
 
+.inner coord {
+    text-shadow: none;
+}
+
 .timer-active {
     box-shadow: 0px 0px 5px 5px #629924;
 }

diff --git a/src/html/advanced.html b/src/html/advanced.html
@@ -8544,6 +8544,31 @@
                       ),
                     ],
                   ),
+                  m(
+                    "label",
+                    {
+                      title:
+                        "When checked, the board coordinates are shown inside of the board. Otherwise they are outside of the board.",
+                    },
+                    m("input[type=checkbox]#check-innercoordinate", {
+                      disabled: !is_ready,
+                      onclick: () => {
+                        if (
+                          document.getElementById("check-innercoordinate")
+                            .checked
+                        ) {
+                          document
+                            .getElementById("chessground-container-div")
+                            .classList.add("inner");
+                        } else {
+                          document
+                            .getElementById("chessground-container-div")
+                            .classList.remove("inner");
+                        }
+                      },
+                    }),
+                    "Inner Board Coordinate",
+                  ),
                 ]),
               ]),
             ]),