Add more contrast for game elements

assets/levels.json

@@ -2,6 +2,7 @@
   "background": "royalblue",
   "baseColor": "white",
   "highlightColor": "cyan",
+  "contrastColor": "black",
   "selectSound": "select.wav",
   "decideSound": "decide.wav",
   "levelSets": [

src/game/loading.ts

@@ -73,6 +73,7 @@ export class LoadingScreen implements Screen {
     let containerStyle = this.context.container.style;
     containerStyle.setProperty('--base-color', config.baseColor);
     containerStyle.setProperty('--highlight-color', config.highlightColor);
+    containerStyle.setProperty('--contrast-color', config.contrastColor);
   }
 
   transitionExit(): void {}

src/level.ts

@@ -34,6 +34,7 @@ export interface Config {
   decideSound: string;
   baseColor: string;
   highlightColor: string;
+  contrastColor: string;
   levelSets: LevelSet[];
 }
 
@@ -94,6 +95,7 @@ function parseTMSettings(
     background,
     baseColor: 'white',
     highlightColor: 'blue',
+    contrastColor: 'black',
     selectMusic,
     selectSound,
     decideSound,

src/style.css

@@ -1,6 +1,7 @@
 #container {
   --base-color: white;
   --highlight-color: red;
+  --contrast-color: black;
   --base-font-size: 16px;
 
   position: relative;
@@ -89,7 +90,7 @@
 #container {
   display: grid;
   grid-template-columns: [start] 18.75em [left] auto [right] 18.75em [end];
-  grid-template-rows: [top] 3.125em [header] auto [game] 11.25em [bottom];
+  grid-template-rows: [top] 3.125em [header] auto [game] 12.5em [bottom];
 
   font-size: var(--base-font-size);
   height: 450px;
@@ -289,7 +290,7 @@
 .song-info {
   align-self: end;
   margin-left: 1.25em;
-  text-shadow: 0em 0em 0.3125em var(--base-color);
+  text-shadow: 0em 0em 0.3125em var(--contrast-color);
 }
 
 .song-info .genre {
@@ -502,8 +503,8 @@
     'romaji-first romaji romaji'
     '. . stats';
   grid-row-gap: 0.125em;
-  padding: 0.125em 1.25em;
-  background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
+  padding: 1.25em 1.25em 0.125em 1.25em;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
 }
 
 #game .track-progress {