feat: Add config options to set the start cell colors and stroke.

IMAGINARY · Aug 26, 2024 · 47111cc · 47111cc
1 parent 4bd50ea
commit 47111cc
Show file tree

Hide file tree

Showing 23 changed files with 37 additions and 19 deletions.
diff --git a/assets/default.5f5cce99c868ff445756.js b/assets/default.5f5cce99c868ff445756.js
diff --git a/assets/default.5f5cce99c868ff445756.js.map b/assets/default.5f5cce99c868ff445756.js.map
diff --git a/assets/default.e1c1c69850fc8e84e075.js b/assets/default.e1c1c69850fc8e84e075.js
diff --git a/...fault.5f5cce99c868ff445756.js.LICENSE.txt → ...fault.e1c1c69850fc8e84e075.js.LICENSE.txt b/...fault.5f5cce99c868ff445756.js.LICENSE.txt → ...fault.e1c1c69850fc8e84e075.js.LICENSE.txt
diff --git a/assets/default.e1c1c69850fc8e84e075.js.map b/assets/default.e1c1c69850fc8e84e075.js.map
diff --git a/assets/embed.7f391e02c973a619c9bb.js b/assets/embed.7f391e02c973a619c9bb.js
diff --git a/assets/embed.7f391e02c973a619c9bb.js.map b/assets/embed.7f391e02c973a619c9bb.js.map
diff --git a/assets/embed.c1230227080108ea1dde.js b/assets/embed.c1230227080108ea1dde.js
diff --git a/...embed.7f391e02c973a619c9bb.js.LICENSE.txt → ...embed.c1230227080108ea1dde.js.LICENSE.txt b/...embed.7f391e02c973a619c9bb.js.LICENSE.txt → ...embed.c1230227080108ea1dde.js.LICENSE.txt
diff --git a/assets/embed.c1230227080108ea1dde.js.map b/assets/embed.c1230227080108ea1dde.js.map
diff --git a/assets/exhibit.094ff02a1e4de681e84f.js b/assets/exhibit.094ff02a1e4de681e84f.js
diff --git a/assets/exhibit.094ff02a1e4de681e84f.js.map b/assets/exhibit.094ff02a1e4de681e84f.js.map
diff --git a/assets/exhibit.8c56f1014e504b1584a1.js b/assets/exhibit.8c56f1014e504b1584a1.js
diff --git a/...hibit.094ff02a1e4de681e84f.js.LICENSE.txt → ...hibit.8c56f1014e504b1584a1.js.LICENSE.txt b/...hibit.094ff02a1e4de681e84f.js.LICENSE.txt → ...hibit.8c56f1014e504b1584a1.js.LICENSE.txt
diff --git a/assets/exhibit.8c56f1014e504b1584a1.js.map b/assets/exhibit.8c56f1014e504b1584a1.js.map
diff --git a/config/ui.yml b/config/ui.yml
@@ -0,0 +1,5 @@
+ui:
+  maze:
+    startCellStrokeSize: 10
+    startCellStrokeColor: '#99ff99'
+    startCellFillColor: '#ffffff'
diff --git a/embed.html b/embed.html
@@ -1 +1 @@
-<!doctype html><meta charset="utf-8"><head><link rel="stylesheet" href="vendor/bootstrap-4.6.0/css/bootstrap.min.css"><link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap" rel="stylesheet"><script src="vendor/jquery-3.5.1/jquery-3.5.1.slim.min.js"></script><script src="vendor/popper-1.16.1/popper.min.js"></script><script src="vendor/bootstrap-4.6.0/js/bootstrap.min.js"></script><script src="vendor/pixijs-6.0.2/pixi.min.js"></script><script src="vendor/i18n4js-1.3.1/i18n4js-1.3.1.min.js"></script><script defer="defer" src="assets/embed.7f391e02c973a619c9bb.js"></script><link href="assets/embed.bac3065fea6dce64db5e.css" rel="stylesheet"></head><body class="rl2-embed"></body>
+<!doctype html><meta charset="utf-8"><head><link rel="stylesheet" href="vendor/bootstrap-4.6.0/css/bootstrap.min.css"><link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap" rel="stylesheet"><script src="vendor/jquery-3.5.1/jquery-3.5.1.slim.min.js"></script><script src="vendor/popper-1.16.1/popper.min.js"></script><script src="vendor/bootstrap-4.6.0/js/bootstrap.min.js"></script><script src="vendor/pixijs-6.0.2/pixi.min.js"></script><script src="vendor/i18n4js-1.3.1/i18n4js-1.3.1.min.js"></script><script defer="defer" src="assets/embed.c1230227080108ea1dde.js"></script><link href="assets/embed.bac3065fea6dce64db5e.css" rel="stylesheet"></head><body class="rl2-embed"></body>
diff --git a/exhibit.html b/exhibit.html
@@ -1 +1 @@
-<!doctype html><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><head><link rel="stylesheet" href="vendor/bootstrap-4.6.0/css/bootstrap.min.css"><link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap" rel="stylesheet"><script src="vendor/jquery-3.5.1/jquery-3.5.1.slim.min.js"></script><script src="vendor/popper-1.16.1/popper.min.js"></script><script src="vendor/bootstrap-4.6.0/js/bootstrap.min.js"></script><script src="vendor/pixijs-6.0.2/pixi.min.js"></script><script src="vendor/i18n4js-1.3.1/i18n4js-1.3.1.min.js"></script><title>Reinforcement Learning</title><script defer="defer" src="assets/exhibit.094ff02a1e4de681e84f.js"></script><link href="assets/exhibit.bb20d4167e91ddf0d89c.css" rel="stylesheet"></head><body><div class="rl2-exhibit" data-component="rl2-exhibit"><div id="pixi-app-container"></div><div id="panel-1" class="panel panel-title"><div class="panel-text" data-i18n-text="panel-1"></div></div><div id="panel-2" class="panel panel-sm"><div class="panel-text" data-i18n-text="panel-2"></div><div id="rewards-bar"></div><div id="rewards-ui"></div></div><div id="panel-3" class="panel panel-sm"><div class="panel-text" data-i18n-text="panel-3"></div><div id="explore-exploit-ui"></div></div><div id="panel-4" class="panel panel-lg"><div class="panel-text" data-i18n-text="panel-4"></div><div id="training-ui"></div></div><div id="lang-switcher-container"></div></div></body>
+<!doctype html><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><head><link rel="stylesheet" href="vendor/bootstrap-4.6.0/css/bootstrap.min.css"><link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap" rel="stylesheet"><script src="vendor/jquery-3.5.1/jquery-3.5.1.slim.min.js"></script><script src="vendor/popper-1.16.1/popper.min.js"></script><script src="vendor/bootstrap-4.6.0/js/bootstrap.min.js"></script><script src="vendor/pixijs-6.0.2/pixi.min.js"></script><script src="vendor/i18n4js-1.3.1/i18n4js-1.3.1.min.js"></script><title>Reinforcement Learning</title><script defer="defer" src="assets/exhibit.8c56f1014e504b1584a1.js"></script><link href="assets/exhibit.bb20d4167e91ddf0d89c.css" rel="stylesheet"></head><body><div class="rl2-exhibit" data-component="rl2-exhibit"><div id="pixi-app-container"></div><div id="panel-1" class="panel panel-title"><div class="panel-text" data-i18n-text="panel-1"></div></div><div id="panel-2" class="panel panel-sm"><div class="panel-text" data-i18n-text="panel-2"></div><div id="rewards-bar"></div><div id="rewards-ui"></div></div><div id="panel-3" class="panel panel-sm"><div class="panel-text" data-i18n-text="panel-3"></div><div id="explore-exploit-ui"></div></div><div id="panel-4" class="panel panel-lg"><div class="panel-text" data-i18n-text="panel-4"></div><div id="training-ui"></div></div><div id="lang-switcher-container"></div></div></body>
diff --git a/index.html b/index.html
@@ -1 +1 @@
-<!doctype html><meta charset="utf-8"><head><link rel="stylesheet" href="vendor/bootstrap-4.6.0/css/bootstrap.min.css"><link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap" rel="stylesheet"><script src="vendor/jquery-3.5.1/jquery-3.5.1.slim.min.js"></script><script src="vendor/popper-1.16.1/popper.min.js"></script><script src="vendor/bootstrap-4.6.0/js/bootstrap.min.js"></script><script src="vendor/pixijs-6.0.2/pixi.min.js"></script><script src="vendor/i18n4js-1.3.1/i18n4js-1.3.1.min.js"></script><title>Reinforcement Learning</title><script defer="defer" src="assets/default.5f5cce99c868ff445756.js"></script><link href="assets/default.701139cc62c5e123ba12.css" rel="stylesheet"></head><body class="rl2-desktop"><div class="container"><div class="row justify-content-center pt-4"><div class="col-md-5"><div data-component="app-container"></div></div><div class="col-md-3"><div class="sidebar"></div></div></div></div></body>
+<!doctype html><meta charset="utf-8"><head><link rel="stylesheet" href="vendor/bootstrap-4.6.0/css/bootstrap.min.css"><link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap" rel="stylesheet"><script src="vendor/jquery-3.5.1/jquery-3.5.1.slim.min.js"></script><script src="vendor/popper-1.16.1/popper.min.js"></script><script src="vendor/bootstrap-4.6.0/js/bootstrap.min.js"></script><script src="vendor/pixijs-6.0.2/pixi.min.js"></script><script src="vendor/i18n4js-1.3.1/i18n4js-1.3.1.min.js"></script><title>Reinforcement Learning</title><script defer="defer" src="assets/default.e1c1c69850fc8e84e075.js"></script><link href="assets/default.701139cc62c5e123ba12.css" rel="stylesheet"></head><body class="rl2-desktop"><div class="container"><div class="row justify-content-center pt-4"><div class="col-md-5"><div data-component="app-container"></div></div><div class="col-md-3"><div class="sidebar"></div></div></div></div></body>
diff --git a/src/js/main-embed.js b/src/js/main-embed.js
@@ -46,6 +46,7 @@ const configFiles = [
   'config/tiles.yml',
   'config/robot.yml',
   'config/items.yml',
+  'config/ui.yml',
   'config/i18n.yml',
   'config/default-settings.yml',
 ];

