プレイヤーの目的
与えられた入力ストリームから、関数パネルを順番に接続して正解ストリームを作る。再生が1周して、値・時刻・完了イベントが一致すればステージクリア。
コンセプト
中核の面白さ
コードを書く代わりに、時間軸に流れるイベントを見ながら関数の効果を試す。失敗が即座に出力差分として見えるため、論理パズルとして試行錯誤できる。
設計原則
ReactiveX完全互換よりも、パズルとしての見通しを優先する。最初は単一ストリーム、固定タイムライン、少数の関数パーツで始める。
基本ルール
| 要素 | 初期仕様 |
|---|---|
| イベント | next(value) と complete を扱う。エラーは初期プロトタイプでは後回し。 |
| 時間 | 連続時間ではなく、タイムライン上の離散ステップとして扱う。表示上は横方向の位置で示す。 |
| 関数パネル | map, filter, take, skip から開始する。各パネルは入力例と出力例を持つ。 |
| 正解判定 | 現在出力と正解出力のイベント列を比較する。値、順序、時刻、完了位置が一致したら正解。 |
| 操作 | 再生、一時停止、リセット、速度変更を用意する。パイプライン変更時は現在出力を即時再計算する。 |
画面サンプル案 A: 分離レーン型
Stage 01 / filter(x >= 3) を作る
1x
Input Streamvalues enter from left to right
1
4
2
5
3
Pipeline Builderdrag parts, edit params
filterx >= 3
+ add part
+ add part
Current Outputgenerated by pipeline
4
5
3
Goal Streammust match after one loop
4
5
3
最初の実装に向く案。情報が上下に分かれており、初心者が入力、変換、出力、正解の関係を追いやすい。
画面サンプル案 B: 差分オーバーレイ型
Stage 03 / filter + map
0.5x
2x
Input Stream1, 2, 3, 4, 5
1
2
3
4
5
Pipeline Buildercurrent attempt has one extra event
filterx >= 2
mapx * 2
+ add part
Output vs Goaloverlay comparison
match
extra
missing
4
6
8
10
プレイ感が良い候補。正解との差分が1本のレーンに集約されるため、失敗理由が見えやすい。実装では判定ロジックと表示ルールを丁寧に分けたい。
画面サンプル案 C: 上級ステージ型
Stage 12 / combineLatest の導入
1x
Input StreamsA and B
A1
A2
A3
B1
B2
combineLatest(a, b) => a + b
take3
Output Comparisonadvanced overlay
A1B1
A2B1
A2B2
上級UIの課題
- 複数入力の因果関係を見せる必要がある。
- 同時刻イベントの順序ルールを固定する必要がある。
- 初心者UIより情報密度が上がるため、折りたたみやズームが必要になる。
将来の方向性。最初から作るより、単一ストリームの手触りを固めた後に拡張した方が安全。
関数パーツの初期セット
map
各イベントの値を変換する。例: x * 2, x + 1, String(x)
filter
条件に合うイベントだけを通す。例: x >= 3, x % 2 === 0
take
先頭から指定個数のイベントだけを通す。完了位置の理解にも使える。
skip
先頭から指定個数のイベントを捨てる。take と組み合わせると範囲選択の問題を作りやすい。
採用候補
最初のプロトタイプは案Aを基本にし、出力と正解の部分だけ案Bのオーバーレイ表示を取り込む構成がよい。入力とパイプラインは分かりやすく分け、失敗理由は1本の比較レーンで即座に見せる。