{
+ constructor(props: IProps) {
+ super(props)
+
+ this.state = {
+ toggled: false
+ }
+ }
+
+ static getDerivedStateFromProps(props: IProps, state: IState) {
+ return { toggled: props.data.toggled || state.toggled }
+ }
+
+ async componentDidMount() {
+ const data = this.props.data
+
+ if(this.props.type == 'checkbox')
+ this.setState({ toggled: data.toggled || false })
+ }
+
+ async onChange() {
+ // Change toggled state if needed.
+ if(this.props.type == 'checkbox')
+ this.setState({
+ toggled: !this.state.toggled
+ })
+
+ if(!this.props.jsCallback)
+ return
+ }
+
+ render() {
+ const data = this.props.data
+
+ switch(this.props.type) {
+ case 'input':
+ return (
+
+
+
+ )
+ case 'dropdown':
+ return (
+
+
+
+ )
+ case 'button':
+ return (
+
+
+
+ )
+ default:
+ return (
+
+
+
+ )
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/ui/components/menu/Options.tsx b/src/ui/components/menu/Options.tsx
index 4341fc5..50e6af5 100644
--- a/src/ui/components/menu/Options.tsx
+++ b/src/ui/components/menu/Options.tsx
@@ -7,11 +7,12 @@ import Tr, { getLanguages, translate } from '../../../utils/language'
import { setConfigOption, getConfig, getConfigOption } from '../../../utils/configuration'
import Checkbox from '../common/Checkbox'
import Divider from './Divider'
-import { getThemeList } from '../../../utils/themes'
+import { getTheme, getThemeList, ThemeList } from '../../../utils/themes'
import * as server from '../../../utils/server'
import './Options.css'
import BigButton from '../common/BigButton'
+import ThemeOptionValue from '../common/ThemeOptionValue'
interface IProps {
closeFn: () => void;
@@ -28,6 +29,8 @@ interface IState {
themes: string[]
theme: string
encryption: boolean
+
+ theme_object: ThemeList|null;
}
export default class Options extends React.Component {
@@ -44,7 +47,9 @@ export default class Options extends React.Component {
bg_url_or_path: '',
themes: ['default'],
theme: '',
- encryption: false
+ encryption: false,
+
+ theme_object: null
}
this.setGameExec = this.setGameExec.bind(this)
@@ -74,7 +79,9 @@ export default class Options extends React.Component {
bg_url_or_path: config.customBackground || '',
themes: (await getThemeList()).map(t => t.name),
theme: config.theme || 'default',
- encryption: await translate(encEnabled ? 'options.enabled' : 'options.disabled')
+ encryption: await translate(encEnabled ? 'options.enabled' : 'options.disabled'),
+
+ theme_object: (await getTheme(config.theme))
})
this.forceUpdate()
@@ -124,7 +131,7 @@ export default class Options extends React.Component {
}
async setCustomBackground(value: string) {
- const isUrl = /^(?:http(s)?:\/\/)/gm.test(value)
+ const isUrl = /^http(s)?:\/\//gm.test(value)
if (!value) return await setConfigOption('customBackground', '')
@@ -168,6 +175,8 @@ export default class Options extends React.Component {
}
render() {
+ const themeSettings = this.state.theme_object?.settings
+
return (
)
}
diff --git a/src/utils/dom.ts b/src/utils/dom.ts
new file mode 100644
index 0000000..f8ba56d
--- /dev/null
+++ b/src/utils/dom.ts
@@ -0,0 +1,31 @@
+import { setConfigOption } from './configuration'
+
+interface DOMMessage {
+ type: string
+ data: ConfigUpdate
+}
+
+interface ConfigUpdate {
+ setting: string
+ value: any
+}
+
+/**
+ * Parses a message received from the DOM.
+ * @param document The document.
+ * @param msg The message received from the DOM.
+ */
+export function parseMessageFromDOM(document: Document, msg: any): void {
+ msg = msg.detail
+
+ if(!msg || !msg.type || !msg.data)
+ return
+
+ switch(msg.type) {
+ case 'updateConfig':
+ if(!msg.data.setting || !msg.data.value)
+ return
+ setConfigOption(msg.data.setting, msg.data.value)
+ return
+ }
+}
\ No newline at end of file
diff --git a/src/utils/themes.ts b/src/utils/themes.ts
index 6e78587..8562ebf 100644
--- a/src/utils/themes.ts
+++ b/src/utils/themes.ts
@@ -1,7 +1,9 @@
-import { invoke } from '@tauri-apps/api'
-import { dataDir } from '@tauri-apps/api/path'
-import { convertFileSrc } from '@tauri-apps/api/tauri'
-import { getConfig, setConfigOption } from './configuration'
+import {invoke} from '@tauri-apps/api'
+import {dataDir} from '@tauri-apps/api/path'
+import {convertFileSrc} from '@tauri-apps/api/tauri'
+import {getConfig, setConfigOption} from './configuration'
+
+import {InputSettings} from '../ui/components/common/ThemeOptionValue'
interface Theme {
name: string
@@ -13,6 +15,16 @@ interface Theme {
css: string[]
js: string[]
}
+
+ // Custom settings.
+ settings?: {
+ label: string // The setting's label.
+ type: string // The setting's type.
+ data: InputSettings // The data for the setting.
+
+ className?: string // The name of the class this setting should take.
+ jsCallback?: string // The name of the callback method that should be invoked.
+ }[]
customBackgroundURL?: string
customBackgroundPath?: string
@@ -23,7 +35,7 @@ interface BackendThemeList {
path: string
}
-interface ThemeList extends Theme {
+export interface ThemeList extends Theme {
path: string
}
@@ -37,6 +49,7 @@ const defaultTheme = {
},
path: 'default'
}
+
export async function getThemeList() {
// Do some invoke to backend to get the theme list
const themes = await invoke('get_theme_list', {
@@ -77,6 +90,11 @@ export async function getTheme(name: string) {
return themes.find(t => t.name === name) || defaultTheme
}
+export async function getSelectedTheme() {
+ const config = await getConfig()
+ return await getTheme(config.theme)
+}
+
export async function loadTheme(theme: ThemeList, document: Document) {
// Get config, since we will set the custom background in there
const config = await getConfig()