Merge pull request #64 from Pomax/es2021

redid the tileset
Pomax · Jul 5, 2021 · dff9f20 · dff9f20
2 parents 3a582af + 32bf3aa
commit dff9f20
Show file tree

Hide file tree

Showing 54 changed files with 183 additions and 169 deletions.
diff --git a/img/tiles/default-tileset.png b/img/tiles/default-tileset.png
diff --git a/img/tiles/0.jpg → img/tiles/small/0.jpg b/img/tiles/0.jpg → img/tiles/small/0.jpg
diff --git a/img/tiles/1.jpg → img/tiles/small/1.jpg b/img/tiles/1.jpg → img/tiles/small/1.jpg
diff --git a/img/tiles/10.jpg → img/tiles/small/10.jpg b/img/tiles/10.jpg → img/tiles/small/10.jpg
diff --git a/img/tiles/11.jpg → img/tiles/small/11.jpg b/img/tiles/11.jpg → img/tiles/small/11.jpg
diff --git a/img/tiles/12.jpg → img/tiles/small/12.jpg b/img/tiles/12.jpg → img/tiles/small/12.jpg
diff --git a/img/tiles/13.jpg → img/tiles/small/13.jpg b/img/tiles/13.jpg → img/tiles/small/13.jpg
diff --git a/img/tiles/14.jpg → img/tiles/small/14.jpg b/img/tiles/14.jpg → img/tiles/small/14.jpg
diff --git a/img/tiles/15.jpg → img/tiles/small/15.jpg b/img/tiles/15.jpg → img/tiles/small/15.jpg
diff --git a/img/tiles/16.jpg → img/tiles/small/16.jpg b/img/tiles/16.jpg → img/tiles/small/16.jpg
diff --git a/img/tiles/17.jpg → img/tiles/small/17.jpg b/img/tiles/17.jpg → img/tiles/small/17.jpg
diff --git a/img/tiles/18.jpg → img/tiles/small/18.jpg b/img/tiles/18.jpg → img/tiles/small/18.jpg
diff --git a/img/tiles/19.jpg → img/tiles/small/19.jpg b/img/tiles/19.jpg → img/tiles/small/19.jpg
diff --git a/img/tiles/2.jpg → img/tiles/small/2.jpg b/img/tiles/2.jpg → img/tiles/small/2.jpg
diff --git a/img/tiles/20.jpg → img/tiles/small/20.jpg b/img/tiles/20.jpg → img/tiles/small/20.jpg
diff --git a/img/tiles/21.jpg → img/tiles/small/21.jpg b/img/tiles/21.jpg → img/tiles/small/21.jpg
diff --git a/img/tiles/22.jpg → img/tiles/small/22.jpg b/img/tiles/22.jpg → img/tiles/small/22.jpg
diff --git a/img/tiles/23.jpg → img/tiles/small/23.jpg b/img/tiles/23.jpg → img/tiles/small/23.jpg
diff --git a/img/tiles/24.jpg → img/tiles/small/24.jpg b/img/tiles/24.jpg → img/tiles/small/24.jpg
diff --git a/img/tiles/25.jpg → img/tiles/small/25.jpg b/img/tiles/25.jpg → img/tiles/small/25.jpg
diff --git a/img/tiles/26.jpg → img/tiles/small/26.jpg b/img/tiles/26.jpg → img/tiles/small/26.jpg
diff --git a/img/tiles/27.jpg → img/tiles/small/27.jpg b/img/tiles/27.jpg → img/tiles/small/27.jpg
diff --git a/img/tiles/28.jpg → img/tiles/small/28.jpg b/img/tiles/28.jpg → img/tiles/small/28.jpg
diff --git a/img/tiles/29.jpg → img/tiles/small/29.jpg b/img/tiles/29.jpg → img/tiles/small/29.jpg
diff --git a/img/tiles/3.jpg → img/tiles/small/3.jpg b/img/tiles/3.jpg → img/tiles/small/3.jpg
diff --git a/img/tiles/30.jpg → img/tiles/small/30.jpg b/img/tiles/30.jpg → img/tiles/small/30.jpg
diff --git a/img/tiles/31.jpg → img/tiles/small/31.jpg b/img/tiles/31.jpg → img/tiles/small/31.jpg
diff --git a/img/tiles/32.jpg → img/tiles/small/32.jpg b/img/tiles/32.jpg → img/tiles/small/32.jpg
diff --git a/img/tiles/33.jpg → img/tiles/small/33.jpg b/img/tiles/33.jpg → img/tiles/small/33.jpg
diff --git a/img/tiles/34.jpg → img/tiles/small/34.jpg b/img/tiles/34.jpg → img/tiles/small/34.jpg
diff --git a/img/tiles/35.jpg → img/tiles/small/35.jpg b/img/tiles/35.jpg → img/tiles/small/35.jpg
diff --git a/img/tiles/36.jpg → img/tiles/small/36.jpg b/img/tiles/36.jpg → img/tiles/small/36.jpg
diff --git a/img/tiles/37.jpg → img/tiles/small/37.jpg b/img/tiles/37.jpg → img/tiles/small/37.jpg
diff --git a/img/tiles/38.jpg → img/tiles/small/38.jpg b/img/tiles/38.jpg → img/tiles/small/38.jpg
diff --git a/img/tiles/39.jpg → img/tiles/small/39.jpg b/img/tiles/39.jpg → img/tiles/small/39.jpg
diff --git a/img/tiles/4.jpg → img/tiles/small/4.jpg b/img/tiles/4.jpg → img/tiles/small/4.jpg
diff --git a/img/tiles/40.jpg → img/tiles/small/40.jpg b/img/tiles/40.jpg → img/tiles/small/40.jpg
diff --git a/img/tiles/41.jpg → img/tiles/small/41.jpg b/img/tiles/41.jpg → img/tiles/small/41.jpg
diff --git a/img/tiles/5.jpg → img/tiles/small/5.jpg b/img/tiles/5.jpg → img/tiles/small/5.jpg
diff --git a/img/tiles/6.jpg → img/tiles/small/6.jpg b/img/tiles/6.jpg → img/tiles/small/6.jpg
diff --git a/img/tiles/7.jpg → img/tiles/small/7.jpg b/img/tiles/7.jpg → img/tiles/small/7.jpg
diff --git a/img/tiles/8.jpg → img/tiles/small/8.jpg b/img/tiles/8.jpg → img/tiles/small/8.jpg
diff --git a/img/tiles/9.jpg → img/tiles/small/9.jpg b/img/tiles/9.jpg → img/tiles/small/9.jpg
diff --git a/img/tiles/blank.jpg → img/tiles/small/blank.jpg b/img/tiles/blank.jpg → img/tiles/small/blank.jpg
diff --git a/img/tiles/concealed.jpg → img/tiles/small/concealed.jpg b/img/tiles/concealed.jpg → img/tiles/small/concealed.jpg
diff --git a/img/tiles/dead.jpg → img/tiles/small/dead.jpg b/img/tiles/dead.jpg → img/tiles/small/dead.jpg
diff --git a/img/tiles/tileset.png → img/tiles/small/tileset.png b/img/tiles/tileset.png → img/tiles/small/tileset.png
diff --git a/index.html b/index.html
@@ -143,68 +143,68 @@ <h1><a href="#explanation">The how of Mahjong</a></h1>
           Four sets of the numerical tiles 1 through 9 with "dots" ornamentation (traditionally called 筒, "coin"):
         </p>
         <div>
