Virus-Ruth-Unity-App/ui_file.html at main · 026KANAYAMA/Virus-Ruth-Unity-App · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>Virus-Ruth</title>
    <style>
        label{
            color:darkturquoise;
            font-size: 100px;
        }
        div{
            text-align:center;
        }
        button{
            font-size:100px;
        }
        #left{
            margin-right: 25px;
        }
        #right{
            margin-left: 25px;
        }
        #down{
            margin-top: 25px;
        }

    </style>
</head>

<body>
    <div>
        <!--Text box for IP address-->
        <label>IP addres:<input type="text" id="ip" style="width:400px;height:80px;font-size:50px;"></label>

        <!--Radio button for player selection-->
        <p style="font-size:50px;">Select a player<br>
            <input type="radio" name="player" value="Virus" checked style="transform:scale(3.0);"> Virus
            <input type="radio" name="player" value="People" style="transform:scale(3.0);"> People
        </p>

        <!---Button to move the player-->
        <button class="btn" id="left" >⏪</button>
        <button class="btn" id="up">⏫</button>
        <button class="btn" id="right">⏩</button><br>
        <button class="btn" id="down">⏬</button>
    </div>


    <!---JavaScriptインラインスクリプト--->
    <script type = "text/javascript" >
        //変数の宣言・初期化
        const btn = document.getElementsByClassName("btn");
        const left = document.getElementById("left");
        const up = document.getElementById("up");
        const right = document.getElementById("right");
        const down = document.getElementById("down");
        let direct = "0";

        //directに1を設定する関数
        function set_one(event){
            direct = "1";
        }
        //directに2を設定する関数
        function set_two(event){
            direct = "2";
        }
        //directに3を設定する関数
        function set_three(event){
            direct = "3";
        }
        //directに4を設定する関数
        function set_four(event){
            direct = "4";
        }

        //piping severにどの方向ボタンを押したのか送信する関数
        function to_piping_sever(event){

            let ip = document.getElementById("ip").value;
            const player = document.querySelector('input[name="player"]:checked').value;

            //const controller = new AbortController();
            fetch("http://"+ip+":8888/"+ player,{
                method: 'POST',
                body: direct,
                //signal : controller.signal
            })

            /*//通信に失敗したエラー
            .then(async res => {
                if(!res.ok){
                    throw new Error(`Request Failed: ${res.status}`);
                }
            })
            .catch(e => {
                //timeoutの時
                if(e.name !== 'AbortError'){

                }
            });
            //TimeOutまでの時間(今は1000/30秒)
            setTimeout(() => {
                controller.abort();
            }, 1000/30);
            */


            //ユーザーにボタンをきちんと押せて送信した旨を伝える
            alert("送信に成功しました");
        }

        //方向ボタンそれぞれのイベントリスナーアクションを登録
        left.addEventListener("click", set_one);
        up.addEventListener("click", set_two);
        right.addEventListener("click", set_three);
        down.addEventListener("click", set_four);

        //方向ボタンのイベントリスナにアクションを登録
        for(let i=0; i<btn.length; i++){
            btn[i].addEventListener("click",to_piping_sever);
        }

    </script>

</body>

</html>