about summary refs log tree commit diff stats
path: root/app/assets/javascripts
diff options
context:
space:
mode:
authorStar Rauchenberger <fefferburbia@gmail.com>2023-10-29 11:32:06 -0400
committerStar Rauchenberger <fefferburbia@gmail.com>2023-10-29 11:32:06 -0400
commit10599ab2e789ffb93a19f6aa3c100f533c460315 (patch)
treef49edb1c44fe698e023a73ee82c1584b328cb5de /app/assets/javascripts
parent141f8b1a7e42928e94cccd0c8f89fdd56f8e2efe (diff)
downloadwittle-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.js1
-rw-r--r--app/assets/javascripts/wittle/utilities.js.erb204
-rw-r--r--app/assets/javascripts/wittle/wittle.js5
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
248window.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
453window.solvePuzzle = function() { 249window.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});