コラボフロー Advent Calendar 2023 の23日目の記事です。
昨年のAdvent Calendarでは、コラボフローでテトリス申請を作成しました。
今年はテトリス申請に機能を追加します！

結果の報告だけでなく、結果に至った経緯も大事、という場面ありますよね？
申請書に結果だけ記載しても、良し悪しの判断ができない、など。

テトリス申請でも判定時に申請者のプレイ状況を確認したい、
といったご要望の声が聞こえてきました（脳内で🤯）

ということで、JavaScriptカスタマイズで「リプレイ機能」を追加してみます！！

DEMO

リプレイ機能の完成イメージです。
プレイ後や判定/閲覧画面でクリックできる「▶️ REPLAY」ボタンを配置しました。
このボタンをクリックすると、ゲームオーバーになる状況が再生されます。

（リーゼント風？？）

それでは主な改修内容を紹介していきます。

【1】 Excelで申請書レイアウトや配色を変更

今年は緑を基調にしてみました
昨年と同じ説明ですが、申請書のレイアウトをExcelで作成しているので、
Excelで編集してアップロードするだけで、簡単に画面デザインを変えられます

（参考：Excelフォームを作成する）

【2】ラベルパーツにボタンを配置

「▶️ REPLAY」ボタンを、ラベルパーツで配置しました。
ラベルパーツは、HTMLタグが使えるので密かに便利なパーツです！

申請書に画像をimgタグで埋め込んだり、入力ガイドなどへのリンクを
aタグで付けたり、JavaScript無しでも申請書に追加できるんです。

【3】非表示パーツで履歴管理

リプレイ用のブロック位置情報を、非表示パーツに登録しました。
テキスト（一行）パーツは、見せたくない値を非表示にして隠すことができます。

以下はパーツを非表示にせず、位置情報の履歴をセットしていくイメージです。

parts.tbl_1.value[0].fidHistory.value = JSON.stringify(histories)

JSON.stringify()で構造体を、JSON形式の文字列にしてパーツへセットできます！
（参考：パーツのデータと状態の操作 - valueプロパティへの値設定）

テキスト（一行）パーツに登録できる値は最大999文字ですが、
今回は数値配列の位置情報だけなのでJSON形式でも問題なく収まりました。
パーツに値を登録することで、判定/閲覧画面でもデータを取得できるようになります。

一つ注意点として、この値を判定画面のJavaScriptカスタマイズで取得した際は
「"（ダブルクォーテーション）」が「"」という文字に変換されていました
ですが以下のような置換処理を入れることで、構造体のオブジェクトに戻せました。

var historyValue = parts.tbl_1.value[0].fidHistory.value;
historyValue = historyValue.replaceAll('&quot;', '"');
const histories = JSON.parse(historyValue);

【4】ボタンのクリックイベント

idを付けておいた「▶️ REPLAY」ボタンに、クリックイベントを設定しました。

setReplayButton() {
    if (!this._replayButtonId) {
        return;
    }

    this.replayButton = document.querySelector(`#${this._replayButtonId}`);
    this.replayButton.disabled = false;
    this.replayButton.addEventListener('click', (event) => {
        event.preventDefault();
        this.replay();
    });
}

event.preventDefault();で、入力フォームがsubmitされないようにしています。

async replay() {
    const delay = 500;

    for (let rowIndex = 1; rowIndex <= this.rowLength; rowIndex++) {
        // ブロックの表示を書き換える処理
        // （省略）

        await this.wait(delay);
    }
}

async wait(delay) {
    await new Promise(resolve => setTimeout(resolve, delay));
}

リプレイ処理では、非表示パーツに登録したブロック位置情報をもとに、
プレイ画面用のテキストパーツの値を順に書き換えていきます。
wait()処理で間を開けて更新することで、アニメーションっぽく表現できました🎉

おわりに

結果には原因がある、を意識してみましたがいかがでしょうか。

以下リンクからzip形式のフォームと経路の情報をダウンロードし、
コラボフローでインポートするとテトリス風の申請書を利用できます♪
（追記：アレンジを加えたバージョンに差し替えました）

[ テトリス風申請 ]のフォームと経路のzipファイルをダウンロードする
フォームをインポートする
経路をインポートする

因みに、テトリスのブロックを積んで描く絵は「テトリスアート」と呼ばれますが、
上のDEMO画面内の横顔2つはチートで作りました
リプレイされるシーンが少ないから、ごまかせる...🫠