<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>WORDOWLF</title>
    <script src="./script.js"></script>
    <link rel="stylesheet" href="./style.css">
    <link rel="icon" type="image/png" href="./assets/icon16.png" sizes="16x16" />
    <link rel="icon" type="image/png" href="./assets/icon48.png" sizes="48x48" />
    <link rel="icon" type="image/png" href="./assets/icon128.png" sizes="128x128" />
</head>

<body>
    <div id="settingCard">
        <h1>ワードウルフ</h1>
        <h2>設定</h2>
        <div id="themeSetting">
            <h3>お題を選ぶ</h3>
            <select id="themeList">
            </select>
        </div>
        <div id="timerSetting">
            <h3>試合時間を設定(秒)</h3>
            <input type="text" id="gameTimerInputMin">
            <input type="text" id="gameTimerInputSec">
        </div>
        <div id="playerSetting">
            <h3>プレイする人数を入力</h3>
            <input type="text" id="playerNumInput">
            <div id="playerNames">
            </div>
            <h3>人狼の数を入力</h3>
            <input type="text" id="werewolfNumInput">
        </div>
        <button id="play">GO！</button>
    </div>
    <div id="wordsCard">
        <div id="wordsShowArea"></div>
        <button id="nextWordButton">次へ進む</button>
    </div>
    <div id="timerCard">
        <div id="timerNumbers"></div>
        <button id="showResults">結果を表示する</button>
    </div>
    <div id="resultsCard">
        <table>
            <tr>
                <th>陣営</th>
                <th>お題</th>
                <th>メンバー</th>
            </tr>
            <tr>
                <td>人狼</td>
                <td id="wolfWordResult"></td>
                <td id="wolfMemberResult"></td>
            </tr>
            <tr>
                <td>市民</td>
                <td id="villagerWordResult"></td>
                <td id="villagerMemberResult"></td>
            </tr>
        </table>
    </div>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap');

        #wordsCard,
        #timerCard,
        #resultsCard {
            display: none;
            width: 100%;
            height: 100%;
        }

        body {
            display: flex;
            justify-content: center;
            padding: 0;
            font-family: "M PLUS 1p", sans-serif;
            font-weight: 400;
            font-style: normal;
        }

        button {
            color: white;
            background: blueviolet;
            border: none;
            height: 5rem;
            width: 100%;
            font-size: 40px;
            margin-top: 1rem;
        }

        #resultsCard>table {
            border-spacing: 0;
        }

        #resultsCard>table>tbody>tr>td {
            padding: 5rem;
        }

        #resultsCard>table>tbody :nth-child(1),
        #resultsCard>table>tbody>tr :nth-child(1) {
            background: blueviolet;
            color: white;
        }
    </style>
    <script>
        const rawThemes = `
{
	"食べ物": [
		"トマト", "キャベツ", "ピーマン", "ブロッコリー", "ナス", "りんご", "バナナ", "ぶどう", "みかん", "いちご", "パイナップル", "メロン", "スイカ", "レモン", "オレンジ", "マンゴー", "パッションフルーツ", "パパイヤ", "キウイ", "イチジク", "ラズベリー", "ブルーベリー", "クランベリー", "アボカド", "ピーチ", "プラム", "チェリー", "ペルシモン", "グアバ", "スターフルーツ", "ドラゴンフルーツ", "アスパラガス", "カリフラワー", "マッシュルーム", "スイートコーン", "ズッキーニ", "パプリカ", "アーティチョーク", "タケノコ", "ほうれん草", "大根", "ゴボウ", "レンコン", "さつまいも", "かぼちゃ", "アボカド", "ココナッツ", "クルミ", "アーモンド", "ピーナッツ", "カシューナッツ", "ピスタチオ", "ヘーゼルナッツ", "マカダミアナッツ", "マンゴスチン", "ランブータン", "ドラゴンフルーツ", "サワーソップ", "ドリアン", "メロン", "アセロラ", "グリーンパパイヤ", "タロイモ", "カカオ", "サトウキビ", "キュウリ", "トウモロコシ", "エダマメ", "ブロッコリースプラウト", "ホワイトアスパラガス", "シシトウ", "カリフラワーライス", "ケール", "ルッコラ", "ホウレンソウ", "シソ", "タケノコ", "ミズナ", "シイタケ", "マイタケ", "エリンギ", "シメジ"
	],
	"動物": [
		"ライオン", "クマ", "ゴリラ", "カバ", "サル", "トラ", "ヒョウ", "チーター", "ジャガー", "ピューマ", "シマウマ", "ゾウ", "キリン", "シロクマ", "カンガルー", "コアラ", "パンダ", "レッサーパンダ", "カメレオン", "カモノハシ", "フラミンゴ", "ペンギン", "オウム", "フクロウ", "ハチドリ", "アルパカ", "リャマ", "カピバラ", "モルモット", "ハリネズミ", "ミーアキャット", "オオカミ", "ハイエナ", "リス", "ビーバー", "ウサギ", "ネズミ", "ハムスター", "ヤギ", "ヒツジ", "ブタ", "ウシ", "ウマ", "ラマ", "イルカ", "シャチ", "サメ", "エイ", "クジラ", "タツノオトシゴ", "タコ", "イカ", "エビ", "カニ", "ヤドカリ", "クラゲ", "サンゴ", "ヒトデ", "ウミガメ", "アザラシ", "セイウチ", "カワウソ", "ビーバー", "フェレット", "イタチ", "コヨーテ", "ジャッカル", "ラクダ", "ダチョウ", "エミュー", "ペリカン", "フクロウ", "カラス", "スズメ", "ツバメ", "ハト", "シジュウカラ", "ウグイス", "ホオジロ", "コサギ", "アオサギ", "ハシビロコウ"
	],
	"場所": [
		"ビーチ", "砂漠", "山", "洞窟", "森林", "プール", "湖", "川", "池", "温泉", "滝", "草原", "庭園", "遺跡", "城", "街路", "ビルディング", "橋", "駅", "空港", "学校", "劇場", "美術館", "図書館", "レストラン", "カフェ", "パーティー会場", "映画館", "スタジアム", "競技場", "神社", "寺院", "教会", "墓地", "公園", "遊園地", "動物園", "水族館", "病院", "消防署", "警察署", "郵便局", "市役所", "図書館", "博物館", "プラネタリウム", "プラザ", "広場", "モール", "デパート", "スーパーマーケット", "コンビニ", "美容院", "理髪店", "クリーニング店", "薬局", "診療所", "アウトレット", "ファーマーズマーケット", "観光名所", "テーマパーク", "歴史的建造物", "宿泊施設", "ヴィラ", "リゾート", "民宿", "ビジネスホテル", "高級ホテル", "ホステル", "バックパッカーズホステル", "カプセルホテル", "キャンプ場", "グランピング施設", "ロッジ", "ペンション", "ゲストハウス", "休憩所", "展望台", "展覧会", "ギャラリー", "ワークショップ", "イベントホール"
	],
	"趣味": [
		"ヨガ", "陶芸", "編み物", "ガーデニング", "料理", "ピラティス", "ダンス", "ランニング", "水泳", "筋トレ", "登山", "サーフィン", "スケートボード", "サッカー", "バスケットボール", "テニス", "ゴルフ", "釣り", "バドミントン", "乗馬", "ボクシング", "ダーツ", "読書", "映画鑑賞", "音楽鑑賞", "楽器演奏", "写真撮影", "絵画", "彫刻", "書道", "料理教室", "ワインテースティング", "ビール醸造", "車いじり", "旅行", "占い", "ゲーム", "パズル", "トレジャーハント", "スリリングなアクティビティ", "コンサート", "フェスティバル", "クラフトビール試飲", "マラソン", "トライアスロン", "カヤック", "カヌー", "ボルダリング", "ロッククライミング", "ラフティング", "スカイダイビング", "パラグライダー", "バンジージャンプ", "キャンプ", "グランピング", "アクアリウム", "天体観測", "カラオケ", "コスプレ", "模型作り", "陶芸", "手芸", "クロスステッチ", "ビーズアクセサリー作り", "裁縫", "織物", "レザークラフト", "クレイモデリング", "キャンドル作り", "アロマセラピー", "ネイルアート", "フェイスペイント", "タロットカード", "星占い", "数秘術", "オーラリーディング", "ダウジング", "チャクラヒーリング", "瞑想", "座禅", "禅修行", "茶道", "花道", "香道", "盆栽", "押し花"
	],
	"職業": [
		"弁護士", "記者", "建築家", "パイロット", "料理人", "医者", "教師", "看護師", "エンジニア", "デザイナー", "警察官", "消防士", "俳優", "歌手", "ダンサー", "作家", "画家", "彫刻家", "ミュージシャン", "バーテンダー", "フライトアテンダント", "博物館キュレーター", "図書館司書", "宇宙飛行士", "インフルエンサー", "プロゲーマー", "起業家", "投資家", "ファッションデザイナー", "映画監督", "プロデューサー", "芸術監督", "音楽プロデューサー", "エコロジスト", "社会福祉士", "心理カウンセラー", "ライフコーチ", "栄養士", "トレーナー", "獣医", "農家", "建設労働者", "舞台監督", "プログラマー", "システムエンジニア", "データサイエンティスト", "ネットワークエンジニア", "ウェブデザイナー", "アプリ開発者", "セキュリティエンジニア", "ゲームデザイナー", "アニメーター", "声優", "イベントプランナー", "ウェディングプランナー", "マーケティングスペシャリスト", "広告代理店", "PRスペシャリスト", "セールスマネージャー", "プロジェクトマネージャー", "アナリスト", "コンサルタント", "HRスペシャリスト", "リクルーター", "ヘッドハンター", "コピーライター", "エディター", "翻訳者", "通訳者", "ガイド", "旅行代理店", "ツアーガイド", "ホテルマネージャー", "シェフ", "パティシエ", "ソムリエ", "バリスタ", "バーテンダー", "メイクアップアーティスト", "美容師", "エステティシャン", "ネイリスト", "マッサージセラピスト", "フィットネストレーナー", "パーソナルトレーナー", "ヨガインストラクター", "ピラティスインストラクター", "ダンスインストラクター", "ランニングコーチ", "水泳コーチ", "スポーツトレーナー"
	],
	"恋愛": [
		"片思い", "友達以上恋人未満", "告白", "デート", "手紙", "メール", "LINE", "SNSでのコミュニケーション", "初恋", "恋の予感", "恋愛映画", "恋愛ドラマ", "恋愛小説", "恋愛ゲーム", "恋愛マンガ", "恋愛アニメ", "恋愛ソング", "ディズニーのプリンセス", "バレンタインデー", "クリスマスプレゼント", "告白の失敗", "片思いの悩み", "恋のライバル", "恋愛の秘密", "お互いの好きなタイプ", "あこがれの人", "あこがれの先輩・先生", "友達との恋愛話", "相談", "スクールイベントでの恋愛", "恋愛初心者", "恋愛上級者", "恋愛の悩み", "相手の気持ちを知る方法", "距離を感じる時", "信じている恋愛の形", "未来の恋人像", "富山紗名", "守屋明利", "米増結月", "サプライズプレゼント", "ロマンチックなデート", "記念日の祝福", "特別な場所でのプロポーズ", "一緒に住む", "一緒に旅行", "親との紹介", "友達とのダブルデート", "リモートデート", "長距離恋愛", "突然の再会", "古い恋人との再会", "運命の出会い", "フィアンセ", "婚約", "結婚式の計画", "新婚生活", "夫婦の絆", "家族計画", "子育て", "ペットを飼う", "二人の趣味", "一緒に料理", "一緒にスポーツ", "一緒に映画鑑賞", "一緒にゲーム", "二人の秘密の場所", "思い出の品", "記念写真", "ラブレター", "プレゼント選び", "一緒に作る思い出", "恋愛心理学", "恋愛占い", "ラブストーリー", "愛の名言", "ロマンチックな映画", "ロマンチックな歌", "二人だけの時間", "真実の愛", "パートナーシップ", "恋人との信頼", "恋愛の駆け引き", "結婚記念日", "初めてのキス", "初めてのデート", "カップル旅行", "ペアアクセサリー", "愛のメッセージ", "感謝の気持ち"
	]
}
`;
        const themeList = window.Object.keys(JSON.parse(rawThemes));
        const randomNames = ["SnowyOwl", "r5_reloaded", "Pera", "Pro_Pera", "Maple_Bacon", "__light__", "Somacci_Garbago", "So(Double)+Makai(Hell) -> SoMakai -> DoubleHell", "TARS", "AUTY", "G"];
        let gameDuration = 0;
        let players = [];
        let theme = "";
        let villagerWord = "";
        let werewolfWord = "";
        let werewolfPlayers = [];
        let villagerPlayers = [];
        let whichWordNumShown = 0;
        let remainingGameDuration = 0;
        let timer;
        document.addEventListener("DOMContentLoaded", () => {
            //--------------------------------------------------------------------
            loadThemeMenu();
            document.getElementById("playerNumInput").addEventListener("input", generatePlayerNamesForm);
            //--------------------------------------------------------------------
            document.getElementById("play").addEventListener("click", () => {
                //----------------------------------------------------------------
                theme = document.getElementById("themeList").value;
                if (theme == "ランダム") {
                    theme = shuffleArray(themeList)[1];
                }
                //----------------------------------------------------------------
                let gameDurationMin = Number(toHalfNumsUnderLimit(document.getElementById("gameTimerInputMin").value));
                let gameDurationSec = Number(toHalfNumsUnderLimit(document.getElementById("gameTimerInputSec").value));
                gameDuration = gameDurationMin * 60 + gameDurationSec;
                if (gameDuration == 0) {
                    gameDuration = 60;
                }
                if (gameDuration > 1200) {
                    gameDuration = 1200;
                }
                //----------------------------------------------------------------
                let sameNamePlayerNum = 1;
                players = [];
                let playerName = "";
                Object.entries(document.getElementById("playerNames").children).forEach((name) => {
                    if (name[1].value == "") {
                        playerName = shuffleArray(randomNames)[1];
                    } else {
                        playerName = name[1].value;
                    }
                    if (players.includes(playerName)) {
                        sameNamePlayerNum++;
                        playerName = playerName + sameNamePlayerNum;
                    }
                    if (playerName !== undefined) {
                        players.push(playerName);
                    }
                });
                //----------------------------------------------------------------
                if (players.length == 0) {
                    alert("プレイヤーの数を入力してください");
                } else {
                    document.getElementById("wordsCard").style.display = "block";
                    document.getElementById("settingCard").style.display = "none";
                }
                //----------------------------------------------------------------
                let werewolfNum = toHalfNumsUnderLimit(document.getElementById("werewolfNumInput").value);
                if (werewolfNum >= players.length - 1 || werewolfNum == 0) {
                    werewolfNum = Math.floor(players.length / 2);
                }
                //----------------------------------------------------------------
                let availableWords = JSON.parse(rawThemes)[theme];
                availableWords = shuffleArray(availableWords);
                let playersShuffled = shuffleArray(players);
                villagerWord = availableWords[0];
                werewolfWord = availableWords[1];
                werewolfPlayers = [];
                villagerPlayers = [];
                for (i = 0; i < playersShuffled.length; i++) {
                    if (i < werewolfNum) {
                        werewolfPlayers.push(playersShuffled[i]);
                    } else {
                        villagerPlayers.push(playersShuffled[i]);
                    }
                }
            });
            //--------------------------------------------------------------------
            document.getElementById("nextWordButton").addEventListener("click", () => {

                let wordShown = "";
                if (whichWordNumShown <= (players.length * 2)) {
                    if (whichWordNumShown % 2 == 1) {
                        if (werewolfPlayers.includes(players[Math.floor(whichWordNumShown / 2)])) {
                            wordShown = werewolfWord;
                        } else {
                            wordShown = villagerWord;
                        }
                    } else {
                        wordShown = "見えないよ";
                    }

                    if (players[Math.floor(whichWordNumShown / 2)] == undefined) {
                        document.getElementById("wordsShowArea").textContent = `タイマースタート？`;
                    } else {
                        document.getElementById("wordsShowArea").textContent = `${players[Math.floor(whichWordNumShown / 2)]}さんのお題は${wordShown}`;
                    }
                } else {
                    whichWordNumShown = 0;
                    document.getElementById("wordsShowArea").textContent = "";
                    remainingGameDuration = gameDuration;
                    clearInterval(timer);
                    document.getElementById("timerCard").style.display = "block";
                    document.getElementById("wordsCard").style.display = "none";
                    timer = setInterval(changeTimer, 1000);
                }
                whichWordNumShown++;

            });
            //--------------------------------------------------------------------
            document.getElementById("showResults").addEventListener('click', () => {
                document.getElementById("timerCard").style.display = "none";
                clearInterval(timer);
                document.getElementById("resultsCard").style.display = "block";
                let wolfWordResult = document.getElementById("wolfWordResult");
                let villagerWordResult = document.getElementById("villagerWordResult");
                let wolfMemberResult = document.getElementById("wolfMemberResult");
                let villagerMemberResult = document.getElementById("villagerMemberResult");
                let wolfWordResultContent = villagerWord;
                let villagerWordResultContent = werewolfWord;
                let wolfMemberResultContent = werewolfPlayers;
                let villagerMemberResultContent = villagerPlayers;
                wolfWordResult.textContent = wolfWordResultContent;
                villagerWordResult.textContent = villagerWordResultContent;
                wolfMemberResult.textContent = wolfMemberResultContent;
                villagerMemberResult.textContent = villagerMemberResultContent;
            });
            //--------------------------------------------------------------------
            function loadThemeMenu() {
                themeList.forEach((themeName) => {
                    let newThemeOption = document.createElement('option');
                    newThemeOption.innerHTML = themeName;
                    document.getElementById("themeList").appendChild(newThemeOption);
                })
                const themeOption_Random = document.createElement('option');
                themeOption_Random.innerHTML = "ランダム";
                document.getElementById("themeList").appendChild(themeOption_Random);
            }
            function generatePlayerNamesForm() {
                playerNum = Number(toHalfNumsUnderLimit(document.getElementById("playerNumInput").value));
                if (playerNum > 20) {
                    playerNum = 20;
                }
                document.getElementById("playerNames").innerHTML = "";
                const nameFieldTitle = document.createElement("h4");
                nameFieldTitle.textContent = "プレイヤーの名前を入力";
                document.getElementById("playerNames").appendChild(nameFieldTitle);
                for (let i = 0; i < playerNum; i++) {
                    let nameField = document.createElement("input");
                    nameField.type = "text";
                    document.getElementById("playerNames").appendChild(nameField);
                }
            }
            function changeTimer() {
                let timerArea = document.getElementById("timerNumbers");
                timerArea.textContent = remainingGameDuration;
                remainingGameDuration--;
                if (remainingGameDuration == -1) {
                    clearInterval(timer);
                }
            }
            function toHalfNumsUnderLimit(val) {
                val = val.replace(/[０-９]/g, function (s) {
                    return '０１２３４５６７８９'.indexOf(s);
                });
                val = val.replace(/[^0-9]/g, '');
                return val;
            }
            function shuffleArray(array) {
                let array2 = [].concat(array);
                for (let i = array2.length - 1; i > 0; i--) {
                    let j = Math.floor(Math.random() * (i + 1));
                    [array2[i], array2[j]] = [array2[j], array2[i]];
                }
                return array2;
            }
        });
    </script>
</body>

</html>