-
Notifications
You must be signed in to change notification settings - Fork 0
/
render.js
67 lines (60 loc) · 2.15 KB
/
render.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import {
BLANK,
DIR_RIGHT,
DIR_LEFT
} from './consts.js'
import ViewState from './ViewState.js'
/**
* Renders the Turing Machine and all its components, i.e., the tape
* and the descriptions of current TM state.
*/
export default function(viewState, hard = false) {
let symbolsWrapper = document.querySelector(".symbols-wrapper")
symbolsWrapper.innerHTML = ""
let width = viewState.tape.length * 50
let currentStateEl = document.querySelector(".current-state")
currentStateEl.innerHTML = `q<sub>${viewState.newState}</sub>`
// Propagate current state to SVG cursor
let svgTextEl = document.querySelector("svg > text")
svgTextEl.innerHTML = `q<tspan dy="+5">${viewState.newState}</tspan>`
// Add first blank if not present
width += 50
let blankNode = document.createElement("div")
blankNode.classList.add("symbol")
blankNode.classList.add("blank")
blankNode.textContent = BLANK
symbolsWrapper.appendChild(blankNode)
viewState.tape.forEach((symbol, i) => {
let symbolNode = document.createElement("div")
symbolNode.classList.add("symbol")
if (viewState.highlight !== undefined && viewState.highlight === i) {
symbolNode.classList.add("highlight")
}
symbolNode.textContent = symbol
symbolsWrapper.appendChild(symbolNode)
})
// Add last blank if not present
width += 50
blankNode = document.createElement("div")
blankNode.classList.add("symbol")
blankNode.classList.add("blank")
blankNode.textContent = BLANK
symbolsWrapper.appendChild(blankNode)
symbolsWrapper.style.width = width + "px"
let translateX = parseInt(getComputedStyle(symbolsWrapper).transform.split(',')[4])
if (translateX === -1 || hard) {
translateX = width / 2 - 25
}
if (viewState.direction === DIR_RIGHT) {
if (viewState.added) {
translateX -= 25
}
translateX -= 50
} else if (viewState.direction === DIR_LEFT) {
if (viewState.added) {
translateX += 25
}
translateX += 50
}
symbolsWrapper.style.transform = 'translateX(' + translateX + 'px)'
}