6 files changed, 98 insertions, 204 deletions

@@ -1,3 +1,4 @@
 //= link_directory ../stylesheets/wittle .css
 //= link_directory ../javascripts/wittle .js
 //= link_directory ../audio/wittle .aac
+//= link_directory ../images/wittle .png
@@ -10,4 +10,5 @@
 // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
 // about supported directives.
 //
+//= require jquery3
 //= require_tree .
@@ -245,210 +245,6 @@ window.deleteElementsByClassName = function(rootElem, className) {
   }
 }
 
-window.loadHeader = function(titleText) {
-  document.body.style.marginLeft = '0px'
-
-  var navbar = document.createElement('div')
-  document.body.appendChild(navbar)
-  navbar.className = 'navbar'
-  navbar.style = 'min-width: 700px; position: absolute; top: 0; width: 100%; z-index: 1'
-  navbar.style.borderBottom = '2px solid ' + window.BORDER
-  navbar.style.background = window.PAGE_BACKGROUND
-
-  var navbarPadding = document.createElement('div')
-  document.body.appendChild(navbarPadding)
-  navbarPadding.className = 'navbar-padding'
-
-  var titleDiv = document.createElement('div')
-  navbar.appendChild(titleDiv)
-  titleDiv.style = 'position: absolute; width: 100%; pointer-events: none'
-
-  var titleLabel = document.createElement('label')
-  titleDiv.appendChild(titleLabel)
-  titleLabel.style = 'font-size: 48; pointer-events: auto'
-  titleLabel.id = 'title'
-  titleLabel.innerText = titleText
-
-  var link = document.createElement('label')
-  navbar.appendChild(link)
-  link.style = 'float: left; margin-left: 32px; cursor: pointer; line-height: 60px'
-  link.className = 'navbar-content'
-
-  if (window.location.href.endsWith('browse.html')) {
-    navbar.style.position = 'fixed' // When browsing, pin the navbar to the top so that it's visible during infinite scroll.
-
-    link.innerText = 'Create a puzzle'
-    link.onpointerdown = function() {window.location = 'editor.html'}
-
-    var link2 = document.createElement('label')
-    navbar.appendChild(link2)
-    link2.style = 'float: left; margin-left: 20px; cursor: pointer; line-height: 60px; display: none'
-    link2.className = 'navbar-content'
-    link2.innerText = 'Jump to top'
-    link2.id = 'scrollToTop'
-    link2.onpointerdown = function() {window.scrollTo(0, 0)}
-
-  } else if (window.location.href.includes('/play/')) {
-    link.innerText = 'Back to all puzzles'
-    link.onpointerdown = function() {window.location = '../browse.html'}
-  } else /* All other pages */ {
-    link.innerText = 'Browse all puzzles'
-    link.onpointerdown = function() {window.location = 'browse.html'}
-  }
-
-  var feedbackButton = document.createElement('label')
-  navbar.appendChild(feedbackButton)
-  feedbackButton.id = 'feedbackButton'
-  feedbackButton.style = 'float: right; margin-right: 8px; cursor: pointer; line-height: 60px'
-  feedbackButton.innerText = 'Send feedback'
-  feedbackButton.className = 'navbar-content'
-  feedbackButton.onpointerdown = function() {
-    var feedback = prompt('Provide feedback:')
-    if (feedback) {
-      sendFeedback(feedback)
-    }
-  }
-
-  var separator = document.createElement('label')
-  navbar.appendChild(separator)
-  separator.style = 'float: right; line-height: 60px; padding-left: 6px; padding-right: 6px'
-  separator.className = 'navbar-content'
-  separator.innerText = '|'
-
-  var sourceLink = document.createElement('label')
-  navbar.appendChild(sourceLink)
-  sourceLink.style = 'float: right; line-height: 60px; cursor: pointer'
-  sourceLink.innerText = 'Source code'
-  sourceLink.className = 'navbar-content'
-  sourceLink.onpointerdown = function() {window.open('https://github.com/jbzdarkid/jbzdarkid.github.io', '_blank')}
-
-  var collapsedSettings = drawSymbol({'type': 'plus', 'width':20, 'height':20})
-  navbar.appendChild(collapsedSettings)
-  collapsedSettings.style = 'width: 20px; height: 20px; position: absolute; left: 0; cursor: pointer'
-  collapsedSettings.style.border = '2px solid ' + window.BORDER
-  collapsedSettings.id = 'collapsedSettings'
-  collapsedSettings.onpointerdown = function() {
-    this.style.display = 'none'
-    var expandedSettings = document.getElementById('expandedSettings')
-    expandedSettings.style.display = null
-    window.settings.expanded = 'true'
-  }
-
-  var expandedSettings = document.createElement('div')
-  navbar.appendChild(expandedSettings)
-  expandedSettings.style = 'width: 300px; position: absolute; left: 0; display: none; padding: 10px'
-  expandedSettings.style.border = '2px solid ' + window.BORDER
-  expandedSettings.style.background = window.PAGE_BACKGROUND
-  expandedSettings.id = 'expandedSettings'
-
-  var minus = drawSymbol({'type':'minus', 'width':20, 'height':20})
-  minus.style = 'width: 20px; height: 20px; cursor: pointer; position: absolute; top: 0; left: 0'
-  expandedSettings.appendChild(minus)
-  minus.onpointerdown = function() {
-    this.parentElement.style.display = 'none'
-    var collapsedSettings = document.getElementById('collapsedSettings')
-    collapsedSettings.style.display = null
-    window.settings.expanded = 'false'
-  }
-
-  if (window.settings.expanded == 'true') {
-    collapsedSettings.onpointerdown()
-  }
-
-  // Now, for the contents of the settings
-  var settingsLabel = document.createElement('label')
-  expandedSettings.appendChild(settingsLabel)
-  settingsLabel.innerText = 'settings'
-  settingsLabel.style = 'line-height: 0px' // Attach to the top
-
-  expandedSettings.appendChild(document.createElement('br'))
-  expandedSettings.appendChild(document.createElement('br'))
-
-  // Theme
-  document.body.style.color = window.TEXT_COLOR
-  document.body.style.background = window.PAGE_BACKGROUND
-  var themeButton = document.createElement('button')
-  expandedSettings.appendChild(themeButton)
-  if (window.settings.theme == 'night') {
-    themeButton.innerText = 'Night theme'
-    themeButton.onpointerdown = function() {
-      window.settings.theme = 'light'
-      location.reload()
-    }
-  } else if (window.settings.theme == 'light') {
-    themeButton.innerText = 'Light theme'
-    themeButton.onpointerdown = function() {
-      window.settings.theme = 'night'
-      location.reload()
-    }
-  }
-
-  expandedSettings.appendChild(document.createElement('br'))
-
-  // Sensitivity
-  var sensLabel = document.createElement('label')
-  expandedSettings.appendChild(sensLabel)
-  sensLabel.htmlFor = 'sens'
-  sensLabel.innerText = 'Mouse Speed 2D'
-
-  var sens = document.createElement('input')
-  expandedSettings.appendChild(sens)
-  sens.type = 'range'
-  sens.id = 'sens'
-  sens.min = '0.1'
-  sens.max = '1.3'
-  sens.step = '0.1'
-  sens.value = window.settings.sensitivity
-  sens.onchange = function() {
-    window.settings.sensitivity = this.value
-  }
-  sens.style.backgroundImage = 'linear-gradient(to right, ' + window.ALT_BACKGROUND + ', ' + window.ACTIVE_COLOR + ')'
-
-  // Volume
-  var volumeLabel = document.createElement('label')
-  expandedSettings.appendChild(volumeLabel)
-  volumeLabel.htmlFor = 'volume'
-  volumeLabel.innerText = 'Volume'
-
-  var volume = document.createElement('input')
-  expandedSettings.appendChild(volume)
-  volume.type = 'range'
-  volume.id = 'volume'
-  volume.min = '0'
-  volume.max = '0.24'
-  volume.step = '0.02'
-  volume.value = parseFloat(window.settings.volume)
-  volume.onchange = function() {
-    window.settings.volume = this.value
-  }
-  volume.style.backgroundImage = 'linear-gradient(to right, ' + window.ALT_BACKGROUND + ', ' + window.ACTIVE_COLOR + ')'
-
-  // Custom mechanics -- disabled for now
-  window.settings.customMechanics = false
-  /*
-  var customMechanics = createCheckbox()
-  expandedSettings.appendChild(customMechanics)
-  customMechanics.id = 'customMechanics'
-  if (window.settings.customMechanics == 'true') {
-    customMechanics.style.background = window.BORDER
-    customMechanics.checked = true
-  }
-
-  customMechanics.onpointerdown = function() {
-    this.checked = !this.checked
-    this.style.background = (this.checked ? window.BORDER : window.PAGE_BACKGROUND)
-    window.settings.customMechanics = this.checked
-    window.location.reload()
-  }
-
-  var mechLabel = document.createElement('label')
-  expandedSettings.appendChild(mechLabel)
-  mechLabel.style.marginLeft = '6px'
-  mechLabel.htmlFor = 'customMechanics'
-  mechLabel.innerText = 'Custom mechanics'
-  */
-}
-
 // Automatically solve the puzzle
 window.solvePuzzle = function() {
   if (window.setSolveMode) window.setSolveMode(false)
@@ -0,0 +1,5 @@
+$.ajaxSetup({
+  headers: {
+    'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
+  }
+});
@@ -0,0 +1,91 @@
+#wrap {
+
+}
+
+h1 {
+  text-align: center;
+}
+
+#trace-settings {
+  margin: 1em auto;
+  width: 540px;
+
+  summary {
+    text-align: center;
+  }
+}
+
+#sens, #volume {
+  background-image: linear-gradient(to right, #EEE, #555);
+}
+
+/* Slider control main bar */
+input[type="range"] {
+  appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  border-radius: 3px;
+  height: 15px;
+  margin-bottom: 5px;
+  margin-top: 5px;
+  outline: none;
+  width: 100%;
+}
+/* Slider control icon */
+input[type="range"]::-webkit-slider-thumb {
+  appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  background: image-url('wittle/slider.png');
+  background-size: 17px 33px;
+  height: 33px;
+  width: 17px;
+}
+input[type="range"]::-moz-range-thumb {
+  appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  background: image-url('wittle/slider.png');
+  background-size: 17px 33px;
+  height: 33px;
+  width: 17px;
+}
+input[type="range"]::-ms-thumb {
+  appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  background: image-url('wittle/slider.png');
+  background-size: 17px 33px;
+  height: 33px;
+  width: 17px;
+}
+
+#submission-form {
+  margin: 1em auto;
+  width: 540px;
+  text-align: center;
+
+  form {
+    border: 1px solid black;
+    width: max-content;
+    padding: 0 2em;
+    margin: 0 auto;
+  }
+}
+
+#scores {
+  display: flex;
+  
+  div {
+    flex: 0 0 48%;
+
+    h2 {
+      text-align: center;
+    }
+    
+    ol {
+      width: max-content;
+      margin: 0 auto;
+    }
+  }
+}