Skip to content

Commit bd00b96

Browse files
ishii-norimiishii-norimi
authored
Simplified RL rendering (#625)
1 parent 62931e6 commit bd00b96

File tree

9 files changed

+51
-80
lines changed

9 files changed

+51
-80
lines changed

‎js/platform/game/base.js

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -160,24 +160,29 @@ export class Game {
160160
}
161161
this._active = false
162162

163-
this._resultElm = document.createElementNS('http://www.w3.org/2000/svg', 'g')
163+
const width = this._platform.svg.getBoundingClientRect().width
164+
const height = this._platform.svg.getBoundingClientRect().height
165+
this._resultElm = document.createElement('div')
164166
this._resultElm.onclick = () => {
165167
this._resultElm.remove()
166168
this._resultElm = null
167169
}
170+
this._resultElm.style.position = 'absolute'
171+
this._resultElm.style.margin = 'auto'
172+
this._resultElm.style.top = '0'
173+
this._resultElm.style.left = '0'
174+
this._resultElm.style.bottom = '0'
175+
this._resultElm.style.right = '0'
176+
this._resultElm.style.width = `${width / 2}px`
177+
this._resultElm.style.height = `${height / 2}px`
178+
this._resultElm.style.display = 'flex'
179+
this._resultElm.style.justifyContent = 'center'
180+
this._resultElm.style.alignItems = 'center'
181+
this._resultElm.style.opacity = 0.8
182+
this._resultElm.style.background = 'white'
183+
this._resultElm.style.border = '1px solid black'
168184
this._platform.svg.appendChild(this._resultElm)
169-
const width = this._platform.svg.getBoundingClientRect().width
170-
const height = this._platform.svg.getBoundingClientRect().height
171-
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
172-
rect.setAttribute('x', width / 4)
173-
rect.setAttribute('y', height / 4)
174-
rect.setAttribute('width', width / 2)
175-
rect.setAttribute('height', height / 2)
176-
rect.setAttribute('opacity', 0.8)
177-
rect.setAttribute('fill', 'white')
178-
this._resultElm.appendChild(rect)
179-
const ts = document.createElementNS('http://www.w3.org/2000/svg', 'text')
180-
ts.setAttribute('transform', `translate(${width / 3}, ${height / 2})`)
185+
const ts = document.createElement('div')
181186
this._resultElm.appendChild(ts)
182187
this._showResult(ts)
183188
}

‎js/renderer/rl.js

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,18 @@ export default class RLRenderer extends BaseRenderer {
99
this._size = [960, 500]
1010
const r = this.setting.render.addItem('rl')
1111

12-
this._svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
13-
this._svg.style.border = '1px solid #000000'
14-
this._svg.setAttribute('width', `${this._size[0]}px`)
15-
this._svg.setAttribute('height', `${this._size[1]}px`)
16-
r.appendChild(this._svg)
12+
this._root = document.createElement('div')
13+
this._root.style.border = '1px solid #000000'
14+
this._root.style.width = `${this._size[0]}px`
15+
this._root.style.height = `${this._size[1]}px`
16+
this._root.style.position = 'relative'
17+
r.appendChild(this._root)
1718

1819
this._subrender = null
1920
}
2021

2122
get svg() {
22-
return this._svg
23+
return this._root
2324
}
2425

