Add recommender overlay

Signed-off-by: Jay Wang <[email protected]>

.gitignore

@@ -111,6 +111,5 @@ pnpm-lock.yaml
 examples/model_pickles
 .DS_STORE
 gh-page
-publish.sh
 docs
 ignore

gamcoach-ui/package.json

@@ -18,41 +18,6 @@
     "@rollup/plugin-terser": "^0.4.0",
     "@rollup/plugin-yaml": "^3.1.0",
     "@tsconfig/svelte": "^2.0.1",
-    "eslint": "^8.0.1",
-    "eslint-plugin-svelte3": "^3.2.1",
-    "openpgp": "^5.0.1",
-    "rollup": "^2.3.4",
-    "rollup-plugin-css-only": "^3.1.0",
-    "rollup-plugin-inline-svg": "^2.0.0",
-    "rollup-plugin-livereload": "^2.0.0",
-    "rollup-plugin-svelte": "^7.0.0",
-    "sass": "^1.58.3",
-    "sirv-cli": "^1.0.0",
-    "svelte": "^3.0.0",
-    "svelte-preprocess": "^4.9.8",
-    "d3-array": "^3.2.0",
-    "d3-axis": "^3.0.0",
-    "d3-brush": "^3.0.0",
-    "d3-color": "^3.1.0",
-    "d3-contour": "^4.0.0",
-    "d3-drag": "^3.0.0",
-    "d3-ease": "^3.0.1",
-    "d3-fetch": "^3.0.1",
-    "d3-format": "^3.1.0",
-    "d3-geo": "^3.0.1",
-    "d3-hierarchy": "^3.1.2",
-    "d3-interpolate": "^3.0.1",
-    "d3-path": "^3.0.1",
-    "d3-quadtree": "^3.0.1",
-    "d3-random": "^3.0.1",
-    "d3-scale": "^4.0.2",
-    "d3-scale-chromatic": "^3.0.0",
-    "d3-selection": "^3.0.0",
-    "d3-shape": "^3.1.0",
-    "d3-time-format": "^4.1.0",
-    "d3-timer": "^3.0.1",
-    "d3-transition": "^3.0.1",
-    "d3-zoom": "^3.0.0",
     "@types/d3": "^7.4.0",
     "@types/d3-array": "^3.0.3",
     "@types/d3-axis": "^3.0.1",
@@ -76,6 +41,42 @@
     "@types/d3-time-format": "^4.0.0",
     "@types/d3-timer": "^3.0.0",
     "@types/d3-transition": "^3.0.2",
-    "@types/d3-zoom": "^3.0.1"
+    "@types/d3-zoom": "^3.0.1",
+    "d3-array": "^3.2.0",
+    "d3-axis": "^3.0.0",
+    "d3-brush": "^3.0.0",
+    "d3-color": "^3.1.0",
+    "d3-contour": "^4.0.0",
+    "d3-drag": "^3.0.0",
+    "d3-ease": "^3.0.1",
+    "d3-fetch": "^3.0.1",
+    "d3-format": "^3.1.0",
+    "d3-geo": "^3.0.1",
+    "d3-hierarchy": "^3.1.2",
+    "d3-interpolate": "^3.0.1",
+    "d3-path": "^3.0.1",
+    "d3-quadtree": "^3.0.1",
+    "d3-random": "^3.0.1",
+    "d3-scale": "^4.0.2",
+    "d3-scale-chromatic": "^3.0.0",
+    "d3-selection": "^3.0.0",
+    "d3-shape": "^3.1.0",
+    "d3-time-format": "^4.1.0",
+    "d3-timer": "^3.0.1",
+    "d3-transition": "^3.0.1",
+    "d3-zoom": "^3.0.0",
+    "eslint": "^8.0.1",
+    "eslint-plugin-svelte3": "^3.2.1",
+    "gh-pages": "^6.0.0",
+    "openpgp": "^5.0.1",
+    "rollup": "^2.3.4",
+    "rollup-plugin-css-only": "^3.1.0",
+    "rollup-plugin-inline-svg": "^2.0.0",
+    "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-svelte": "^7.0.0",
+    "sass": "^1.58.3",
+    "sirv-cli": "^1.0.0",
+    "svelte": "^3.0.0",
+    "svelte-preprocess": "^5.0.4"
   }
 }

gamcoach-ui/publish.sh

@@ -0,0 +1,28 @@
+#!/bin/bash
+
+# Not copying the whole directory because we need a different index.html in gh-page
+npm run build
+cp -r ./public/*png ../gh-page
+cp -r ./public/*.svg ../gh-page
+cp -r ./public/data ../gh-page
+cp -r ./public/videos ../gh-page
+cp -r ./public/build ../gh-page
+cp -r ./public/favicon ../gh-page
+cp -r ./public/global.css ../gh-page
+cp -r ./public/imgs ../gh-page
+
+# cp -r ./public/*png ../gh-page/user-study
+# cp -r ./public/*.svg ../gh-page/user-study
+# cp -r ./public/data ../gh-page/user-study
+# cp -r ./public/videos ../gh-page/user-study
+# cp -r ./public/build ../gh-page/user-study
+# cp -r ./public/favicon ../gh-page/user-study
+# cp -r ./public/global.css ../gh-page/user-study
+# cp -r ./public/imgs ../gh-page/user-study
+
+# cd ../gh-page
+# git add ./*
+# git commit -s -m "Deploy: $(git log '--format=format:%H' master -1)"
+# git push origin gh-pages
+npx gh-pages -m "Deploy $(git log '--format=format:%H' master -1)" -d ../gh-page
+# cd ./gamcoach-ui

gamcoach-ui/src/App.svelte

@@ -2,9 +2,19 @@
   import Article from './components/article/Article.svelte';
 </script>
 
-<svelte:head />
+<svelte:head>
+  <script
+    type="module"
+    src="https://unpkg.com/recommender-overlay/dist/recommender-overlay.es.js"
+  ></script>
+</svelte:head>
 
 <div class="stand-alone-page">
+  <recommender-overlay
+    my-brand="GAM Coach"
+    position-left="20"
+    display-delay="20000"
+  />
   <Article />
 </div>