<?php
    if ($_SERVER['REQUEST_METHOD'] == 'POST') {
        if ($_POST['word'] == true) {
            fwrite(fopen('./data.dat','a'), $_POST['data']. '€');
        }
    }
?>
<!DOCTYPE html>
<html lang="en">
    <head id="head">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <link rel="stylesheet" href="./style.css">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap" rel="stylesheet">
    </head>
    <body bgcolor="gray" id="mainbody">
        <div class="kawa" id="kawa">
            <div class="tama" id="tama">
                <button onclick="ne()">決定</button>
                <img src="./dorahyou.png" style="position: absolute; top: 0.7%; left: 0.5%; width: 25%; height: auto;"></img>
                <img src="./pai/00.gif" id="dora0" style="position: absolute; top: 2%; left: 4.4%; width: 3.5%; height: auto;"></img>
                <img src="./pai/00.gif" id="dora1" style="position: absolute; top: 2%; left: 7.7%; width: 3.5%; height: auto;"></img>
                <img src="./pai/00.gif" id="dora2" style="position: absolute; top: 2%; left: 11%; width: 3.5%; height: auto;"></img>
                <img src="./pai/00.gif" id="dora3" style="position: absolute; top: 2%; left: 14.3%; width: 3.5%; height: auto;"></img>
                <img src="./pai/00.gif" id="dora4" style="position: absolute; top: 2%; left: 17.6%; width: 3.5%; height: auto;"></img>
                <img src="./kyoutaku.png" style="position: absolute; top: 32.5%; left: 40%; width: 20%; height: auto;"></img>
                <img id="ppp0" src="./0.png" style="position: absolute; top: 53.3%; left: 40.33%; width: 4.1%; height: auto;"></img>
                <img id="ppp1" src="./1.png" style="position: absolute; top: 53.3%; left: 55.6%; transform: rotate(-90deg); width: 4.1%; height: auto;"></img>
                <img id="ppp2" src="./2.png" style="position: absolute; top: 33%; left: 55.6%; transform: rotate(180deg); width: 4.1%; height: auto;"></img>
                <img id="ppp3" src="./3.png" style="position: absolute; top: 33%; left: 40.33%; transform: rotate(90deg); width: 4.1%; height: auto;"></img>
                <div id="naki0" style="position: absolute; top: 10%; left: 5%; width: 90%; height: 90%; pointer-events: none;"></div>
                <div id="naki1" style="position: absolute; transform: rotate(-90deg); top: 21.875%; left: 56%; width: 56.25%; height: 56.25%; pointer-events: none;"></div>
                <div id="naki2" style="position: absolute; transform: rotate(180deg); top: 0%; left: 25%; width: 65%; height: 65%; pointer-events: none;"></div>
                <div id="naki3" style="position: absolute; transform: rotate(90deg); top: 21.875%; left: -12%; width: 56.25%; height: 56.25%; pointer-events: none;"></div>
                <font color="gold"><a id="kyokuaaa" class="kyokuaaa">東0局</a></font>
                <font color="gold" ><a id="nokoriaaa" class="nokoriaaa">残り54枚</a></font>
                <font color="gold"><a id="ten0" class="ten0">25000</a></font>
                <font color="gold"><a id="ten1" class="ten1">25000</a></font>
                <font color="gold"><a id="ten2" class="ten2">25000</a></font>
                <font color="gold"><a id="ten3" class="ten3">25000</a></font>
                <font color="saddlebrown"><a id="reabou" class="reabou">×810</a></font>
                <font color="saddlebrown"><a id="nazobou" class="nazobou">×114514</a></font>
                <div id="sute" style="position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; pointer-events: none;"></div>
                <div id="tehai" style="position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; pointer-events: none;">
                    <div id="0_tehai_0" class="tehai_0" onclick="sute(0)" style="position: absolute; left: 14%; pointer-events: auto;"></div>
                    <div id="0_tehai_1" class="tehai_1" onclick="sute(1)" style="position: absolute; left: 18%; pointer-events: auto;"></div>
                    <div id="0_tehai_2" class="tehai_2" onclick="sute(2)" style="position: absolute; left: 22%; pointer-events: auto;"></div>
                    <div id="0_tehai_3" class="tehai_3" onclick="sute(3)" style="position: absolute; left: 26%; pointer-events: auto;"></div>
                    <div id="0_tehai_4" class="tehai_4" onclick="sute(4)" style="position: absolute; left: 30%; pointer-events: auto;"></div>
                    <div id="0_tehai_5" class="tehai_5" onclick="sute(5)" style="position: absolute; left: 34%; pointer-events: auto;"></div>
                    <div id="0_tehai_6" class="tehai_6" onclick="sute(6)" style="position: absolute; left: 38%; pointer-events: auto;"></div>
                    <div id="0_tehai_7" class="tehai_7" onclick="sute(7)" style="position: absolute; left: 42%; pointer-events: auto;"></div>
                    <div id="0_tehai_8" class="tehai_8" onclick="sute(8)" style="position: absolute; left: 46%; pointer-events: auto;"></div>
                    <div id="0_tehai_9" class="tehai_9" onclick="sute(9)" style="position: absolute; left: 50%; pointer-events: auto;"></div>
                    <div id="0_tehai_10" class="tehai_10" onclick="sute(10)" style="position: absolute; left: 54%; pointer-events: auto;"></div>
                    <div id="0_tehai_11" class="tehai_11" onclick="sute(11)" style="position: absolute; left: 58%; pointer-events: auto;"></div>
                    <div id="0_tehai_12" class="tehai_12" onclick="sute(12)" style="position: absolute; left: 62%; pointer-events: auto;"></div>
                    <div id="tehai_tumo_0" class="tehai_tumo" onclick="sute('last')" style="position: absolute; left: 67%;  pointer-events: auto;"></div>
                </div>
                <div id="tehai1" style="position: absolute; top: -13.7%; left: 36%; width: 67.5%; height: 100%; pointer-events: none; transform: rotate(-90deg);">
                    <div id="1_tehai_0" class="tehai_0" style="position: absolute; left: 14%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="1_tehai_1" class="tehai_1" style="position: absolute; left: 17.5%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="1_tehai_2" class="tehai_2" style="position: absolute; left: 21%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="1_tehai_3" class="tehai_3" style="position: absolute; left: 24.5%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="1_tehai_4" class="tehai_4" style="position: absolute; left: 28%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="1_tehai_5" class="tehai_5" style="position: absolute; left: 31.5%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="1_tehai_6" class="tehai_6" style="position: absolute; left: 35%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="1_tehai_7" class="tehai_7" style="position: absolute; left: 38.5%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="1_tehai_8" class="tehai_8" style="position: absolute; left: 42%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="1_tehai_9" class="tehai_9" style="position: absolute; left: 45.5%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="1_tehai_10" class="tehai_10" style="position: absolute; left: 49%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="1_tehai_11" class="tehai_11" style="position: absolute; left: 52.5%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="1_tehai_12" class="tehai_12" style="position: absolute; left: 56%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="tehai_tumo_1" class="tehai_tumo" style="position: absolute; left: 61%;"></div>
                </div>
                <div id="tehai2" style="position: absolute; top: -4.9%; left: 15%; width: 75%; height: 100%; pointer-events: none; transform: rotate(180deg);">
                    <div id="2_tehai_0" class="tehai_0" style="position: absolute; left: 13.8%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="2_tehai_1" class="tehai_1" style="position: absolute; left: 17.6%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="2_tehai_2" class="tehai_2" style="position: absolute; left: 21.4%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="2_tehai_3" class="tehai_3" style="position: absolute; left: 25.2%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="2_tehai_4" class="tehai_4" style="position: absolute; left: 29%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="2_tehai_5" class="tehai_5" style="position: absolute; left: 32.8%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="2_tehai_6" class="tehai_6" style="position: absolute; left: 36.6%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="2_tehai_7" class="tehai_7" style="position: absolute; left: 40.4%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="2_tehai_8" class="tehai_8" style="position: absolute; left: 44.2%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="2_tehai_9" class="tehai_9" style="position: absolute; left: 48%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="2_tehai_10" class="tehai_10" style="position: absolute; left: 51.8%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="2_tehai_11" class="tehai_11" style="position: absolute; left: 55.6%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="2_tehai_12" class="tehai_12" style="position: absolute; left: 59.4%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="tehai_tumo_2" class="tehai_tumo" style="position: absolute; left: 64%;"></div>
                </div>
                <div id="tehai3" style="position: absolute; top: 13.7%; left: -4%; width: 67.5%; height: 100%; pointer-events: none; transform: rotate(90deg);">
                    <div id="3_tehai_0" class="tehai_0" style="position: absolute; left: 14%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="3_tehai_1" class="tehai_1" style="position: absolute; left: 17.5%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="3_tehai_2" class="tehai_2" style="position: absolute; left: 21%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="3_tehai_3" class="tehai_3" style="position: absolute; left: 24.5%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="3_tehai_4" class="tehai_4" style="position: absolute; left: 28%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="3_tehai_5" class="tehai_5" style="position: absolute; left: 31.5%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="3_tehai_6" class="tehai_6" style="position: absolute; left: 35%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="3_tehai_7" class="tehai_7" style="position: absolute; left: 38.5%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="3_tehai_8" class="tehai_8" style="position: absolute; left: 42%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="3_tehai_9" class="tehai_9" style="position: absolute; left: 45.5%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="3_tehai_10" class="tehai_10" style="position: absolute; left: 49%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="3_tehai_11" class="tehai_11" style="position: absolute; left: 52.5%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="3_tehai_12" class="tehai_12" style="position: absolute; left: 56%;"><img src="./pai/00.gif" style="position: absolute; width: 100%; height: auto; top: 0%; left: 0%;"></img></div>
                    <div id="tehai_tumo_3" class="tehai_tumo" style="position: absolute; left: 61%;"></div>
                </div>
            </div>
        </div>
        <script>
            const username = '<?=$_POST['word'] ?>'
            let W = window.innerWidth
            let Ws = 0;
            let Wm = 0;
            let Hs = 0;
            let Hm = 0
            let H = window.innerHeight
            if (16 * H > 9 * W) {
                $('.kawa').css({'position': 'relative','margin-top': String((H - (9 / 16) * W) / 2) + 'px','margin-left': 0})
                $('.tama').css({'position': 'relative','width': String(W) + 'px','height': String((9 / 16) * W)})
                Ws = W;
                Wm = 0;
                Hs = (9 / 16) * W;
                Hm = (H - (9 / 16) * W) / 2
                $('.kyokuaaa').css({'position': 'absolute','top': '43.5%','left': '50%','transform': 'translate(-50%,-50%)','text-align': 'center','font-size': '3vw','font-family': '"Noto Serif JP", serif','font-weight': 'bold'})
                $('.nokoriaaa').css({'position': 'absolute','top': '50%','left': '50%','transform': 'translate(-50%,-50%)','text-align': 'center','font-size': '2vw','font-family': 'sans-serif'})
                $('.ten0').css({'position': 'absolute','top': '57.8%','left': '50%','transform': 'translate(-50%,-50%)','text-align': 'center','font-size': '2vw','font-family': 'sans-serif'})
                $('.ten1').css({'position': 'absolute','top': '46.8%','left': '58.1%','transform': 'translate(-50%,-50%) rotate(-90deg)','text-align': 'center','font-size': '2vw','font-family': 'sans-serif'})
                $('.ten2').css({'position': 'absolute','top': '36%','left': '50%','transform': 'translate(-50%,-50%) rotate(180deg)','text-align': 'center','font-size': '2vw','font-family': 'sans-serif'})
                $('.ten3').css({'position': 'absolute','top': '46.8%','left': '41.9%','transform': 'translate(-50%,-50%) rotate(90deg)','text-align': 'center','font-size': '2vw','font-family': 'sans-serif'})
                $('.reabou').css({'position': 'absolute','top': '11%','left': '5.5%','text-align': 'center','font-size': '3vw','font-family': '"Noto Serif JP", serif','font-weight': 'bold'})
                $('.nazobou').css({'position': 'absolute','top': '11%','left': '14.5%','text-align': 'center','font-size': '3vw','font-family': '"Noto Serif JP", serif','font-weight': 'bold'})
            } else {
                $('.kawa').css({'position': 'relative','margin-top': 0,'margin-left': String((W - (16 / 9) * H) / 2) + 'px'})
                $('.tama').css({'position': 'relative','width': String((16 / 9) * H) + 'px','height': String(H)})
                Ws = (16 / 9) * H;
                Wm = (W - (16 / 9) * H) / 2;
                Hs = H;
                Hm = 0
                $('.kyokuaaa').css({'position': 'absolute','top': '43.5%','left': '50%','transform': 'translate(-50%,-50%)','text-align': 'center','font-size': '5.333vh','font-family': '"Noto Serif JP", serif','font-weight': 'bold'})
                $('.nokoriaaa').css({'position': 'absolute','top': '50%','left': '50%','transform': 'translate(-50%,-50%)','text-align': 'center','font-size': '3.555vh','font-family': 'sans-serif'})
                $('.ten0').css({'position': 'absolute','top': '57.8%','left': '50%','transform': 'translate(-50%,-50%)','text-align': 'center','font-size': '3.555vh','font-family': 'sans-serif'})
                $('.ten1').css({'position': 'absolute','top': '46.8%','left': '58.1%','transform': 'translate(-50%,-50%) rotate(-90deg)','text-align': 'center','font-size': '3.555vh','font-family': 'sans-serif'})
                $('.ten2').css({'position': 'absolute','top': '36%','left': '50%','transform': 'translate(-50%,-50%) rotate(180deg)','text-align': 'center','font-size': '3.555vh','font-family': 'sans-serif'})
                $('.ten3').css({'position': 'absolute','top': '46.8%','left': '41.9%','transform': 'translate(-50%,-50%) rotate(90deg)','text-align': 'center','font-size': '3.555vh','font-family': 'sans-serif'})
                $('.reabou').css({'position': 'absolute','top': '11%','left': '5.5%','text-align': 'center','font-size': '5.333vh','font-family': '"Noto Serif JP", serif','font-weight': 'bold'})
                $('.nazobou').css({'position': 'absolute','top': '11%','left': '14.5%','text-align': 'center','font-size': '5.333vh','font-family': '"Noto Serif JP", serif','font-weight': 'bold'})
            }
            window.addEventListener('resize', function() {
                W = window.innerWidth
                H = window.innerHeight
                if (16 * H > 9 * W) {
                    $('.kawa').css({'position': 'relative','margin-top': String((H - (9 / 16) * W) / 2) + 'px','margin-left': 0})
                    $('.tama').css({'position': 'relative','width': String(W) + 'px','height': String((9 / 16) * W)})
                    Ws = W;
                    Wm = 0;
                    Hs = (9 / 16) * W;
                    Hm = (H - (9 / 16) * W) / 2
                    $('.kyokuaaa').css({'position': 'absolute','top': '43.5%','left': '50%','transform': 'translate(-50%,-50%)','text-align': 'center','font-size': '3vw','font-family': '"Noto Serif JP", serif','font-weight': 'bold'})
                    $('.nokoriaaa').css({'position': 'absolute','top': '50%','left': '50%','transform': 'translate(-50%,-50%)','text-align': 'center','font-size': '2vw','font-family': 'sans-serif'})
                    $('.ten0').css({'position': 'absolute','top': '57.8%','left': '50%','transform': 'translate(-50%,-50%)','text-align': 'center','font-size': '2vw','font-family': 'sans-serif'})
                    $('.ten1').css({'position': 'absolute','top': '46.8%','left': '58.1%','transform': 'translate(-50%,-50%) rotate(-90deg)','text-align': 'center','font-size': '2vw','font-family': 'sans-serif'})
                    $('.ten2').css({'position': 'absolute','top': '36%','left': '50%','transform': 'translate(-50%,-50%) rotate(180deg)','text-align': 'center','font-size': '2vw','font-family': 'sans-serif'})
                    $('.ten3').css({'position': 'absolute','top': '46.8%','left': '41.9%','transform': 'translate(-50%,-50%) rotate(90deg)','text-align': 'center','font-size': '2vw','font-family': 'sans-serif'})
                    $('.reabou').css({'position': 'absolute','top': '11%','left': '5.5%','text-align': 'center','font-size': '3vw','font-family': '"Noto Serif JP", serif','font-weight': 'bold'})
                    $('.nazobou').css({'position': 'absolute','top': '11%','left': '14.5%','text-align': 'center','font-size': '3vw','font-family': '"Noto Serif JP", serif','font-weight': 'bold'})
                } else {
                    $('.kawa').css({'position': 'relative','margin-top': 0,'margin-left': String((W - (16 / 9) * H) / 2) + 'px'})
                    $('.tama').css({'position': 'relative','width': String((16 / 9) * H) + 'px','height': String(H)})
                    Wm = (W - (16 / 9) * H) / 2;
                    Hm = 0
                    $('.kyokuaaa').css({'position': 'absolute','top': '43.5%','left': '50%','transform': 'translate(-50%,-50%)','text-align': 'center','font-size': '5.333vh','font-family': '"Noto Serif JP", serif','font-weight': 'bold'})
                    $('.nokoriaaa').css({'position': 'absolute','top': '50%','left': '50%','transform': 'translate(-50%,-50%)','text-align': 'center','font-size': '3.555vh','font-family': 'sans-serif'})
                    $('.ten0').css({'position': 'absolute','top': '57.8%','left': '50%','transform': 'translate(-50%,-50%)','text-align': 'center','font-size': '3.555vh','font-family': 'sans-serif'})
                    $('.ten1').css({'position': 'absolute','top': '46.8%','left': '58.1%','transform': 'translate(-50%,-50%) rotate(-90deg)','text-align': 'center','font-size': '3.555vh','font-family': 'sans-serif'})
                    $('.ten2').css({'position': 'absolute','top': '36%','left': '50%','transform': 'translate(-50%,-50%) rotate(180deg)','text-align': 'center','font-size': '3.555vh','font-family': 'sans-serif'})
                    $('.ten3').css({'position': 'absolute','top': '46.8%','left': '41.9%','transform': 'translate(-50%,-50%) rotate(90deg)','text-align': 'center','font-size': '3.555vh','font-family': 'sans-serif'})
                    $('.reabou').css({'position': 'absolute','top': '11%','left': '5.5%','text-align': 'center','font-size': '5.333vh','font-family': '"Noto Serif JP", serif','font-weight': 'bold'})
                    $('.nazobou').css({'position': 'absolute','top': '11%','left': '14.5%','text-align': 'center','font-size': '5.333vh','font-family': '"Noto Serif JP", serif','font-weight': 'bold'})
                }
            });
        </script>
        <script src="ponchi.js"></script>
        <script src="horaSystem.js"></script>
        <script src="yaku.js"></script>
        <script src="tenpai.js"></script>
        <script src="game.js"></script>
        <script src="./home.js"></script>
    </body>
</html>