-          <img src="./img/tiles/18.jpg">
-          <img src="./img/tiles/19.jpg">
-          <img src="./img/tiles/20.jpg">
-          <img src="./img/tiles/21.jpg">
-          <img src="./img/tiles/22.jpg">
-          <img src="./img/tiles/23.jpg">
-          <img src="./img/tiles/24.jpg">
-          <img src="./img/tiles/25.jpg">
-          <img src="./img/tiles/26.jpg">
+          <game-tile tile="18" open></game-tile>
+          <game-tile tile="19"></game-tile>
+          <game-tile tile="20"></game-tile>
+          <game-tile tile="21"></game-tile>
+          <game-tile tile="22"></game-tile>
+          <game-tile tile="23"></game-tile>
+          <game-tile tile="24"></game-tile>
+          <game-tile tile="25"></game-tile>
+          <game-tile tile="26"></game-tile>
         </div>
       </li>
       <li>
         <p>
           Four sets of the numerical tiles 1 through 9 with "bamboo"/"sticks" ornamentation (traditionally called 索, "coin string"):
         </p>
         <div>
-          <img src="./img/tiles/0.jpg">
-          <img src="./img/tiles/1.jpg">
-          <img src="./img/tiles/2.jpg">
-          <img src="./img/tiles/3.jpg">
-          <img src="./img/tiles/4.jpg">
-          <img src="./img/tiles/5.jpg">
-          <img src="./img/tiles/6.jpg">
-          <img src="./img/tiles/7.jpg">
-          <img src="./img/tiles/8.jpg">
+          <game-tile tile="0"></game-tile>
+          <game-tile tile="1"></game-tile>
+          <game-tile tile="2"></game-tile>
+          <game-tile tile="3"></game-tile>
+          <game-tile tile="4"></game-tile>
+          <game-tile tile="5"></game-tile>
+          <game-tile tile="6"></game-tile>
+          <game-tile tile="7"></game-tile>
+          <game-tile tile="8"></game-tile>
         </div>
       </li>
       <li>
         <p>
           Four sets of the numerical tiles 1 through 9 with "Chinese character" ornamentation (traditionally called 萬, "10,000"):
         </p>
         <div>
