| 23 | const speed = 2 |
| 24 | |
| 25 | class Animation { |
| 26 | constructor(worldState, robot, robotState) { |
| 27 | this.worldState = worldState |
| 28 | this.robot = robot |
| 29 | this.robotState = robotState |
| 30 | this.turn = 0 |
| 31 | |
| 32 | let outer = (window.__sandbox ? window.__sandbox.output.div : document.body), doc = outer.ownerDocument |
| 33 | this.node = outer.appendChild(doc.createElement("div")) |
| 34 | this.node.style.cssText = "position: relative; line-height: 0.1; margin-left: 10px" |
| 35 | this.map = this.node.appendChild(doc.createElement("img")) |
| 36 | this.imgPath = "img/" |
| 37 | if (/\/code($|\/)/.test(outer.ownerDocument.defaultView.location)) this.imgPath = "../" + this.imgPath |
| 38 | console.log(outer.ownerDocument.defaultView.location.toString(), /\/code($|\/)/.test(outer.ownerDocument.defaultView.localation), this.imgPath) |
| 39 | this.map.src = this.imgPath + "village2x.png" |
| 40 | this.map.style.cssText = "vertical-align: -8px" |
| 41 | this.robotElt = this.node.appendChild(doc.createElement("div")) |
| 42 | this.robotElt.style.cssText = `position: absolute; transition: left ${0.8 / speed}s, top ${0.8 / speed}s;` |
| 43 | let robotPic = this.robotElt.appendChild(doc.createElement("img")) |
| 44 | robotPic.src = this.imgPath + "robot_moving2x.gif" |
| 45 | this.parcels = [] |
| 46 | |
| 47 | this.text = this.node.appendChild(doc.createElement("span")) |
| 48 | this.button = this.node.appendChild(doc.createElement("button")) |
| 49 | this.button.style.cssText = "color: white; background: #28b; border: none; border-radius: 2px; padding: 2px 5px; line-height: 1.1; font-family: sans-serif; font-size: 80%" |
| 50 | this.button.textContent = "Stop" |
| 51 | |
| 52 | this.button.addEventListener("click", () => this.clicked()) |
| 53 | this.schedule() |
| 54 | |
| 55 | this.updateView() |
| 56 | this.updateParcels() |
| 57 | |
| 58 | this.robotElt.addEventListener("transitionend", () => this.updateParcels()) |
| 59 | } |
| 60 | |
| 61 | |
| 62 | updateView() { |
| 63 | let pos = places[this.worldState.place] |
| 64 | this.robotElt.style.top = (pos.y - 38) + "px" |
| 65 | this.robotElt.style.left = (pos.x - 16) + "px" |
| 66 | |
| 67 | this.text.textContent = ` Turn ${this.turn} ` |
| 68 | } |
| 69 | |
| 70 | updateParcels() { |
| 71 | while (this.parcels.length) this.parcels.pop().remove() |
| 72 | let heights = {} |
| 73 | for (let {place, address} of this.worldState.parcels) { |
| 74 | let height = heights[place] || (heights[place] = 0) |
| 75 | heights[place] += 14 |
| 76 | let node = document.createElement("div") |
| 77 | let offset = placeKeys.indexOf(address) * 16 |
| 78 | node.style.cssText = `position: absolute; height: 16px; width: 16px; background-image: url(${this.imgPath}parcel2x.png); background-position: 0 -${offset}px`; |
| 79 | if (place == this.worldState.place) { |
| 80 | node.style.left = "25px" |
| 81 | node.style.bottom = (20 + height) + "px" |
| 82 | this.robotElt.appendChild(node) |
nothing calls this directly
no outgoing calls
no test coverage detected