-
Notifications
You must be signed in to change notification settings - Fork 8
/
index.html
162 lines (162 loc) · 9.26 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Eat cells smaller than you and don't get eaten by the bigger ones, as an MMO">
<meta name="keywords" content="agario, agar, io, cell, cells, virus, bacteria, blob, game, games, web game, html5, fun, flash">
<meta name="robots" content="index, follow">
<meta name="viewport" content="minimal-ui, width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Ogar Client</title>
<link id="favicon" rel="icon" type="image/png" href="assets/img/favicon.png" />
<link href="assets/css/fonts.googleapis.css" rel='stylesheet' type='text/css'>
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/index.css" rel="stylesheet">
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/vector.js"></script>
<script src="assets/js/main_out.js"></script>
<script>
// Macro for splitting
window.addEventListener('keydown', keydown);
function keydown(event) {
if (event.keyCode == 16) {
for (var shift = 0; shift < 5; shift++) setTimeout(split, shift * 50);
}
if (event.keyCode == 65) {
for (var i = 0; i < 3; i++) setTimeout(split, i * 50);
}
if (event.keyCode == 68) {
split();
setTimeout(split, 50);
}
} /*global $*/
function split() {
$("body").trigger($.Event("keydown", {
keyCode: 32
}));
$("body").trigger($.Event("keyup", {
keyCode: 32
}));
}
</script>
</head>
<body>
<div id="overlays">
<div id="helloDialog">
<form role="form">
<div class="form-group">
<center>
<h2 id="title">Ogar Client</h2>
</center>
</div>
<div class="form-group"> <input id="nick" class="form-control" style="margin-bottom: 10px;" placeholder="Nick" maxlength="30" />
<select id="gamemode" class="form-control" style="margin-bottom: 10px;" onchange="setServer($(this).val())" required>
<option selected disabled>Select:</option>
<option value="127.0.0.1:443">Solo Server 443</option>
<option value="127.0.0.1:4444">Solo Server 4444</option>
<option value="127.0.0.1:8080">Solo Server 8080</option>
<option value="150.95.135.169:8001">Virus-Off</option>
</select>
<input class="form-control" id="" placeholder="Insert Server IP (Click out of the text box to connect!)" onchange="setServer($(this).val())" />
</div>
<div class="form-group">
<button type="submit" id="play-btn" style="width: 100%" onclick="setNick(document.getElementById('nick').value); return false;" class="btn btn-play btn-primary btn-needs-server">Play</button>
<br><br/>
</div>
<div id="leftOptions">
<div style="margin: 6px;">
<center><h3>Settings</h3></center>
<label><input type="checkbox" onchange="setSkins(!$(this).is(':checked'));"> Hide Skins</label>
<label><input type="checkbox" onchange="setNames(!$(this).is(':checked'));"> Hide Names</label>
<label><input type="checkbox" onchange="setDarkTheme($(this).is(':checked'));"> Dark Theme</label>
<label><input type="checkbox" onchange="setColors($(this).is(':checked'));"> No Colors</label>
<label><input type="checkbox" onchange="setShowMass($(this).is(':checked'));"> Show Mass</label>
<label><input type="checkbox" onchange="setSmooth($(this).is(':checked'));" checked> Smooth Render</label>
<label><input type="checkbox" onchange="setChatHide($(this).is(':checked'));"> Hide Chat</label>
<label><input type="checkbox" onchange="setCellBorder($(this).is(':checked'));"> Show Cell Border</label>
<label><input type="checkbox" onchange="setAcid($(this).is(':checked'));"> Acid Mode</label>
<label><input type="checkbox" onchange="setCellPos($(this).is(':checked'));"> Show Map Position</label>
<label><input type="checkbox" onchange="setMapBorders($(this).is(':checked'));"> Show Map Border</label>
<label><input type="checkbox" onchange="setMapSectors($(this).is(':checked'));"> Show Sectors</label>
<label><input type="checkbox" onchange="setMapGrid($(this).is(':checked'));" checked> Show Grid</label>
<label><input type="checkbox" onchange="setNameShadows($(this).is(':checked'));"> Name Shadows</label>
<label><input type="checkbox" onchange="setTransparent($(this).is(':checked'));"> Transparent Cells</label>
<label><input type="checkbox" onchange="setZoom($(this).is(':checked'));"> Infinite Zoom</label>
<!--NOTE:You do not need to include the # in the color hex.-->
<p> </p>
<table>
<tr>
<td>
<label>Map Border Color</label>
<input class="form-control" id="borderColor" placeholder="Input HEX color" value="FF0000" style="width:180px;">
</td>
<td>
<label>Map Sector Color</label>
<input class="form-control" id="sectorColor" placeholder="Input HEX color" value="1A1A1A" style="width:180px;">
</td>
</tr>
</table>
<table>
<tr>
<td>
<label>LB Text Color (you)</label>
<input class="form-control" id="lbColor" placeholder="Input HEX color" value="FFAAAA" style="width:180px;">
</td>
<td>
<label>Name Text Color</label>
<input class="form-control" id="nameColor" placeholder="Input HEX color" value="FFFFFF" style="width:180px;">
</td>
</tr>
<tr>
<td>
<label>Cell Border Color</label>
<input class="form-control" id="cellBorderColor" placeholder="Input HEX color" value="000000" style="width:180px;">
</td>
<td>
<label>Cell Border Size</label>
<input class="form-control" id="cellBorderSize" placeholder="Size Value (pixels)" value="5" type="number" style="width:180px;">
</td>
</tr>
</table>
<br/>
<p> </p>
<div class="form-group" id="mainform"> <button id="spectate-btn" onclick="spectate(); return false;" style="width: 100%" class="btn btn-warning btn-spectate btn-needs-server">Spectate
</button> <br clear="both" /></div>
</div>
</div>
</form>
<div id="instructions">
<hr/>
<center>
<span class="text-muted">
Move your <b>Mouse</b> to control your cell<br/>
Press <b>Space</b> to split<br/>
Press <b>W</b> to eject mass<br/>
Press <b>E</b> to split minions<br/>
Press <b>R</b> to make minions eject mass<br/>
Press <b>T</b> to freeze/unfreeze minions<br/>
Press <b>P</b> to make minions collect food<br/>
</span>
</center>
<hr/>
<center>
<p><b>How to connect to a custom server:</b></p>
<p>Paste the server IP in the text box under the name text box.</p>
<p>Or, press the F12 key, then look for the <i>console</i> tab, and finally type <i>setServer("serverIP:port")</i> and press enter.</p>
</center>
</div>
</div>
</div>
<div id="connecting">
<div style="width: 350px; background-color: #FFF; margin: 100px auto; border-radius: 15px; padding: 5px 15px 5px 15px;">
<center>
<h2>Connecting</h2>
</center>
<p>If you cannot connect to the server, check if you have some anti-virus or firewall blocking the connection, make sure you selected a server to connect to, and/or make sure the server you're connecting to isn't down.</p>
</div>
</div> <canvas id="canvas" width="800" height="600"></canvas> <input type="text" id="chat_textbox" placeholder="Press enter to chat" maxlength="200" />
<div style="font-family:'Ubuntu'"> </div>
</body>
</html>