-          <img src="./img/tiles/9.jpg">
-          <img src="./img/tiles/10.jpg">
-          <img src="./img/tiles/11.jpg">
-          <img src="./img/tiles/12.jpg">
-          <img src="./img/tiles/13.jpg">
-          <img src="./img/tiles/14.jpg">
-          <img src="./img/tiles/15.jpg">
-          <img src="./img/tiles/16.jpg">
-          <img src="./img/tiles/17.jpg">
+          <game-tile tile="9"></game-tile>
+          <game-tile tile="10"></game-tile>
+          <game-tile tile="11"></game-tile>
+          <game-tile tile="12"></game-tile>
+          <game-tile tile="13"></game-tile>
+          <game-tile tile="14"></game-tile>
+          <game-tile tile="15"></game-tile>
+          <game-tile tile="16"></game-tile>
+          <game-tile tile="17"></game-tile>
         </div>
       </li>
       <li>
         <p>
           Four sets of the four cardinal "wind" directions:
         </p>
         <div>
-          <img src="./img/tiles/27.jpg">
-          <img src="./img/tiles/28.jpg">
-          <img src="./img/tiles/29.jpg">
-          <img src="./img/tiles/30.jpg">
+          <game-tile tile="27"></game-tile>
+          <game-tile tile="28"></game-tile>
+          <game-tile tile="29"></game-tile>
+          <game-tile tile="30"></game-tile>
         </div>
       </li>
       <li>
         <p>
           Four sets of "dragon" tiles:
         </p>
         <div>
-          <img src="./img/tiles/31.jpg">
-          <img src="./img/tiles/32.jpg">
-          <img src="./img/tiles/33.jpg">
+          <game-tile tile="31"></game-tile>
+          <game-tile tile="32"></game-tile>
+          <game-tile tile="33"></game-tile>
         </div>
       </li>
     </ul>
@@ -220,10 +220,10 @@ <h1><a href="#explanation">The how of Mahjong</a></h1>
           The four seasons (spring, summer, fall, winter, or 春, 夏, 秋, 冬)
         </p>
         <div>
-          <img src="./img/tiles/38.jpg">
-          <img src="./img/tiles/39.jpg">
-          <img src="./img/tiles/40.jpg">
-          <img src="./img/tiles/41.jpg">
+          <game-tile tile="38"></game-tile>
+          <game-tile tile="39"></game-tile>
+          <game-tile tile="40"></game-tile>
+          <game-tile tile="41"></game-tile>
         </div>
       </li>
       <li>
