rose/tic-tac-toe-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

comments

Browse Source
This commit is contained in:
AUnicornWithNoLife 2021-07-10 15:29:11 +01:00
parent 9aaa5a6f49
commit ad2aad5a64
1 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/theme.js
View File

@ -2,28 +2,34 @@ class theme
{ {
constructor(back, object, highlight, text, win, loose, pre) constructor(back, object, highlight, text, win, loose, pre)
{ {
this.back = back; this.back = back; // background
this.object = object; this.object = object; // button color
this.highlight = highlight; this.highlight = highlight; // when button is hovered
this.text = text; this.text = text; // text
this.win = win; this.win = win; // win background
this.loose = loose; this.loose = loose; // loose background
this.predict = pre; this.predict = pre; // prediction outline
} }
} }
// theme definitions
const themes = const themes =
{ {
'orange': new theme('#231F20', '#ec5020', '#fa6d42', '#ffffff', '#9DB17C', '#b86868', '#9DB17C'), 'orange': new theme('#231F20', '#ec5020', '#fa6d42', '#ffffff', '#9DB17C', '#b86868', '#9DB17C'), // main theme
'greyscale': new theme('#000000', '#555555', '#AAAAAA', '#FFFFFF', '#CCCCCC', '#333333', '#CCCCCC') 'greyscale': new theme('#000000', '#555555', '#AAAAAA', '#FFFFFF', '#CCCCCC', '#333333', '#CCCCCC') // test theme, but not too bad lol
} }
// once theme has been added to themes, add it here so it is added to the onscreen picker
const themenames = const themenames =
[ [
'orange', 'orange',
'greyscale' 'greyscale'
] ]
// setup the onscreen theme selector
function setupTheme() function setupTheme()
{ {
themenames.forEach(function(val) themenames.forEach(function(val)
@ -35,11 +41,15 @@ function setupTheme()
}); });
} }
// update scene from onscreen scene selector
function updateTheme() function updateTheme()
{ {
setTheme(themesel.options[themesel.selectedIndex].value); setTheme(themesel.options[themesel.selectedIndex].value);
} }
// set scene data in CSS
function setTheme(name) function setTheme(name)
{ {
root.style.setProperty('--theme-back', themes[name].back); root.style.setProperty('--theme-back', themes[name].back);