-
Notifications
You must be signed in to change notification settings - Fork 62
Expand file tree
/
Copy pathindex.html
More file actions
154 lines (143 loc) · 6.94 KB
/
index.html
File metadata and controls
154 lines (143 loc) · 6.94 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,300,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="style/backgammon.css">
<link rel="stylesheet" type="text/css" href="style/ribbons.css">
<script src="js/bundle.js"></script>
<script type="text/x-mustache" id="tmpl-board">
<div id="frame-top" class="frame"></div>
<div class="board cf">
<div id="pane-left" class="pane">
<div id="field0" class="field row0 col0"></div>
<div id="field1" class="field row1 col0"></div>
<div class="dice-panel left" style="display: none">
<div id="dice-left" class="dice left"></div>
</div>
</div>
<div id="bar" class="bar">
<table width="100%" height="100%">
<tr height="10%">
<td valign="top">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar" aria-expanded="false" title="Show/Hide game menu">
<span class="sr-only">Toggle game menu</span>
<span class="glyphicon glyphicon-menu-hamburger"></span>
</button>
</td>
</tr>
<tr height="45%">
<td valign="top" id="top-bar"></td>
</tr>
<tr height="45%">
<td valign="bottom" id="bottom-bar"></td>
</tr>
</table>
</div>
<div id="pane-right" class="pane">
<div id="field2" class="field row0 col1"></div>
<div id="field3" class="field row1 col1"></div>
<div class="dice-panel right" style="display: none">
<div id="dice-right" class="dice right"></div>
</div>
</div>
</div>
<div id="frame-bottom" class="frame"></div>
<div class="action-panel">
<button id="btn-roll" class="btn btn-primary btn-lg action" style="display: none" title="Roll dice">Roll</button>
<button id="btn-confirm" class="btn btn-primary btn-lg action" style="display: none" title="Confirm moves made">Confirm</button>
<button id="btn-undo" class="btn btn-default btn-lg action" style="display: none" title="Undo moves made">Undo</button>
<div id="dice" style="display: none"></div>
</div>
</script>
<script type="text/x-mustache" id="tmpl-rule-selector-item">
<label class="btn btn-default btn-lg {{active}}">
<input type="radio" name="rule-selected" value="{{name}}" autocomplete="off" {{checked}}> {{title}}
</label>
</script>
</head>
<body id="page-index">
<!-- Landing page -->
<table id="index-view" width="100%" height="100%">
<tr>
<td height="100%" valign="middle">
<div id="github-ribbon" class="ribbon right hidden-xs"><a href="https://github.com/quasoft/backgammonjs">Project at GitHub</a></div>
<div class="container-fluid center">
<div class="row text-center">
<h1 class="text-center">Upgammon<br>
<small>From Bangkok to Chang Mai to now</small>
</h1>
<div class="container-fluid">
<div class="row">
<div class="col col-xs-12 text-center">
<div id="rule-selector" class="btn-group" data-toggle="buttons">
<!-- <label class="btn btn-default btn-lg active">
<input type="radio" name="rule-selected" value="*" autocomplete="off" checked> Any
</label> -->
</div>
</div>
</div>
<div class="row">
<!-- <div class="col col-ts-12 col-xs-6 text-right">
<button id="btn-play-random" class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>Random player</button>
</div> -->
<div class="col col-ts-12 col-xs-6 text-center">
<button id="btn-challenge-friend" class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>Challenge friend</button>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
<!-- Game menu -->
<nav class="navbar navbar-default collapse">
<div class="container-fluid">
<div class="navbar-header">
<span class="navbar-brand" id="match-state">Not in a match</span>
</div>
<div class="navbar-collapse">
<button type="button" class="btn btn-primary navbar-btn yourself" title="Your score in current match"><span id="yourself" class="player">Yourself</span><span id="yourscore" class="score badge">3</span></button>
<button type="button" class="btn btn-default navbar-btn opponent" title="Opponent's score in current match"><span id="oppscore" class="score badge left">3</span><span id="opponent" class="player">Opponent</span></button>
<ul class="nav navbar-nav navbar-right">
<li><a id="menu-resign" href="#" title="Resign from current game"><span class="glyphicon glyphicon-flag"></span>Resign</a></li>
<li><a id="menu-undo" href="#" title="Undo moves made"><span class="glyphicon glyphicon-repeat"></span>Undo</a></li>
<li><a id="menu-close" href="#" data-toggle="collapse" data-target=".navbar" title="Close game menu"><span class="glyphicon glyphicon-remove"></span>Close</a></li>
</ul>
</div>
</div>
</nav>
<!-- Game board -->
<table id="game-view" width="100%" height="100%" style="display: none">
<tr>
<td height="100%">
<div id="backgammon"></div>
</td>
</tr>
</table>
<div id="game-result-overlay" class="game-result overlay" style="display: none">
<div class="text message">Message</div>
<div class="text score"><span class="state">State</span><br><strong><span class="yourscore">0</span> : <span class="oppscore">0</span></strong></div>
</div>
<div id="waiting-overlay" class="waiting overlay" style="display: none">
<div class="loader"><div class="inner"><span>Waiting another player...</span><br><img src="images/loader.gif"><br>
<br>
<div class="challenge" style="display: none">
<span>Send <span class="hidden-xs">the</span> link <span class="hidden-xs">below</span> to friend:</span>
<div class="input-group input-group-lg">
<input id="challenge-link" type="text" class="form-control" value="test1234">
<span class="input-group-btn">
<button class="btn btn-default btn-copy" type="button" data-clipboard-target="#challenge-link">Copy</button>
</span>
</div>
</div>
</div></div>
</div>
<div id="messages">
</div>
</body>
</html>