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

Imba 2、この時間マトリックス雨、マトリックスに似たスクリーンセーバーに別のImba 1アプリをポートしましょう.
You can see it in action here , and the source code of Imba 1 version here .

Imbaの1アプリ。印旛

このアプリは2つのコンポーネントを使用しますApp (トップレベル)Stream (落下文字の1つのストリーム)、いくつかのライフサイクルフックsetInterval , and setup .
また、異常に見えるいくつかの緩やかな機能ですlet def .

let def random_int(min, max)
  min + Math.floor( Math.random() * (max - min + 1) )

let def random_katakana
  String.fromCharCode(random_int(0x30A0, 0x30FF))

let def random_symbols
  for i in [0..random_int(5, 30)]
    { v: random_katakana() }

tag Stream
  def render
    <self css:top=data:y css:left=data:x>
      for symbol, index in data:symbols
        <div.symbol .first=(index==0)>
          symbol:v

tag App
  def setup
    @streams = []
    let x = 10
    while x + 30 < window:inner-width
      @streams.push({
        x: x,
        y: Math.random() * window:inner-height,
        speed: 10 + Math.random() * 20,
        symbols: random_symbols()
      })
      x += 30

  def mount
    setInterval(&,10) do
      for stream in @streams
        stream:y += stream:speed
        if stream:y > window:inner-height + stream:symbols:length * 20
          stream:symbols = random_symbols()
          stream:speed = 10 + Math.random() * 20
          stream:y = - stream:symbols:length * 20
        for symbol in stream:symbols
          if Math.random() < 0.01
            symbol:v = random_katakana()
      Imba.commit

  def render
    <self>
      for stream in @streams
        <Stream[stream]>

Imba.mount <App>

Imbaの1アプリ。SCSS

めったに使われていない特徴的なスタイリングflex-direction: column-reverse . いつものように、SSSはネスティングだけではなく、何か空想のために使用されます.

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

body {
  overflow: hidden;
}

.App {
  background-color: black;
  height: 100vh;
  width: 100vw;
  overflow: hidden;

  .Stream {
    position: absolute;
    display: flex;
    flex-direction: column-reverse;

    .symbol {
      height: 20px;
      width: 20px;
      line-height: 20px;
      position: relative;
      font-size: 16px;
      text-align: center;
      color: #8f4;

      &.first {
        color: #dfa;
      }
    }
  }
}

Imba 2アプリ。印旛

ここにImba 2に移植されたアプリがあります.

global css body
  background-color: black
  overflow: hidden
  margin: 0
  height: 100vh
  width: 100vw

def random_int(min, max)
  min + Math.floor( Math.random() * (max - min + 1) )

def random_katakana
  String.fromCharCode(random_int(0x30A0, 0x30FF))

def random_symbols
  for i in [0 .. random_int(5, 30)]
    { v: random_katakana() }

tag stream
  prop x
  prop y
  prop symbols

  <self[top:{y}px left:{x}px]>
    for symbol, index in symbols
      <div.symbol>
        symbol.v

  css
    position: absolute
    display: flex
    flex-direction: column-reverse

    .symbol
      height: 20px
      width: 20px
      line-height: 20px
      position: relative
      font-size: 16px
      text-align: center
      color: #8f4

      &:first-child
        color: #dfa

tag app
  def setup
    streams = []
    let x = 10
    while x + 30 < window.innerWidth
      streams.push({
        x: x
        y: Math.random() * window.innerHeight
        speed: 3 + Math.random() * 5
        symbols: random_symbols()
      })
      x += 30

  def mount
    imba.setInterval(&, 10) do
      for stream in streams
        stream.y += stream.speed
        if stream.y > window.innerHeight
          stream.symbols = random_symbols()
          stream.speed = 3 + Math.random() * 5
          stream.y = - stream.symbols.length * 20
        for symbol in stream.symbols
          if Math.random() < 0.01
            symbol.v = random_katakana()

  <self>
    for stream in streams
      <stream x=stream.x y=stream.y symbols=stream.symbols>

  css
    height: 100vh
    width: 100vw
    overflow: hidden

imba.mount <app>

注意:

構文は、標準的なJavaScript

imba.setInterval レギュラーのようですsetInterval , それ以外にも、プロパティが変更された可能性があることをimbaに伝えます.それはSvelteのよりも反応性の異なるモデルです.

各シンボルには{v: ...} 簡単にループを更新する

つの不可解なものは<self[top:{y}px left:{x}px]> - 最初にトライ<self[top:{y} left:{x}]> 期待されるピクセルは、デフォルトの単位として、それはどのようにDOMについてのすべての作品が、どうにかimba変換10 to 40px . どのような実際の性交?それはまったく意味がない.それは奇妙な風変わりなナンセンスですh-1 手段height: 0.25rem , そして4px . それは完全にフレームワークレベルで困惑です.

ImbaのCSSには、十分なSCSS機能があります&:first-child ) SSSを使う必要がないということ

ソースコード

ソースコードはimba2-matrix-rain repository . いくつかの時点でGITUBページのサポートを追加しようとします.

今度来る

次のいくつかのエピソードでは、私はImba 2にいくつかのより多くのImbaのアプリをポートしようとしますし、私はImba状況についての私の考えをまとめて推測します.