Dart - ページの部品をかき集める(HTMLを組み立てて履歴を表示する)

Dart: Up and Running
(O'Reilly Media)
Kathy Walrath Seth Ladd (著)
[Kindle版]
このブログでの感想

開発環境

• OS X Mavericks - Apple (OS)
• Dart Editor (開発環境)
• Dartium | Dart/ Structured web apps (ブラウザ, Dart VM 用 (Chromium with the Dart VM))
• Safari (ブラウザ, JavaScript 用)
• Dart (プログラミング言語)

Head First JavaScript ―頭とからだで覚えるJavaScriptの基本( Michael Morrison (著), 豊福 剛 (翻訳)、オライリージャパン)の8章(ページの部品をかき集める)、自分で考えてみよう(p.385)をDartで考えてみる。

その他参考書籍

• What is Dart? [Kindle版] (O'Reilly Media) Kathy Walrath Seth Ladd (著) このブログでの感想

自分で考えてみよう(p.385)

コード

sample.dart

import 'dart:html';

void main() {
  decisions.forEach((SpanElement span) {
    span
        ..onMouseOver.listen((MouseEvent event) => span.className =
            'decisionhover')
        ..onMouseOut.listen((MouseEvent event) => span.className = 'decision')
        ..onClick.listen((MouseEvent event){
          var decision = span.id == 'decision1' ? 1 : 2;
          changeScene(decision);
        });
  });
  decision2.style.visibility = 'hidden';
  start..onClick.listen((MouseEvent event) => reset())
  ..onMouseOver.listen((MouseEvent event) => start.className = 'decisionhover')
  ..onMouseOut.listen((MouseEvent event) => start.className = 'decision');
  start.style.visibility = 'hidden';
}

SpanElement decision1 = querySelector('#decision1');
SpanElement decision2 = querySelector('#decision2');
SpanElement start = querySelector('#start0');
DivElement history = querySelector('#history_figure_adventure');
List<SpanElement> decisions = [decision1, decision2];
int cur_scene = 0;

void changeScene(int decision) {
  String message = '';
  switch (cur_scene) {
    case 0:
      cur_scene = 1;
      message = '旅は分かれ道から始まります。';
      decision2.style.visibility = 'visible';
      replaceNodeText('decision1', '決定1');
      start.style.visibility = 'visible';
      break;
    case 1:
      if (decision == 1) {
        cur_scene = 2;
        message = '林の中でかわいい小さな家を見つけました。';
      } else {
        cur_scene = 3;
        message = '橋にたち、穏やかな流れを眺めます。';
      }
      break;
    case 2:
      if (decision == 1) {
        cur_scene = 4;
        message = '窓に魔女';
      } else {
        cur_scene = 5;
        message = '魔女に食われる';
        spanVisibility();
      }
      break;
    case 3:
      if (decision == 1) {
        cur_scene = 6;
        message = '巨人に食われる';
        spanVisibility();
      } else {
        cur_scene = 7;
        message = '橋の上に巨人';
      }
      break;
    case 4:
      if (decision == 1) {
        cur_scene = 8;
        message = '続く…';
      } else {
        cur_scene = 5;
        message = '魔女に食われる';
      }
      spanVisibility();
      break;
    case 7:
      if (decision == 1) {
        cur_scene = 6;
        message = '巨人に食われる';
      } else {
        cur_scene = 9;
        message = '続く';
      }
      spanVisibility();
      break;
  }
  replaceNodeText('scenetext', message);
  if (cur_scene != 0) {
    ParagraphElement p = new ParagraphElement();
    p.text = '決定 $decision -> シーン $cur_scene : $message';
    history.append(p);
  } else {
    history.children = [];
  }
}

void replaceNodeText(String id, String new_text) {
  Node node = querySelector('#$id');
  Text text_node = new Text(new_text);
  while (!node.childNodes.isEmpty) {
    node.childNodes.first.remove();
  }
  node.append(text_node);
}

void reset() {
  cur_scene = 0;
  replaceNodeText('scenetext', 'シーン説明');
  replaceNodeText('decision1', 'ゲームスタート');
  decision1.style.visibility = 'visible';
  decision2.style.visibility = 'hidden';
  start.style.visibility = 'hidden';
  history.children = [];
}

void spanVisibility() {
  decisions.forEach((SpanElement span) => span.style.visibility = 'hidden');
  start.style.visibility = 'visible';
}

シーン説明

ゲームスタート 決定2 始めから