mirror of
https://github.com/He4eT/browser-milje-2077.git
synced 2026-05-04 17:07:24 +00:00
options: load and save params
This commit is contained in:
parent
44e1e0e2fd
commit
48a86cea74
3 changed files with 88 additions and 11 deletions
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
44
scripts/params.js
Normal file
44
scripts/params.js
Normal file
|
|
@ -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),
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue