-
Notifications
You must be signed in to change notification settings - Fork 1
/
game.html
129 lines (122 loc) · 5.86 KB
/
game.html
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 class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title id="title">KKuTuCS</title>
<!-- CSS -->
<link rel="stylesheet" href="public/css/css.min.css">
<!-- JS -->
<script src="public/js/jquery-3.3.1.min.js"></script>
<script src="public/js/bootstrap.bundle.min.js"></script>
<script src="public/js/js.min.js"></script>
</head>
<body class="bg-light d-flex flex-column h-100" data-ismain="true">
<nav class="navbar navbar-dark bg-kkutu">
<span class="align-items-center d-flex text-white text-truncate">
<button id="btn_quit" class="btn btn-outline-primary px-1 px-md-2 mr-2 mr-md-3 border-0" type="button" data-btnshow="room">
<svg viewBox="0 0 8 8" style="height: 1rem;"><path d="M5 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z"></path></svg>
<span class="d-none d-md-inline text-white">Back</span></button>
<span class="align-items-baseline d-flex h5 mb-0">
<span id="Mainname" data-btnshow="main"></span>
<span id="Roomindex" class="text-primary mr-3" data-btnshow="room"></span>
<span id="Roomname" data-btnshow="room"></span>
</span>
</span>
<button id="btn_make" class="btn btn-outline-light" type="button" data-btnshow="main" data-toggle="modal" data-target="#createRoom">Make</button>
</nav>
<div class="container d-flex flex-column h-100 mb-auto px-0 px-md-3 py-0 py-sm-3 py-md-5 my-0">
<div class="text-center" data-btnshow="room" style="line-height: 3rem; height: 3rem;">
<span id="wordArea"></span>
</div>
<div class="d-flex align-items-center px-3 px-sm-0 my-3 my-sm-1" data-btnshow="room">
<button id="btn_ready" class="btn btn-outline-secondary mr-3" type="button" data-ready="0">Ready!</button>
<div class="w-100">
<div class="progress">
<div id="round_timer" class="transition-w progress-bar bg-success progress-bar-striped active" role="progressbar"
style="width: 100%;" aria-valuenow="0" aria-valuemax="0">round</div>
</div>
<div class="progress mt-1">
<div id="turn_timer" class="transition-w progress-bar bg-warning progress-bar-striped active" role="progressbar"
style="width: 100%;" aria-valuenow="0" aria-valuemax="0">turn</div>
</div>
</div>
</div>
<div class="d-flex flex-column flex-md-row my-0 mt-sm-3 h-100">
<div id="chatArea" class="col col-md-6 d-flex flex-column p-3 m-0 bg-dark text-white word-break-all" data-expand="1" style="overflow-x: visible; overflow-y: auto;"></div>
<div id="btn_expand" class="d-md-none text-center">
<svg viewBox="0 0 8 8" class="h-50"><path d="M4 1l-4 4 1.5 1.5 2.5-2.5 2.5 2.5 1.5-1.5-4-4z"></path></svg>
</div>
<div id="roomlistArea" class="col-md-6 px-3 px-sm-0 pl-md-3 mt-3 mt-md-0" style="overflow: auto;"></div>
</div>
<form class="px-2 px-sm-0 py-2 py-sm-3">
<div class="form-row align-items-start">
<div class="col-9">
<input id="wordInput" type="text" class="form-control shadow-hoverable-sm" placeholder="Something here!" maxlength="30">
<small id="numberOfPeople" class="form-text text-muted" data-btnshow="main"></small>
</div>
<div class="col-3">
<button id="btn_send" class="btn btn-primary w-100 shadow-hoverable-sm" type="button">Send</button>
</div>
</div>
</form>
</div>
<!-- Modal -->
<!-- Create Room-->
<div class="modal fade" id="createRoom" tabindex="-1" role="dialog" aria-labelledby="createRoomLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="createRoomLabel">Make Room</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form id="make">
<div class="modal-body">
<div class="form-group">
<label for="modal_id_roomName">RoomName</label>
<input type="text" class="form-control" name="roomname" id="modal_id_roomName" placeholder="Enter roomname" maxlength="20" required>
</div>
<div class="form-group">
<label for="modal_id_password">Password</label>
<input type="password" class="form-control" name="password" id="modal_id_password" aria-describedby="pwdHelp" placeholder="Password" maxlength="20">
<small id="pwdHelp" class="form-text text-muted">To make room public, remain it blank.</small>
</div>
<div class="form-group">
<label>Game mode</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="mode" id="modal_id_en" value="en" checked>
<label class="form-check-label" for="modal_id_en">en</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="mode" id="modal_id_kr" value="kr">
<label class="form-check-label" for="modal_id_kr">kr</label>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Create</button>
</div>
</form>
</div>
</div>
</div>
<!-- Result Screen-->
<div class="modal fade" id="resultScreen" tabindex="-1" role="dialog" aria-labelledby="resultScreenLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="resultScreenLabel">Result</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="resultScreenBody"></div>
</div>
</div>
</div>
</body>
</html>