More 🍅

_includes/nav.html

@@ -55,21 +55,28 @@
 <div id="field"></div>
 <div class="field-ctrl tucked">
 	<div class="field-ctrl-toggle">
-		Got stuck?
+		🍅 Got stuck?
 	</div>
 
 	<div class="field-ctrl-main">
+		<div class="field-ctrl-info">
+			<span>
+				Aim for your target!
+			</span>
+			<button id="field-ctrl-lazer">Turn into lazer</button>
+			<button id="field-ctrl-default">Deafult</button>
+		</div>
 		<div>
 			<input id="field-variance" type="range" min="0" max="100" value="100" >
 			<label for="field-variance">Variance: 100</label>
 		</div>
 		<div>
-		<input id="field-gravity" type="range" min="0" max="1000" value="400" >
-		<label for="field-gravity">Gravity: 400</label>
+			<input id="field-gravity" type="range" min="0" max="1000" value="400" >
+			<label for="field-gravity">Gravity: 400</label>
 		</div>
 		<div>
-		<input id="field-init-vy" type="range" min="-200" max="200" value="-100" >
-		<label for="field-init-vy">Initial Velocity: -100</label>
+			<input id="field-init-vy" type="range" min="-200" max="200" value="-100" >
+			<label for="field-init-vy">Initial Velocity: -100</label>
 		</div>
 	</div>
 </div>

_src/lib/shoot.js

@@ -86,8 +86,11 @@ document.addEventListener('click', function(event) {
   cnt += 1;
   if(cnt === 10) {
     const ctrl = document.getElementsByClassName('field-ctrl')[0];
-    ctrl.classList.remove('tucked');
-    ctrl.classList.add('hidden');
+    window.localStorage.setItem('tomato-hint', 'true');
+    if(ctrl.classList.contains('tucked')) {
+      ctrl.classList.remove('tucked');
+      ctrl.classList.add('hidden');
+    }
   }
   
 }, {
@@ -120,6 +123,28 @@ function loop(ts) {
 
 requestAnimationFrame(loop);
 
+function setData(key, value) {
+  const input = document.getElementById(`field-${key}`);
+  input.value = value;
+  const ev = new Event('input', {
+    bubbles: true,
+    cancelable: true,
+  });
+  input.dispatchEvent(ev);
+}
+
+function lazerSettings() {
+  setData('variance', 0);
+  setData('gravity', 0);
+  setData('init-vy', 0);
+}
+
+function defaultSettings() {
+  setData('variance', 100);
+  setData('gravity', 400);
+  setData('init-vy', -100);
+}
+
 document.addEventListener('DOMContentLoaded', function() {
   const toggle = document.getElementsByClassName('field-ctrl-toggle')[0];
   toggle.addEventListener('click', function() {
@@ -127,11 +152,22 @@ document.addEventListener('DOMContentLoaded', function() {
     ctrl.classList.toggle('hidden');
   });
 
+  const defaultBtn = document.getElementById('field-ctrl-default');
+  defaultBtn.addEventListener('click', function() {
+    defaultSettings();
+  });
+
+  const lazer = document.getElementById('field-ctrl-lazer');
+  lazer.addEventListener('click', function() {
+    lazerSettings();
+  });
+
   const variance = document.getElementById('field-variance');
   variance.addEventListener('input', function() {
     VARIANCE = parseInt(variance.value);
     const varianceLabel = document.querySelector('label[for="field-variance"]');
     varianceLabel.innerText = `Variance: ${VARIANCE}`;
+    window.localStorage.setItem('tomato-variance', VARIANCE);
   });
 
   const gravity = document.getElementById('field-gravity');
@@ -139,6 +175,7 @@ document.addEventListener('DOMContentLoaded', function() {
     GRAVITY = parseInt(gravity.value);
     const gravityLabel = document.querySelector('label[for="field-gravity"]');
     gravityLabel.innerText = `Gravity: ${GRAVITY}`;
+    window.localStorage.setItem('tomato-gravity', GRAVITY);
   });
 
   const init_vy = document.getElementById('field-init-vy');
@@ -146,5 +183,16 @@ document.addEventListener('DOMContentLoaded', function() {
     INIT_VY = parseInt(init_vy.value);
     const initVyLabel = document.querySelector('label[for="field-init-vy"]');
     initVyLabel.innerText = `Initial Velocity: ${INIT_VY}`;
+    window.localStorage.setItem('tomato-init-vy', INIT_VY);
   });
+
+  // Recover stored settings
+  setData('variance', parseInt(window.localStorage.getItem('tomato-variance')) || 100);
+  setData('gravity', parseInt(window.localStorage.getItem('tomato-gravity')) || 400);
+  setData('init-vy', parseInt(window.localStorage.getItem('tomato-init-vy')) || -100);
+  if(window.localStorage.getItem('tomato-hint') === 'true') {
+    const ctrl = document.getElementsByClassName('field-ctrl')[0];
+    ctrl.classList.remove('tucked');
+    ctrl.classList.add('hidden');
+  }
 });

_src/styles/global.scss

@@ -302,3 +302,14 @@ body {
 .field-ctrl.hidden {
   transform: translateY(calc(100% - 50px));
 }
+
+.field-ctrl-info {
+  display: flex;
+  align-items: center;
+  > span {
+    flex: 1;
+  }
+  button {
+    margin-left: 10px;
+  }
+}