Add keyboard markers, shiftable sliders

2 files changed, 32 insertions, 4 deletions

diff --git a/lib/factories/global.js b/lib/factories/global.js
index c601bdb..bf0360d 100644
--- a/lib/factories/global.js
+++ b/lib/factories/global.js
@@ -21,7 +21,7 @@ export function camera() {
   entity.addComponent(new EulerAngle());
   entity.addComponent(new Velocity({
     x: 0,
-    y: Math.PI / 180,
+    y: Math.PI / 30,
     z: 0,
   }));
   entity.addComponent(new Radius({
diff --git a/lib/factories/ui.js b/lib/factories/ui.js
index 27ff6eb..c220f67 100644
--- a/lib/factories/ui.js
+++ b/lib/factories/ui.js
@@ -1,25 +1,53 @@
 export function settingsContainer({id, label, level=2}) {
 
-  const container = document.createElement('div');
+  const container = document.createElement('section');
   container.id = id;
   container.innerHTML = `<h${level}>${label}</h${level}>`;
   return container;
 };
 
-export function slider({min, max, step, get, set, label = '', className}) {
+export function slider({
+  id,
+  min,
+  max,
+  step,
+  shiftStep,
+  get,
+  set,
+  label = '',
+  className
+}) {
 
-  const sliderContainer = document.createElement('div');
+  const sliderContainer = document.createElement('section');
   sliderContainer.classList.add('slider');
   sliderContainer.classList.add(className);
   const labelElement = document.createElement('label');
+  labelElement.setAttribute('for', id);
   labelElement.innerHTML = label;
   const slider = document.createElement('input');
+  slider.id = id;
   slider.type = 'range';
   slider.min = min;
   slider.max = max;
   slider.step = step;
   slider.value = get().toString();
 
+  if (shiftStep) {
+    document.addEventListener('keydown', function(event) {
+      if (event.shiftKey) {
+        slider.classList.add('shifted');
+        slider.step = shiftStep;
+      }
+    });
+
+    document.addEventListener('keyup', function(event) {
+      if (event.key === 'Shift') {
+        slider.classList.remove('shifted');
+        slider.step = step;
+      }
+    });
+  }
+
   slider.addEventListener('input', () => set(slider.value));
 
   sliderContainer.appendChild(labelElement);