diff --git a/src/js/main.js b/src/js/main.js
@@ -31,6 +31,7 @@ cfgLoader.load([
   'config/tiles.yml',
   'config/robot.yml',
   'config/items.yml',
+  'config/ui.yml',
   'config/i18n.yml',
   'config/default-settings.yml',
   'settings.yml',

diff --git a/src/js/run-exhibit.js b/src/js/run-exhibit.js
@@ -22,6 +22,7 @@ async function runExhibit(initCallback) {
       'config/tiles.yml',
       'config/robot.yml',
       'config/items.yml',
+      'config/ui.yml',
       'config/i18n.yml',
       'config/exhibit.yml',
       'config/default-settings.yml',

diff --git a/src/js/view-pixi/maze-view.js b/src/js/view-pixi/maze-view.js
@@ -219,11 +219,21 @@ class MazeView {
   }
 
   renderStartCell(i, j) {
+    const strokeSize = this.config.ui.maze.startCellStrokeSize || 10;
+    const strokeColor = this.config.ui.maze.startCellStrokeColor
+      ? Number(`0x${this.config.ui.maze.startCellStrokeColor.substring(1)}`) : 0x99ff99;
+    const fillColor = this.config.ui.maze.startCellFillColor
+      ? Number(`0x${this.config.ui.maze.startCellFillColor.substring(1)}`) : 0x99ff99;
     this.getFloorTile(i, j)
       .clear()
-      .lineStyle(10, 0x99ff99, 1)
-      .beginFill(0xffffff)
-      .drawRect(5, 5, MazeView.TILE_SIZE - 10, MazeView.TILE_SIZE - 10)
+      .lineStyle(strokeSize, strokeColor, 1)
+      .beginFill(fillColor)
+      .drawRect(
+        strokeSize / 2,
+        strokeSize / 2,
+        MazeView.TILE_SIZE - strokeSize,
+        MazeView.TILE_SIZE - strokeSize
+      )
       .endFill();
   }
 
@@ -233,7 +243,7 @@ class MazeView {
     this.getFloorTile(i, j)
       .clear()
       .lineStyle(2, 0x0, 1)
-      .beginFill(tileType ? Number(`0x${tileType.color.substr(1)}`) : 0, 1)
+      .beginFill(tileType ? Number(`0x${tileType.color.substring(1)}`) : 0, 1)
       .drawRect(0, 0, MazeView.TILE_SIZE, MazeView.TILE_SIZE)
       .endFill();