From 48a86cea74527dbdb41d8a994890adab17fd4d93 Mon Sep 17 00:00:00 2001
From: He4eT <He4eT@oddsquat.org>
Date: Thu, 15 Aug 2024 20:47:15 +0200
Subject: [PATCH] options: load and save params

---
 pages/options/options.html | 20 ++++++++---------
 pages/options/options.js   | 35 +++++++++++++++++++++++++++++-
 scripts/params.js          | 44 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 88 insertions(+), 11 deletions(-)
 create mode 100644 scripts/params.js
diff --git a/pages/options/options.html b/pages/options/options.html
index 7bb0b0c..1d86159 100644
--- a/pages/options/options.html
+++ b/pages/options/options.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Form Example</title>
+    <title>Milje 2077 Settings</title>
     <style>
     .form {
       width: 100%;
@@ -37,15 +37,15 @@
       <div class="form-group">
         <label for="randomSeed">
           <strong>Pattern Seed</strong>
-          <small>Set to 0 for the "random" seed</small>
+          <small>Set to 0 for the "random" seed (Default: 0)</small>
         </label>
-        <input type="number" id="randomSeed" name="randomSeed" min="1" step="1" required>
+        <input type="number" id="randomSeed" name="randomSeed" min="0" step="1" required>
       </div>
 
       <div class="form-group">
         <label for="halfPatternSize">
           <strong>Pattern Size</strong>
-          <small>The pattern will be mirrored horizontally and vertically</small>
+          <small>The pattern will be mirrored horizontally and vertically (Default: 16)</small>
         </label>
         <input type="number" id="halfPatternSize" name="halfPatternSize" min="1" step="1" required>
       </div>
@@ -53,7 +53,7 @@
       <div class="form-group">
         <label for="scaleFactor">
           <strong>Scale Factor</strong>
-          <small>Size of the smallest dot in the pattern</small>
+          <small>Size of the smallest dot in the pattern (Default: 16)</small>
         </label>
         <input type="number" id="scaleFactor" name="scaleFactor" min="1" step="1" required>
       </div>
@@ -61,7 +61,7 @@
       <div class="form-group">
         <label for="gridSize">
           <strong>Grid Size</strong>
-          <small>Additional grid for the pattern</small>
+          <small>Additional grid for the pattern (Default: 3)</small>
         </label>
         <input type="number" id="gridSize" name="gridSize" min="1" step="1" required>
       </div>
@@ -69,7 +69,7 @@
       <div class="form-group">
         <label for="density">
           <strong>Density</strong>
-          <small>Probability of holes</small>
+          <small>Probability of holes (Default: 0.5)</small>
         </label>
         <input type="number" id="densityValue" name="densityValue" min="0" max="1" step="0.1" required>
         <input type="range" id="density" name="density" min="0" max="1" step="0.1" value="0" class="color-slider">
@@ -80,7 +80,7 @@
       <div class="form-group">
         <label for="red">
           <strong>Red</strong>
-          <small></small>
+          <small>(Default: 255)</small>
         </label>
         <input type="number" id="redValue" name="redValue" min="0" max="255" value="0" step="1">
         <input type="range" id="red" name="red" min="0" max="255" value="0" class="color-slider">
@@ -89,7 +89,7 @@
       <div class="form-group">
         <label for="green">
           <strong>Green</strong>
-          <small></small>
+          <small>(Default: 255)</small>
         </label>
         <input type="number" id="greenValue" name="greenValue" min="0" max="255" value="0" step="1">
         <input type="range" id="green" name="green" min="0" max="255" value="0" class="color-slider">
@@ -98,7 +98,7 @@
       <div class="form-group">
         <label for="blue">
           <strong>Blue</strong>
-          <small></small>
+          <small>(Default: 255)</small>
         </label>
         <input type="number" id="blueValue" name="blueValue" min="0" max="255" value="0" step="1">
         <input type="range" id="blue" name="blue" min="0" max="255" value="0" class="color-slider">
diff --git a/pages/options/options.js b/pages/options/options.js
index 0b14a61..2a40fb9 100644
--- a/pages/options/options.js
+++ b/pages/options/options.js
@@ -1 +1,34 @@
-// browser.storage.local.set({'params': {scaleFactor: 16}})
+import {
+  fields,
+  assureParams,
+  getParamsFromStorage,
+  setParamsToStorage,
+} from '../../scripts/params.js'
+
+Promise.resolve()
+  .then(getParamsFromStorage)
+  .then(assureParams)
+  .then(fillForm)
+  .then(addFormHandler)
+
+function fillForm (params) {
+  Object.entries(params).forEach(([key, value]) => {
+    const input = document.getElementById(key)
+    input.value = value
+    input.dispatchEvent(new Event('input'))
+  })
+}
+
+function addFormHandler () {
+  const form = document.getElementById('settingsForm')
+  form.onsubmit = (e) => {
+    e.preventDefault()
+
+    const formData = new FormData(e.target)
+    const entries = [...formData.entries()]
+      .filter(([key]) => fields.includes(key))
+    const params = Object.fromEntries(entries)
+
+    setParamsToStorage(params)
+  }
+}
diff --git a/scripts/params.js b/scripts/params.js
new file mode 100644
index 0000000..240f8ce
--- /dev/null
+++ b/scripts/params.js
@@ -0,0 +1,44 @@
+import { browser } from './browser.js'
+
+export const fields = [
+  'randomSeed',
+  'halfPatternSize',
+  'scaleFactor',
+  'gridSize',
+  'density',
+  'red',
+  'green',
+  'blue',
+]
+
+export function getParamsFromStorage () {
+  return browser.storage.local.get(['params'])
+    .then(({params}) => params)
+}
+
+export function setParamsToStorage (params) {
+  return browser.storage.local.set({params})
+}
+
+export function assureParams(params) {
+  const assureNumber = (rawValue) => (defaultValue) => (min, max) => {
+    let value = Number(rawValue)
+
+    if (isNaN(value)) return defaultValue
+    value = Math.max(min, value)
+    value = Math.min(max, value)
+
+    return value
+  }
+
+  return {
+    randomSeed: assureNumber(params.randomSeed)(0)(0, Infinity),
+    halfPatternSize: assureNumber(params.halfPatternSize)(16)(0, Infinity),
+    scaleFactor: assureNumber(params.scaleFactor)(16)(0, Infinity),
+    gridSize: assureNumber(params.gridSize)(3)(0, Infinity),
+    density: assureNumber(params.density)(0.5)(0, 1),
+    red: assureNumber(params.red)(255)(0, 255),
+    green: assureNumber(params.green)(255)(0, 255),
+    blue: assureNumber(params.blue)(255)(0, 255),
+  }
+}
