Upgrade animation graphics for Chapter 7

Author: marijnh

Diff for: code/animatevillage.js

@@ -6,18 +6,19 @@
   let active = null
 
   const places = {
-    "Alice's House": {x: 310, y: 90},
-    "Bob's House": {x: 312, y: 196},
-    "Cabin": {x: 378, y: 60},
-    "Post Office": {x: 215, y: 60},
-    "Town Hall": {x: 213, y: 200},
-    "Daria's House": {x: 170, y: 282},
-    "Ernie's House": {x: 69, y: 283},
-    "Grete's House": {x: 37, y: 193},
-    "Farm": {x: 61, y: 119},
-    "Shop": {x: 113, y: 211},
-    "Marketplace": {x: 200, y: 98}
+    "Alice's House": {x: 279, y: 100},
+    "Bob's House": {x: 295, y: 203},
+    "Cabin": {x: 372, y: 67},
+    "Daria's House": {x: 183, y: 285},
+    "Ernie's House": {x: 50, y: 283},
+    "Farm": {x: 36, y: 118},
+    "Grete's House": {x: 35, y: 187},
+    "Marketplace": {x: 162, y: 110},
+    "Post Office": {x: 205, y: 57},
+    "Shop": {x: 137, y: 212},
+    "Town Hall": {x: 202, y: 213}
   }
+  const placeKeys = Object.keys(places)
 
   const speed = 2
 
@@ -30,14 +31,14 @@
 
       let outer = (window.__sandbox ? window.__sandbox.output.div : document.body), doc = outer.ownerDocument
       this.node = outer.appendChild(doc.createElement("div"))
-      this.node.style.cssText = "position: relative; line-height: 0.1; padding-left: 10px"
+      this.node.style.cssText = "position: relative; line-height: 0.1; margin-left: 10px"
       this.map = this.node.appendChild(doc.createElement("img"))
       this.map.src = "img/village2x.png"
       this.map.style.cssText = "vertical-align: -8px"
       this.robotElt = this.node.appendChild(doc.createElement("div"))
       this.robotElt.style.cssText = `position: absolute; transition: left ${0.8 / speed}s, top ${0.8 / speed}s;`
       let robotPic = this.robotElt.appendChild(doc.createElement("img"))
-      robotPic.src = "img/robot2x.png"
+      robotPic.src = "img/robot_moving2x.gif"
       this.parcels = []
 
       this.text = this.node.appendChild(doc.createElement("span"))
@@ -57,8 +58,8 @@
 
     updateView() {
       let pos = places[this.worldState.place]
-      this.robotElt.style.top = (pos.y - this.robotElt.offsetHeight) + "px"
-      this.robotElt.style.left = (pos.x - (this.robotElt.offsetWidth / 2)) + "px"
+      this.robotElt.style.top = (pos.y - 38) + "px"
+      this.robotElt.style.left = (pos.x - 16) + "px"
 
       this.text.textContent = ` Turn ${this.turn} `
     }
@@ -70,11 +71,11 @@
         let height = heights[place] || (heights[place] = 0)
         heights[place] += 11
         let node = document.createElement("div")
-        node.style.cssText = "position: absolute; height: 10px; width: 10px; background-image: url(img/parcel2x.png); font-size: 10px; text-align: center; line-height: 10px; font-family: sans-serif"
-        node.textContent = address.charAt(0)
+        let offset = placeKeys.indexOf(address) * 10
+        node.style.cssText = "position: absolute; height: 10px; width: 10px; background-image: url(img/parcel2x.png); background-position: 0 -" + offset + "px";
         if (place == this.worldState.place) {
-          node.style.right = "-5px"
-          node.style.bottom = (24 + height) + "px"
+          node.style.left = "27px"
+          node.style.bottom = (20 + height) + "px"
           this.robotElt.appendChild(node)
         } else {
           let pos = places[place]
@@ -95,6 +96,7 @@
       if (this.worldState.parcels.length == 0) {
         this.button.remove()
         this.text.textContent = ` Finished after ${this.turn} turns`
+        this.robotElt.firstChild.src = "img/robot_idle2x.png"
       } else {
         this.schedule()
       }
@@ -108,10 +110,12 @@
       if (this.timeout == null) {
         this.schedule()
         this.button.textContent = "Stop"
+        this.robotElt.firstChild.src = "img/robot_moving2x.gif"
       } else {
         clearTimeout(this.timeout)
         this.timeout = null
         this.button.textContent = "Start"
+        this.robotElt.firstChild.src = "img/robot_idle2x.png"
       }
     }
   }

Diff for: html/js/sandbox.js

@@ -54,7 +54,7 @@
       this.framePos = 0
 
       // Loaded CommonJS modules
-      this.loaded = new Cached(name => resolved.compute(name).then(({name, code}) => this.evalModule(name, code)))
+      this.loaded = window.loadedModules = new Cached(name => resolved.compute(name).then(({name, code}) => this.evalModule(name, code)))
 
       this.frame = frame
       this.win = frame.contentWindow
@@ -78,11 +78,13 @@
       this.startedAt = Date.now()
       this.extraSecs = 2
       this.win.__c = 0
-      this.prepare(code).then(code => this.win.eval(code)).catch(err => this.error(err))
+      this.prepare(code)
+        .then(code => code instanceof Function ? code() : this.win.eval(code))
+        .catch(err => this.error(err))
     }
 
     prepare(text) {
-      let {code, dependencies} = preprocess(text)
+      let {code, dependencies} = preprocess(text, this)
       return Promise.all(dependencies.map(dep => this.loaded.compute(dep))).then(() => code)
     }
 
@@ -267,17 +269,19 @@
 
   function preprocess(code, sandbox) {
     if (typeof code != "string") {
-      if (code.apply)
-        return (...args) => {
-          try { return code.apply(this, args) }
+      if (code.apply) {
+        let orig = code
+        code = (...args) => {
+          try { return orig.apply(null, args) }
           catch(e) { sandbox.error(e) }
         }
-      return code
+      }
+      return {code, dependencies: []}
     }
 
     let strict = /^(\s|\/\/.*)*["']use strict['"]/.test(code), ast
     try { ast = acorn.parse(code, {sourceType: detectSourceType(code)}) }
-    catch(e) { return code }
+    catch(e) { return {code, dependencies: []} }
     let patches = []
     let backJump = "if (++__c % 1000 === 0) __sandbox.tick();"
     function loop(node) {
@@ -307,7 +311,7 @@
         if (node.specifiers.length == 0) {
           text = req
         } else if (node.specifiers.length > 1 || node.specifiers[0].type == "ImportDefaultSpecifier") {
-          let name = modVar(node.source.value)
+          let name = "m_" + node.source.value.replace(/\W+/g, "_") + "__"
           text = "var " + name + " = " + req
           node.specifiers.forEach(spec => {
             if (spec.type == "ImportDefaultSpecifier")
@@ -428,7 +432,7 @@
   }
 
   // Cache for loaded code and resolved unpkg redirects
-  const resolved = new Cached(name => fetch("https://unpkg.com/" + name.replace(/\/$/, "")).then(resp => {
+  const resolved = window.resolved = new Cached(name => fetch("https://unpkg.com/" + name.replace(/\/$/, "")).then(resp => {
     if (resp.status >= 400) throw new Error(`Failed to resolve package '${name}'`)
     let found = resp.url.replace(/.*unpkg\.com\//, "")
     let known = resolved.get(found)