はじめに

この記事は、

の続きとなります。
まだ上記をご覧になられていない場合は、先に確認することをお勧めします。

これまでの記事では、あみだくじを作成しました。
今回あみだくじの結果の作成方法を解説したいと思います。

あみだくじの結果を表示する

結果のテキストを表示する

結果の種類は、最初の画面で設定したように

番号
〇×
カスタム

があります。

f:id:koruneko:20201129234251p:plain

この結果は result に登録されていますので、 result に格納されている値を表示させます。
表示形式は、参加者情報と同じようにしたいと思います。

f:id:koruneko:20201129234821p:plain

例えば種類に番号を選んだ場合は、上記のようになります。

Image.Image

Concat(
    ForAll(
        Sequence(ParticipantDropdown.Selected.Value) As roopcnt,
        "<g>
            <rect x='" & Amidakuji.Width * roopcnt.Value / (ParticipantDropdown.Selected.Value + 1) - 50 & "' y='665' width='100' height='30'>
            </rect>
            <text x='" & Amidakuji.Width * roopcnt.Value / (ParticipantDropdown.Selected.Value + 1) - 
                            Len(Last(FirstN(result, roopcnt.Value)).result) * 8 & "' 
                  y='687' 
                  font-size='20'
                  fill='white'
                  font-weight='bold'
             > " &
                 Last(FirstN(result, roopcnt.Value)).result & "
             </text>
        </g>"
    ),
    Value
)

これで結果を表示できます。
仕組みは参加者の表示と同様ですので、今回は割愛します。

結果を順に表示させてしまうと、アニメーションを開始する前から自分の結果を辿ることができてしまいます。
別に悪いことではないですが、せっかくアニメーションを作ったのでこちらがアニメーションを行うまで参加者には結果の予測をさせたくないですw
よって、以下のようにします。

結果のシャッフル
参加者が結果まで到達したタイミングで結果を表示する

結果の順表示順をシャッフルする

表示結果をシャッフルするためには shuffle 関数を用います。

shuffle 関数を利用するタイミングには注意が必要です。

例えば、 Last(FirstN(Shuffle(result), roopcnt.Value)).result としてしまうと、この式は ForAll 関数内にありますので、処理毎にシャッフルが行われてしまうので、表示されない結果やダブって表示される結果がでてきてしまいます。

ですので、Shuffle は ForAll を行う前に行いましょう。

ForAll 関数の前にシャッフルを行うとなると、シャッフルした結果をどこかに保存しておく必要があります。
Collect 関数で保存する方法もありますが、一時的な利用なため、 With 関数を今回は利用します。

Image.Image

With({s_result:Shuffle(result)},
   Concat(
       ForAll(
           Sequence(ParticipantDropdown.Selected.Value) As roopcnt,
           "<g>
               <rect x='" & Amidakuji.Width * roopcnt.Value / (ParticipantDropdown.Selected.Value + 1) - 50 & "' y='665' width='100' height='30'>
               </rect>
               <text x='" & Amidakuji.Width * roopcnt.Value / (ParticipantDropdown.Selected.Value + 1) - 
                               Len(Last(FirstN(s_result, roopcnt.Value)).result) * 8 & "' 
                     y='687' 
                     font-size='20'
                     fill='white'
                     font-weight='bold'
                > " &
                    Last(FirstN(s_result, roopcnt.Value)).result & "
                </text>
           </g>"
       ),
       Value
   )
)

これで結果がシャッフルされて表示されたかと思います。

参加者が結果まで到達したタイミングで結果を表示する

参加者が結果まで到達したタイミングで結果を表示するためには、 <animate>要素を利用します。

参加者が結果に到達するのは、Start ボタンを押してから7秒後なので結果のアニメーション開始はStart ボタンを押してから7秒後とします。

Image.Image

With({s_result:Shuffle(result)},
    Concat(
        ForAll(
            Sequence(ParticipantDropdown.Selected.Value) As roopcnt,
            "<g>
                    <rect x='" & Amidakuji.Width * roopcnt.Value / (ParticipantDropdown.Selected.Value + 1) - 50 & "' y='665' width='100' height='30' fill='none'>" &
                    If(
                        isStart,
                        "<animate attributeName='fill' begin='7s' dur='3s' from='none' to='black' repeatCount='1' fill='freeze' />"
                    ) & "
                    </rect>
                    <text x='" & Amidakuji.Width * roopcnt.Value / (ParticipantDropdown.Selected.Value + 1) - 
                                Len(Last(FirstN(s_result, roopcnt.Value)).result) * 8 & "' 
                          y='687' 
                          font-size='20'
                          fill='none'
                          font-weight='bold'
                          > " &
                        Last(FirstN(s_result, roopcnt.Value)).result &
                        If(
                            isStart,
                            "<animate attributeName='fill' begin='7s' dur='5s' from='none' to='white' repeatCount='1' fill='freeze' />"
                        ) & "
                    </text>
                </g>"
        ),
        Value
    )
)

アニメーションの開始を7秒後と設定している箇所は begin='7s' です。

これで、参加者が結果に到達したタイミングで結果が表示されるようになりました！