-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
109 lines (95 loc) · 4.05 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
<html>
<head>
<title>Domino</title>
<style>
body {
font-family: Monospace;
background-color: #000000;
margin: 0px;
overflow: hidden;
}
</style>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-65611613-3', 'auto');
ga('send', 'pageview');
</script>
<link rel="stylesheet" type="text/css" href="/css/styles.css">
<script type="text/javascript" src="/js/bundle.js"></script>
<script type="text/javascript">
window.onload = app.Init;
</script>
</head>
<body>
<div id="guiContainer"></div>
<nav class="menu">
<a class="menu__btn">
<div class="menu__bl1"><!-- --></div>
<div class="menu__bl2"><!-- --></div>
<div class="menu__bl3"><!-- --></div>
</a>
<ul class="menu__lists">
<li><a onclick="app.showLayer('helpDiv');">?</a></li>
<li><a onclick="app.showGallery();">Gallery</a></li>
<li><a onclick="app.share();">Share</a></li>
<li><a onclick="app.clearBoard();">Clear</a></li>
</ul>
</nav>
<div id="viewport"></div>
<div id="shareDiv" class="layer layer--share">
<div id="shareSucceeded" class="alert">
<div class="alert__content">
<div class="alert--complete__url-wrapper">
<input id="shareLink" class="alert--complete__url" type="text">
</div>
<a id="lnkTwitter" class="alert--complete__tweet">Tweet</a>
</div>
<div class="alert__choises">
<button onclick="app.hideShare(); app.showGallery();"class="alert__btn" style="width:50%;">See Others..</button>
<button onclick="app.hideShare();" class="alert__btn" style="width:50%;">Resume</button>
</div>
</div>
<div id="shareFailed" class="alert">
<div class="alert__content">Please place some dominos.</div>
<div class="alert__choises">
<button onclick="app.hideShare();" class="alert__btn" style="width:100%;">Resume</button>
</div>
</div>
</div>
<div id="helpDiv" class="layer layer--help" onclick="app.hideLayer('helpDiv');">
<div class="layer--help__container">
<h2>Domino</h2>
<p>
Right click on the board to place a new domino, to create a path of dominos hold right button and drag, right click on a domino to push it. Left click on a domino to select it, once selected use the left or right arrow keys to rotate, you can also reposition selected piece by dragging it. This program uses Physijs to handle all physical interactions, 3D is handled by three.js
</p>
<h3 class="layer--help__shortcut">Shortcuts</h3>
<p class="layer--help__shortcut layer--help__shortcut--left">
[s]: <span class="fuse">Share</span><br>
[c]: <span class="bomb">Clear</span><br>
[r]: <span class="fire">Restore to previous state</span><br>
[d]: <span class="fire">Delete selected domino</span><br>
</p>
<p class="layer--help__credit">
created by <a href="https://github.com/swilly22" target="_blank">swilly22</a>
</p>
</div>
</div>
<div id="noMobileDiv" class="layer layer--nomobile">
<div class="layer--help__container">
<div id="shareFailed" class="alert">
<div class="alert__content">Sorry but this demo partially supports mobile at the moment.</div>
<div class="alert__choises">
<button onclick="app.hideLayer('noMobileDiv'); app.showGallery();" class="alert__btn" style="width:100%;">Browse Gallery</button>
</div>
</div>
</div>
</div>
<div id="gallery" class="layer layer--gallery" onclick="app.hideGallery();">
<ul id="galleryItems" class="layer--gallery__list"></ul>
<div><!-- --></div>
</div>
</body>
</html>