load example on start

3 files changed, 13 insertions, 14 deletions

diff --git a/Dockerfile b/Dockerfile
index 7fa9402..929e6c0 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -7,4 +7,5 @@ RUN npm run build
 
 FROM nginx:alpine
 COPY --from=build-env /build/dist /usr/share/nginx/html
+COPY --from=build-env /build/examples /usr/share/nginx/html/examples
 RUN chmod 555 -R /usr/share/nginx/html
diff --git a/README.md b/README.md
index b2f357a..f964317 100644
--- a/README.md
+++ b/README.md
@@ -7,8 +7,5 @@ as the research basis for an ergonomic keyboard some time in the future.
 ![](examples/screenshot.png)
 
 You can try it in your browser at https://leap-finger-scan.s-ol.nu.
-If you don't have a Leap, you can still play with my saved scans:
-
-1. download a scan from the `examples` folder
-2. open the website
-3. press `l` and load the data
+If you don't have a Leap, it will load up one of my example captures automatically.
+You can also load the other one (`examples/two.json`) and import it using the `L` key.
diff --git a/src/index.js b/src/index.js
index 0c3e79b..e5e0435 100644
--- a/src/index.js
+++ b/src/index.js
@@ -235,13 +235,7 @@ fingers = [0,1,2,3,4].map(i => {
   return finger;
 });
 
-const restore = (str) => {
-  if (!str)
-    return;
-
-  const data = JSON.parse(str);
-  data.forEach((data, i) => fingers[i].load(data));
-}
+const restore = (data) =>  data.forEach((data, i) => fingers[i].load(data));
 
 let viewSliceOnly = false;
 window.onkeydown = (e) => {
@@ -257,7 +251,7 @@ window.onkeydown = (e) => {
 
     input.onchange = e => {
       const reader = new FileReader();
-      reader.onload = e => restore(e.target.result);
+      reader.onload = e => restore(JSON.parse(e.target.result));
       reader.readAsText(e.target.files[0]);
     }
   } else if (e.key === 'Shift') {
@@ -289,7 +283,14 @@ window.onkeyup = (e) => {
   }
 }
 
-restore(localStorage.getItem('data'));
+if (localStorage.getItem('data')) {
+  restore(JSON.parse(localStorage.getItem('data')));
+} else {
+  fetch('examples/one.json')
+    .then(r => r.json())
+    .then(restore);
+}
+
 setInterval(() => {
   const data = fingers.map(finger => finger.store());
   localStorage.setItem('data', JSON.stringify(data));