Improve logic
This commit is contained in:
parent
38125e5a3e
commit
c18078c43f
41
index.html
41
index.html
|
@ -345,7 +345,7 @@
|
||||||
lightBlue: "#b8d7e2",
|
lightBlue: "#b8d7e2",
|
||||||
lightBlurple: "#b5c5e2",
|
lightBlurple: "#b5c5e2",
|
||||||
}
|
}
|
||||||
const colorSchemes = {
|
const colorSchemes = new Map(Object.entries({
|
||||||
light: {
|
light: {
|
||||||
textPrimary: colors.faffPink,
|
textPrimary: colors.faffPink,
|
||||||
textShadow: colors.unnamedBlue,
|
textShadow: colors.unnamedBlue,
|
||||||
|
@ -376,7 +376,7 @@
|
||||||
background: colors.lightBlue,
|
background: colors.lightBlue,
|
||||||
backgroundLucy: colors.lightBlurple,
|
backgroundLucy: colors.lightBlurple,
|
||||||
}
|
}
|
||||||
}
|
}))
|
||||||
|
|
||||||
const form = document.getElementById("settings")
|
const form = document.getElementById("settings")
|
||||||
const colorSchemeInputs = document.getElementById("colorSchemeInputs")
|
const colorSchemeInputs = document.getElementById("colorSchemeInputs")
|
||||||
|
@ -399,35 +399,36 @@
|
||||||
const patternLucyRotation = +formData.get("patternLucyRotationInput")
|
const patternLucyRotation = +formData.get("patternLucyRotationInput")
|
||||||
const winkingLucyLEnabled = !!formData.get("winkingLucyLEnabledInput")
|
const winkingLucyLEnabled = !!formData.get("winkingLucyLEnabledInput")
|
||||||
const winkingLucyREnabled = !!formData.get("winkingLucyREnabledInput")
|
const winkingLucyREnabled = !!formData.get("winkingLucyREnabledInput")
|
||||||
const colorSchemeName = formData.get("colorSchemeInput")
|
const colorSchemeName = `${formData.get("colorSchemeInput")}`
|
||||||
const isCustomColorScheme = colorSchemeName === "custom"
|
const isCustomColorScheme = colorSchemeName === "custom"
|
||||||
if (isCustomColorScheme) colorSchemeInputs.classList.remove("hidden")
|
|
||||||
else colorSchemeInputs.classList.add("hidden")
|
|
||||||
const colorScheme = isCustomColorScheme ? {
|
const colorScheme = isCustomColorScheme ? {
|
||||||
textPrimary: formData.get("textPrimaryColorInput"),
|
textPrimary: `${formData.get("textPrimaryColorInput")}`,
|
||||||
textShadow: formData.get("textShadowColorInput"),
|
textShadow: `${formData.get("textShadowColorInput")}`,
|
||||||
lucy: formData.get("lucyColorInput"),
|
lucy: `${formData.get("lucyColorInput")}`,
|
||||||
lucyFace: formData.get("lucyFaceColorInput"),
|
lucyFace: `${formData.get("lucyFaceColorInput")}`,
|
||||||
lambda: formData.get("lambdaColorInput"),
|
lambda: `${formData.get("lambdaColorInput")}`,
|
||||||
outline: formData.get("outlineColorInput"),
|
outline: `${formData.get("outlineColorInput")}`,
|
||||||
background: formData.get("backgroundColorInput"),
|
background: `${formData.get("backgroundColorInput")}`,
|
||||||
backgroundLucy: formData.get("backgroundLucyColorInput"),
|
backgroundLucy: `${formData.get("backgroundLucyColorInput")}`,
|
||||||
} : colorSchemes[colorSchemeName]
|
} : colorSchemes.get(colorSchemeName)
|
||||||
const vignetteEnabled = !!formData.get("vignetteEnabledInput")
|
const vignetteEnabled = !!formData.get("vignetteEnabledInput")
|
||||||
if (vignetteEnabled) vignetteInputs.classList.remove("hidden")
|
const vignetteColor = `${formData.get("vignetteColorInput")}`
|
||||||
else vignetteInputs.classList.add("hidden")
|
|
||||||
const vignetteColor = vignetteEnabled ? formData.get("vignetteColorInput") : undefined
|
|
||||||
const vignetteStart = +formData.get("vignetteStartInput")
|
const vignetteStart = +formData.get("vignetteStartInput")
|
||||||
const vignetteEnd = +formData.get("vignetteEndInput")
|
const vignetteEnd = +formData.get("vignetteEndInput")
|
||||||
const vignetteBlendMode = formData.get("vignetteBlendModeInput")
|
const vignetteBlendMode = `${formData.get("vignetteBlendModeInput")}`
|
||||||
const svg = createSVG({ width, height, logoScale, logoRotation, patternScale, patternSpacing, patternRotation, patternLucyRotation, winkingLucyLEnabled, winkingLucyREnabled, colorScheme, vignetteEnabled, vignetteColor, vignetteStart, vignetteEnd, vignetteBlendMode })
|
const props = { width, height, logoScale, logoRotation, patternScale, patternSpacing, patternRotation, patternLucyRotation, winkingLucyLEnabled, winkingLucyREnabled, colorScheme, vignetteEnabled, vignetteColor, vignetteStart, vignetteEnd, vignetteBlendMode }
|
||||||
return { width, height, svg }
|
const svg = createSVG(props)
|
||||||
|
return { ...props, colorSchemeName, isCustomColorScheme, svg }
|
||||||
}
|
}
|
||||||
|
|
||||||
let curData = getFormData()
|
let curData = getFormData()
|
||||||
|
|
||||||
const updatePreview = () => {
|
const updatePreview = () => {
|
||||||
curData = getFormData()
|
curData = getFormData()
|
||||||
|
if (curData.isCustomColorScheme) colorSchemeInputs.classList.remove("hidden")
|
||||||
|
else colorSchemeInputs.classList.add("hidden")
|
||||||
|
if (curData.vignetteEnabled) vignetteInputs.classList.remove("hidden")
|
||||||
|
else vignetteInputs.classList.add("hidden")
|
||||||
preview.innerHTML = curData.svg
|
preview.innerHTML = curData.svg
|
||||||
}
|
}
|
||||||
updatePreview()
|
updatePreview()
|
||||||
|
|
Loading…
Reference in New Issue