TicTacToe/index.html at master · Vivaldo-Roque/TicTacToe · 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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/loading.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/game.css">
    <link rel="stylesheet" href="./css/social.css">
    <link rel="stylesheet" href="./css/mediaquery.css">
    <script src="./js/loading.js"></script>
    <script src="./js/navigation.js"></script>
    <script src="./js/app.js"></script>
    <script src="./js/ttt.js"></script>
    <script src="./js/navigation.js"></script>
    <script src="./js/app.js"></script>
    <link rel="apple-touch-icon" sizes="180x180" href="./imgs/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="./imgs/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="./imgs/favicon/favicon-16x16.png">
    <link rel="manifest" href="./manifest.webmanifest">

    <title>Tic Tac Toe</title>
</head>

<body>

    <audio id="crossAudio">
        <source src="./sound/pencil_x.mp3" type="audio/mp3">
        Seu navegador não suporta o elemento de áudio.
    </audio>

    <audio id="circleAudio">
        <source src="./sound/pencil_o.mp3" type="audio/mp3">
        Seu navegador não suporta o elemento de áudio.
    </audio>

    <div class="container">
        <div>
            <ul class="topnav">
                <li><a href="./index.html" class="logo">VR</a></li>
                <li id="home"><a id="home_text" href="./index.html"></a></li>
                <li id="contact"><a id="contact_text" href="./pages/contact.html"></a></li>
                <li id="about"><a id="about_text" href="./pages/about.html"></a></li>
            </ul>
        </div>

        <div class="content-wrap">

            <select id="listLanguages" style="position: absolute; right: 0; width: 9rem;"></select>

            <div id="install-button" class="install-button">
                <div id="install"></div>
            </div>

            <h1 style=" margin-top: 2rem;">
                Tic Tac Toe
            </h1>

            <div>
                <b id="advice" style="display: inline-block;"></b>
                <p id="advice_msg" style="display: inline-block;"></p>
            </div>

            <div class="cover1">
                <!-- pay 1 VS 1 and 1 VS CPU buttons -->

                <div class="type-container">
                    <button type="button" onclick="oneVsOne();" id="1vs1">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
                            <!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
                            <path
                                d="M224 256c70.7 0 128-57.31 128-128S294.7 0 224 0C153.3 0 96 57.31 96 128S153.3 256 224 256zM274.7 304H173.3c-95.73 0-173.3 77.6-173.3 173.3C0 496.5 15.52 512 34.66 512H413.3C432.5 512 448 496.5 448 477.3C448 381.6 370.4 304 274.7 304zM479.1 320h-73.85C451.2 357.7 480 414.1 480 477.3C480 490.1 476.2 501.9 470 512h138C625.7 512 640 497.6 640 479.1C640 391.6 568.4 320 479.1 320zM432 256C493.9 256 544 205.9 544 144S493.9 32 432 32c-25.11 0-48.04 8.555-66.72 22.51C376.8 76.63 384 101.4 384 128c0 35.52-11.93 68.14-31.59 94.71C372.7 243.2 400.8 256 432 256z" />
                        </svg>
                        <strong>1 VS 1</strong>
                    </button>

                    <button type="button" onclick="oneVsCpu();" id="1vscpu">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" id="blink">
                            <!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
                            <path
                                d="M9.375 233.4C3.375 239.4 0 247.5 0 256v128c0 8.5 3.375 16.62 9.375 22.62S23.5 416 32 416h32V224H32C23.5 224 15.38 227.4 9.375 233.4zM464 96H352V32c0-17.62-14.38-32-32-32S288 14.38 288 32v64H176C131.8 96 96 131.8 96 176V448c0 35.38 28.62 64 64 64h320c35.38 0 64-28.62 64-64V176C544 131.8 508.3 96 464 96zM256 416H192v-32h64V416zM224 296C201.9 296 184 278.1 184 256S201.9 216 224 216S264 233.9 264 256S246.1 296 224 296zM352 416H288v-32h64V416zM448 416h-64v-32h64V416zM416 296c-22.12 0-40-17.88-40-40S393.9 216 416 216S456 233.9 456 256S438.1 296 416 296zM630.6 233.4C624.6 227.4 616.5 224 608 224h-32v192h32c8.5 0 16.62-3.375 22.62-9.375S640 392.5 640 384V256C640 247.5 636.6 239.4 630.6 233.4z" />
                        </svg>
                        <strong>1 VS CPU</strong>
                    </button>
                </div>

                <div class="parent" id="grid-line-container">

                    <!-- 3*3 grid of Boxes -->
                    <div class="game-grid">
                        <div>
                            <button type="button" class="game-cell" id="b1" onclick="handleClickButton(1);" readonly />
                        </div>
                        <div>
                            <button type="button" id="b2" class="game-cell" onclick="handleClickButton(2);" readonly />
                        </div>
                        <div>
                            <button type="button" id="b3" class="game-cell" onclick="handleClickButton(3);" readonly />
                        </div>
                        <div>
                            <button type="button" id="b4" class="game-cell" onclick="handleClickButton(4);" readonly />
                        </div>
                        <div>
                            <button type="button" id="b5" class="game-cell" onclick="handleClickButton(5);" readonly />
                        </div>
                        <div>
                            <button type="button" id="b6" class="game-cell" onclick="handleClickButton(6);" readonly />
                        </div>
                        <div>
                            <button type="button" id="b7" class="game-cell" onclick="handleClickButton(7);" readonly />
                        </div>
                        <div>
                            <button type="button" id="b8" class="game-cell" onclick="handleClickButton(8);" readonly />
                        </div>
                        <div>
                            <button type="button" id="b9" class="game-cell" onclick="handleClickButton(9);" readonly />
                        </div>
                    </div>
                    <!-- Grid end here  -->

                </div>

                <!-- games status action  -->
                <div class="status-action">
                    <!-- Space to show player turn -->
                    <div>
                        <strong id="print" class="print"></strong>
                    </div>

                    <!-- Button to reset game -->
                    <button id="restart" onclick="restart()"></button>
                </div>
            </div>

            <div class="popup_box" id="gamemode">
                <h1 id="game_mode_msg"></h1>
                <div class="btns">
                    <a href="javascript:void(0)" id="btn1">X</a>
                    <a href="javascript:void(0)" id="btn2">O</a>
                </div>
            </div>

            <div class="popup_box" id="gamelevel">
                <h1 id="game_level_msg"></h1>
                <div class="btns">
                    <a href="javascript:void(0)" id="btn3" style="font-size: 1rem;"><span id="easy_level"></span></a>
                    <a href="javascript:void(0)" id="btn4" style="font-size: 1rem;"><span id="intermediate_level"></span></a>
                    <a href="javascript:void(0)" id="btn5" style="font-size: 1rem;"><span id="hardcore_level"></span></a>
                </div>
            </div>
        </div>

        <div>
            <footer>
                <p id="author"></p>
            </footer>
        </div>
    </div>

</body>

<div class="se-pre-con"></div>

</html>