This repository has been archived on 2024-07-22. You can view files and clone it, but cannot push or open issues or pull requests.
Doric/js-framework/demo.ts

396 lines
9.3 KiB
TypeScript
Raw Normal View History

2019-07-25 11:59:20 +08:00
import { HLayout, StackConfig, ViewHolder, VMPanel, View, ViewModel, WRAP_CONTENT, Gravity, Mutable, NativeCall, Text, Color, VLayout, Panel, log, logw, loge, Group, Stack, } from "./index"
2019-07-25 14:34:54 +08:00
import { RIGHT } from "./src/util/gravity";
2019-07-25 11:59:20 +08:00
2019-07-24 19:26:25 +08:00
2019-07-24 16:38:34 +08:00
interface CountModel {
count: number
}
2019-07-18 20:11:01 +08:00
2019-07-24 19:26:25 +08:00
class CounterView extends ViewHolder {
number = new Text
counter = new Text
build(root: Group) {
2019-07-24 16:38:34 +08:00
const vlayout = new VLayout
2019-07-31 14:18:20 +08:00
vlayout.width = 200
vlayout.height = 200
2019-07-31 19:22:00 +08:00
vlayout.gravity = new Gravity().center()
2019-07-24 19:26:25 +08:00
this.number.textSize = 40
this.number.layoutConfig = {
2019-07-24 16:38:34 +08:00
alignment: new Gravity().center()
2019-07-23 13:01:45 +08:00
}
2019-07-24 19:26:25 +08:00
this.counter = new Text
this.counter.text = "点击计数"
2019-08-01 17:59:33 +08:00
this.counter.border = {
width: 1,
color: Color.parse('#000000'),
}
2019-07-24 19:26:25 +08:00
this.counter.textSize = 20
2019-07-24 11:43:38 +08:00
2019-07-24 16:38:34 +08:00
vlayout.space = 20
vlayout.layoutConfig = {
alignment: new Gravity().center()
2019-07-24 11:43:38 +08:00
}
2019-07-24 19:26:25 +08:00
vlayout.addChild(this.number)
vlayout.addChild(this.counter)
2019-08-01 17:59:33 +08:00
// root.bgColor = Color.parse('#00ff00')
2019-07-31 14:18:20 +08:00
vlayout.bgColor = Color.parse('#ff00ff')
2019-07-24 16:38:34 +08:00
root.addChild(vlayout)
2019-07-24 19:26:25 +08:00
}
setNumber(n: number) {
this.number.text = n.toString()
}
2019-07-24 11:43:38 +08:00
2019-07-24 19:26:25 +08:00
setCounter(v: Function) {
this.counter.onClick = v
}
}
2019-07-24 10:14:17 +08:00
2019-07-24 19:26:25 +08:00
class CounterVM extends ViewModel<CountModel, CounterView> {
2019-07-24 20:40:25 +08:00
2019-07-24 19:26:25 +08:00
binding(v: CounterView, model: CountModel): void {
v.setNumber(model.count)
2019-07-24 20:40:25 +08:00
v.setCounter(() => {
this.getModel().count++
})
2019-07-24 16:38:34 +08:00
}
}
2019-08-01 17:59:33 +08:00
@Entry
2019-07-24 19:26:25 +08:00
class MyPage extends VMPanel<CountModel, CounterView>{
2019-07-24 16:38:34 +08:00
2019-07-24 19:26:25 +08:00
getVMClass() {
return CounterVM
}
getModel() {
return {
2019-07-24 17:24:00 +08:00
count: 0,
add: function () {
this.count++
2019-07-24 19:26:25 +08:00
},
}
2019-07-18 16:29:24 +08:00
}
2019-07-22 14:36:32 +08:00
2019-07-24 19:26:25 +08:00
getViewHolder() {
return new CounterView
}
2019-07-22 13:41:38 +08:00
@NativeCall
2019-07-18 16:29:24 +08:00
log() {
2019-07-22 13:41:38 +08:00
log("Hello.HEGO")
logw("Hello.HEGO")
loge("Hello.HEGO")
2019-07-30 11:25:05 +08:00
context.modal.toast('This is a toast.').then((r) => {
loge(r)
})
2019-07-18 16:29:24 +08:00
}
2019-07-24 19:58:30 +08:00
}
2019-07-25 11:59:20 +08:00
type SnakeNode = {
x: number
y: number
prev?: SnakeNode
next?: SnakeNode
}
2019-07-24 19:58:30 +08:00
2019-07-25 11:59:20 +08:00
enum Direction {
2019-07-24 20:40:25 +08:00
left = 0,
right = 1,
2019-07-25 11:59:20 +08:00
up = 2,
down = 3,
2019-07-24 20:40:25 +08:00
}
2019-07-24 19:58:30 +08:00
2019-07-24 20:40:25 +08:00
enum State {
idel,
run,
fail,
}
class SnakeModel {
state = State.idel
2019-07-25 11:59:20 +08:00
direction = Direction.right
2019-07-24 20:40:25 +08:00
2019-07-25 00:14:55 +08:00
width: number
height: number
constructor(w: number, h: number) {
this.width = w
this.height = h
}
2019-07-25 11:59:20 +08:00
food = { x: -1, y: -1 }
2019-07-24 20:40:25 +08:00
head: SnakeNode = {
x: 0,
y: 0,
}
refreshFood() {
this.food.x = Math.floor(Math.random() * (this.width - 1))
this.food.y = Math.floor(Math.random() * (this.height - 1))
}
get tail() {
let node = this.head
while (node.next !== undefined) {
node = node.next
}
return node
}
get score() {
let node = this.head
let n = 0
while (node.next !== undefined) {
n++
node = node.next
}
return n
}
forward(node: SnakeNode) {
switch (this.direction) {
case Direction.left:
2019-07-25 11:59:20 +08:00
node.x -= 1
2019-07-24 20:40:25 +08:00
break;
case Direction.right:
2019-07-25 11:59:20 +08:00
node.x += 1
2019-07-24 20:40:25 +08:00
break;
case Direction.up:
2019-07-25 11:59:20 +08:00
node.y -= 1
2019-07-24 20:40:25 +08:00
break;
case Direction.down:
2019-07-25 11:59:20 +08:00
node.y += 1
2019-07-24 20:40:25 +08:00
break;
}
}
2019-07-24 19:58:30 +08:00
2019-07-24 20:40:25 +08:00
step() {
if (this.state !== State.run) {
return
}
let tail = this.tail
while (tail.prev != undefined) {
tail.x = tail.prev.x
tail.y = tail.prev.y
tail = tail.prev
}
this.forward(this.head)
if (this.head.x < 0 || this.head.x >= this.width
|| this.head.y < 0 || this.head.y >= this.height) {
//If out of bound
2019-08-01 15:33:30 +08:00
loge('out of bound')
2019-07-24 20:40:25 +08:00
this.state = State.fail
} else if (this.head.x == this.food.x && this.head.y == this.food.y) {
//If eat food
2019-07-25 14:34:54 +08:00
let head: SnakeNode = { x: this.food.x, y: this.food.y }
log('eat food', head)
2019-07-24 20:40:25 +08:00
this.forward(head)
2019-07-25 14:34:54 +08:00
this.head.prev = head
head.next = this.head
2019-07-24 20:40:25 +08:00
this.head = head
this.refreshFood()
}
if (this.crashAtSelf()) {
//If crash at self
2019-07-25 14:34:54 +08:00
loge('crash at self')
2019-07-24 20:40:25 +08:00
this.state = State.fail
}
}
2019-07-24 19:58:30 +08:00
2019-07-24 20:40:25 +08:00
crashAtSelf() {
let cur = this.head.next
2019-07-25 14:34:54 +08:00
while (cur !== undefined) {
2019-07-24 20:40:25 +08:00
if (cur.x == this.head.x && cur.y == this.head.y) {
return true
}
cur = cur.next
}
return false
}
2019-07-25 14:34:54 +08:00
reset() {
this.direction = Direction.right
this.state = State.run
this.head.x = 0
this.head.y = 0
this.head.next = undefined
this.refreshFood()
}
2019-07-24 19:58:30 +08:00
}
class SnakeView extends ViewHolder {
2019-07-25 00:14:55 +08:00
panel: Stack = new Stack
2019-07-25 11:59:20 +08:00
start: Text = new Text
2019-07-25 14:34:54 +08:00
up?: Text
down?: Text
left?: Text
right?: Text
2019-07-24 19:58:30 +08:00
build(root: Group): void {
root.bgColor = Color.parse('#000000')
2019-07-25 11:59:20 +08:00
const vlayout = new VLayout
2019-07-24 19:58:30 +08:00
const title = new Text
title.text = "Snake"
title.textSize = 20
title.textColor = Color.parse("#ffffff")
title.layoutConfig = {
2019-07-25 11:59:20 +08:00
alignment: new Gravity().centerX(),
2019-07-24 19:58:30 +08:00
margin: {
top: 20
2019-07-25 11:59:20 +08:00
},
}
2019-07-25 14:34:54 +08:00
vlayout.space = 20
2019-07-25 11:59:20 +08:00
vlayout.layoutConfig = {
alignment: new Gravity().centerX().top()
}
this.panel.bgColor = Color.parse('#00ff00')
vlayout.addChild(title)
vlayout.addChild(this.panel)
root.addChild(vlayout)
const hlayout = new HLayout
this.start.text = "Start"
this.start.textSize = 30
this.start.textColor = Color.parse("#ffffff")
hlayout.addChild(this.start)
vlayout.addChild(hlayout)
2019-07-25 14:34:54 +08:00
this.up = this.buildController("↑")
this.down = this.buildController("↓")
this.left = this.buildController("←")
this.right = this.buildController("→")
const controlArea = new VLayout
controlArea.gravity = new Gravity().centerX()
controlArea.space = 10
controlArea.layoutConfig = {
alignment: new Gravity().centerX()
}
const line1 = new HLayout
const line2 = new HLayout
line2.space = 10
line1.addChild(this.up)
line2.addChild(this.left)
line2.addChild(this.down)
line2.addChild(this.right)
controlArea.addChild(line1)
controlArea.addChild(line2)
vlayout.addChild(controlArea)
}
buildController(text: string) {
const ret = new Text
ret.width = ret.height = 50
ret.bgColor = Color.parse('#ffff00')
ret.text = text
ret.textSize = 30
ret.textAlignment = new Gravity().center()
return ret
2019-07-24 19:58:30 +08:00
}
}
2019-07-24 20:40:25 +08:00
class SnakeVM extends ViewModel<SnakeModel, SnakeView>{
2019-07-25 11:59:20 +08:00
2019-07-25 00:14:55 +08:00
timerId?: any
2019-07-24 19:58:30 +08:00
2019-07-25 11:59:20 +08:00
start = () => {
2019-07-25 00:14:55 +08:00
if (this.timerId !== undefined) {
clearInterval(this.timerId)
}
2019-07-25 14:34:54 +08:00
this.getModel().reset()
2019-07-25 00:14:55 +08:00
this.timerId = setInterval(() => {
this.getModel().step()
2019-07-25 14:34:54 +08:00
}, 500)
2019-07-25 00:14:55 +08:00
}
2019-07-25 11:59:20 +08:00
stop = () => {
2019-07-25 00:14:55 +08:00
if (this.timerId !== undefined) {
clearInterval(this.timerId)
this.timerId = undefined
}
}
2019-07-25 14:34:54 +08:00
left = () => {
this.getModel().direction = Direction.left
}
right = () => {
this.getModel().direction = Direction.right
}
up = () => {
this.getModel().direction = Direction.up
}
down = () => {
this.getModel().direction = Direction.down
}
2019-07-25 00:14:55 +08:00
binding(v: SnakeView, model: SnakeModel) {
2019-07-25 11:59:20 +08:00
if (model.state === State.fail) {
2019-07-25 14:34:54 +08:00
loge('Game Over')
2019-07-25 11:59:20 +08:00
this.stop()
}
v.start.onClick = this.start
2019-07-25 00:14:55 +08:00
v.panel.width = model.width * 10
v.panel.height = model.height * 10
let node: SnakeNode | undefined = model.head
let nodes: SnakeNode[] = []
while (node != undefined) {
nodes.push(node)
node = node.next
}
2019-07-25 11:59:20 +08:00
nodes.push(model.food)
2019-07-25 00:14:55 +08:00
nodes.forEach((e, index) => {
2019-07-25 11:59:20 +08:00
2019-07-25 00:14:55 +08:00
let item = v.panel.children[index]
2019-07-25 11:59:20 +08:00
if (item === undefined) {
2019-07-25 00:14:55 +08:00
item = new Stack
item.width = item.height = 10
v.panel.addChild(item)
}
2019-07-25 11:59:20 +08:00
if (index === nodes.length - 1) {
item.bgColor = Color.parse('#ffff00')
} else {
item.bgColor = Color.parse('#ff0000')
}
item.x = e.x * 10
item.y = e.y * 10
2019-07-25 00:14:55 +08:00
})
2019-07-25 11:59:20 +08:00
2019-07-25 00:14:55 +08:00
if (nodes.length < v.panel.children.length) {
v.panel.children.length = nodes.length
}
2019-07-25 14:34:54 +08:00
if (v.left) {
v.left.onClick = this.left
}
if (v.right) {
v.right.onClick = this.right
}
if (v.up) {
v.up.onClick = this.up
}
if (v.down) {
v.down.onClick = this.down
}
2019-07-24 19:58:30 +08:00
}
}
2019-08-01 17:59:33 +08:00
2019-07-24 20:40:25 +08:00
class SnakePanel extends VMPanel<SnakeModel, SnakeView>{
2019-07-25 00:14:55 +08:00
2019-07-24 19:58:30 +08:00
getVMClass() {
return SnakeVM
}
2019-07-25 00:14:55 +08:00
2019-07-24 19:58:30 +08:00
getModel() {
2019-07-25 11:59:20 +08:00
return new SnakeModel(35, 35)
2019-07-24 19:58:30 +08:00
}
getViewHolder() {
return new SnakeView
}
2019-07-18 16:29:24 +08:00
}