theming

ISSUE_TEMPLATE.md

@@ -1,21 +1,29 @@
-Hi, and thank you for caring about the game enough to click the "new issue" button because you wanted to report a bug, or have some feedback!
+# A note before you write your issue
 
-If you have some feedback, then just start typing away and we can start a conversation (long or short, depending on what's necessary, of couse), but if you think you found a bug, there are some extra steps required, because in order to track down your bug I'll need to try to recreate the game as it was when you into the bug so:
+Hello and thank you for caring about the game enough to click the "new issue" button because you wanted to report a bug, or have some feedback!
+
+If you have some feedback, then just start typing away and we can start a conversation (long or short, depending on what's necessary, of couse), but if you think you found a bug, there are some extra steps required, because in order to track down your bug I'll need to try to recreate the game as it was when you into the bug
+
+## Describing "Steps to Reproduce"
 
 Try to describe your bug in steps:
 
-1. what was the game situation,  
-2. what did you want to do,
-3. what thing, or sequence of things, did you do in order to achieve that
-4. what happened instead?
+1. what was the game situation (text or screenshots, as long as there's enough details),
+2. what did you want to do (because I may have made different assmumptions about interaction, and I might not have thought to associated what you did with what you _wanted_ to do =),
+3. what thing, or sequence of things, did you do in order to achieve that, and
+4. what did you observe happened instead? (again, text and/or screenshots, and there is no such thing as being "too detailed" when describing this)
+
+Of course, sometimes a bug can be because the computer players did something unexpected:
 
-Of course, sometimes a bug can be because the computer did something unexpected:
+1. what was the game situation,
+2. what happened that was perfectly normal,
+3. what then happened that seemed strange, or even wrong?
+4. what would you have expected to have happen instead? (and "nothing special" is a perfectly valid expectation!)
+
+## Making sure there's enough detail for me to hunt down the problem
 
-1. what was the game situation
-2. what happened that was perfectly normal
-3. what then happened that was strange, or even wrong?
-4. what would you have expected to have happen insead? (and "nothing special" is a perfectly valid expectation!)
-
 If you have screenshots, those help a lot, and if you're a bit of a developer yourself, or you know what "the dev console" is and you've used it before, you might even consider playing with the `debug` flag turned on in the game settings, which will allow you to paste gameplay information in your bug reports.
 
+## And thank you for filing an issue
+
 Thank you for your interest in the game, and hopefully together we can make it even better!

index.html

@@ -20,6 +20,53 @@
     <link rel="stylesheet" href="src/css/players.css" />
     <link rel="stylesheet" href="src/css/tracking.css" />
     <link rel="stylesheet" href="src/css/animations.css" />
+
+    <script src="src/js/core/utils/math.js" defer></script>
+    <script src="src/js/core/utils/prng.js" defer></script>
+    <script src="src/js/core/utils/logger.js" defer></script>
+    <script src="src/config.js" defer></script>
+    <script src="src/js/core/game/game-tile.js" defer></script>
+    <script src="src/js/page/virtual-keys.js" defer></script>
+    <script src="src/js/core/utils/task-timer.js" defer></script>
+    <script src="src/js/core/utils/utils.js" defer></script>
+
+    <script src="src/js/page/audio.js" defer></script>
+    <script src="src/js/page/modal/options-dialog.js" defer></script>
+    <script src="src/js/page/modal/settings.js" defer></script>
+    <script src="src/js/page/modal/theming.js" defer></script>
+    <script src="src/js/page/modal/scores.js" defer></script>
+    <script src="src/js/page/modal/modal.js" defer></script>
+
+    <script src="src/js/core/game/wall/wall.js" defer></script>
+    <script src="src/js/core/game/wall/wall-hack.js" defer></script>
+
+    <script src="src/js/core/players/tracking/tile-tracker.js" defer></script>
+    <script src="src/js/core/players/ui/client-ui-master.js" defer></script>
+    <script src="src/js/core/players/ui/client-ui.js" defer></script>
+    <script src="src/js/core/players/ui/windicator.js" defer></script>
+    <script src="src/js/core/players/player-master.js" defer></script>
+    <script src="src/js/core/players/player.js" defer></script>
+    <script src="src/js/core/players/personality/stats.js" defer></script>
+    <script src="src/js/core/players/personality/personality.js" defer></script>
+    <script src="src/js/core/players/bot.js" defer></script>
+    <script src="src/js/core/players/human.js" defer></script>
+
+    <script src="src/js/core/algorithm/hash-printing.js" defer></script>
+    <script src="src/js/core/algorithm/pattern-set.js" defer></script>
+    <script src="src/js/core/algorithm/pattern.js" defer></script>
+    <script src="src/js/core/algorithm/tiles-needed.js" defer></script>
+
+    <script src="src/js/core/scoring/limit-hands.js" defer></script>
+    <script src="src/js/core/scoring/faan-laak-table.js" defer></script>
+    <script src="src/js/core/scoring/ruleset.js" defer></script>
+    <script src="src/js/core/scoring/cantonese.js" defer></script>
+    <script src="src/js/core/scoring/chinese-classical.js" defer></script>
+
+    <script src="src/js/core/game/game.js" defer></script>
+    <script src="src/js/core/game/game-manager.js" defer></script>
+
+    <!-- twitter the sparrows! -->
+    <script src="src/js/page/play-or-watch.js" defer></script>
   </head>
 
   <body>
@@ -35,6 +82,7 @@
 
       <div class="corner wall data"></div>
       <div class="corner settings">settings...</div>
+      <div class="corner theming">theme</div>
       <div class="discards"></div>
       <div class="sidebar">
         <div class="knowledge"></div>
@@ -650,54 +698,5 @@ <h3>Keyboard controls</h3>
       </ul>
 
     </section>
-
-    <section id="scripts" class="hidden">
-      <script src="src/js/core/utils/math.js"></script>
-      <script src="src/js/core/utils/prng.js"></script>
-      <script src="src/js/core/utils/logger.js"></script>
-      <script src="src/config.js"></script>
-      <script src="src/js/core/game/game-tile.js"></script>
-      <script src="src/js/page/virtual-keys.js"></script>
-      <script src="src/js/core/utils/task-timer.js"></script>
-      <script src="src/js/core/utils/utils.js"></script>
-
-      <script src="src/js/page/audio.js"></script>
-      <script src="src/js/page/modal/options-dialog.js"></script>
-      <script src="src/js/page/modal/settings.js"></script>
-      <script src="src/js/page/modal/scores.js"></script>
-      <script src="src/js/page/modal/modal.js"></script>
-
-      <script src="src/js/core/game/wall/wall.js"></script>
-      <script src="src/js/core/game/wall/wall-hack.js"></script>
-
-      <script src="src/js/core/players/tracking/tile-tracker.js"></script>
-      <script src="src/js/core/players/ui/client-ui-master.js"></script>
-      <script src="src/js/core/players/ui/client-ui.js"></script>
-      <script src="src/js/core/players/ui/windicator.js"></script>
-      <script src="src/js/core/players/player-master.js"></script>
-      <script src="src/js/core/players/player.js"></script>
-      <script src="src/js/core/players/personality/stats.js"></script>
-      <script src="src/js/core/players/personality/personality.js"></script>
-      <script src="src/js/core/players/bot.js"></script>
-      <script src="src/js/core/players/human.js"></script>
-
-      <script src="src/js/core/algorithm/hash-printing.js"></script>
-      <script src="src/js/core/algorithm/pattern-set.js"></script>
-      <script src="src/js/core/algorithm/pattern.js"></script>
-      <script src="src/js/core/algorithm/tiles-needed.js"></script>
-
-      <script src="src/js/core/scoring/limit-hands.js"></script>
-      <script src="src/js/core/scoring/faan-laak-table.js"></script>
-      <script src="src/js/core/scoring/ruleset.js"></script>
-      <script src="src/js/core/scoring/cantonese.js"></script>
-      <script src="src/js/core/scoring/chinese-classical.js"></script>
-
-      <script src="src/js/core/game/game.js"></script>
-      <script src="src/js/core/game/game-manager.js"></script>
-
-      <!-- twitter the sparrows! -->
-      <script src="src/js/page/play-or-watch.js"></script>
-    </section>
-
   </body>
 </html>

src/css/board.css

@@ -21,6 +21,12 @@
   width: 7.5rem;
   z-index: 10;
   color: gold;
+  --sc: var(--prp);
+  text-shadow:
+    -1px -1px 0 var(--sc),
+     1px -1px 0 var(--sc),
+    -1px  1px 0 var(--sc),
+     1px  1px 0 var(--sc);
   font-family: verdana;
   font-weight: bold;
   font-size: 0.8rem;
@@ -37,4 +43,11 @@
   color: silver;
   left: 2rem;
   bottom: calc(var(--ph) * 1.5);
+}
+
+.board .corner.theming {
+  cursor: pointer;
+  color: silver;
+  right: 5rem;
+  bottom: calc(var(--ph) * 1.5);
 }

src/css/modal.css

@@ -60,6 +60,14 @@
   height: 2em;
 }
 
+.modal .settings input[type=button] {
+  border: 1px solid gray;
+  border-radius: 5px;
+  font-size: 0.8rem;
+  width: 100%;
+  background: #E9E9ED;
+}
+
 .modal .panel table {
   width: 95%;
   margin: auto;

src/css/windicator.css

@@ -116,6 +116,12 @@
 .windicator .hand-counter {
   height: 1em;
   color: gold;
+  --sc: var(--prp);
+  text-shadow:
+    -1px -1px 0 var(--sc),
+     1px -1px 0 var(--sc),
+    -1px  1px 0 var(--sc),
+     1px  1px 0 var(--sc);
   position: absolute;
   z-index: 100;
   top: calc(calc(var(--wotr-dim) / 2) - 1.9em);

src/js/core/players/ui/client-ui-master.js

@@ -20,6 +20,7 @@ class ClientUIMaster {
     this.playerbanks = document.querySelectorAll(`.player`);
     this.knowledge = document.querySelector(`.knowledge`);
     this.settings = document.querySelector(`.settings`);
+    this.theming = document.querySelector(`.theming`);
 
     this.gameBoard = document.querySelector(`.board`);
     if (config.PAUSE_ON_BLUR) {
@@ -37,6 +38,7 @@ class ClientUIMaster {
     }
 
     this.settings.addEventListener(`click`, () => modal.pickPlaySettings());
+    this.theming.addEventListener(`click`, () => modal.pickTheming());
 
     this.el = this.playerbanks[this.id];
     this.reset(0,0);

src/js/page/modal/modal.js

@@ -18,6 +18,7 @@ class Modal {
     this.panels = [];
     this.choice = new OptionsDialog(this);
     this.settings = new SettingsModal(this);
+    this.theming = new ThemeModal(this);
     this.scores = new ScoreModal(this);
   }
 
@@ -133,6 +134,14 @@ class Modal {
     this.reveal()
     this.settings.show();
   }
+
+  /**
+   * Show theming options for the game
+   */
+  pickTheming() {
+    this.reveal();
+    this.theming.show();
+  }
 }
 
 let modal = new Modal();