online-debate-timer

オンラインディベート向けの簡易タイマー

構成

タイマーアプリケーション

• src/app に格納
• タイマーキットの実装を使ったアプリケーションの実装例
• 今は一種類だけどバリエーションがあってもよさそう

タイマーキット

• src/lib に格納
• 特定のUI実装に依存しないロジックを実装
• ファイル構成
  • TkClock 一秒をできるだけ正確に測ることを責務とするクラス
  • TkTimerState タイマーの状態遷移ロジックを切り出したクラス
  • TkAudio ブラウザの Audio をラップしたクラス
  • TkTimer 他のクラスを組み合わせてタイマーの機能を実現

テスト

• spec に格納

ビルド

1. npm run build
2. public/index.html を開く

開発

方針

• "online" のタイマーだけど一応オフラインでも最低限は動くように作っておく
• 当分はIE11でも動くように作りたい
• ロジックはできるだけテストを書いておく

テスト

• npm run test

将来の開発について

機能

• issuesを参照

素材

• 効果音は https://jfxr.frozenfractal.com/ とSoundEngineで頑張ってつくったけど、もっとそれっぽいのがあれば
• デザインもスキン的な感じで他のパターンもあると良さそう

設計資料

stateDiagram-v2
初期状態 --> カウントダウン
初期状態 --> カウントアップ
カウントダウン --> 初期状態
カウントアップ --> 初期状態
state カウントダウン {
[*] --> カウントダウン時間設定
カウントダウン時間設定 --> カウントダウン中
カウントダウン時間設定 --> [*]
カウントダウン中 --> [*]
カウントダウン中 -->カウントダウン一時停止
カウントダウン中 --> カウントダウン完了
カウントダウン一時停止 --> [*]
カウントダウン一時停止 --> カウントダウン中
カウントダウン完了 --> カウントダウン時間設定
カウントダウン完了 --> [*]
}
state カウントアップ {
[*] --> カウントアップ中
カウントアップ中 --> [*]
カウントアップ中 --> カウントアップ一時停止
カウントアップ中 --> カウントアップ完了
カウントアップ一時停止 --> [*]
カウントアップ一時停止 --> カウントアップ中
カウントアップ完了 --> [*]
}

Loading