-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
211 lines (195 loc) · 8.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
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
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Asteroids</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/codemirror.css" />
<style>
body, html {margin: 0; padding: 0}
div#fields {
position: fixed;
top: 5px;
left: 30px;
margin: 0px;
padding: 0px;
}
div#fields table{
color: white;
font-family: 'Courier new', 'Courier old', 'Grandma Courier', 'Marie Curie';
}
#fields input[type="text"] {
background-color: rgba(0,0,0,0.5);
color: white;
border: 1px solid #BBB;
}
#fields table td span {
pointer-events: none;
}
span.help {
pointer-events: none;
font-size: 9pt;
color: white;
font-family: "The Simpsons";
}
div#editor {
opacity: 0.3;
position: fixed;
top:0px;
right:0px;
border: 2px solid gray;
width: 50em;
}
div#editor div.dragArea {
cursor: move;
color: white;
background: #999;
}
div#editor:hover {
opacity: 1;
}
.CodeMirror {
height: 440px;
}
</style>
</head>
<body>
<div id="fields">
<table>
<tr><td><span>Game speed:</span></td><td><input type="text" value="5000" id="speedRatio" /></td></tr>
<tr><td><span>New object velocity ratio:</span></td><td><input type="text" value="1" id="velocity" /></td></tr>
<tr><td><span>New object mass:</span></td><td><input type="text" value="50000" id="mass" /></td></tr>
<tr><td><span>G constant:</span></td><td><input type="text" value="6.674e-11" id="g_const" /></td></tr>
</table>
<span class="help">Left-lick to add object, drag to set speed. Right-drag to pan, scroll to zoom.</span>
</div>
<div id="editor">
<div class="dragArea">The bounce function</div>
<textarea id="code" name="code"></textarea>
</div>
<!-- I wanted to use requirejs to load this gorram' crap but the crap won't frakkin' load. -->
<!-- no really, I even asked a nice question on SO. It just doesn't work with requirejs -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/codemirror.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/mode/javascript/javascript.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/addon/comment/continuecomment.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/addon/edit/matchbrackets.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/addon/comment/comment.js"></script>
<script>
var params = {showEditor: false, spawnShip: false};
if(location.search) {
var data = decodeURIComponent(location.search).substr(1);
try {
var params_url = JSON.parse(data);
for(var name in params_url) {
params[name] = params_url[name];
}
}
catch(e) {
console.error("Given URL params are not valid JSON. The data: ", data);
}
}
const SCRIPT_NAME = "inelastic_bounce_function";
if(params.showEditor) {
(()=>{
var editor = window.editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
matchBrackets: true,
continueComments: "Enter",
extraKeys: {"Ctrl-Q": "toggleComment"},
// this happens when you copy paste code and you think it will solve problems
//viewportMargin: Infinity
});
// remember whether something was loaded in the editor already
var value_filled = false;
// Fill editor with code
if(localStorage[SCRIPT_NAME]) {
editor.setValue(localStorage[SCRIPT_NAME]);
value_filled = true;
} else {
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", function() {
var match = this.responseText.match(/SRC_START[\n\r]+([\s\S]*?)[\n\r]+\/\/SRC_END/i);
editor.setValue(
"// Do not change the function name or it won't work!\n"+
"// All changes are saved in localStorage[\""+SCRIPT_NAME+"\"] instantly\n"+
"// to reset the editor to default, use `delete localStorage[\""+SCRIPT_NAME+"\"]`.\n"+
match[1].replace(/^ /mg, "")
);
value_filled = true;
});
oReq.open("GET", "bounce_function.js");
oReq.send();
}
// yeah, this also fires when the editor is being filed with code initally.
// If information about how much I care was a variable it would be a null pointer
editor.on("change", function() {
var val = editor.getValue();
localStorage[SCRIPT_NAME] = val;
updateFunction(val);
});
// Update function on page load
window.addEventListener("simulation-started", function(e) {
if(value_filled)
updateFunction(editor.getValue());
});
function updateFunction(fnDataString) {
try {
eval(fnDataString);
if(typeof bounce=="function") {
window.dispatchEvent(new CustomEvent('bounce-fn-changed', {detail: {fn:fnDataString}}));
}
else {
console.error("Bounce function was removed, nothing will be sent to worker.");
}
} catch(e) {
console.error("Error in script input: ", e);
}
}
// Editor resizing
var resizeDiv = editor.getWrapperElement().querySelector("div.CodeMirror-scrollbar-filler");
resizeDiv.style.cursor = "nwse-resize";
var resizeStart = null;
resizeDiv.addEventListener("mousedown", function(e) {
alert("that doesn't work. I'm not sure how to get this editor to resize.\nSorry :(");
e.preventDefault();
return false;
});
})();
var dragPoint = null;
var dragOriginalPosition = null;
var div = document.querySelector("#editor");
// this stinks a lot but I'm lazy and this is just for testing
// You know I probably coukld've used jquery UI for making dragable editor
// if I had 10 hours to get it running...
window.addEventListener("mousemove", function(e) {
if(dragPoint) {
div.style.left = (dragOriginalPosition[0]+(e.clientX-dragPoint[0])) +"px";
div.style.top = (dragOriginalPosition[1]+(e.clientY-dragPoint[1])) +"px";
}
});
window.addEventListener("mouseout", function(e) {
if(e.target==null)
dragPoint = dragOriginalPosition = null;
});
window.addEventListener("mouseup", function(e) {
dragPoint = dragOriginalPosition = null;
});
document.querySelector("#editor div.dragArea").addEventListener("mousedown", function(e) {
dragOriginalPosition = [div.getBoundingClientRect().left, div.getBoundingClientRect().top];
dragPoint = [e.clientX, e.clientY];
e.preventDefault();
return false;
});
}
else {
document.getElementById("editor").style.display = "none";
}
if(params.spawnShip) {
window.addEventListener("simulation-started", function(e) {
window.createShip();
});
}
</script> <!-- put space between the dashes to comment out the script -->
<script type="text/javascript" data-main="test.js" src="require.js"></script> <!-- empty comment. Did you knwo comments are part of DOM? -->
</body>
</html>