【ルービックキューブのタイマーを作る】第9回キューブの展開図にスクランブル情報を適用させる回

2025/03/21

2025/03/23

API, JS, Laravel, ルービックキューブ, ルービックキューブのタイマーをつくる, 開発

【ルービックキューブのタイマーを作る】第9回キューブの展開図にスクランブル情報を適用させる回

プロジェクト【ルービックキューブのタイマーを作る】の最終回となります。ここまで閲覧して頂いた方、本当にありがとうございます。今回はコレ！

スクランブルに合わせて、展開図のカラーリングを変化させようという作業です。

一旦かるく現在の仕様を・・・

作業前の仕様を確認しておく。

スクランブル文字列(F’ R2 B・・・)

ホーム画面のload時に、API経由で新しいスクランブル情報を生成し、APIが返却したスクランブル文字列をHTML上に表示。(timer.jsで処理)

キューブ展開図

キューブの展開図の形になるように、HTML上で表示しているのみ。カラーリングは、「cube-white」「cube-orange」などのclass名を付けることでCSSを当てている。

作業の流れ

API側で初期状態のカラーリング情報を生成し、レスポンスに含める。
HTMLに直接書いている「cube-white」等のclassを削除する。API経由で取得したカラー情報を用いて各マスに対してJavaScriptから「cube-white」「cube-orange」などのclassを付与する。これにより現在と同様の、回転前の配色VIEWを再現。
API側でスクランブル文字列に対応するカラー情報を生成する処理に変更する。

APIでカラー情報を返す

とりあえず、初期状態のカラーリングをAPIを使って表現できるようにやってみます。

app/Services/CubeService.php

工程3でscrambleToColorArrayに回転処理を追記する予定ですが、現在は初期状態を返す関数として定義。

    /**
     * スクランブルデータ(数値配列)をカラー情報の配列にする
     * @param $scramble
     * @return array
     */
    public function scrambleToColorArray($scramble): array
    {
        // 初期状態のカラーリング情報
        $colors_info = $this->initColorArray();
        // ここで回転処理を記述する


        return $colors_info;
    }

    /**
     * 初期状態のカラー情報を取得
     * @return array
     */
    public function initColorArray(): array
    {
        $ret = array();
        $colors = [
            0 => 'white',
            1 => 'orange',
            2 => 'green',
            3 => 'red',
            4 => 'blue',
            5 => 'yellow'
        ];
        for ($i = 0; $i < 6; $i++) {
            for ($j = 0; $j < 9; $j++) {
                $key = $i * 9 + $j;
                $ret[$key] = $colors[$i];
            }
        }
        return $ret;
    }

app/Http/Controllers/CubesApiController.php

作成した情報をAPIのレスポンスに含めます。

/**
 * [API] スクランブル情報を取得
 * @param CubeService $cs
 * @return array[]
 * @throws \Random\RandomException
 */
public function scramble(CubeService $cs): array
{
    $scramble_info = $cs->scramble();
    $scramble_text = implode(' ', $cs->scrambleToTextArray($scramble_info));
    $scramble_colors = $cs->scrambleToColorArray($scramble_info);
    return [
        'scramble' => [
            'text' => $scramble_text,
            'colors' => $scramble_colors,
        ]
    ];
}

APIのレスポンスを見てみる

JSON.parseした後の値をログ出力してみると・・

スクランブルの”text”に加えて、”colors”という情報が追加されています。地味な実装ですが、配列の中身は、文字列で色の名前を入れました。

ちなみに今回のスクランブルビューを作るにあたって、↓こんな感じにインデックスをふったものをイメージしています。

APIのカラー情報を適用する

resources/views/index.blade.php

上で示したインデックス通りに、各マスに「cubeview-cell-{{$key}}」というclassを付与した。

<div id="cubeview" class="">
    <?php $key = 0; ?>
    @foreach(array_keys($colors) as $face)
        <div class="surface {{$face}}">
            <div class="wrapper">
                @for($i = 1; $i < 10; $i++)
                    <div id="cubeview-cell-{{$key}}" class="cube cube-{{$i}}"></div>
                        <?php $key++; ?>
                @endfor
            </div>
        </div>
    @endforeach