2526
get platform() {
@@ -32,7 +33,7 @@ export default class RLRenderer extends BaseRenderer {
3233

3334
set width(value) {
3435
this._size[0] = value
35-
this._svg.setAttribute('width', `${value}px`)
36+
this._root.style.width = `${value}px`
3637
}
3738

3839
get height() {
@@ -41,7 +42,7 @@ export default class RLRenderer extends BaseRenderer {
4142

4243
set height(value) {
4344
this._size[1] = value
44-
this._svg.setAttribute('height', `${value}px`)
45+
this._root.style.height = `${value}px`
4546
}
4647

4748
get env() {
@@ -50,15 +51,15 @@ export default class RLRenderer extends BaseRenderer {
5051

5152
async init() {
5253
const type = this._manager.platform.type
53-
this._svg.replaceChildren()
54+
this._root.replaceChildren()
5455
this._subrender?.close?.()
5556
this._subrender = null
5657
if (LoadedRLRenderClass[type] === true) {
5758
return
5859
}
5960
if (LoadedRLRenderClass[type]) {
6061
this._subrender = new LoadedRLRenderClass[type](this)
61-
this._subrender.init(this._svg)
62+
this._subrender.init(this._root)
6263
} else if (type !== '') {
6364
LoadedRLRenderClass[type] = true
6465
return import(`./rl/${type}.js`).then(m => {
@@ -67,13 +68,13 @@ export default class RLRenderer extends BaseRenderer {
6768
return
6869
}
6970
this._subrender = new m.default(this)
70-
this._subrender.init(this._svg)
71+
this._subrender.init(this._root)
7172
})
7273
}
7374
}
7475

7576
render(...args) {
76-
this._subrender?.render(this._svg, ...args)
77+
this._subrender?.render(this._root, ...args)
7778
}
7879

7980
terminate() {

‎js/renderer/rl/blackjack.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export default class BlackjackRenderer {
2424
this._manualButton.setAttribute('opacity', null)
2525
}
2626
)
27-
r.appendChild(this._manualButton)
27+
this._envrenderer.svg.appendChild(this._manualButton)
2828
}
2929

3030
render() {
@@ -216,7 +216,7 @@ class BlackjackGame {
216216
const { done } = this._env.step([action])
217217
this._platform.render()
218218
if (done) {
219-
const svg = this._platform.svg
219+
const svg = this._platform._renderer[0]._subrender._envrenderer.svg
220220
this._resultElm = document.createElementNS('http://www.w3.org/2000/svg', 'g')
221221
svg.appendChild(this._resultElm)
222222

@@ -247,7 +247,7 @@ class BlackjackGame {
247247
}
248248

249249
async waitAction() {
250-
const svg = this._platform.svg
250+
const svg = this._platform._renderer[0]._subrender._envrenderer.svg
251251
const root = document.createElementNS('http://www.w3.org/2000/svg', 'g')
252252
svg.appendChild(root)
253253

‎js/renderer/rl/breaker.js

Lines changed: 8 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -17,37 +17,23 @@ export default class BreakerRenderer {
1717
this._envrenderer.init()
1818

1919
const buttonWidth = 100
20-
this._manualButton = document.createElementNS('http://www.w3.org/2000/svg', 'g')
21-
this._manualButton.style.transform = `translate(${width / 2 - buttonWidth / 2}px, ${height - 100}px)`
22-
this._manualButton.style.cursor = 'pointer'
20+
this._manualButton = document.createElement('button')
21+
this._manualButton.innerText = 'Start'
22+
this._manualButton.style.position = 'absolute'
23+
this._manualButton.style.left = `${width / 2 - buttonWidth / 2}px`
24+
this._manualButton.style.top = `${height - 100}px`
25+
this._manualButton.style.width = `${buttonWidth}px`
2326
this._manualButton.onclick = async () => {
2427
this._game = new BreakerGame(this.renderer.platform)
2528
await this._game.start()
2629
this._game = null
27-
this._manualButton.attr('opacity', 1)
30+
this._manualButton.style.display = null
2831
}
2932
r.appendChild(this._manualButton)
30-
31-
const buttonBorder = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
32-
buttonBorder.setAttribute('x', 0)
33-
buttonBorder.setAttribute('y', 0)
34-
buttonBorder.setAttribute('width', buttonWidth)
35-
buttonBorder.setAttribute('height', 20)
36-
buttonBorder.setAttribute('fill-opacity', 0)
37-
buttonBorder.setAttribute('stroke', 'gray')
38-
this._manualButton.appendChild(buttonBorder)
39-
const buttonText = document.createElementNS('http://www.w3.org/2000/svg', 'text')
40-
buttonText.setAttribute('x', buttonWidth / 2)
41-
buttonText.setAttribute('text-anchor', 'middle')
42-
buttonText.setAttribute('dominant-baseline', 'hanging')
43-
buttonText.setAttribute('pointer-events', 'none')
44-
buttonText.setAttribute('user-select', 'none')
45-
buttonText.innerHTML = 'Start'
46-
this._manualButton.appendChild(buttonText)
4733
}
4834

4935
render() {
50-
this._manualButton.setAttribute('opacity', this._game || this.renderer.platform._manager._modelname ? 0 : 1)
36+
this._manualButton.style.display = this._game || this.renderer.platform._manager._modelname ? 'none' : null
5137
this._envrenderer.render()
5238
}
5339

‎js/renderer/rl/draughts.js

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -132,11 +132,7 @@ class Draughts extends Game {
132132
}
133133

134134
_showResult(r) {
135-
const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan')
136-
tspan.setAttribute('x', '0em')
137-
tspan.setAttribute('y', '0em')
138-
tspan.innerHTML = this._board.winner === DraughtsRLEnvironment.RED ? 'RED WIN' : 'WHITE WIN'
139-
r.appendChild(tspan)
135+
r.innerHTML = this._board.winner === DraughtsRLEnvironment.RED ? 'RED WIN' : 'WHITE WIN'
140136
}
141137
}
142138

‎js/renderer/rl/gomoku.js

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -124,16 +124,12 @@ class Gomoku extends Game {
124124

125125
_showResult(r) {
126126
const winner = this._board.winner
127-
const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan')
128-
tspan.setAttribute('x', '0em')
129-
tspan.setAttribute('y', '0em')
130-
tspan.innerHTML =
127+
r.innerHTML =
131128
winner === GomokuRLEnvironment.BLACK
132129
? 'BLACK WIN'
133130
: winner === GomokuRLEnvironment.WHITE
134131
? 'WHITE WIN'
135132
: 'DRAW'
136-
r.appendChild(tspan)
137133
}
138134
}
139135

‎js/renderer/rl/grid.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export default class GridMazeRenderer {
5353
init(r) {
5454
const width = this.renderer.width
5555
const height = this.renderer.height
56-
const base = document.createElementNS('http://www.w3.org/2000/svg', 'g')
56+
const base = document.createElement('div')
5757
base.onclick = e => {
5858
const p = d3.pointer(e)
5959
const idx = this.renderer.env._size[0] / width

‎js/renderer/rl/maze.js

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,9 @@ export default class SmoothMazeRenderer {
1111
}
1212

1313
init(r) {
14-
this._envrenderer = new Renderer(this.renderer.env, { g: r })
15-
this._envrenderer.init()
16-
17-
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
18-
rect.setAttribute('x', 0)
19-
rect.setAttribute('y', 0)
20-
rect.setAttribute('width', this._width)
21-
rect.setAttribute('height', this._height)
22-
rect.setAttribute('opacity', 0)
14+
const rect = document.createElement('div')
15+
rect.style.width = `${this._width}px`
16+
rect.style.height = `${this._height}px`
2317
rect.onclick = e => {
2418
const p = d3.pointer(e)
2519
const dx = this._width / this.renderer.env._map_resolution[0]
@@ -33,6 +27,8 @@ export default class SmoothMazeRenderer {
3327
}, 0)
3428
}
3529
r.appendChild(rect)
30+
this._envrenderer = new Renderer(this.renderer.env, { g: rect })
31+
this._envrenderer.init()
3632
}
3733

3834
render() {

‎js/renderer/rl/reversi.js

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -125,16 +125,7 @@ class Reversi extends Game {
125125

126126
_showResult(r) {
127127
const count = this._board.count
128-
const tspan1 = document.createElementNS('http://www.w3.org/2000/svg', 'tspan')
129-
tspan1.setAttribute('x', '0em')
130-
tspan1.setAttribute('y', '-1em')
131-
tspan1.innerHTML = `BLACK: ${count.black}`
132-
r.appendChild(tspan1)
133-
const tspan2 = document.createElementNS('http://www.w3.org/2000/svg', 'tspan')
134-
tspan2.setAttribute('x', '0em')
135-
tspan2.setAttribute('y', '1em')
136-
tspan2.innerHTML = `WHITE: ${count.white}`
137-
r.appendChild(tspan2)
128+
r.innerText = `BLACK: ${count.black}\nWHITE: ${count.white}`
138129
}
139130
}
140131

0 commit comments

Comments
 (0)