-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
192 lines (190 loc) · 12 KB
/
index.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
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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0">
<title>3D ChessGame - VR Project</title>
<link rel="icon" href="favicon.ico" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/modal-dialog.css" />
</head>
<body>
<canvas id="webgl_canvas" width="800" height="600"></canvas>
<div id="top-bar">
<div class="left-box">
<div id="fps"></div>
<div id="elapsed"></div>
</div>
<div class="center-box">
<div id="auto-cam" class="topbar-icon tooltip" auto-cam="off">
<svg class="cam-off" style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor"
d="M20 5H16.83L15 3H9L7.17 5H4C2.9 5 2 5.9 2 7V19C2 20.11 2.9 21 4 21H20C21.11 21 22 20.11 22 19V7C22 5.9 21.11 5 20 5M20 19H4V7H8.05L9.88 5H14.12L16 7H20V19M5 12H7.1C7.65 9.29 10.29 7.55 13 8.1C13.76 8.25 14.43 8.59 15 9L13.56 10.45C13.11 10.17 12.58 10 12 10C10.74 10 9.6 10.8 9.18 12H11L8 15L5 12M16.91 14C16.36 16.71 13.72 18.45 11 17.9C10.25 17.74 9.58 17.41 9 17L10.44 15.55C10.9 15.83 11.43 16 12 16C13.27 16 14.41 15.2 14.83 14H13L16 11L19 14H16.91Z"/>
</svg>
<svg class="cam-on" style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor"
d="M20 5H17L15 3H9L7 5H4C2.9 5 2 5.9 2 7V19C2 20.11 2.9 21 4 21H20C21.11 21 22 20.11 22 19V7C22 5.9 21.11 5 20 5M5 12H7.1C7.65 9.29 10.29 7.55 13 8.1C13.76 8.25 14.43 8.59 15 9L13.56 10.45C13.11 10.17 12.58 10 12 10C10.74 10 9.6 10.8 9.18 12H11L8 15L5 12M16.91 14C16.36 16.71 13.72 18.45 11 17.9C10.25 17.74 9.58 17.41 9 17L10.44 15.55C10.9 15.83 11.43 16 12 16C13.27 16 14.41 15.2 14.83 14H13L16 11L19 14H16.91Z"/>
</svg>
<span class="cam-off tooltiptext">Enable Auto-Cam</span>
<span class="cam-on tooltiptext">Disable Auto-Cam</span>
</div>
<div id="ai-enabled" class="topbar-icon tooltip" ai="off">
<svg class="ai-off" style="width:24px;height:24px;margin-top: -2px" viewBox="0 0 24 24">
<path fill="currentColor"
d="M17.5 15.5C17.5 16.61 16.61 17.5 15.5 17.5S13.5 16.61 13.5 15.5 14.4 13.5 15.5 13.5 17.5 14.4 17.5 15.5M8.5 13.5C7.4 13.5 6.5 14.4 6.5 15.5S7.4 17.5 8.5 17.5 10.5 16.61 10.5 15.5 9.61 13.5 8.5 13.5M23 15V18C23 18.55 22.55 19 22 19H21V20C21 21.11 20.11 22 19 22H5C3.9 22 3 21.11 3 20V19H2C1.45 19 1 18.55 1 18V15C1 14.45 1.45 14 2 14H3C3 10.13 6.13 7 10 7H11V5.73C10.4 5.39 10 4.74 10 4C10 2.9 10.9 2 12 2S14 2.9 14 4C14 4.74 13.6 5.39 13 5.73V7H14C17.87 7 21 10.13 21 14H22C22.55 14 23 14.45 23 15M21 16H19V14C19 11.24 16.76 9 14 9H10C7.24 9 5 11.24 5 14V16H3V17H5V20H19V17H21V16Z"/>
</svg>
<svg class="ai-on" style="width:24px;height:24px;margin-top: -2px" viewBox="0 0 24 24">
<path fill="currentColor"
d="M22 14H21C21 10.13 17.87 7 14 7H13V5.73C13.6 5.39 14 4.74 14 4C14 2.9 13.11 2 12 2S10 2.9 10 4C10 4.74 10.4 5.39 11 5.73V7H10C6.13 7 3 10.13 3 14H2C1.45 14 1 14.45 1 15V18C1 18.55 1.45 19 2 19H3V20C3 21.11 3.9 22 5 22H19C20.11 22 21 21.11 21 20V19H22C22.55 19 23 18.55 23 18V15C23 14.45 22.55 14 22 14M9.79 16.5C9.4 15.62 8.53 15 7.5 15S5.6 15.62 5.21 16.5C5.08 16.19 5 15.86 5 15.5C5 14.12 6.12 13 7.5 13S10 14.12 10 15.5C10 15.86 9.92 16.19 9.79 16.5M18.79 16.5C18.4 15.62 17.5 15 16.5 15S14.6 15.62 14.21 16.5C14.08 16.19 14 15.86 14 15.5C14 14.12 15.12 13 16.5 13S19 14.12 19 15.5C19 15.86 18.92 16.19 18.79 16.5Z"/>
</svg>
<span class="ai-off tooltiptext">Enable AI</span>
<span class="ai-on tooltiptext">Disable AI</span>
</div>
<div class="tooltip">
<select id="ai-level" name="ai-level">
<option value="0">Easy</option>
<option value="1">Medium</option>
<option value="2">Hard</option>
<option value="3">Very hard</option>
</select>
<span class="tooltiptext">AI Level</span>
</div>
</div>
<div class="right-box">
<div id="undo-button" class="topbar-icon tooltip">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M20 13.5C20 17.09 17.09 20 13.5 20H6V18H13.5C16 18 18 16 18 13.5S16 9 13.5 9H7.83L10.91 12.09L9.5 13.5L4 8L9.5 2.5L10.92 3.91L7.83 7H13.5C17.09 7 20 9.91 20 13.5Z" />
</svg>
<span class="tooltiptext">Undo last move</span>
</div>
<div id=new-game class="topbar-icon tooltip">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M12,6V9L16,5L12,1V4A8,8 0 0,0 4,12C4,13.57 4.46,15.03 5.24,16.26L6.7,14.8C6.25,13.97 6,13 6,12A6,6 0 0,1 12,6M18.76,7.74L17.3,9.2C17.74,10.04 18,11 18,12A6,6 0 0,1 12,18V15L8,19L12,23V20A8,8 0 0,0 20,12C20,10.43 19.54,8.97 18.76,7.74Z" />
</svg>
<span class="tooltiptext">New Game</span>
</div>
<div id="load" class="topbar-icon tooltip">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z" />
</svg>
<span class="tooltiptext">Load Game</span>
</div>
<div id="save" class="topbar-icon tooltip">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z" />
</svg>
<span class="tooltiptext">Save Game</span>
</div>
<div id="sound" snd="on" class="topbar-icon tooltip">
<svg class="snd-on" style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor"
d="M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z"/>
</svg>
<svg class="snd-off" style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor"
d="M12,4L9.91,6.09L12,8.18M4.27,3L3,4.27L7.73,9H3V15H7L12,20V13.27L16.25,17.53C15.58,18.04 14.83,18.46 14,18.7V20.77C15.38,20.45 16.63,19.82 17.68,18.96L19.73,21L21,19.73L12,10.73M19,12C19,12.94 18.8,13.82 18.46,14.64L19.97,16.15C20.62,14.91 21,13.5 21,12C21,7.72 18,4.14 14,3.23V5.29C16.89,6.15 19,8.83 19,12M16.5,12C16.5,10.23 15.5,8.71 14,7.97V10.18L16.45,12.63C16.5,12.43 16.5,12.21 16.5,12Z"/>
</svg>
<span class="snd-off tooltiptext">Enable Sound</span>
<span class="snd-on tooltiptext">Disable Sound</span>
</div>
<div id ="fullscreen" fsc="off" class="topbar-icon tooltip">
<svg class="fsc-on" style="width:24px;height:24px;" viewBox="0 0 24 24">
<path fill="currentColor"
d="M14,14H19V16H16V19H14V14M5,14H10V19H8V16H5V14M8,5H10V10H5V8H8V5M19,8V10H14V5H16V8H19Z"/>
</svg>
<svg class="fsc-off" style="width:24px;height:24px;" viewBox="0 0 24 24">
<path fill="currentColor"
d="M5,5H10V7H7V10H5V5M14,5H19V10H17V7H14V5M17,14H19V19H14V17H17V14M10,17V19H5V14H7V17H10Z"/>
</svg>
<span class="fsc-off tooltiptext">Enable Fullscreen</span>
<span class="fsc-on tooltiptext">Disable Fullscreen</span>
</div>
<div id="scene" class="topbar-icon tooltip">
<svg style="width:24px;height:24px;" viewBox="0 0 24 24">
<path fill="currentColor" d="M14,6L10.25,11L13.1,14.8L11.5,16C9.81,13.75 7,10 7,10L1,18H23L14,6Z" />
</svg>
<span class="tooltiptext">Change Scene</span>
</div>
<div id="info" class="topbar-icon">
<svg style="width:24px;height:24px;" viewBox="0 0 24 24">
<path fill="currentColor" d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z" />
</svg>
<div id="info_overlay">
<p><kbd>RightClick</kbd> : Camera rotation</p>
<p><kbd>LeftClick</kbd> : Select piece</p>
<p><kbd>Space</kbd> : Center view on chessboard</p>
<p><kbd>Ctrl</kbd> + <kbd>LeftClick</kbd> : Unlock selected item</p>
<p><kbd>Ctrl</kbd> + <kbd>RightClick</kbd> : Camera translation</p>
<p><kbd>Ctrl</kbd> + <kbd>S</kbd> : Save game</p>
<p><kbd>Ctrl</kbd> + <kbd>R</kbd> : Load last saved game</p>
<p><kbd>Alt</kbd> + <kbd>S</kbd> : Download savegame file</p>
<p><kbd>Alt</kbd> + <kbd>R</kbd> : Load savegame file</p>
<p><kbd>Ctrl</kbd> + <kbd>Z</kbd> : Undo last action</p>
<p><kbd>Ctrl</kbd> + <kbd>G</kbd> : New game</p>
<p><kbd>Ctrl</kbd> + <kbd>P</kbd> : Unlock all objects</p>
<p><kbd>Z</kbd> <kbd>Q</kbd> <kbd>S</kbd> <kbd>D</kbd> : Rotate table (if objects unlocked)</p>
<p><kbd>NumKey</kbd> : Preset camera views</p>
<p><kbd>Esc</kbd> : Hide on-screen display</p>
</div>
</div>
</div>
</div>
<div id="scenes-panel">
<div class="scene-item" value="evening_lights">
<span>Evening lights</span>
<img src="images/scenes/evening_lights.jpg" alt="">
</div>
<div class="scene-item" value="cosy_interior">
<span>Cosy interior</span>
<img src="images/scenes/cosy_interior.jpg" alt="">
</div>
<div class="scene-item" value="niagara_falls">
<span>Niagara falls</span>
<img src="images/scenes/niagara_falls.jpg" alt="">
</div>
</div>
<div id="ai-thinking-indicator">
AI is thinking...
</div>
<div id="canvas_overlay" hidden>
<span id="notify_text"></span>
</div>
<div id="modal-dialog" class="modal">
<div class="dialog-box">
<div class="modal-header">
<h2 class="title"></h2>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<input type="button" class="modal-button button-yes" tabindex="0" value="Yes" />
<input type="button" class="modal-button button-no" tabindex="0" value="No" />
</div>
</div>
</div>
<div id="page-loader-overlay">
<div class="loader"></div>
</div>
<script type="text/javascript" src="lib/gl-matrix-min.js"></script>
<script type="text/javascript" src="lib/camera.js"></script>
<script type="text/javascript" src="lib/shaders.js"></script>
<script type="text/javascript" src="lib/chessboard.js"></script>
<script type="text/javascript" src="lib/lights.js"></script>
<script type="text/javascript" src="lib/objects.js"></script>
<script type="text/javascript" src="lib/material.js"></script>
<script type="text/javascript" src="lib/bump_mapping.js"></script>
<script type="text/javascript" src="lib/textures.js"></script>
<script type="text/javascript" src="lib/cubemap.js"></script>
<script type="text/javascript" src="lib/physics.js"></script>
<script type="text/javascript" src="lib/cookies.js"></script>
<script type="text/javascript" src="lib/particles.js"></script>
<script type="text/javascript" src="lib/local-file.js"></script>
<script type="text/javascript" src="3rdparty/chess.js/chess.js"></script>
<script type="text/javascript" src="3rdparty/ammo.js/builds/ammo.js"></script>
<script type="text/javascript" src="scenes/scene.js"></script>
<script type="text/javascript" src="scenes/evening_lights.js"></script>
<script type="text/javascript" src="scenes/cosy_interior.js"></script>
<script type="text/javascript" src="scenes/niagara_falls.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>