</div>

resources/js/timer.js

工程1で作成したAPIレスポンスを用いて、json.scramble.colors[i]の値(whiteやorange等)が、cubeview-cell-{i}のクラス(cube-whiteやcube-orange)となるように実装。

scramble: function () {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/api/scramble');
    xhr.send();
    xhr.onreadystatechange = () => {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                const json = JSON.parse(xhr.responseText);
                document.getElementById('scramble').textContent = json.scramble.text;

                // 追加
                for(let i = 0; i < 54; i++){
                    document.getElementById('cubeview-cell-' + i).classList.add('cube-' + json.scramble.colors[i]);
                }
            }
        }
    }
}

現状を確認

timer.jsを実装する前と後を比較すると、分かると思うので確認すると・・・

timer.js実装前

timer.js実装後

できました！

まずは1回転分の展開図をつくる

いけてる実装が思いついてないので、一番地味で申し訳ないですが、一旦手書きで回転を加えてみる。

まずは、R一回分を試してみる。回転記号についてはこちら(TORIBO)

app/Services/CubeService.php

まず回転データを一部修正する。以前のデータは、$timesの変数が、0,1,2の値をとっていたが、回転回数をあわせるために、1,2,3の値をとるように変更した。1が順方向1回、2が順方向2回、3は逆方向1回だが、順方向に3回回しても同じなので、3としておく。

/**
 * ランダムで回転情報(方向,回数)を取得
 * 方向 0:U, 1:D, 2:F, 3:B, 4:R, 5:R
 * 回数 1:順方向1, 2:順方向2(2), 3:逆方向1(')
 * @return array
 * @throws \Random\RandomException
 */
public function roll(): array
{
    // 方向(R, U, L, D, F, Bの6パターン)
    $roll = random_int(0, 5);
    // 回数(U, U2, U'の3パターン)
    $times = random_int(1, 3);
    return array($roll, $times);
}

めちゃくちゃベタ書きの実装ですが、今回は動けば良いということで、一旦Rの回転を表現してみた。変数operationの定義は、インデックスXのマスがインデックスYに移動するという意味。1個の動作につき、20マスのカラーが移動する。（↓の例では、Rの回転のみしか記述していない。）

/**
 * カラーの回転処理(1記号分)を処理する
 * @param $colors
 * @param $roll
 * @param $times
 * @return array
 */
public function cubeRotate($colors, $roll, $times)
{
    $cube = $colors;
    $operation = array();
    switch ($roll) {
        case 4:
            $operation = [
                20 => 2,
                23 => 5,
                26 => 8,
                2 => 42,
                5 => 39,
                8 => 36,
                42 => 47,
                39 => 50,
                36 => 53,
                47 => 20,
                50 => 23,
                53 => 26,
                27 => 29,
                28 => 32,
                29 => 35,
                32 => 34,
                35 => 33,
                34 => 30,
                33 => 27,
                30 => 28
            ];
            break;
        default:
            break;
    }

    for ($i = 0; $i < $times; $i++) {
        $cube_previous = $cube;
        foreach($operation as $position_origin => $position_new){
            $cube[$position_new] = $cube_previous[$position_origin];
        }
    }

    return $cube;
}

擬似的に回転を表現してみる

/**
 * スクランブルデータ(数値配列)をカラー情報の配列にする
 * @param $scramble
 * @return array
 */
public function scrambleToColorArray($scramble): array
{
    // 初期状態のカラーリング情報
    $colors_info = $this->initColorArray();

    // R1回分の回転を擬似的に作成
    $scramble = [
        [
            'roll' => 4,
            'times' => 1
        ]
    ];

    foreach ($scramble as $value) {
        $colors_info = $this->cubeRotate($colors_info, $value['roll'],  $value['times']);
    }

    return $colors_info;
}

これでAPIの出力が変化したはずなので、画面を見てみる。