feat:update ui

src/Gobang.ts

@@ -1,4 +1,4 @@
-import { Stack, hlayout, Group, Color, stack, layoutConfig, LayoutSpec, vlayout, IVLayout, Text, ViewHolder, ViewModel, VMPanel, scroller, modal, text, gravity, Gravity, IHLayout, takeNonNull } from "doric";
+import { Stack, hlayout, Group, Color, stack, layoutConfig, LayoutSpec, vlayout, IVLayout, Text, ViewHolder, ViewModel, VMPanel, scroller, modal, text, gravity, Gravity, IHLayout, takeNonNull, View } from "doric";
 import { colors } from "./utils";
 
 
@@ -39,17 +39,16 @@ interface GoBangState {
     gap: number
     role: "white" | "black"
     matrix: Map<number, State>
-    anchor?: { x: number, y: number }
+    anchor?: number
 }
 
 class GoBangVH extends ViewHolder {
-    pieces!: Stack
     root!: Group
     gap = 0
     currentRole!: Text
     result!: Text
-    onPieceDown?: (x: number, y: number) => void
+    targetZone: View[] = []
-    onAnchorDown?: (x: number, y: number) => void
+
     build(root: Group): void {
         this.root = root
     }
@@ -75,14 +74,12 @@ class GoBangVH extends ViewHolder {
                             return columLine().also(v => {
                                 v.left = (idx + 1) * gap
                             })
-                        }
+                        }),
-                        ),
                         ...(new Array(count - 2)).fill(0).map((_, idx) => {
                             return rowLine().also(v => {
                                 v.top = (idx + 1) * gap
                             })
-                        }
+                        }),
-                        ),
                     ])
                         .apply({
                             layoutConfig: layoutConfig().just()
@@ -94,23 +91,14 @@ class GoBangVH extends ViewHolder {
                                 color: lineColor,
                             },
                         }),
-
+                    ...this.targetZone = (new Array(count * count)).fill(0).map((_, idx) => {
-                    ...(new Array(count * count)).fill(0).map((_, idx) => {
                         const row = Math.floor(idx / count)
                         const colum = idx % count
                         return pointer(gap).also(v => {
                             v.top = (row - 0.5) * gap + borderWidth
                             v.left = (colum - 0.5) * gap + borderWidth
-                            v.onClick = () => {
-                                if (this.onAnchorDown) {
-                                    this.onAnchorDown(colum, row)
-                                }
-                            }
                         })
                     }),
-                    this.pieces = (new Stack).apply({
-                        layoutConfig: layoutConfig().most(),
-                    }),
                 ]).apply({
                     layoutConfig: layoutConfig().just(),
                     width: boardSize + 2 * borderWidth,
@@ -144,91 +132,83 @@ class GoBangVH extends ViewHolder {
                 } as IVLayout)
         ).in(this.root)
     }
-
-    addPiece(pos: number, role: "black" | "white") {
-        const x = Math.floor(pos / count)
-        const y = pos % count
-        const piece = (new Stack).also(v => {
-            v.width = v.height = this.gap
-            v.corners = 15
-            v.backgroundColor = role === 'black' ? Color.BLACK : Color.WHITE
-        })
-        piece.centerX = (x + 1) * this.gap
-        piece.centerY = (y + 1) * this.gap
-        this.pieces.addChild(piece)
-    }
-
-    addAnchor(x: number, y: number) {
-        const piece = (new Stack).also(v => {
-            v.width = v.height = 30
-            v.border = {
-                color: Color.RED,
-                width: 1,
-            }
-        })
-        piece.centerX = (x + 1) * this.gap
-        piece.centerY = (y + 1) * this.gap
-        piece.onClick = () => {
-            if (this.onPieceDown) {
-                this.onPieceDown(x, y)
-            }
-        }
-        this.pieces.addChild(piece)
-    }
 }
 
 class GoBangVM extends ViewModel<GoBangState, GoBangVH>{
     onAttached(state: GoBangState, vh: GoBangVH) {
         vh.actualBuild(state)
-        vh.onAnchorDown = (x, y) => {
+        vh.targetZone.forEach((e, idx) => {
-            const pos = x * count + y
+            e.onClick = () => {
-            if (state.matrix.get(pos) == State.BLACK
+                const zoneState = state.matrix.get(idx)
-                || state.matrix.get(pos) == State.WHITE) {
+                if (zoneState === State.BLACK || zoneState === State.WHITE) {
-                modal(context).toast('This position had been token.')
+                    modal(context).toast('This position had been token.')
-                return
+                    return
-            }
-            this.updateState(it => {
-                it.anchor = { x, y }
-            })
-        }
-        vh.onPieceDown = (x, y) => {
-            const pos = x * count + y
-            if (state.matrix.get(pos) == State.BLACK
-                || state.matrix.get(pos) == State.WHITE) {
-                modal(context).toast('This position had been token.')
-                return
-            }
-            this.updateState(it => {
-                if (it.role === 'black') {
-                    it.matrix.set(pos, State.BLACK)
-                    it.role = 'white'
-                } else {
-                    it.matrix.set(pos, State.WHITE)
-                    it.role = 'black'
                 }
-                it.anchor = undefined
+                if (state.anchor === undefined || state.anchor != idx) {
-            })
+                    this.updateState(it => {
-        }
+                        it.anchor = idx
+                    })
+                } else {
+                    this.updateState(it => {
+                        if (it.role === 'black') {
+                            it.matrix.set(idx, State.BLACK)
+                            it.role = 'white'
+                        } else {
+                            it.matrix.set(idx, State.WHITE)
+                            it.role = 'black'
+                        }
+                        it.anchor = undefined
+                    })
+                }
+            }
+        })
     }
 
     onBind(state: GoBangState, vh: GoBangVH) {
-        vh.pieces.children.length = 0
+        vh.targetZone.forEach((v, idx) => {
-        for (let e of state.matrix.keys()) {
+            const zoneState = state.matrix.get(idx)
-            const v = state.matrix.get(e)
+            switch (zoneState) {
-            if (v === State.BLACK) {
-                vh.addPiece(e, 'black')
-            }
-            switch (v) {
                 case State.BLACK:
-                    vh.addPiece(e, 'black')
+                    v.also(it => {
+                        it.backgroundColor = Color.BLACK
+                        it.corners = state.gap / 2
+                        it.border = {
+                            color: Color.TRANSPARENT,
+                            width: 0,
+                        }
+                    })
                     break
                 case State.WHITE:
-                    vh.addPiece(e, 'white')
+                    v.also(it => {
+                        it.backgroundColor = Color.WHITE
+                        it.corners = state.gap / 2
+                        it.border = {
+                            color: Color.TRANSPARENT,
+                            width: 0,
+                        }
+                    })
+                    break
+                default:
+                    v.also(it => {
+                        it.backgroundColor = Color.TRANSPARENT
+                        it.corners = 0
+                        it.border = {
+                            color: Color.TRANSPARENT,
+                            width: 0,
+                        }
+                    })
                     break
             }
-        }
+            if (state.anchor === idx) {
-        takeNonNull(state.anchor)(it => {
+                v.also(it => {
-            vh.addAnchor(it.x, it.y)
+                    it.backgroundColor = Color.RED.alpha(0.1)
+                    it.corners = 0
+                    it.border = {
+                        color: Color.RED,
+                        width: 1,
+                    }
+                })
+            }
         })
         vh.currentRole.text = `当前: ${(state.role === 'black') ? "黑方" : "白方"}`
     }