@startuml sequence_game

actor Player1
participant Client1
participant Server
database DB
participant Client2
actor Player2

' Player1の参加

Player1 -[#Green]> Client1 : 「スタート」
Client1 -[#Green]> Client1 : 表示　ニックネーム設定画面
Player1 -[#Green]> Client1 : 入力　ニックネーム
Player1 -[#Green]> Client1 : 押下　OKボタン
Client1 -[#Green]> Server : WebSocket 新規接続
Client1 -[#Green]> Server : 新規トークン発行\nニックネーム
Server -[#Green]> DB : 検索　ニックネーム
activate DB
DB -[#Green]-> Server : ニックネームの有無
deactivate DB
Server -[#Green]> Server : 新規トークン発行
note left : トークンは以後の処理で\nクライアントの識別に使う。
Server -[#Green]> DB : 保存　トークン、ニックネーム
DB -[#Green]-> Server : 保存完了
Server -[#Green]> Client1 : トークン
Client1 -[#Green]> Client1 : Vuexストアにトークン保存

' Player1による部屋作成

Player1 -[#Green]> Client1 : 開始　部屋の作成
Client1 -[#Green]> Client1 : 表示　部屋作成画面
Player1 -[#Green]> Client1 : 入力　部屋の名前
Player1 -[#Green]> Client1 : 入力　パスワード指定など
Player1 -[#Green]> Client1 : 入力　ステージ設定
Player1 -[#Green]> Client1 : OK
Client1 -[#Green]> Server : 部屋作成\n部屋情報、トークン
Server -[#Green]> DB : 検索　トークン
DB -[#Green]-> Server : トークン
Server -[#Green]> Server : 検証　トークン
Server -[#Green]> DB : リセット\n該当No.の部屋情報
activate DB
DB -[#Green]-> Server : リセット完了
deactivate DB
Server -[#Green]> DB : 書込　部屋の初期情報\nパスワードハッシュ含む
activate DB
DB -[#Green]-> Server : 書込完了
deactivate DB
Server -[#Green]-> Client1 : 通知　部屋一覧更新
Server -[#Green]-> Client2 : 通知　部屋一覧更新
Client1 -[#Green]> Client1 : 対局画面に遷移
Client1 -[#Green]> Server : WebSocket新規接続

loop 1分間隔
    Client1 -[#Green]> Server : 接続確認\n部屋番号、接続ID、トークン
    Server -[#Green]> DB : 検索　トークン
    activate DB
    DB -[#Green]-> Server : トークン
    deactivate DB
    Server -[#Green]> Server : 検証　トークン
    Server -[#Green]> DB : 保存　接続ID
    activate DB
    DB -[#Green]-> Server : 保存完了
    deactivate DB
end
note left : 1分間隔で繰り返し処理する仕組みは未実装

' Player2参戦

Player2 -[#Green]> Client2 : 押下　「対局」ボタン
Client2 -[#Green]> Client2 : 表示　対戦用パスワード入力画面
Player2 -[#Green]> Client2 : 入力　対戦用パスワード
Client2 -[#Green]> Server : パスワード転送
Server -[#Green]> Server : パスワードハッシュ計算
Server -[#Green]> DB : 保存済パスワードハッシュ取得
activate DB
DB -[#Green]-> Server : 保存済パスワードハッシュ
deactivate DB
Server -[#Green]> Server : パスワードハッシュ比較
alt パスワードハッシュが一致した場合
    Server -[#Green]> DB : 保存　Client2のWebSocket 接続ID
    activate DB
    DB -[#Green]-> Server : 保存完了
    deactivate DB
    Server -[#Green]> DB : 取得　Player1ニックネーム、盤面情報
    activate DB
    DB -[#Green]-> Server : Player1ニックネーム、盤面情報
    deactivate DB
    Server -[#Green]> Client2 : パスワードOK、Player1ニックネーム、盤面情報
    Client2 -[#Green]> Client2 : 表示　対局前確認画面
    Player2 -[#Green]> Client2 : OK
    Client2 -[#Green]> Client2 : 対局画面表示
    Client2 -[#Green]> Server : WebSocket新規接続
    Client2 -[#Green]> Server : 部屋番号、接続ID、トークン
    Server -[#Green]> DB : 検索　トークン
    activate DB
    DB -[#Green]-> Server : トークン
    deactivate DB
    Server -[#Green]> Server : 検証　トークン
    Server -[#Green]> DB : 保存　部屋番号、接続ID
    activate DB
    DB -[#Green]-> Server : 保存完了
    deactivate DB

    alt Player1とPlayer2のトークンが揃った場合
        Server -[#Green]> Client1 : 対局開始合図\nPlayer1,2ニックネーム
        Server -[#Green]> Client2 : 対局開始合図\nPlayer1,2ニックネーム
        Client1 -> Client1 : 表示　対局開始メッセージ
        Client2 -> Client2 : 表示　対局開始メッセージ
        Player1 -> Client1 : 石を置く
        Client1 -> Server : 石を置く
        Server -> Server : 石を置けるかチェック
        Server -> Server : 石を置く
        Server -> Server : 次のターンにPlayer2が\n石を置けるかチェック
        Server -> DB : 更新\n盤面状態、次のプレイヤー
        activate DB
        DB --> Server : 更新完了
        deactivate DB
        Server -> Client1 : 通知　更新後盤面状態
        Server -> Client2 : 通知　更新後盤面状態
    end
end

@enduml
