オープンソースの冒険:エピソード25:Imba

私はImba 2にいくつかのImbaの1アプリをポートしたい.
これは非常に単純な、ちょうど別のゲームのライフプログラムです.それはかなり簡単です、しかし、Imbasvg:g そして、Imba 2はWebコンポーネントがまだサポートしていないので、これを行うことができません.
こちらですthe original source code , and here you can see the app in action .

Imbaの1アプリ。印旛

let def countNeighbours(cells, x, y)
  let count = 0
  for i, cell of cells
    if !cell:state
      continue
    let dx = Math.abs(cell:x - x)
    let dy = Math.abs(cell:y - y)
    if Math.max(dx, dy) == 1
      count += 1
  return count

let def runStep(cells)
  let nextCells = []
  for i, cell of cells
    let n = countNeighbours(cells, cell:x, cell:y)
    let nextState = (n == 3 || (cell:state && n == 2))
    nextCells.push({x: cell:x, y: cell:y, state: nextState})
  return nextCells

tag CellTag < svg:g
  def onclick
    data:state = !data:state
    trigger("pause")

  def render
    let visualStartX = 20 * data:x + 1
    let visualStartY = 20 * data:y + 1

    <self>
      <svg:rect .alive=(data:state) .dead=(!data:state) x=visualStartX y=visualStartY height=18 width=18>

tag App
  def setup
    let sizex = 30
    let sizey = 30
    @cells = []
    for x in [0..sizex]
      for y in [0..sizey]
        @cells.push({ x: x, y: y, state: Math.random() < 0.2 })

  def step
    @cells = runStep(@cells)

  def mount
    setInterval(&,100) do
      if @playing
        step
      Imba.commit

  def play
    @playing = true

  def pause
    @playing = false

  def onpause
    pause

  def render
    <self>
      <header>
        "Game of Life"
      <svg:svg>
        for cell in @cells
          <CellTag[cell]>
      <div.buttons>
        if @playing
          <button :click.pause>
            "Pause"
        else
          <button :click.step>
            "Step"
          <button :click.play>
            "Play"

Imba.mount <App>

Imbaの1アプリ。SCSS

@import 'normalize-scss';
@include normalize();

.App {
  header {
    font-size: 64px;
    text-align: center;
  }

  svg {
    height: 600px;
    width: 600px;
    background-color: #aaa;
    margin: auto;
    display: block;
  }

  .dead {
    fill: #844;
  }

  .alive {
    fill: #3f3;
  }

  .buttons {
    text-align: center;
  }
  button {
    margin: 0.5em;
  }
}

Imba 2アプリ。印旛

def countNeighbours(cells, x, y)
  let count = 0
  for cell of cells
    if !cell.state
      continue
    let dx = Math.abs(cell.x - x)
    let dy = Math.abs(cell.y - y)
    if Math.max(dx, dy) == 1
      count += 1
  count

def runStep(cells)
  let nextCells = []
  for cell of cells
    let n = countNeighbours(cells, cell.x, cell.y)
    let nextState = (n == 3 || (cell.state && n == 2))
    nextCells.push({x: cell.x, y: cell.y, state: nextState})
  nextCells

tag cell
  prop data

  def onclick
    data.state = !data.state
    emit("pause")

  def render
    let visualStartX = 20 * data.x + 1
    let visualStartY = 20 * data.y + 1

    <self[left:{visualStartX}px top:{visualStartY}px] .alive=(data.state) .dead=(!data.state) @click.onclick>

  css
    position: absolute
    width: 18px
    height: 18px
    &.dead
      background-color: #864
    &.alive
      background-color: #3f3

tag app
  prop cells
  prop playing = true

  def setup
    let sizex = 30
    let sizey = 30
    cells = []
    for x in [0 ... sizex]
      for y in [0 ... sizey]
        cells.push({ x: x, y: y, state: Math.random() < 0.2 })

  def step
    cells = runStep(cells)

  def mount
    imba.setInterval(&,100) do
      if playing
        step()

  def play
    playing = true

  def pause
    playing = false

  def render
    <self>
      <header>
        "Game of Life"
      <div.board>
        for cell in cells
          <cell data=cell @pause.pause>
      <div.buttons>
        if playing
          <button @click.pause>
            "Pause"
        else
          <button @click.step>
            "Step"
          <button @click.play>
            "Play"

  css
    header
      font-size: 64px
      text-align: center
    .board
      position: relative
      height: 600px
      width: 600px
      background-color: #aaa
      margin: auto
    .buttons
      text-align: center
    button
      margin: 0.5em

imba.mount <app>

ここでの主な問題はSVGを直接使用できないことです.我々は小さなトンを作ることができる<svg> s、それぞれ<rect> , しかし、その時点で我々は同様に使用するかもしれない<div>s 、およびposition: absolute それら.
いくつかのマイナーなもの

イベントモデルが変更され、単純に定義できるようには見えませんonX , このようなイベントを手動でバインドする必要があります

for Imbaからの構文変更

ソースコード

ソースコードはimba2-game-of-life repository .
また、see the live version here .

今度来る

我々はあまりにも空想をしなかったが、私はそれが良い時間を停止すると思います.次のエピソードでは、私はimba 2について若干の考えを与えます.