Remove d3 dependency from RL env rendering process (#844)

Author: ishii-norimi

js/renderer/rl/gomoku.js

@@ -137,25 +137,24 @@ class ManualPlayer {
 	action(board) {
 		const width = this._renderer._size[0]
 		const height = this._renderer._size[1]
-		this._obj = document.createElementNS('http://www.w3.org/2000/svg', 'g')
-		this._renderer.svg.appendChild(this._obj)
-		const check = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
-		check.setAttribute('x', 0)
-		check.setAttribute('y', 0)
-		check.setAttribute('width', width)
-		check.setAttribute('height', height)
-		check.setAttribute('opacity', 0)
-		this._obj.appendChild(check)
+		this._obj = this._renderer.svg.appendChild(document.createElementNS('http://www.w3.org/2000/svg', 'g'))
+		const dw = width / board.size[1]
+		const dh = height / board.size[0]
+
 		return new Promise(resolve => {
-			check.onclick = e => {
-				const pos = d3.pointer(e)
-				const cell = [
-					Math.floor((pos[1] / width) * board.size[0]),
-					Math.floor((pos[0] / height) * board.size[1]),
-				]
-				this._obj.remove()
-				this._obj = null
-				resolve(cell)
+			for (let i = 0; i < board.size[0]; i++) {
+				for (let j = 0; j < board.size[1]; j++) {
+					const rect = this._obj.appendChild(document.createElementNS('http://www.w3.org/2000/svg', 'rect'))
+					rect.setAttribute('x', j * dw)
+					rect.setAttribute('y', i * dh)
+					rect.setAttribute('width', dw)
+					rect.setAttribute('height', dh)
+					rect.setAttribute('opacity', 0)
+					rect.onclick = () => {
+						this.close()
+						resolve([i, j])
+					}
+				}
 			}
 		})
 	}

js/renderer/rl/grid.js

@@ -53,22 +53,31 @@ export default class GridMazeRenderer {
 	init(r) {
 		const width = 960
 		const height = 500
-		const base = document.createElement('div')
-		base.onclick = e => {
-			const p = d3.pointer(e)
-			const idx = this.renderer.env._size[0] / width
-			const idy = this.renderer.env._size[1] / height
-			const x = Math.floor(p[0] * idx)
-			const y = Math.floor(p[1] * idy)
-			this.renderer.env._points.push([x, y])
-			e.stopPropagation()
-			setTimeout(() => {
-				this.renderer.render()
-			}, 0)
-		}
-		r.appendChild(base)
+		const base = r.appendChild(document.createElement('div'))
+		base.style.position = 'relative'
 		this._envrenderer = new Renderer(this.renderer.env, { width, height, g: base })
 		this._envrenderer.init()
+
+		const clicker = base.appendChild(document.createElement('div'))
+		const dx = width / this.renderer.env._size[0]
+		const dy = height / this.renderer.env._size[1]
+		for (let i = 0; i < this.renderer.env._size[0]; i++) {
+			for (let j = 0; j < this.renderer.env._size[1]; j++) {
+				const ccell = clicker.appendChild(document.createElement('div'))
+				ccell.style.position = 'absolute'
+				ccell.style.top = `${dy * j}px`
+				ccell.style.left = `${dx * i}px`
+				ccell.style.width = `${dx}px`
+				ccell.style.height = `${dy}px`
+				ccell.onclick = e => {
+					this.renderer.env._points.push([i, j])
+					e.stopPropagation()
+					setTimeout(() => {
+						this.renderer.render()
+					}, 0)
+				}
+			}
+		}
 	}
 
 	render(best_action) {

js/renderer/rl/maze.js

@@ -15,7 +15,7 @@ export default class SmoothMazeRenderer {
 		rect.style.width = `${this._width}px`
 		rect.style.height = `${this._height}px`
 		rect.onclick = e => {
-			const p = d3.pointer(e)
+			const p = [e.offsetX, e.offsetY]
 			const dx = this._width / this.renderer.env._map_resolution[0]
 			const dy = this._height / this.renderer.env._map_resolution[1]
 			const x = Math.floor(p[0] / dx)

js/renderer/rl/reversi.js

@@ -133,25 +133,24 @@ class ManualPlayer {
 	action(board) {
 		const width = this._renderer._size[0]
 		const height = this._renderer._size[1]
-		this._obj = document.createElementNS('http://www.w3.org/2000/svg', 'g')
-		this._renderer.svg.appendChild(this._obj)
-		const check = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
-		check.setAttribute('x', 0)
-		check.setAttribute('y', 0)
-		check.setAttribute('width', width)
-		check.setAttribute('height', height)
-		check.setAttribute('opacity', 0)
-		this._obj.appendChild(check)
+		this._obj = this._renderer.svg.appendChild(document.createElementNS('http://www.w3.org/2000/svg', 'g'))
+		const dw = width / board.size[1]
+		const dh = height / board.size[0]
+
 		return new Promise(resolve => {
-			check.onclick = e => {
-				const pos = d3.pointer(e)
-				const cell = [
-					Math.floor((pos[1] / width) * board.size[0]),
-					Math.floor((pos[0] / height) * board.size[1]),
-				]
-				this._obj.remove()
-				this._obj = null
-				resolve(cell)
+			for (let i = 0; i < board.size[0]; i++) {
+				for (let j = 0; j < board.size[1]; j++) {
+					const rect = this._obj.appendChild(document.createElementNS('http://www.w3.org/2000/svg', 'rect'))
+					rect.setAttribute('x', j * dw)
+					rect.setAttribute('y', i * dh)
+					rect.setAttribute('width', dw)
+					rect.setAttribute('height', dh)
+					rect.setAttribute('opacity', 0)
+					rect.onclick = () => {
+						this.close()
+						resolve([i, j])
+					}
+				}
 			}
 		})
 	}