@@ -232,10 +232,10 @@ <h1><a href="#explanation">The how of Mahjong</a></h1>
           chrysanthenum, or 蘭, 梅, 竹, 菊)
         </p>
         <div>
-          <img src="./img/tiles/34.jpg">
-          <img src="./img/tiles/35.jpg">
-          <img src="./img/tiles/36.jpg">
-          <img src="./img/tiles/37.jpg">
+          <game-tile tile="34"></game-tile>
+          <game-tile tile="35"></game-tile>
+          <game-tile tile="36"></game-tile>
+          <game-tile tile="37"></game-tile>
         </div>
       </li>
     </ul>

diff --git a/src/css/tiles.css b/src/css/tiles.css
@@ -61,60 +61,60 @@ game-tile + game-tile {
   margin-left: 1px;
 }
 
-[tile="-1"] { content: "unknown"; background-image: url("../../img/tiles/concealed.jpg"); box-shadow: -1px -1px 1px 0 inset #0d450e; }
-
-[tile="0"] { content: "bamboo-1"; background-image: url("../../img/tiles/0.jpg");}
-[tile="1"] { content: "bamboo-2"; background-image: url("../../img/tiles/1.jpg");}
-[tile="2"] { content: "bamboo-3"; background-image: url("../../img/tiles/2.jpg");}
-[tile="3"] { content: "bamboo-4"; background-image: url("../../img/tiles/3.jpg");}
-[tile="4"] { content: "bamboo-5"; background-image: url("../../img/tiles/4.jpg");}
-[tile="5"] { content: "bamboo-6"; background-image: url("../../img/tiles/5.jpg");}
-[tile="6"] { content: "bamboo-7"; background-image: url("../../img/tiles/6.jpg");}
-[tile="7"] { content: "bamboo-8"; background-image: url("../../img/tiles/7.jpg");}
-[tile="8"] { content: "bamboo-9"; background-image: url("../../img/tiles/8.jpg");}
-
-[tile="9"] { content: "characters-1"; background-image: url("../../img/tiles/9.jpg");}
-[tile="10"] { content: "characters-2"; background-image: url("../../img/tiles/10.jpg");}
-[tile="11"] { content: "characters-3"; background-image: url("../../img/tiles/11.jpg");}
-[tile="12"] { content: "characters-4"; background-image: url("../../img/tiles/12.jpg");}
-[tile="13"] { content: "characters-5"; background-image: url("../../img/tiles/13.jpg");}
-[tile="14"] { content: "characters-6"; background-image: url("../../img/tiles/14.jpg");}
-[tile="15"] { content: "characters-7"; background-image: url("../../img/tiles/15.jpg");}
-[tile="16"] { content: "characters-8"; background-image: url("../../img/tiles/16.jpg");}
-[tile="17"] { content: "characters-9"; background-image: url("../../img/tiles/17.jpg");}
-
-[tile="18"] { content: "dots-1"; background-image: url("../../img/tiles/18.jpg");}
-[tile="19"] { content: "dots-2"; background-image: url("../../img/tiles/19.jpg");}
-[tile="20"] { content: "dots-3"; background-image: url("../../img/tiles/20.jpg");}
-[tile="21"] { content: "dots-4"; background-image: url("../../img/tiles/21.jpg");}
-[tile="22"] { content: "dots-5"; background-image: url("../../img/tiles/22.jpg");}
-[tile="23"] { content: "dots-6"; background-image: url("../../img/tiles/23.jpg");}
-[tile="24"] { content: "dots-7"; background-image: url("../../img/tiles/24.jpg");}
-[tile="25"] { content: "dots-8"; background-image: url("../../img/tiles/25.jpg");}
-[tile="26"] { content: "dots-9"; background-image: url("../../img/tiles/26.jpg");}
-
-[tile="27"] { content: "E"; background-image: url("../../img/tiles/27.jpg");}
-[tile="28"] { content: "S"; background-image: url("../../img/tiles/28.jpg");}
-[tile="29"] { content: "W"; background-image: url("../../img/tiles/29.jpg");}
-[tile="30"] { content: "N"; background-image: url("../../img/tiles/30.jpg");}
-
-[tile="31"] { content: "F"; background-image: url("../../img/tiles/31.jpg");}
-[tile="32"] { content: "C"; background-image: url("../../img/tiles/32.jpg");}
-[tile="33"] { content: "P"; background-image: url("../../img/tiles/33.jpg");}
-
-[tile="38"] { content: "spring"; background-image: url("../../img/tiles/38.jpg");}
-[tile="39"] { content: "summer"; background-image: url("../../img/tiles/39.jpg");}
-[tile="40"] { content: "fall"; background-image: url("../../img/tiles/40.jpg");}
-[tile="41"] { content: "winter"; background-image: url("../../img/tiles/41.jpg");}
-
-[tile="34"] { content: "orchid"; background-image: url("../../img/tiles/34.jpg");}
-[tile="35"] { content: "plum"; background-image: url("../../img/tiles/35.jpg");}
-[tile="36"] { content: "chrysanthemum"; background-image: url("../../img/tiles/36.jpg");}
-[tile="37"] { content: "bamboo"; background-image: url("../../img/tiles/37.jpg");}
+[tile="-1"] { content: "unknown"; background-image: url("../../img/tiles/small/concealed.jpg"); box-shadow: -1px -1px 1px 0 inset #0d450e; }
+
+[tile="0"] { content: "bamboo-1"; background-image: url("../../img/tiles/small/0.jpg");}
+[tile="1"] { content: "bamboo-2"; background-image: url("../../img/tiles/small/1.jpg");}
+[tile="2"] { content: "bamboo-3"; background-image: url("../../img/tiles/small/2.jpg");}
+[tile="3"] { content: "bamboo-4"; background-image: url("../../img/tiles/small/3.jpg");}
+[tile="4"] { content: "bamboo-5"; background-image: url("../../img/tiles/small/4.jpg");}
+[tile="5"] { content: "bamboo-6"; background-image: url("../../img/tiles/small/5.jpg");}
+[tile="6"] { content: "bamboo-7"; background-image: url("../../img/tiles/small/6.jpg");}
+[tile="7"] { content: "bamboo-8"; background-image: url("../../img/tiles/small/7.jpg");}
+[tile="8"] { content: "bamboo-9"; background-image: url("../../img/tiles/small/8.jpg");}
+
+[tile="9"] { content: "characters-1"; background-image: url("../../img/tiles/small/9.jpg");}
+[tile="10"] { content: "characters-2"; background-image: url("../../img/tiles/small/10.jpg");}
+[tile="11"] { content: "characters-3"; background-image: url("../../img/tiles/small/11.jpg");}
+[tile="12"] { content: "characters-4"; background-image: url("../../img/tiles/small/12.jpg");}
+[tile="13"] { content: "characters-5"; background-image: url("../../img/tiles/small/13.jpg");}
+[tile="14"] { content: "characters-6"; background-image: url("../../img/tiles/small/14.jpg");}
+[tile="15"] { content: "characters-7"; background-image: url("../../img/tiles/small/15.jpg");}
+[tile="16"] { content: "characters-8"; background-image: url("../../img/tiles/small/16.jpg");}
+[tile="17"] { content: "characters-9"; background-image: url("../../img/tiles/small/17.jpg");}
+
+[tile="18"] { content: "dots-1"; background-image: url("../../img/tiles/small/18.jpg");}
+[tile="19"] { content: "dots-2"; background-image: url("../../img/tiles/small/19.jpg");}
+[tile="20"] { content: "dots-3"; background-image: url("../../img/tiles/small/20.jpg");}
+[tile="21"] { content: "dots-4"; background-image: url("../../img/tiles/small/21.jpg");}
+[tile="22"] { content: "dots-5"; background-image: url("../../img/tiles/small/22.jpg");}
+[tile="23"] { content: "dots-6"; background-image: url("../../img/tiles/small/23.jpg");}
+[tile="24"] { content: "dots-7"; background-image: url("../../img/tiles/small/24.jpg");}
+[tile="25"] { content: "dots-8"; background-image: url("../../img/tiles/small/25.jpg");}
+[tile="26"] { content: "dots-9"; background-image: url("../../img/tiles/small/26.jpg");}
+
+[tile="27"] { content: "E"; background-image: url("../../img/tiles/small/27.jpg");}
+[tile="28"] { content: "S"; background-image: url("../../img/tiles/small/28.jpg");}
+[tile="29"] { content: "W"; background-image: url("../../img/tiles/small/29.jpg");}
+[tile="30"] { content: "N"; background-image: url("../../img/tiles/small/30.jpg");}
+
+[tile="31"] { content: "F"; background-image: url("../../img/tiles/small/31.jpg");}
+[tile="32"] { content: "C"; background-image: url("../../img/tiles/small/32.jpg");}
+[tile="33"] { content: "P"; background-image: url("../../img/tiles/small/33.jpg");}
+
+[tile="38"] { content: "spring"; background-image: url("../../img/tiles/small/38.jpg");}
+[tile="39"] { content: "summer"; background-image: url("../../img/tiles/small/39.jpg");}
+[tile="40"] { content: "fall"; background-image: url("../../img/tiles/small/40.jpg");}
+[tile="41"] { content: "winter"; background-image: url("../../img/tiles/small/41.jpg");}
+
+[tile="34"] { content: "orchid"; background-image: url("../../img/tiles/small/34.jpg");}
+[tile="35"] { content: "plum"; background-image: url("../../img/tiles/small/35.jpg");}
+[tile="36"] { content: "chrysanthemum"; background-image: url("../../img/tiles/small/36.jpg");}
+[tile="37"] { content: "bamboo"; background-image: url("../../img/tiles/small/37.jpg");}
 
 game-tile[hidden] {
   content: "unknown";
-  background-image: url("../../img/tiles/concealed.jpg");
+  background-image: url("../../img/tiles/small/concealed.jpg");
 }
 
 game-tile[locked] {

diff --git a/src/js/core/game/game-tile.js b/src/js/core/game/game-tile.js
@@ -1,6 +1,7 @@
 class GameTile extends HTMLElement {
-  constructor(tile=-1) {
+  constructor(tile) {
     super();
+    tile = tile ?? this.getAttribute("tile") ?? -1;
     this.values = { tile };
     this.setAttribute("tile", this.values.tile);
   }

diff --git a/src/js/page/modal/colors.js b/src/js/page/modal/colors.js
@@ -1,3 +1,5 @@
+import { setStyleSheet } from "../utils.js";
+
 class ColorModal {
   constructor(modal) {
     this.modal = modal;
@@ -24,13 +26,13 @@ class ColorModal {
       .join(`\n`)}}`;
 
     localStorage.setItem(`mahjongCSS`, colorCSS);
-    this.modal.setStyleSheet(`mahjongCSS`, colorCSS);
+    setStyleSheet(`mahjongCSS`, colorCSS);
   }
 
   loadColorScheme() {
     const colorCSS = localStorage.getItem("mahjongCSS");
     if (colorCSS) {
-      this.modal.setStyleSheet(`mahjongCSS`, colorCSS);
+      setStyleSheet(`mahjongCSS`, colorCSS);
     }
     return !!colorCSS;
   }

diff --git a/src/js/page/modal/modal.js b/src/js/page/modal/modal.js
@@ -280,21 +280,6 @@ class Modal {
     this.reveal();
     this.colors.show();
   }
-
-  /**
-   * Theminig/coloring utility function
-   */
-  setStyleSheet(id, css) {
-    let style = document.getElementById(id);
-    if (style) {
-      style.parentNode.removeChild(style);
-    } else {
-      style = document.createElement(`style`);
-    }
-    style.id = id;
-    style.textContent = css;
-    document.body.append(style);
-  }
 }
 
 let modal = new Modal();