diff options
author | Star Rauchenberger <fefferburbia@gmail.com> | 2023-10-29 11:32:06 -0400 |
---|---|---|
committer | Star Rauchenberger <fefferburbia@gmail.com> | 2023-10-29 11:32:06 -0400 |
commit | 10599ab2e789ffb93a19f6aa3c100f533c460315 (patch) | |
tree | f49edb1c44fe698e023a73ee82c1584b328cb5de /app/assets/javascripts | |
parent | 141f8b1a7e42928e94cccd0c8f89fdd56f8e2efe (diff) | |
download | wittle-10599ab2e789ffb93a19f6aa3c100f533c460315.tar.gz wittle-10599ab2e789ffb93a19f6aa3c100f533c460315.tar.bz2 wittle-10599ab2e789ffb93a19f6aa3c100f533c460315.zip |
generate, show, solve puzzles
Diffstat (limited to 'app/assets/javascripts')
-rw-r--r-- | app/assets/javascripts/wittle/application.js | 1 | ||||
-rw-r--r-- | app/assets/javascripts/wittle/utilities.js.erb | 204 | ||||
-rw-r--r-- | app/assets/javascripts/wittle/wittle.js | 5 |
3 files changed, 6 insertions, 204 deletions
diff --git a/app/assets/javascripts/wittle/application.js b/app/assets/javascripts/wittle/application.js index e54c646..52d2214 100644 --- a/app/assets/javascripts/wittle/application.js +++ b/app/assets/javascripts/wittle/application.js | |||
@@ -10,4 +10,5 @@ | |||
10 | // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details | 10 | // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details |
11 | // about supported directives. | 11 | // about supported directives. |
12 | // | 12 | // |
13 | //= require jquery3 | ||
13 | //= require_tree . | 14 | //= require_tree . |
diff --git a/app/assets/javascripts/wittle/utilities.js.erb b/app/assets/javascripts/wittle/utilities.js.erb index 406adda..487af6e 100644 --- a/app/assets/javascripts/wittle/utilities.js.erb +++ b/app/assets/javascripts/wittle/utilities.js.erb | |||
@@ -245,210 +245,6 @@ window.deleteElementsByClassName = function(rootElem, className) { | |||
245 | } | 245 | } |
246 | } | 246 | } |
247 | 247 | ||
248 | window.loadHeader = function(titleText) { | ||
249 | document.body.style.marginLeft = '0px' | ||
250 | |||
251 | var navbar = document.createElement('div') | ||
252 | document.body.appendChild(navbar) | ||
253 | navbar.className = 'navbar' | ||
254 | navbar.style = 'min-width: 700px; position: absolute; top: 0; width: 100%; z-index: 1' | ||
255 | navbar.style.borderBottom = '2px solid ' + window.BORDER | ||
256 | navbar.style.background = window.PAGE_BACKGROUND | ||
257 | |||
258 | var navbarPadding = document.createElement('div') | ||
259 | document.body.appendChild(navbarPadding) | ||
260 | navbarPadding.className = 'navbar-padding' | ||
261 | |||
262 | var titleDiv = document.createElement('div') | ||
263 | navbar.appendChild(titleDiv) | ||
264 | titleDiv.style = 'position: absolute; width: 100%; pointer-events: none' | ||
265 | |||
266 | var titleLabel = document.createElement('label') | ||
267 | titleDiv.appendChild(titleLabel) | ||
268 | titleLabel.style = 'font-size: 48; pointer-events: auto' | ||
269 | titleLabel.id = 'title' | ||
270 | titleLabel.innerText = titleText | ||
271 | |||
272 | var link = document.createElement('label') | ||
273 | navbar.appendChild(link) | ||
274 | link.style = 'float: left; margin-left: 32px; cursor: pointer; line-height: 60px' | ||
275 | link.className = 'navbar-content' | ||
276 | |||
277 | if (window.location.href.endsWith('browse.html')) { | ||
278 | navbar.style.position = 'fixed' // When browsing, pin the navbar to the top so that it's visible during infinite scroll. | ||
279 | |||
280 | link.innerText = 'Create a puzzle' | ||
281 | link.onpointerdown = function() {window.location = 'editor.html'} | ||
282 | |||
283 | var link2 = document.createElement('label') | ||
284 | navbar.appendChild(link2) | ||
285 | link2.style = 'float: left; margin-left: 20px; cursor: pointer; line-height: 60px; display: none' | ||
286 | link2.className = 'navbar-content' | ||
287 | link2.innerText = 'Jump to top' | ||
288 | link2.id = 'scrollToTop' | ||
289 | link2.onpointerdown = function() {window.scrollTo(0, 0)} | ||
290 | |||
291 | } else if (window.location.href.includes('/play/')) { | ||
292 | link.innerText = 'Back to all puzzles' | ||
293 | link.onpointerdown = function() {window.location = '../browse.html'} | ||
294 | } else /* All other pages */ { | ||
295 | link.innerText = 'Browse all puzzles' | ||
296 | link.onpointerdown = function() {window.location = 'browse.html'} | ||
297 | } | ||
298 | |||
299 | var feedbackButton = document.createElement('label') | ||
300 | navbar.appendChild(feedbackButton) | ||
301 | feedbackButton.id = 'feedbackButton' | ||
302 | feedbackButton.style = 'float: right; margin-right: 8px; cursor: pointer; line-height: 60px' | ||
303 | feedbackButton.innerText = 'Send feedback' | ||
304 | feedbackButton.className = 'navbar-content' | ||
305 | feedbackButton.onpointerdown = function() { | ||
306 | var feedback = prompt('Provide feedback:') | ||
307 | if (feedback) { | ||
308 | sendFeedback(feedback) | ||
309 | } | ||
310 | } | ||
311 | |||
312 | var separator = document.createElement('label') | ||
313 | navbar.appendChild(separator) | ||
314 | separator.style = 'float: right; line-height: 60px; padding-left: 6px; padding-right: 6px' | ||
315 | separator.className = 'navbar-content' | ||
316 | separator.innerText = '|' | ||
317 | |||
318 | var sourceLink = document.createElement('label') | ||
319 | navbar.appendChild(sourceLink) | ||
320 | sourceLink.style = 'float: right; line-height: 60px; cursor: pointer' | ||
321 | sourceLink.innerText = 'Source code' | ||
322 | sourceLink.className = 'navbar-content' | ||
323 | sourceLink.onpointerdown = function() {window.open('https://github.com/jbzdarkid/jbzdarkid.github.io', '_blank')} | ||
324 | |||
325 | var collapsedSettings = drawSymbol({'type': 'plus', 'width':20, 'height':20}) | ||
326 | navbar.appendChild(collapsedSettings) | ||
327 | collapsedSettings.style = 'width: 20px; height: 20px; position: absolute; left: 0; cursor: pointer' | ||
328 | collapsedSettings.style.border = '2px solid ' + window.BORDER | ||
329 | collapsedSettings.id = 'collapsedSettings' | ||
330 | collapsedSettings.onpointerdown = function() { | ||
331 | this.style.display = 'none' | ||
332 | var expandedSettings = document.getElementById('expandedSettings') | ||
333 | expandedSettings.style.display = null | ||
334 | window.settings.expanded = 'true' | ||
335 | } | ||
336 | |||
337 | var expandedSettings = document.createElement('div') | ||
338 | navbar.appendChild(expandedSettings) | ||
339 | expandedSettings.style = 'width: 300px; position: absolute; left: 0; display: none; padding: 10px' | ||
340 | expandedSettings.style.border = '2px solid ' + window.BORDER | ||
341 | expandedSettings.style.background = window.PAGE_BACKGROUND | ||
342 | expandedSettings.id = 'expandedSettings' | ||
343 | |||
344 | var minus = drawSymbol({'type':'minus', 'width':20, 'height':20}) | ||
345 | minus.style = 'width: 20px; height: 20px; cursor: pointer; position: absolute; top: 0; left: 0' | ||
346 | expandedSettings.appendChild(minus) | ||
347 | minus.onpointerdown = function() { | ||
348 | this.parentElement.style.display = 'none' | ||
349 | var collapsedSettings = document.getElementById('collapsedSettings') | ||
350 | collapsedSettings.style.display = null | ||
351 | window.settings.expanded = 'false' | ||
352 | } | ||
353 | |||
354 | if (window.settings.expanded == 'true') { | ||
355 | collapsedSettings.onpointerdown() | ||
356 | } | ||
357 | |||
358 | // Now, for the contents of the settings | ||
359 | var settingsLabel = document.createElement('label') | ||
360 | expandedSettings.appendChild(settingsLabel) | ||
361 | settingsLabel.innerText = 'settings' | ||
362 | settingsLabel.style = 'line-height: 0px' // Attach to the top | ||
363 | |||
364 | expandedSettings.appendChild(document.createElement('br')) | ||
365 | expandedSettings.appendChild(document.createElement('br')) | ||
366 | |||
367 | // Theme | ||
368 | document.body.style.color = window.TEXT_COLOR | ||
369 | document.body.style.background = window.PAGE_BACKGROUND | ||
370 | var themeButton = document.createElement('button') | ||
371 | expandedSettings.appendChild(themeButton) | ||
372 | if (window.settings.theme == 'night') { | ||
373 | themeButton.innerText = 'Night theme' | ||
374 | themeButton.onpointerdown = function() { | ||
375 | window.settings.theme = 'light' | ||
376 | location.reload() | ||
377 | } | ||
378 | } else if (window.settings.theme == 'light') { | ||
379 | themeButton.innerText = 'Light theme' | ||
380 | themeButton.onpointerdown = function() { | ||
381 | window.settings.theme = 'night' | ||
382 | location.reload() | ||
383 | } | ||
384 | } | ||
385 | |||
386 | expandedSettings.appendChild(document.createElement('br')) | ||
387 | |||
388 | // Sensitivity | ||
389 | var sensLabel = document.createElement('label') | ||
390 | expandedSettings.appendChild(sensLabel) | ||
391 | sensLabel.htmlFor = 'sens' | ||
392 | sensLabel.innerText = 'Mouse Speed 2D' | ||
393 | |||
394 | var sens = document.createElement('input') | ||
395 | expandedSettings.appendChild(sens) | ||
396 | sens.type = 'range' | ||
397 | sens.id = 'sens' | ||
398 | sens.min = '0.1' | ||
399 | sens.max = '1.3' | ||
400 | sens.step = '0.1' | ||
401 | sens.value = window.settings.sensitivity | ||
402 | sens.onchange = function() { | ||
403 | window.settings.sensitivity = this.value | ||
404 | } | ||
405 | sens.style.backgroundImage = 'linear-gradient(to right, ' + window.ALT_BACKGROUND + ', ' + window.ACTIVE_COLOR + ')' | ||
406 | |||
407 | // Volume | ||
408 | var volumeLabel = document.createElement('label') | ||
409 | expandedSettings.appendChild(volumeLabel) | ||
410 | volumeLabel.htmlFor = 'volume' | ||
411 | volumeLabel.innerText = 'Volume' | ||
412 | |||
413 | var volume = document.createElement('input') | ||
414 | expandedSettings.appendChild(volume) | ||
415 | volume.type = 'range' | ||
416 | volume.id = 'volume' | ||
417 | volume.min = '0' | ||
418 | volume.max = '0.24' | ||
419 | volume.step = '0.02' | ||
420 | volume.value = parseFloat(window.settings.volume) | ||
421 | volume.onchange = function() { | ||
422 | window.settings.volume = this.value | ||
423 | } | ||
424 | volume.style.backgroundImage = 'linear-gradient(to right, ' + window.ALT_BACKGROUND + ', ' + window.ACTIVE_COLOR + ')' | ||
425 | |||
426 | // Custom mechanics -- disabled for now | ||
427 | window.settings.customMechanics = false | ||
428 | /* | ||
429 | var customMechanics = createCheckbox() | ||
430 | expandedSettings.appendChild(customMechanics) | ||
431 | customMechanics.id = 'customMechanics' | ||
432 | if (window.settings.customMechanics == 'true') { | ||
433 | customMechanics.style.background = window.BORDER | ||
434 | customMechanics.checked = true | ||
435 | } | ||
436 | |||
437 | customMechanics.onpointerdown = function() { | ||
438 | this.checked = !this.checked | ||
439 | this.style.background = (this.checked ? window.BORDER : window.PAGE_BACKGROUND) | ||
440 | window.settings.customMechanics = this.checked | ||
441 | window.location.reload() | ||
442 | } | ||
443 | |||
444 | var mechLabel = document.createElement('label') | ||
445 | expandedSettings.appendChild(mechLabel) | ||
446 | mechLabel.style.marginLeft = '6px' | ||
447 | mechLabel.htmlFor = 'customMechanics' | ||
448 | mechLabel.innerText = 'Custom mechanics' | ||
449 | */ | ||
450 | } | ||
451 | |||
452 | // Automatically solve the puzzle | 248 | // Automatically solve the puzzle |
453 | window.solvePuzzle = function() { | 249 | window.solvePuzzle = function() { |
454 | if (window.setSolveMode) window.setSolveMode(false) | 250 | if (window.setSolveMode) window.setSolveMode(false) |
diff --git a/app/assets/javascripts/wittle/wittle.js b/app/assets/javascripts/wittle/wittle.js new file mode 100644 index 0000000..883a4b8 --- /dev/null +++ b/app/assets/javascripts/wittle/wittle.js | |||
@@ -0,0 +1,5 @@ | |||
1 | $.ajaxSetup({ | ||
2 | headers: { | ||
3 | 'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content') | ||
4 | } | ||
5 | }); | ||