4aiman/JS-DualShock3-Monitor
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added styling. Fixed style selection on a fresh page. Known issues: 1. RT on xbox won't show pressure; 2. Xbox.css isn't named proparly, will probably fail to load on Linux/Mac.

Browse source
This commit is contained in:
ezwrk 2023-08-27 19:22:35 +03:00
commit dbedb0a81a
7 changed files with 413 additions and 396 deletions
Download patch file Download diff file Expand all files Collapse all files

11
DS.css
View file

@ -1,16 +1,15 @@
body { body {
background-color: darkslateblue; background-color: transparent;
} }
.button { .button {
border:1px solid rgba(50,50,50,1); border:1px solid rgba(var(--clr), var(--clg), var(--clb), var(--cla));
width:25px; width:25px;
height:25px; height:25px;
border-radius:13px; border-radius:13px;
display:inline-block; display:inline-block;
background: rgba(70,70,70,1);
padding:0px; padding:0px;
margin:px; margin:0px;
text-align:center; text-align:center;
vertical-align:middle; vertical-align:middle;
font-weight: bold; font-weight: bold;
@ -230,10 +229,6 @@ body {
background-image: none; background-image: none;
} }
#style_select {
position:absolute;
left: 410px;
}
.axisbox { .axisbox {

14
NES.css
View file

@ -1,16 +1,15 @@
body { body {
background-color: brown; background-color: transparent;
} }
.button { .button {
border:1px solid rgba(50,50,50,1); border:1px solid rgba(var(--clr), var(--clg), var(--clb), var(--cla));
width:31px; width:31px;
height:31px; height:31px;
border-radius:20px; border-radius:20px;
display:inline-block; display:inline-block;
background: rgba(70,70,70,1);
padding:0px; padding:0px;
margin:px; margin-left:42px;
text-align:center; text-align:center;
vertical-align:middle; vertical-align:middle;
font-weight: bold; font-weight: bold;
@ -223,10 +222,6 @@ body {
background-image: none; background-image: none;
} }
#style_select {
position:absolute;
left: 410px;
}
.axisbox { .axisbox {
display:none; display:none;
@ -256,10 +251,11 @@ body {
#controller_NES { #controller_NES {
display: block; display: block;
position: absolute; position: absolute;
left: 50px;
width:400px; width:400px;
height:400px; height:400px;
} }
#controller_XBOX { #controller_XBOX {
display: none; display: none;
} }

13
SNES.css
View file

@ -1,16 +1,15 @@
body { body {
background-color: darkcyan; background-color: transparent;
} }
.button { .button {
border:1px solid rgba(0,0,0,1); border:1px solid rgba(var(--clr), var(--clg), var(--clb), var(--cla));
width:26px; width:26px;
height:26px; height:26px;
border-radius:13px; border-radius:13px;
display:inline-block; display:inline-block;
background: rgba(70,70,70,1);
padding:0px; padding:0px;
margin:px; margin-left:42px;
text-align:center; text-align:center;
vertical-align:middle; vertical-align:middle;
font-weight: bold; font-weight: bold;
@ -86,7 +85,6 @@ body {
.button_12, .button_13, .button_14, .button_15 { .button_12, .button_13, .button_14, .button_15 {
border:0px; border:0px;
background:transparent;
height:25px; height:25px;
width:25px; width:25px;
} }
@ -183,10 +181,6 @@ body {
background-image: none; background-image: none;
} }
#style_select {
position:absolute;
left: 410px;
}
.axisbox { .axisbox {
display:none; display:none;
@ -209,6 +203,7 @@ body {
display: block; display: block;
visibility: visible; visibility: visible;
position: absolute; position: absolute;
left: 50px;
width:400px; width:400px;
height:400px; height:400px;
} }

11
Xbox.css
View file

@ -1,15 +1,17 @@
body { body {
background-color: darkgreen; background-color: transparent;
} }
.button { .button {
border:1px solid rgba(var(--clr), var(--clg), var(--clb), var(--cla));
width:25px; width:25px;
height:25px; height:25px;
display:inline-block; display:inline-block;
border: none; border: none;
padding:0px; padding:0px;
margin:px; margin-left:42px;
text-align:center; text-align:center;
vertical-align:middle; vertical-align:middle;
font-weight: bold; font-weight: bold;
@ -242,10 +244,6 @@ body {
background-image: none; background-image: none;
} }
#style_select {
position:absolute;
left: 410px;
}
.axisbox { .axisbox {
display:none; display:none;
@ -298,6 +296,7 @@ body {
#controller_XBOX { #controller_XBOX {
display: block; display: block;
position: absolute; position: absolute;
left: 50px;
width:400px; width:400px;
height:400px; height:400px;
} }

334
gpcon.js
View file

@ -21,17 +21,179 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE. SOFTWARE.
*/ */
let current_style = localStorage.getItem("gpcon_style") || "DS" // "globals"
// list all available styles
let available_styles = ['DS', 'NES', 'SNES', 'XBOX']
// get stored style
let current_style = localStorage.getItem("gpcon_style") || "NES"
let darkmode = localStorage.getItem("darkmode")
let buttons_border = localStorage.getItem("show_buttons_border")
let cbr = localStorage.getItem("cbr")
let cbg = localStorage.getItem("cbg")
let cbb = localStorage.getItem("cbb")
let cba = localStorage.getItem("cba")
let clr = localStorage.getItem("clr")
let clg = localStorage.getItem("clg")
let clb = localStorage.getItem("clb")
let cla = localStorage.getItem("cla")
if (darkmode == null) {
darkmode = true
} else {
darkmode = JSON.parse(darkmode)
}
if (buttons_border == null) {
buttons_border = true
} else {
buttons_border = JSON.parse(buttons_border)
}
// iterate over supported styles, check if the saved one is correct
let style_defined = false
for (let style of available_styles) {
if (style == current_style) {
style_defined = true
break
}
}
// default to 1st style if thre's something wrong with the setting
if (!style_defined) {
current_style=available_styles[0]
}
// called upon page loading // called upon page loading
function prep() { function prep() {
let page = document.getElementsByTagName("body")[0]
let controls = document.getElementById("controls")
let color_base_div = document.getElementById("color_base")
let color_lines_div = document.getElementById("color_lines")
let border_box = document.getElementById("border_box")
let buttons_border_element = document.getElementById("buttons_border")
border_box.addEventListener("change", border_box_change)
function border_box_change(event) {
let show_buttons_border = border_box.checked
console.log(show_buttons_border)
if (show_buttons_border){
buttons_border_element.style.border = "1px solid red"
} else {
buttons_border_element.style.border = "1px solid transparent"
}
localStorage.setItem("show_buttons_border", show_buttons_border)
}
let darkmode_box = document.getElementById("darkmode_box")
darkmode_box.addEventListener("change", darkmode_change)
function darkmode_change(event) {
let darkmode = darkmode_box.checked
if (darkmode) {
page.style.background = "rgba(0, 0, 0, 1)"
controls.style.color = "white"
color_base_div.style.borderColor = "white"
color_lines_div.style.borderColor = "white"
base_color = "rgba(0,0,0,1)"
line_color = "rgba(255,255,255,1)"
document.documentElement.style.setProperty(`--bbm`, "normal")
} else {
page.style.background = "rgba(255, 255, 255, 1)"
controls.style.color = "black"
color_base_div.style.borderColor = "black"
color_lines_div.style.borderColor = "black"
base_color = "rgba(255,255,255,1)"
line_color = "rgba(0,0,0,1)"
document.documentElement.style.setProperty(`--bbm`, "difference")
}
localStorage.setItem("darkmode", darkmode)
}
let red_slider_base = document.getElementById("red_slider_base")
let green_slider_base = document.getElementById("green_slider_base")
let blue_slider_base = document.getElementById("blue_slider_base")
let alpha_slider_base = document.getElementById("alpha_slider_base")
let red_input_base = document.getElementById("red_input_base")
let green_input_base = document.getElementById("green_input_base")
let blue_input_base = document.getElementById("blue_input_base")
let alpha_input_base = document.getElementById("alpha_input_base")
red_slider_base.addEventListener("input", base_color_change)
green_slider_base.addEventListener("input", base_color_change)
blue_slider_base.addEventListener("input", base_color_change)
alpha_slider_base.addEventListener("input", base_color_change)
function base_color_change() {
let r = red_slider_base.value
let g = green_slider_base.value
let b = blue_slider_base.value
let a = alpha_slider_base.value/100
let rgba = "rgba("+r+","+g+","+b+","+a+")"
color_base_div.style.background = rgba
red_input_base.value = r
green_input_base.value = g
blue_input_base.value = b
alpha_input_base.value = a
document.documentElement.style.setProperty(`--cbr`, r);
document.documentElement.style.setProperty(`--cbg`, g);
document.documentElement.style.setProperty(`--cbb`, b);
document.documentElement.style.setProperty(`--cba`, a);
localStorage.setItem("cbr",r)
localStorage.setItem("cbg",g)
localStorage.setItem("cbb",b)
localStorage.setItem("cba",a*100)
}
let red_slider_lines = document.getElementById("red_slider_lines")
let green_slider_lines = document.getElementById("green_slider_lines")
let blue_slider_lines = document.getElementById("blue_slider_lines")
let alpha_slider_lines = document.getElementById("alpha_slider_lines")
let red_input_lines = document.getElementById("red_input_lines")
let green_input_lines = document.getElementById("green_input_lines")
let blue_input_lines = document.getElementById("blue_input_lines")
let alpha_input_lines = document.getElementById("alpha_input_lines")
red_slider_lines.addEventListener("input", lines_color_change)
green_slider_lines.addEventListener("input", lines_color_change)
blue_slider_lines.addEventListener("input", lines_color_change)
alpha_slider_lines.addEventListener("input", lines_color_change)
function lines_color_change() {
let r = red_slider_lines.value
let g = green_slider_lines.value
let b = blue_slider_lines.value
let a = alpha_slider_lines.value/100
let rgba = "rgba("+r+","+g+","+b+","+a+")"
color_lines_div.style.background = rgba
red_input_lines.value = r
green_input_lines.value = g
blue_input_lines.value = b
alpha_input_lines.value = a
document.documentElement.style.setProperty(`--clr`, r);
document.documentElement.style.setProperty(`--clg`, g);
document.documentElement.style.setProperty(`--clb`, b);
document.documentElement.style.setProperty(`--cla`, a);
localStorage.setItem("clr",r)
localStorage.setItem("clg",g)
localStorage.setItem("clb",b)
localStorage.setItem("cla",a*100)
}
// gets style select element that controls the stylesheets // gets style select element that controls the stylesheets
let style_select = document.getElementById("style_select")
style_select.addEventListener("change", style_change) let DS_option = document.getElementById("DS_option")
let NES_option = document.getElementById("NES_option")
let SNES_option = document.getElementById("SNES_option")
let XBOX_option = document.getElementById("XBOX_option")
DS_option.addEventListener("click", style_change)
NES_option.addEventListener("click", style_change)
SNES_option.addEventListener("click", style_change)
XBOX_option.addEventListener("click", style_change)
// this changes style by deleting an old <link> element and creating a new one // this changes style by deleting an old <link> element and creating a new one
function style_change(event) { function style_change(event) {
console.log("sdd")
let head = document.getElementsByTagName( "head" )[0] let head = document.getElementsByTagName( "head" )[0]
for (let child of head.children) { for (let child of head.children) {
@ -41,23 +203,33 @@ function prep() {
} }
let link = document.createElement('link') let link = document.createElement('link')
link.href = style_select.value + ".css" link.href = event.srcElement.value + ".css"
link.rel = "stylesheet" link.rel = "stylesheet"
head.appendChild(link) head.appendChild(link)
current_style = style_select.value current_style = event.srcElement.value
localStorage.setItem("gpcon_style",style_select.value) // remember to save selected style localStorage.setItem("gpcon_style",event.srcElement.value) // remember to save selected style
console.log(link)
} }
// this loads last selected style or deaults to DS one document.getElementById(current_style+"_option").click()
for (let idx in style_select.options) { //style_change({srcElement: style_select.children[idx]})
if (style_select[idx].value == current_style) {
style_select.selectedIndex = idx red_slider_base.value = cbr
style_change() green_slider_base.value = cbg
break blue_slider_base.value = cbb
} alpha_slider_base.value = cba
}
red_slider_lines.value = clr
green_slider_lines.value = clg
blue_slider_lines.value = clb
alpha_slider_lines.value = cla
darkmode_box.checked = darkmode
border_box.checked = buttons_border
base_color_change()
lines_color_change()
darkmode_change()
border_box_change()
} }
@ -111,57 +283,61 @@ function onFrame() { // gets repeatedly executed
if (gp.buttons[j].pressed) { // if current button is pressed we can alter it's style if (gp.buttons[j].pressed) { // if current button is pressed we can alter it's style
if (j==8) { if (j==8) {
if (current_style == "DS") { if (current_style == "DS") {
buttEle.style.background='rgba(255,255,255,0.5)'; buttEle.style.background='rgba(255,255,255, 0.7)';
buttEle.innerHTML = "" buttEle.innerHTML = ""
} else if (current_style == "SNES") { } else if (current_style == "SNES") {
buttEle.style.background='rgba(255,255,255,0.5)'; buttEle.style.background='rgba(255,225,225, 0.7)';
buttEle.innerHTML = "" buttEle.innerHTML = ""
} else if (current_style == "NES") { } else if (current_style == "NES") {
buttEle.style.background='rgba(255,255,255,0.5)'; buttEle.style.background='rgba(255,255,255, 0.7)';
buttEle.innerHTML = "" buttEle.innerHTML = ""
} else if (current_style == "XBOX") { } else if (current_style == "XBOX") {
buttEle.style.background='rgba(255,255,255,0)'; buttEle.style.background='rgba(255,255,255,0)';
buttEle.innerHTML = '<svg id="button_8" select style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.25)" d="M 160 194 C 148 194 146 206 160 208 C 170 208 174 196 160 194 Z M 162 198 L 154 202 L 162 206 L 162 198 Z"></path></svg>'; buttEle.innerHTML = '<svg class="svg_button" id="button_8" select style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(255,255,255, 0.75)" d="M 160 194 C 148 194 146 206 160 208 C 170 208 174 196 160 194 Z M 162 198 L 154 202 L 162 206 L 162 198 Z"></path></svg>';
} }
} else if (j==9) { // the 'start' button (as well as any other non-round-shaped button) has to have it's innerHTML rewritten } else if (j==9) { // the 'start' button (as well as any other non-round-shaped button) has to have it's innerHTML rewritten
if (current_style == "DS") { if (current_style == "DS") {
buttEle.innerHTML = '<svg id="button_9_border"><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="rgba(250,250,250,0.5)" points="0,0 30,9 1,18 1,0"></polygon></svg>'; buttEle.innerHTML = '<svg class="svg_button" id="button_9_border"><polygon fill-rule="evenodd" stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(255,255,255, 0.75)" points="0,0 30,9 1,18 1,0"></polygon></svg>';
} else if (current_style == "SNES") { } else if (current_style == "SNES") {
buttEle.style.background='rgba(255,255,255,0.5)'; buttEle.style.background='rgba(255,255,255, 0.7)';
buttEle.innerHTML = "" buttEle.innerHTML = ""
} else if (current_style == "NES") { } else if (current_style == "NES") {
buttEle.style.background='rgba(255,255,255,0.5)'; buttEle.style.background='rgba(255,255,255, 0.7)';
buttEle.innerHTML = "" buttEle.innerHTML = ""
} else if (current_style == "XBOX") { } else if (current_style == "XBOX") {
buttEle.style.background='rgba(255,255,255,0)'; buttEle.style.background='rgba(255,255,255,0)';
buttEle.innerHTML = '<svg id="button_9" start style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.25)" d="M 240 194 C 228 194 228 208 240 208 C 250 208 256 194 240 194 Z M 238 198 L 238 206 L 246 202 Z"></path></svg>'; buttEle.innerHTML = '<svg class="svg_button" id="button_9" start style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(255,255,255, 0.75)" d="M 240 194 C 228 194 228 208 240 208 C 250 208 256 194 240 194 Z M 238 198 L 238 206 L 246 202 Z"></path></svg>';
} }
} else { // sure, this could've been coded better, but what the heck, it works } else { // sure, this could've been coded better, but what the heck, it works
if (j<=11) { // buttons with id lower that 12 are usually the round-shaped ones; on-stick buttons go here as well if (j<=11) { // buttons with id lower that 12 are usually the round-shaped ones; on-stick buttons go here as well
buttEle.style.background='linear-gradient(to top, rgba(255,255,255,0.5) '+val*100+'%, rgba(170,70,70,0.5) '+val*100+'%)';// gradient really helps to visualize partial presses if (current_style == "DS") {
buttEle.style.background='linear-gradient(to top, rgba(255,255,255,0.5) '+val*100+'%, rgba(170,70,70,0.5) '+val*100+'%)';// gradient really helps to visualize partial presses
} else {
buttEle.style.background='rgba(255, 255, 255, 0.75)';
}
buttEle.innerHTML = "" buttEle.innerHTML = ""
if (j==0) { if (j==0) {
if (current_style == "XBOX") { if (current_style == "XBOX") {
buttEle.style.background='rgba(255,25,55,0)'; buttEle.style.background='rgba(255,25,55,0)';
buttEle.innerHTML = '<svg id="button_0" cross style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.25)" d="M 308 216 C 294 216 294 236 310 234 C 322 234 328 214 308 216 Z "></path></svg>' buttEle.innerHTML = '<svg class="svg_button" id="button_0" cross style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(255,255,255, 0.75)" d="M 308 216 C 294 216 294 236 310 234 C 322 234 328 214 308 216 Z "></path></svg>'
} }
} }
if (j==1) { if (j==1) {
if (current_style == "XBOX") { if (current_style == "XBOX") {
buttEle.style.background='rgba(255,25,55,0)'; buttEle.style.background='rgba(255,25,55,0)';
buttEle.innerHTML = '<svg id="button_1" circle style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.25)" d="M 338 190 C 324 196 328 212 344 208 C 354 204 358 186 338 190 Z "></path></svg>' buttEle.innerHTML = '<svg class="svg_button" id="button_1" circle style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(255,255,255, 0.75)" d="M 338 190 C 324 196 328 212 344 208 C 354 204 358 186 338 190 Z "></path></svg>'
} }
} }
if (j==2) { if (j==2) {
if (current_style == "XBOX") { if (current_style == "XBOX") {
buttEle.style.background='rgba(255,25,55,0)'; buttEle.style.background='rgba(255,25,55,0)';
buttEle.innerHTML = '<svg id="button_2" square style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.25)" d="M 280 193 C 262 196 270 212 282 210 C 300 208 292.5 190.9 280 193 Z"></path></svg>' buttEle.innerHTML = '<svg class="svg_button" id="button_2" square style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(255,255,255, 0.75)" d="M 280 193 C 262 196 270 212 282 210 C 300 208 292.5 190.9 280 193 Z"></path></svg>'
} }
} }
if (j==3) { if (j==3) {
if (current_style == "XBOX") { if (current_style == "XBOX") {
buttEle.style.background='rgba(255,25,55,0)'; buttEle.style.background='rgba(255,25,55,0)';
buttEle.innerHTML = '<svg id="button_3" triangle style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.25)" d="M 308 166 C 296 172 300 192 316 186 C 330 182 326 160 308 166 Z"></path></svg>' buttEle.innerHTML = '<svg class="svg_button" id="button_3" triangle style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(255,255,255, 0.75)" d="M 308 166 C 296 172 300 192 316 186 C 330 182 326 160 308 166 Z"></path></svg>'
} }
} }
if (j==4) {//L1 if (j==4) {//L1
@ -170,8 +346,8 @@ function onFrame() { // gets repeatedly executed
} else if (current_style == "XBOX") { } else if (current_style == "XBOX") {
buttEle.style.background='rgba(255,25,55,0)'; buttEle.style.background='rgba(255,25,55,0)';
//buttEle.innerHTML = '<svg L1 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><linearGradient id="GradientBL1" x1="0" x2="0" y1="0" y2="1"><stop offset="0%" stop-color="rgba(250,250,250,0.5)"/><stop offset="'+val+'" stop-color="rgba(170,70,70,0.5)"/></linearGradient><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="url(#GradientBL1)" d="M 120 138 L 122 124 C 120 122 116 124 114 118 C 92 118 82 118 58 130 L 52 138 L 52 148 C 72 142 86 132 120 138 Z "></path></svg>' //buttEle.innerHTML = '<svg class="svg_button" L1 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><linearGradient id="GradientBL1" x1="0" x2="0" y1="0" y2="1"><stop offset="0%" stop-color="rgba(250,250,250,0.5)"/><stop offset="'+val+'" stop-color="rgba(170,70,70,0.5)"/></linearGradient><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="url(#GradientBL1)" d="M 120 138 L 122 124 C 120 122 116 124 114 118 C 92 118 82 118 58 130 L 52 138 L 52 148 C 72 142 86 132 120 138 Z "></path></svg>'
buttEle.innerHTML = '<svg id="button_4" L1 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.25)" d="M 120 138 L 122 124 C 120 122 116 124 114 118 C 92 118 82 118 58 130 L 52 138 L 52 148 C 72 142 86 132 120 138 Z "></path></svg>' buttEle.innerHTML = '<svg class="svg_button" id="button_4" L1 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(255,255,255, 0.75)" d="M 120 138 L 122 124 C 120 122 116 124 114 118 C 92 118 82 118 58 130 L 52 138 L 52 148 C 72 142 86 132 120 138 Z "></path></svg>'
} }
} }
if (j==6) {//L2 if (j==6) {//L2
@ -180,8 +356,8 @@ function onFrame() { // gets repeatedly executed
} else if (current_style == "XBOX") { } else if (current_style == "XBOX") {
buttEle.style.background='rgba(255,25,55,0)'; buttEle.style.background='rgba(255,25,55,0)';
//buttEle.innerHTML = '<svg L2 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.25)" d="M 86 120 C 94 118 102 118 110 118 L 110 92 C 112 90 96 82 88 92 L 86 120 Z"></path></svg>' //buttEle.innerHTML = '<svg class="svg_button" L2 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.25)" d="M 86 120 C 94 118 102 118 110 118 L 110 92 C 112 90 96 82 88 92 L 86 120 Z"></path></svg>'
buttEle.innerHTML = '<svg id="button_6" L2 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><linearGradient id="GradientBL2" x1="0" x2="0" y1="0" y2="1"><stop offset="'+val+'" stop-color="rgba(250,250,250,0.25)"/><stop offset="'+val+'" stop-color="rgba(170,70,70,0.25)"/></linearGradient><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="url(#GradientBL2)" d="M 86 118 C 94 118 102 118 110 118 L 110 92 C 112 90 96 82 88 92 L 86 120 Z"></path></svg>' buttEle.innerHTML = '<svg class="svg_button" id="button_6" L2 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><linearGradient id="GradientBL2" x1="0" x2="0" y1="0" y2="1"><stop offset="'+val+'" stop-color="rgba(250,250,250,0.75)"/><stop offset="'+val+'" stop-color="rgba(var(--cbr), var(--cbg), var(--cbb), var(--cba))"/></linearGradient><path style="transform:scale(1)" stroke-width=1 stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="url(#GradientBL2)" d="M 86 118 C 94 118 102 118 110 118 L 110 92 C 112 90 96 82 88 92 L 86 120 Z"></path></svg>'
} }
} }
if (j==5) {//R1 if (j==5) {//R1
@ -190,8 +366,8 @@ function onFrame() { // gets repeatedly executed
} else if (current_style == "XBOX") { } else if (current_style == "XBOX") {
buttEle.style.background='rgba(255,25,55,0)'; buttEle.style.background='rgba(255,25,55,0)';
//buttEle.innerHTML = '<svg L1 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><linearGradient id="GradientBL1" x1="0" x2="0" y1="0" y2="1"><stop offset="0%" stop-color="rgba(250,250,250,0.5)"/><stop offset="'+val+'" stop-color="rgba(170,70,70,0.5)"/></linearGradient><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="url(#GradientBL1)" d="M 120 138 L 122 124 C 120 122 116 124 114 118 C 92 118 82 118 58 130 L 52 138 L 52 148 C 72 142 86 132 120 138 Z "></path></svg>' //buttEle.innerHTML = '<svg class="svg_button" L1 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><linearGradient id="GradientBL1" x1="0" x2="0" y1="0" y2="1"><stop offset="0%" stop-color="rgba(250,250,250,0.5)"/><stop offset="'+val+'" stop-color="rgba(170,70,70,0.5)"/></linearGradient><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="url(#GradientBL1)" d="M 120 138 L 122 124 C 120 122 116 124 114 118 C 92 118 82 118 58 130 L 52 138 L 52 148 C 72 142 86 132 120 138 Z "></path></svg>'
buttEle.innerHTML = '<svg id="button_5" R1 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.25)" d="M 278 124 C 282 124 282 118 286 118 C 308 116 322 120 342 132 L 346 138 L 346 148 C 326 140 302 130 278 138 L 278 124 Z "></path></svg>' buttEle.innerHTML = '<svg class="svg_button" id="button_5" R1 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(255,255,255, 0.75)" d="M 278 124 C 282 124 282 118 286 118 C 308 116 322 120 342 132 L 346 138 L 346 148 C 326 140 302 130 278 138 L 278 124 Z "></path></svg>'
} }
} }
if (j==7) {//R2 if (j==7) {//R2
@ -200,8 +376,8 @@ function onFrame() { // gets repeatedly executed
} else if (current_style == "XBOX") { } else if (current_style == "XBOX") {
buttEle.style.background='rgba(255,25,55,0)'; buttEle.style.background='rgba(255,25,55,0)';
//buttEle.innerHTML = '<svg L2 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.25)" d="M 86 120 C 94 118 102 118 110 118 L 110 92 C 112 90 96 82 88 92 L 86 120 Z"></path></svg>' //buttEle.innerHTML = '<svg class="svg_button" L2 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.25)" d="M 86 120 C 94 118 102 118 110 118 L 110 92 C 112 90 96 82 88 92 L 86 120 Z"></path></svg>'
buttEle.innerHTML = '<svg id="button_7" R2 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><linearGradient id="GradientBR2" x1="0" x2="0" y1="0" y2="1"><stop offset="'+val+'" stop-color="rgba(250,250,250,0.25)"/><stop offset="'+val+'" stop-color="rgba(170,70,70,0.25)"/></linearGradient><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="url(#GradientBR2)" d="M 290 118 C 298 116 308 118 316 120 L 312 92 C 304 82 288 90 290 92 L 290 118 Z"></path></svg>' buttEle.innerHTML = '<svg class="svg_button" id="button_7" R2 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><linearGradient id="GradientBR2" x1="0" x2="0" y1="0" y2="1"><stop offset="'+val+'" stop-color="rgba(255,255,255,0.75)"/><stop offset="'+val+'" stop-color="rgba(255,255,255, var(--cba))"/></linearGradient><path style="transform:scale(1)" stroke-width=1 stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="url(#GradientBR2)" d="M 290 118 C 298 116 308 118 316 120 L 312 92 C 304 82 288 90 290 92 L 290 118 Z"></path></svg>'
} }
} }
if (j==10) {//L3 if (j==10) {//L3
@ -210,7 +386,7 @@ function onFrame() { // gets repeatedly executed
} else if (current_style == "XBOX") { } else if (current_style == "XBOX") {
buttEle.style.background='rgba(255,25,55,0)'; buttEle.style.background='rgba(255,25,55,0)';
buttEle.innerHTML = '<svg id="button_10" L3 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.25)" d="M 76 194 C 46 212 76 240 98 230 C 126 214 106 184 76 194 Z "></path></svg>' buttEle.innerHTML = '<svg class="svg_button" id="button_10" L3 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(255,255,255, 0.75" d="M 76 194 C 46 212 76 240 98 230 C 126 214 106 184 76 194 Z "></path></svg>'
} }
} }
if (j==11) {//R3 if (j==11) {//R3
@ -219,80 +395,80 @@ function onFrame() { // gets repeatedly executed
} else if (current_style == "XBOX") { } else if (current_style == "XBOX") {
buttEle.style.background='rgba(255,25,55,0)'; buttEle.style.background='rgba(255,25,55,0)';
buttEle.innerHTML = '<svg id="button_11" R3 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.25)" d="M 236 252 C 210 274 246 290 260 284 C 294 268 262 238 236 252 Z "></path></svg>' buttEle.innerHTML = '<svg class="svg_button" id="button_11" R3 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(255,255,255, 0.75" d="M 236 252 C 210 274 246 290 260 284 C 294 268 262 238 236 252 Z "></path></svg>'
} }
} }
} }
if (current_style == "DS") { if (current_style == "DS") {
if (j==12) {// up if (j==12) {// up
buttEle.innerHTML = '<svg id="button_12" height="25" width="25" transform="rotate(0)"><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="rgba(250,250,250,0.5)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>'; buttEle.innerHTML = '<svg class="svg_button" id="button_12" height="25" width="25" transform="rotate(0)"><polygon fill-rule="evenodd" stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(255,255,255, 0.75)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>';
} }
if (j==13) {// down if (j==13) {// down
buttEle.innerHTML = '<svg id="button_13" height="25" width="25" transform="rotate(180)"><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="rgba(250,250,250,0.5)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>'; buttEle.innerHTML = '<svg class="svg_button" id="button_13" height="25" width="25" transform="rotate(180)"><polygon fill-rule="evenodd" stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(255,255,255, 0.75)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>';
} }
if (j==14) {// left if (j==14) {// left
buttEle.innerHTML = '<svg id="button_14" height="25" width="25" transform="rotate(270)"><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="rgba(250,250,250,0.5)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>'; buttEle.innerHTML = '<svg class="svg_button" id="button_14" height="25" width="25" transform="rotate(270)"><polygon fill-rule="evenodd" stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(255,255,255, 0.75)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>';
} }
if (j==15) {// right if (j==15) {// right
buttEle.innerHTML = '<svg id="button_15" height="25" width="25" transform="rotate(90)"><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="rgba(250,250,250,0.5)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>'; buttEle.innerHTML = '<svg class="svg_button" id="button_15" height="25" width="25" transform="rotate(90)"><polygon fill-rule="evenodd" stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(255,255,255, 0.75)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>';
} }
} else if (current_style == "SNES") { } else if (current_style == "SNES") {
if (j==12) {// up if (j==12) {// up
buttEle.innerHTML = '<svg id="button_12" height="25" width="25" transform="rotate(0)"><polygon fill-rule="evenodd" stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.5)" points="3,16 11,3 19,16"></polygon></svg>'; buttEle.innerHTML = '<svg class="svg_button" id="button_12" height="25" width="25" transform="rotate(0)"><polygon fill-rule="evenodd" stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(255,255,255, 0.75)" points="3,16 11,3 19,16"></polygon></svg>';
} }
if (j==13) {// down if (j==13) {// down
buttEle.innerHTML = '<svg id="button_12" height="25" width="25" transform="rotate(180)"><polygon fill-rule="evenodd" stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.5)" points="3,16 11,3 19,16"></polygon></svg>'; buttEle.innerHTML = '<svg class="svg_button" id="button_12" height="25" width="25" transform="rotate(180)"><polygon fill-rule="evenodd" stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(255,255,255, 0.75)" points="3,16 11,3 19,16"></polygon></svg>';
} }
if (j==14) {// left if (j==14) {// left
buttEle.innerHTML = '<svg id="button_12" height="25" width="25" transform="rotate(270)"><polygon fill-rule="evenodd" stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.5)" points="3,16 11,3 19,16"></polygon></svg>'; buttEle.innerHTML = '<svg class="svg_button" id="button_12" height="25" width="25" transform="rotate(270)"><polygon fill-rule="evenodd" stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(255,255,255, 0.75)" points="3,16 11,3 19,16"></polygon></svg>';
} }
if (j==15) {// right if (j==15) {// right
buttEle.innerHTML = '<svg id="button_12" height="25" width="25" transform="rotate(90)"><polygon fill-rule="evenodd" stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.5)" points="3,16 11,3 19,16"></polygon></svg>'; buttEle.innerHTML = '<svg class="svg_button" id="button_12" height="25" width="25" transform="rotate(90)"><polygon fill-rule="evenodd" stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(255,255,255, 0.75)" points="3,16 11,3 19,16"></polygon></svg>';
} }
} else if (current_style == "NES") { } else if (current_style == "NES") {
if (j==12) {// up if (j==12) {// up
buttEle.innerHTML = '<svg id="button_12" height="25" width="25" transform="rotate(0)"><path fill-rule="evenodd" stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.5)" d="M 2 14 L 2 8 L 0 8 L 8 0 L 16 8 L 14 8 L 14 14 Z"></path></svg>'; buttEle.innerHTML = '<svg class="svg_button" id="button_12" height="25" width="25" transform="rotate(0)"><path fill-rule="evenodd" stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(255,255,255, 0.75)" d="M 2 14 L 2 8 L 0 8 L 8 0 L 16 8 L 14 8 L 14 14 Z"></path></svg>';
} }
if (j==13) {// down if (j==13) {// down
buttEle.innerHTML = '<svg id="button_13" height="25" width="25" transform="rotate(180)"><path fill-rule="evenodd" stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.5)" d="M 2 14 L 2 8 L 0 8 L 8 0 L 16 8 L 14 8 L 14 14 Z"></path></svg>'; buttEle.innerHTML = '<svg class="svg_button" id="button_13" height="25" width="25" transform="rotate(180)"><path fill-rule="evenodd" stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(255,255,255, 0.75)" d="M 2 14 L 2 8 L 0 8 L 8 0 L 16 8 L 14 8 L 14 14 Z"></path></svg>';
} }
if (j==14) {// left if (j==14) {// left
buttEle.innerHTML = '<svg id="button_14" height="25" width="25" transform="rotate(270)"><path fill-rule="evenodd" stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.5)" d="M 2 14 L 2 8 L 0 8 L 8 0 L 16 8 L 14 8 L 14 14 Z"></path></svg>'; buttEle.innerHTML = '<svg class="svg_button" id="button_14" height="25" width="25" transform="rotate(270)"><path fill-rule="evenodd" stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(255,255,255, 0.75)" d="M 2 14 L 2 8 L 0 8 L 8 0 L 16 8 L 14 8 L 14 14 Z"></path></svg>';
} }
if (j==15) {// right if (j==15) {// right
buttEle.innerHTML = '<svg id="button_15" height="25" width="25" transform="rotate(90)"><path fill-rule="evenodd" stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.5)" d="M 2 14 L 2 8 L 0 8 L 8 0 L 16 8 L 14 8 L 14 14 Z"></path></svg>'; buttEle.innerHTML = '<svg class="svg_button" id="button_15" height="25" width="25" transform="rotate(90)"><path fill-rule="evenodd" stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(255,255,255, 0.75)" d="M 2 14 L 2 8 L 0 8 L 8 0 L 16 8 L 14 8 L 14 14 Z"></path></svg>';
} }
} else if (current_style == "XBOX") { } else if (current_style == "XBOX") {
if (j==12) {// up if (j==12) {// up
buttEle.innerHTML = '<svg up style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,0)" fill="rgba(250,250,250,0.25)" d="M 136 238 C 140 236 146 236 150 238 C 152 242 152 248 154 250 C 144 256 140 256 132 250 C 134 248 134 240 136 238 Z"></path></svg>'; buttEle.innerHTML = '<svg class="svg_button" up style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,0)" fill="rgba(255,255,255, 0.75)" d="M 136 238 C 140 236 146 236 150 238 C 152 242 152 248 154 250 C 144 256 140 256 132 250 C 134 248 134 240 136 238 Z"></path></svg>';
} }
if (j==13) {// down if (j==13) {// down
buttEle.innerHTML = '<svg down style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,0)" fill="rgba(250,250,250,0.25)" d="M 152 280 C 148 282 144 282 138 280 C 134 276 136 270 132 268 C 140 264 148 264 156 268 C 154 270 152 276 152 280 Z "></path></svg>'; buttEle.innerHTML = '<svg class="svg_button" down style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,0)" fill="rgba(255,255,255, 0.75)" d="M 152 280 C 148 282 144 282 138 280 C 134 276 136 270 132 268 C 140 264 148 264 156 268 C 154 270 152 276 152 280 Z "></path></svg>';
} }
if (j==14) {// left if (j==14) {// left
buttEle.innerHTML = '<svg left style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,0)" fill="rgba(250,250,250,0.25)" d="M 116 254 C 114 258 114 262 118 266 C 122 266 126.6667 265.3333 132 268 C 136 262 136 258 132 250 C 126.6667 252.6667 121.3333 253.3333 116 254 C 116 254 116 254 116 254 Z"></path></svg>'; buttEle.innerHTML = '<svg class="svg_button" left style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,0)" fill="rgba(255,255,255, 0.75)" d="M 116 254 C 114 258 114 262 118 266 C 122 266 126.6667 265.3333 132 268 C 136 262 136 258 132 250 C 126.6667 252.6667 121.3333 253.3333 116 254 C 116 254 116 254 116 254 Z"></path></svg>';
} }
if (j==15) {// right if (j==15) {// right
buttEle.innerHTML = '<svg style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,0)" fill="rgba(250,250,250,0.25)" d="M 170 254 C 172 258 172 262 170 266 C 165.3333 266 160.6667 266 156 268 C 152 262 152 256 154 250 C 159.3333 252.6667 164.6667 253.3333 170 254 Z "></path></svg>'; buttEle.innerHTML = '<svg class="svg_button" style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,0)" fill="rgba(255,255,255, 0.75)" d="M 170 254 C 172 258 172 262 170 266 C 165.3333 266 160.6667 266 156 268 C 152 262 152 256 154 250 C 159.3333 252.6667 164.6667 253.3333 170 254 Z "></path></svg>';
} }
if (j==16) {//home if (j==16) {//home
if (current_style == "XBOX") { if (current_style == "XBOX") {
buttEle.style.background='rgba(255,25,55,0)'; buttEle.style.background='rgba(255,25,55,0)';
buttEle.innerHTML = '<svg home style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.15)" d="M 196 182 C 172 186 166 216 202 218 C 226 216 234 182 196 182 Z"></path><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,0)" fill="rgba(70,270,70,0.15)" d="M 196 182 C 172 186 166 216 202 218 C 226 216 234 182 196 182 Z M 208 186 C 208 186 202 192 200 194 C 196.6667 190.6667 194 190 190 186 C 196 182 202 184 208 186 Z M 204 196 C 206 193.3333 208 190.6667 210 188 C 220 192 218 204 214 208 C 212 204 207.3333 200 204 196 Z M 200 200 C 204 202 210 206 212 210 C 204 216 194 214 188 210 C 192 206 196 202 200 200 Z M 196 196 C 191.3333 200 188.6667 204 186 208 C 176 200 184 192 188 188 C 190 190 192 190 196 196 Z"></path></svg>' buttEle.innerHTML = '<svg class="svg_button" home style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(255,255,255, 0.5)" d="M 196 182 C 172 186 166 216 202 218 C 226 216 234 182 196 182 Z"></path><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,0)" fill="rgba(255,255,255, var(--cba))" d="M 196 182 C 172 186 166 216 202 218 C 226 216 234 182 196 182 Z M 208 186 C 208 186 202 192 200 194 C 196.6667 190.6667 194 190 190 186 C 196 182 202 184 208 186 Z M 204 196 C 206 193.3333 208 190.6667 210 188 C 220 192 218 204 214 208 C 212 204 207.3333 200 204 196 Z M 200 200 C 204 202 210 206 212 210 C 204 216 194 214 188 210 C 192 206 196 202 200 200 Z M 196 196 C 191.3333 200 188.6667 204 186 208 C 176 200 184 192 188 188 C 190 190 192 190 196 196 Z"></path></svg>'
} }
} }
} }
} }
} else { // if current button is *not* pressed we should revert it's style } else { // if current button is *not* pressed we should revert it's style
if (j==8) { if (j==8) {
if (current_style == "DS") { if (current_style == "DS") {
buttEle.style.background='rgba(70,70,70,0.5)'; buttEle.style.background='rgba(255,255,255, 0)';
buttEle.style['background-image'] = "linear-gradient(to bottom, rgba(190,190,190,0.25) 0%, rgba(50,50,50,0.25) 100%), linear-gradient(to right, rgba(190,190,190,0.25) 0%, rgba(50,50,50,0.25) 100%)"; buttEle.style['background-image'] = "linear-gradient(to bottom, rgba(190,190,190,0.25) 0%, rgba(50,50,50,0.25) 100%), linear-gradient(to right, rgba(190,190,190,0.25) 0%, rgba(50,50,50,0.25) 100%)";
} else if (current_style == "SNES") { } else if (current_style == "SNES") {
buttEle.style.background='rgba(0,0,0,0.0)'; buttEle.style.background='rgba(0,0,0,0.0)';
buttEle.innerHTML = "" buttEle.innerHTML = ""
} else if (current_style == "NES") { } else if (current_style == "NES") {
buttEle.style.background='rgba(30,30,30,1)'; buttEle.style.background='rgba(0,0,0,0)';
buttEle.innerHTML = "" buttEle.innerHTML = ""
} else if (current_style == "XBOX") { } else if (current_style == "XBOX") {
buttEle.style.background='rgba(30,30,30,0)'; buttEle.style.background='rgba(30,30,30,0)';
@ -301,12 +477,12 @@ function onFrame() { // gets repeatedly executed
} else if (j==9) {// once again, the 'start' button needs special attention } else if (j==9) {// once again, the 'start' button needs special attention
if (current_style == "DS") { if (current_style == "DS") {
buttEle.style.background='rgba(0,0,0,0.0)'; buttEle.style.background='rgba(0,0,0,0.0)';
buttEle.innerHTML = '<svg id="button_9_border"><linearGradient id="Gradient0" x1="0" x2="1" y1="0" y2="1"><stop offset="0%" stop-color="rgba(150,150,150,0.5)"/><stop offset="100%" stop-color="rgba(50,50,50,1)"/></linearGradient><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="url(#Gradient0)" points="0,0 30,9 1,18 1,0"></polygon></svg>'; buttEle.innerHTML = '<svg class="svg_button" id="button_9_border"><linearGradient id="Gradient0" x1="0" x2="1" y1="0" y2="1"><stop offset="0%" stop-color="rgba(150,150,150,0.5)"/><stop offset="100%" stop-color="rgba(255,255,255, var(--cba))"/></linearGradient><polygon fill-rule="evenodd" stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="url(#Gradient0)" points="0,0 30,9 1,18 1,0"></polygon></svg>';
} else if (current_style == "SNES") { } else if (current_style == "SNES") {
buttEle.style.background='rgba(0,0,0,0.0)'; buttEle.style.background='rgba(0,0,0,0.0)';
buttEle.innerHTML = "" buttEle.innerHTML = ""
} else if (current_style == "NES") { } else if (current_style == "NES") {
buttEle.style.background='rgba(30,30,30,1)'; buttEle.style.background='rgba(30,30,30,0)';
buttEle.innerHTML = "" buttEle.innerHTML = ""
} else if (current_style == "XBOX") { } else if (current_style == "XBOX") {
buttEle.style.background='rgba(30,30,30,0)'; buttEle.style.background='rgba(30,30,30,0)';
@ -345,7 +521,7 @@ function onFrame() { // gets repeatedly executed
} else if (current_style == "XBOX") { } else if (current_style == "XBOX") {
buttEle.style.background='rgba(255,25,55,0)'; buttEle.style.background='rgba(255,25,55,0)';
buttEle.innerHTML = '<svg id="button_4" L1 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0.25)" d="M 120 138 L 122 124 C 120 122 116 124 114 118 C 92 118 82 118 58 130 L 52 138 L 52 148 C 72 142 86 132 120 138 Z "></path></svg>' buttEle.innerHTML = '<svg class="svg_button" id="button_4" L1 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(var(--cbr), var(--cbg), var(--cbb), var(--cba))" d="M 120 138 L 122 124 C 120 122 116 124 114 118 C 92 118 82 118 58 130 L 52 138 L 52 148 C 72 142 86 132 120 138 Z "></path></svg>'
} }
} }
if (j==6) {//L2 if (j==6) {//L2
@ -355,7 +531,7 @@ function onFrame() { // gets repeatedly executed
} else if (current_style == "XBOX") { } else if (current_style == "XBOX") {
buttEle.style.background='rgba(255,25,55,0)'; buttEle.style.background='rgba(255,25,55,0)';
buttEle.innerHTML = '<svg id="button_6" L2 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0.25)" d="M 86 120 C 94 118 102 118 110 118 L 110 92 C 112 90 96 82 88 92 L 86 120 Z"></path></svg>' buttEle.innerHTML = '<svg class="svg_button" id="button_6" L2 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(var(--cbr), var(--cbg), var(--cbb), var(--cba))" d="M 86 120 C 94 118 102 118 110 118 L 110 92 C 112 90 96 82 88 92 L 86 120 Z"></path></svg>'
} }
} }
if (j==5) {//R1 if (j==5) {//R1
@ -365,7 +541,7 @@ function onFrame() { // gets repeatedly executed
} else if (current_style == "XBOX") { } else if (current_style == "XBOX") {
buttEle.style.background='rgba(255,25,55,0)'; buttEle.style.background='rgba(255,25,55,0)';
buttEle.innerHTML = '<svg id="button_5" R1 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0.25)" d="M 278 124 C 282 124 282 118 286 118 C 308 116 322 120 342 132 L 346 138 L 346 148 C 326 140 302 130 278 138 L 278 124 Z"></path></svg>' buttEle.innerHTML = '<svg class="svg_button" id="button_5" R1 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(var(--cbr), var(--cbg), var(--cbb), var(--cba))" d="M 278 124 C 282 124 282 118 286 118 C 308 116 322 120 342 132 L 346 138 L 346 148 C 326 140 302 130 278 138 L 278 124 Z"></path></svg>'
} }
} }
if (j==7) {//R2 if (j==7) {//R2
@ -375,7 +551,7 @@ function onFrame() { // gets repeatedly executed
} else if (current_style == "XBOX") { } else if (current_style == "XBOX") {
buttEle.style.background='rgba(255,25,55,0)'; buttEle.style.background='rgba(255,25,55,0)';
buttEle.innerHTML = '<svg id="button_7" R2 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0.25)" d="M 290 118 C 298 116 308 118 316 120 L 312 92 C 304 82 288 90 290 92 L 290 118 Z"></path></svg>' buttEle.innerHTML = '<svg class="svg_button" id="button_7" R2 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(var(--cbr), var(--cbg), var(--cbb), var(--cba))" d="M 290 118 C 298 116 308 118 316 120 L 312 92 C 304 82 288 90 290 92 L 290 118 Z"></path></svg>'
} }
} }
if (j==10) {//L3 if (j==10) {//L3
@ -385,7 +561,7 @@ function onFrame() { // gets repeatedly executed
} else if (current_style == "XBOX") { } else if (current_style == "XBOX") {
buttEle.style.background='rgba(255,25,55,0)'; buttEle.style.background='rgba(255,25,55,0)';
buttEle.innerHTML = '<svg id="button_10" L3 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0.25)" d="M 76 194 C 46 212 76 240 98 230 C 126 214 106 184 76 194 Z "></path></svg>' buttEle.innerHTML = '<svg class="svg_button" id="button_10" L3 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(var(--cbr), var(--cbg), var(--cbb), var(--cba))" d="M 76 194 C 46 212 76 240 98 230 C 126 214 106 184 76 194 Z "></path></svg>'
} }
} }
if (j==11) {//R3 if (j==11) {//R3
@ -395,7 +571,7 @@ function onFrame() { // gets repeatedly executed
} else if (current_style == "XBOX") { } else if (current_style == "XBOX") {
buttEle.style.background='rgba(255,25,55,0)'; buttEle.style.background='rgba(255,25,55,0)';
buttEle.innerHTML = '<svg id="button_11" R3 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0.25)" d="M 236 252 C 210 274 246 290 260 284 C 294 268 262 238 236 252 Z "></path></svg>' buttEle.innerHTML = '<svg class="svg_button" id="button_11" R3 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(var(--cbr), var(--cbg), var(--cbb), var(--cba))" d="M 236 252 C 210 274 246 290 260 284 C 294 268 262 238 236 252 Z "></path></svg>'
} }
} }
@ -415,42 +591,42 @@ function onFrame() { // gets repeatedly executed
} }
if (current_style == "DS") { if (current_style == "DS") {
if (j==12) { // and of course directional buttons: up if (j==12) { // and of course directional buttons: up
buttEle.innerHTML = '<svg id="button_12" height="25" width="25" transform="rotate( 0)"><linearGradient id="Gradient1" x1="0" x2="1" y1="0" y2="1"><stop offset="0%" stop-color="rgba(150,150,150,0.5)"/><stop offset="100%" stop-color="rgba(50,50,50,1)"/></linearGradient><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="url(#Gradient1)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>'; buttEle.innerHTML = '<svg class="svg_button" id="button_12" height="25" width="25" transform="rotate( 0)"><linearGradient id="Gradient1" x1="0" x2="1" y1="0" y2="1"><stop offset="0%" stop-color="rgba(150,150,150,0.5)"/><stop offset="100%" stop-color="rgba(255,255,255, var(--cba))"/></linearGradient><polygon fill-rule="evenodd" stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="url(#Gradient1)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>';
} }
if (j==13) {// down if (j==13) {// down
buttEle.innerHTML = '<svg id="button_13" height="25" width="25" transform="rotate(180)"><linearGradient id="Gradient2" x1="1" x2="0" y1="1" y2="0"><stop offset="0%" stop-color="rgba(150,150,150,0.5)"/><stop offset="100%" stop-color="rgba(50,50,50,1)"/></linearGradient><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="url(#Gradient2)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>'; buttEle.innerHTML = '<svg class="svg_button" id="button_13" height="25" width="25" transform="rotate(180)"><linearGradient id="Gradient2" x1="1" x2="0" y1="1" y2="0"><stop offset="0%" stop-color="rgba(150,150,150,0.5)"/><stop offset="100%" stop-color="rgba(255,255,255, var(--cba))"/></linearGradient><polygon fill-rule="evenodd" stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="url(#Gradient2)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>';
} }
if (j==14) {// left if (j==14) {// left
buttEle.innerHTML = '<svg id="button_14" height="25" width="25" transform="rotate(270)"><linearGradient id="Gradient3" x1="1" x2="0" y1="0" y2="1"><stop offset="0%" stop-color="rgba(150,150,150,0.5)"/><stop offset="100%" stop-color="rgba(50,50,50,1)"/></linearGradient><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="url(#Gradient3)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>'; buttEle.innerHTML = '<svg class="svg_button" id="button_14" height="25" width="25" transform="rotate(270)"><linearGradient id="Gradient3" x1="1" x2="0" y1="0" y2="1"><stop offset="0%" stop-color="rgba(150,150,150,0.5)"/><stop offset="100%" stop-color="rgba(255,255,255, var(--cba))"/></linearGradient><polygon fill-rule="evenodd" stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="url(#Gradient3)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>';
} }
if (j==15) {// right if (j==15) {// right
buttEle.innerHTML = '<svg id="button_15" height="25" width="25" transform="rotate(90)"><linearGradient id="Gradient4" x1="0" x2="1" y1="1" y2="0"><stop offset="0%" stop-color="rgba(150,150,150,0.5)"/><stop offset="100%" stop-color="rgba(50,50,50,1)"/></linearGradient><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="url(#Gradient4)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>'; buttEle.innerHTML = '<svg class="svg_button" id="button_15" height="25" width="25" transform="rotate(90)"><linearGradient id="Gradient4" x1="0" x2="1" y1="1" y2="0"><stop offset="0%" stop-color="rgba(150,150,150,0.5)"/><stop offset="100%" stop-color="rgba(255,255,255, var(--cba))"/></linearGradient><polygon fill-rule="evenodd" stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="url(#Gradient4)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>';
} }
} else if (current_style == "SNES") { } else if (current_style == "SNES") {
if (j==12) {// up if (j==12) {// up
buttEle.innerHTML = '<svg id="button_12" height="25" width="25" transform="rotate(0)"><polygon fill-rule="evenodd" stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0)" points="3,16 11,3 19,16"></polygon></svg>'; buttEle.innerHTML = '<svg class="svg_button" id="button_12" height="25" width="25" transform="rotate(0)"><polygon fill-rule="evenodd" stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(0,0,0,0)" points="3,16 11,3 19,16"></polygon></svg>';
} }
if (j==13) {// down if (j==13) {// down
buttEle.innerHTML = '<svg id="button_13" height="25" width="25" transform="rotate(180)"><polygon fill-rule="evenodd" stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0)" points="3,16 11,3 19,16"></polygon></svg>'; buttEle.innerHTML = '<svg class="svg_button" id="button_13" height="25" width="25" transform="rotate(180)"><polygon fill-rule="evenodd" stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(0,0,0,0)" points="3,16 11,3 19,16"></polygon></svg>';
} }
if (j==14) {// left if (j==14) {// left
buttEle.innerHTML = '<svg id="button_14" height="25" width="25" transform="rotate(270)"><polygon fill-rule="evenodd" stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0)" points="3,16 11,3 19,16"></polygon></svg>'; buttEle.innerHTML = '<svg class="svg_button" id="button_14" height="25" width="25" transform="rotate(270)"><polygon fill-rule="evenodd" stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(0,0,0,0)" points="3,16 11,3 19,16"></polygon></svg>';
} }
if (j==15) {// right if (j==15) {// right
buttEle.innerHTML = '<svg id="button_15" height="25" width="25" transform="rotate(90)"><polygon fill-rule="evenodd" stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0)" points="3,16 11,3 19,16"></polygon></svg>'; buttEle.innerHTML = '<svg class="svg_button" id="button_15" height="25" width="25" transform="rotate(90)"><polygon fill-rule="evenodd" stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(0,0,0,0)" points="3,16 11,3 19,16"></polygon></svg>';
} }
} else if (current_style == "NES") { } else if (current_style == "NES") {
if (j==12) {// up if (j==12) {// up
buttEle.innerHTML = '<svg id="button_12" height="25" width="25" transform="rotate(0)"><path fill-rule="evenodd" stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0)" d="M 2 14 L 2 8 L 0 8 L 8 0 L 16 8 L 14 8 L 14 14 Z"></path></svg>'; buttEle.innerHTML = '<svg class="svg_button" id="button_12" height="25" width="25" transform="rotate(0)"><path fill-rule="evenodd" stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(0,0,0,0)" d="M 2 14 L 2 8 L 0 8 L 8 0 L 16 8 L 14 8 L 14 14 Z"></path></svg>';
} }
if (j==13) {// down if (j==13) {// down
buttEle.innerHTML = '<svg id="button_13" height="25" width="25" transform="rotate(180)"><path fill-rule="evenodd" stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0)" d="M 2 14 L 2 8 L 0 8 L 8 0 L 16 8 L 14 8 L 14 14 Z"></path></svg>'; buttEle.innerHTML = '<svg class="svg_button" id="button_13" height="25" width="25" transform="rotate(180)"><path fill-rule="evenodd" stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(0,0,0,0)" d="M 2 14 L 2 8 L 0 8 L 8 0 L 16 8 L 14 8 L 14 14 Z"></path></svg>';
} }
if (j==14) {// left if (j==14) {// left
buttEle.innerHTML = '<svg id="button_14" height="25" width="25" transform="rotate(270)"><path fill-rule="evenodd" stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0)" d="M 2 14 L 2 8 L 0 8 L 8 0 L 16 8 L 14 8 L 14 14 Z"></path></svg>'; buttEle.innerHTML = '<svg class="svg_button" id="button_14" height="25" width="25" transform="rotate(270)"><path fill-rule="evenodd" stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(0,0,0,0)" d="M 2 14 L 2 8 L 0 8 L 8 0 L 16 8 L 14 8 L 14 14 Z"></path></svg>';
} }
if (j==15) {// right if (j==15) {// right
buttEle.innerHTML = '<svg id="button_15" height="25" width="25" transform="rotate(90)"><path fill-rule="evenodd" stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0)" d="M 2 14 L 2 8 L 0 8 L 8 0 L 16 8 L 14 8 L 14 14 Z"></path></svg>'; buttEle.innerHTML = '<svg class="svg_button" id="button_15" height="25" width="25" transform="rotate(90)"><path fill-rule="evenodd" stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(0,0,0,0)" d="M 2 14 L 2 8 L 0 8 L 8 0 L 16 8 L 14 8 L 14 14 Z"></path></svg>';
} }
} else if (current_style == "XBOX") { } else if (current_style == "XBOX") {
if (j==12) {// up if (j==12) {// up
@ -468,7 +644,7 @@ function onFrame() { // gets repeatedly executed
if (j==16) {//home if (j==16) {//home
if (current_style == "XBOX") { if (current_style == "XBOX") {
buttEle.style.background='rgba(255,25,55,0)'; buttEle.style.background='rgba(255,25,55,0)';
buttEle.innerHTML = '<svg home style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0)" d="M 196 182 C 172 186 166 216 202 218 C 226 216 234 182 196 182 Z"></path><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,0)" fill="rgba(0,0,0,0.25)" d="M 196 182 C 172 186 166 216 202 218 C 226 216 234 182 196 182 Z M 208 186 C 208 186 202 192 200 194 C 196.6667 190.6667 194 190 190 186 C 196 182 202 184 208 186 Z M 204 196 C 206 193.3333 208 190.6667 210 188 C 220 192 218 204 214 208 C 212 204 207.3333 200 204 196 Z M 200 200 C 204 202 210 206 212 210 C 204 216 194 214 188 210 C 192 206 196 202 200 200 Z M 196 196 C 191.3333 200 188.6667 204 186 208 C 176 200 184 192 188 188 C 190 190 192 190 196 196 Z"></path></svg>' buttEle.innerHTML = '<svg class="svg_button" home style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(0,0,0,0)" d="M 196 182 C 172 186 166 216 202 218 C 226 216 234 182 196 182 Z"></path><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,0)" fill="rgba(255,255,255, var(--cba))" d="M 196 182 C 172 186 166 216 202 218 C 226 216 234 182 196 182 Z M 208 186 C 208 186 202 192 200 194 C 196.6667 190.6667 194 190 190 186 C 196 182 202 184 208 186 Z M 204 196 C 206 193.3333 208 190.6667 210 188 C 220 192 218 204 214 208 C 212 204 207.3333 200 204 196 Z M 200 200 C 204 202 210 206 212 210 C 204 216 194 214 188 210 C 192 206 196 202 200 200 Z M 196 196 C 191.3333 200 188.6667 204 186 208 C 176 200 184 192 188 188 C 190 190 192 190 196 196 Z"></path></svg>'
} }
} }
} }

205
index.html
View file

@ -2,19 +2,77 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<style>
:root {
/* these values are changed in gpcon.js, no use to edit them here */
--clr : 0; /* controller lines color - red element */
--clg : 0; /* controller lines color - green element */
--clb : 0; /* controller lines color - blue element */
--cla : 1; /* controller lines color - transparency */
--cbr : 0; /* controller base color - red element */
--cbg : 0; /* controller base color - green element */
--cbb : 0; /* controller base color - blue element */
--cba : 1; /* controller base color - transparency */
--bbm : "normal"; /* blend mode for buttons */
}
.svg_button, .button {
mix-blend-mode : var(--bbm);
}
.controller_select_option {
padding: 5px;
margin: 5px;
cursor: pointer;
border: 1px solid transparent;
}
input[type="radio"]+label:hover{
background-color: rgb(251, 55, 132, 0.5);
border: 1px solid rgb(105, 0, 54);
}
input[type="radio"]:checked+label{
background-color: rgb(251, 255, 132);
border: 1px solid black;
color: black
}
#buttons_border {
position: relative;
border: 1px solid red;
width: 400px;
height: 400px;
left: 40px;
}
#buttons {
z-index: 150;
position:absolute;
}
#darkmode_box, #border_box, label {
cursor: pointer;
}
</style>
</head> </head>
<body onload="prep()"> <body onload="prep()">
<div id="controller_SNES"> <div id="controller_SNES" style="z-index: -50;">
<svg style="position: absolute;" height="400" width="400">
<path stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(var(--cbr), var(--cbg), var(--cbb), var(--cba))" d="m 115,120 200,0 c 84,-5 120,145 0,160 -44,0 -44,-20 -84,-20 h -64 c -44,0 -44,20 -84,20 -84,0 -120,-145 0,-160 z">
</path>
</svg>
<svg style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"> <svg style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;">
<path stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0.15)" <path stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(var(--cbr), var(--cbg), var(--cbb), var(--cba))"
d="M 310 127 C 408 127 408 273 310 273 C 212 271 212 127 310 127 Z M 322 185 C 338 167 318 143 298 155 L 262 183 C 242 201 264 227 284 215 Z M 358 213 C 374 199 358 173 336 183 L 298 213 C 280 231 302 255 320 243 Z"></path> d="M 310 127 C 408 127 408 273 310 273 C 212 271 212 127 310 127 Z M 322 185 C 338 167 318 143 298 155 L 262 183 C 242 201 264 227 284 215 Z M 358 213 C 374 199 358 173 336 183 L 298 213 C 280 231 302 255 320 243 Z"></path>
</svg> </svg>
<svg style="position: absolute; width: 200px; height: 200px; top: 102px; left: 0px;"> <svg style="position: absolute; width: 200px; height: 200px; top: 102px; left: 0px;">
<circle stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0.0)" cx="87" cy="98" r="45"> <circle stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(0,0,0,0.0)" cx="87" cy="98" r="45">
</circle> </circle>
</svg> </svg>
<svg style="position: absolute; width: 200px; height: 200px; top: 102px; left: 0px;"> <svg style="position: absolute; width: 200px; height: 200px; top: 102px; left: 0px;">
<circle stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0.0)" cx="87" cy="98" r="5"> <circle stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(0,0,0,0.0)" cx="87" cy="98" r="5">
</circle> </circle>
</svg> </svg>
<svg style="position: absolute;" height="25" width="25" transform="rotate(90)"> <svg style="position: absolute;" height="25" width="25" transform="rotate(90)">
@ -24,63 +82,57 @@
</linearGradient> </linearGradient>
</svg> </svg>
<svg style="position: absolute; top:165px; left:50px;" height="400" width="400"> <svg style="position: absolute; top:165px; left:50px;" height="400" width="400">
<path fill-rule="evenodd" stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0.15)" d="M 26,5 47,5 47,26 68,26 68,47 47,47 47,68 26,68 26,47 5,47 5,26 26,26 26,5 z"> <path fill-rule="evenodd" stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(var(--cbr), var(--cbg), var(--cbb), var(--cba))" d="M 26,5 47,5 47,26 68,26 68,47 47,47 47,68 26,68 26,47 5,47 5,26 26,26 26,5 z">
</path>
</svg>
<svg style="position: absolute;" height="400" width="400">
<path stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0.0)" d="m 115,120 200,0 c 84,-5 120,145 0,160 -44,0 -44,-20 -84,-20 h -64 c -44,0 -44,20 -84,20 -84,0 -120,-145 0,-160 z">
</path> </path>
</svg> </svg>
</div> </div>
<div id="controller_NES"> <div id="controller_NES" style="z-index: -50;">
<svg style="position: absolute; width: 400px; height: 400px; top: 258px; left: 344px;">
<path style="transform:scale(1)" stroke-width=1 stroke="rgba(250,250,250,0.0)" fill="rgba(250,250,250,0.6)" <svg style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;">
<path style="transform:scale(1)" stroke-width=1 stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(var(--cbr), var(--cbg), var(--cbb), var(--cba))"
d="M 172 118 L 392 118 C 398 118 398 118 398 124 L 398 276 C 398 282 398 282 392 282 L 6 282 C 0 282 0 282 0 276 L 0 122 C 0 118 0 118 4 118 Z">
</path>
<path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,0)" fill="rgba(var(--cbr), var(--cbg), var(--cbb), var(--cba))"
d="M 10 144 L 390 144 L 390 272 L 10 272 Z M 132 216 C 128 216 126 218 126 222 L 126 248 C 126 252 128 254 132 254 L 234 254 C 238 254 240 252 240 248 L 240 222 C 240 218 238 216 234 216 L 132 216 Z M 56 176 C 54 176 52 178 52 180 L 52 202 L 30 202 C 28 202 26 204 26 206 L 26 224 C 26 226 28 228 30 228 L 52 228 L 52 248 C 52 250 54 252 56 252 L 74 252 C 76 252 78 250 78 248 L 78 228 L 100 228 C 102 228 104 226 104 224 L 104 206 C 104 204 102 202 100 202 L 78 202 L 78 180 C 78 178 76 176 74 176 L 56 176 Z M 280 216 C 256 216 256 252 280 252 C 304 252 304 216 280 216 L 280 216 Z M 332 216 C 308 216 308 252 332 252 C 356 252 356 216 332 216 Z">
</path>
<path style="transform:scale(1)" stroke-width=1 stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(var(--cbr), var(--cbg), var(--cbb), var(--cba))"
d="M 10 144 L 390 144 L 390 272 L 10 272 Z M 126 144 L 126 154 C 126 158 128 160 132 160 L 234 160 C 238 160 240 158 240 154 L 240 144 Z M 126 172 L 126 180 C 126 184 128 186 132 186 L 236 186 C 238 186 240 184 240 182 L 240 172 C 240 168 238 166 234 166 L 132 166 C 128 166 126 168 126 172 Z M 132 192 C 128 192 126 194 126 198 L 126 206 C 126 210 128 212 132 212 L 234 212 C 238 212 240 210 240 206 L 240 198 C 240 194 238 192 234 192 L 132 192 Z M 132 216 C 128 216 126 218 126 222 L 126 248 C 126 252 128 254 132 254 L 234 254 C 238 254 240 252 240 248 L 240 222 C 240 218 238 216 234 216 L 132 216 Z M 132 260 C 128 260 126 262 126 266 L 126 272 L 240 272 L 240 266 C 240 262 238 260 234 260 L 132 260 Z M 262 212 C 260 212 258 214 258 216 L 258 252 C 258 254 260 256 262 256 L 298 256 C 300 256 302 256 302 252 L 302 216 C 302 214 300 212 298 212 L 262 212 Z M 314 212 C 312 212 310 214 310 216 L 310 252 C 310 254 312 256 314 256 L 350 256 C 352 256 354 254 354 252 L 354 216 C 354 214 352 212 350 212 L 314 212 Z M 56 176 C 54 176 52 178 52 180 L 52 202 L 30 202 C 28 202 26 204 26 206 L 26 224 C 26 226 28 228 30 228 L 52 228 L 52 248 C 52 250 54 252 56 252 L 74 252 C 76 252 78 250 78 248 L 78 228 L 100 228 C 102 228 104 226 104 224 L 104 206 C 104 204 102 202 100 202 L 78 202 L 78 180 C 78 178 76 176 74 176 L 56 176 Z">
</path>
<path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,0)" fill="rgba(var(--cbr), var(--cbg), var(--cbb), var(--cba))"
d="M 56 178 L 74 178 C 74 178 76 178 76 180 L 76 204 L 100 204 C 102 204 102 206 102 206 L 102 224 C 102 224 102 226 100 226 L 76 226 L 76 248 C 76 250 74 250 74 250 L 56 250 C 56 250 54 250 54 248 L 54 226 L 30 226 C 28 226 28 224 28 224 L 28 206 C 28 206 28 204 30 204 L 54 204 L 54 180 C 54 178 56 178 56 178 Z">
</path>
<!--path style="transform:scale(20)" stroke-width=0.1 stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0.15)" d="M 3.9 8.2 L 22.9 8.2 L 22.9 14.6 L 3.9 14.6 Z M 10 11.8 C 9.8 11.8 9.7 11.9 9.7 12.1 L 9.7 13.4 C 9.7 13.6 9.8 13.7 10 13.7 L 15.1 13.7 C 15.3 13.7 15.4 13.6 15.4 13.4 L 15.4 12.1 C 15.4 11.9 15.3 11.8 15.1 11.8 L 10 11.8 Z M 6.2 9.8 C 6.1 9.8 6 9.9 6 10 L 6 11.1 L 4.9 11.1 C 4.8 11.1 4.7 11.2 4.7 11.3 L 4.7 12.2 C 4.7 12.3 4.8 12.4 4.9 12.4 L 6 12.4 L 6 13.4 C 6 13.5 6.1 13.6 6.2 13.6 L 7.1 13.6 C 7.2 13.6 7.3 13.5 7.3 13.4 L 7.3 12.4 L 8.4 12.4 C 8.5 12.4 8.6 12.3 8.6 12.2 L 8.6 11.3 C 8.6 11.2 8.5 11.1 8.4 11.1 L 7.3 11.1 L 7.3 10 C 7.3 9.9 7.2 9.8 7.1 9.8 L 6.2 9.8 Z">
</path-->
</svg>
<svg style="position: absolute; width: 8px; height: 8px; top: 258px; left: 344px;">
<path style="transform:scale(1)" stroke-width=1 stroke="rgba(250,250,250,0.0)" fill="rgba(var(--clr), var(--clg), var(--clb), var(--cla))"
d="M 1 1.4 C 1 0.6 2 0.6 2 0.6 L 7 0.6 C 7 0.6 8 0.6 8 1.4 L 8 7.6 L 7 7.6 L 7 4.6 L 2 4.6 L 2 7.6 L 1 7.6 L 1 1.4 d="M 1 1.4 C 1 0.6 2 0.6 2 0.6 L 7 0.6 C 7 0.6 8 0.6 8 1.4 L 8 7.6 L 7 7.6 L 7 4.6 L 2 4.6 L 2 7.6 L 1 7.6 L 1 1.4
M 2 1.8 L 2 3.6 L 7 3.6 L 7 1.8 C 7 1.6 6.8 1.6 6.8 1.6 L 2.2 1.6 C 2.2 1.6 2 1.6 2 1.8 Z"> M 2 1.8 L 2 3.6 L 7 3.6 L 7 1.8 C 7 1.6 6.8 1.6 6.8 1.6 L 2.2 1.6 C 2.2 1.6 2 1.6 2 1.8 Z">
</path> </path>
</svg> </svg>
<svg style="position: absolute; width: 400px; height: 400px; top: 258px; left: 284px;"> <svg style="position: absolute; width: 40px; height: 40px; top: 258px; left: 284px;">
<path style="transform:scale(1)" stroke-width=1 stroke="rgba(250,250,250,0)" fill="rgba(250,250,250,0.6)" <path style="transform:scale(1)" stroke-width=1 stroke="rgba(250,250,250,0)" fill="rgba(var(--clr), var(--clg), var(--clb), var(--cla))"
d ="M 9.2 0.6 L 9.2 7.6 L 15.4 7.6 C 15.4 7.6 16.2 7.6 16.2 6.8 L 16.2 4.4 C 16.2 4.4 16.2 4 15.6 4 C 15.6 4 16 4 16 3.6 L 16 1.4 C 16 0.6 15.2 0.6 15.2 0.6 Z d ="M 9.2 0.6 L 9.2 7.6 L 15.4 7.6 C 15.4 7.6 16.2 7.6 16.2 6.8 L 16.2 4.4 C 16.2 4.4 16.2 4 15.6 4 C 15.6 4 16 4 16 3.6 L 16 1.4 C 16 0.6 15.2 0.6 15.2 0.6 Z
M 10.2 1.6 L 14.8 1.6 C 14.8 1.6 15 1.6 15 1.8 L 15 3.4 C 15 3.6 14.8 3.6 14.8 3.6 L 10.2 3.6 Z M 10.2 1.6 L 14.8 1.6 C 14.8 1.6 15 1.6 15 1.8 L 15 3.4 C 15 3.6 14.8 3.6 14.8 3.6 L 10.2 3.6 Z
M 10.2 4.6 L 15 4.6 C 15 4.6 15.2 4.6 15.2 4.8 L 15.2 6.4 C 15.2 6.4 15.2 6.6 15 6.6 L 10.2 6.6 Z"> M 10.2 4.6 L 15 4.6 C 15 4.6 15.2 4.6 15.2 4.8 L 15.2 6.4 C 15.2 6.4 15.2 6.6 15 6.6 L 10.2 6.6 Z">
</path> </path>
</svg> </svg>
<svg style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;">
<path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.1)"
d="M 172 118 L 392 118 C 398 118 398 118 398 124 L 398 276 C 398 282 398 282 392 282 L 6 282 C 0 282 0 282 0 276 L 0 122 C 0 118 0 118 4 118 Z">
</path>
<path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,0)" fill="rgba(0,0,0,0.15)"
d="M 10 144 L 390 144 L 390 272 L 10 272 Z M 132 216 C 128 216 126 218 126 222 L 126 248 C 126 252 128 254 132 254 L 234 254 C 238 254 240 252 240 248 L 240 222 C 240 218 238 216 234 216 L 132 216 Z M 56 176 C 54 176 52 178 52 180 L 52 202 L 30 202 C 28 202 26 204 26 206 L 26 224 C 26 226 28 228 30 228 L 52 228 L 52 248 C 52 250 54 252 56 252 L 74 252 C 76 252 78 250 78 248 L 78 228 L 100 228 C 102 228 104 226 104 224 L 104 206 C 104 204 102 202 100 202 L 78 202 L 78 180 C 78 178 76 176 74 176 L 56 176 Z M 280 216 C 256 216 256 252 280 252 C 304 252 304 216 280 216 L 280 216 Z M 332 216 C 308 216 308 252 332 252 C 356 252 356 216 332 216 Z">
</path>
<path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0.15)"
d="M 10 144 L 390 144 L 390 272 L 10 272 Z M 126 144 L 126 154 C 126 158 128 160 132 160 L 234 160 C 238 160 240 158 240 154 L 240 144 Z M 126 172 L 126 180 C 126 184 128 186 132 186 L 236 186 C 238 186 240 184 240 182 L 240 172 C 240 168 238 166 234 166 L 132 166 C 128 166 126 168 126 172 Z M 132 192 C 128 192 126 194 126 198 L 126 206 C 126 210 128 212 132 212 L 234 212 C 238 212 240 210 240 206 L 240 198 C 240 194 238 192 234 192 L 132 192 Z M 132 216 C 128 216 126 218 126 222 L 126 248 C 126 252 128 254 132 254 L 234 254 C 238 254 240 252 240 248 L 240 222 C 240 218 238 216 234 216 L 132 216 Z M 132 260 C 128 260 126 262 126 266 L 126 272 L 240 272 L 240 266 C 240 262 238 260 234 260 L 132 260 Z M 262 212 C 260 212 258 214 258 216 L 258 252 C 258 254 260 256 262 256 L 298 256 C 300 256 302 256 302 252 L 302 216 C 302 214 300 212 298 212 L 262 212 Z M 314 212 C 312 212 310 214 310 216 L 310 252 C 310 254 312 256 314 256 L 350 256 C 352 256 354 254 354 252 L 354 216 C 354 214 352 212 350 212 L 314 212 Z M 56 176 C 54 176 52 178 52 180 L 52 202 L 30 202 C 28 202 26 204 26 206 L 26 224 C 26 226 28 228 30 228 L 52 228 L 52 248 C 52 250 54 252 56 252 L 74 252 C 76 252 78 250 78 248 L 78 228 L 100 228 C 102 228 104 226 104 224 L 104 206 C 104 204 102 202 100 202 L 78 202 L 78 180 C 78 178 76 176 74 176 L 56 176 Z">
</path>
<path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,0)" fill="rgba(0,0,0,0.55)"
d="M 56 178 L 74 178 C 74 178 76 178 76 180 L 76 204 L 100 204 C 102 204 102 206 102 206 L 102 224 C 102 224 102 226 100 226 L 76 226 L 76 248 C 76 250 74 250 74 250 L 56 250 C 56 250 54 250 54 248 L 54 226 L 30 226 C 28 226 28 224 28 224 L 28 206 C 28 206 28 204 30 204 L 54 204 L 54 180 C 54 178 56 178 56 178 Z">
</path>
<!--path style="transform:scale(20)" stroke-width=0.1 stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0.15)" d="M 3.9 8.2 L 22.9 8.2 L 22.9 14.6 L 3.9 14.6 Z M 10 11.8 C 9.8 11.8 9.7 11.9 9.7 12.1 L 9.7 13.4 C 9.7 13.6 9.8 13.7 10 13.7 L 15.1 13.7 C 15.3 13.7 15.4 13.6 15.4 13.4 L 15.4 12.1 C 15.4 11.9 15.3 11.8 15.1 11.8 L 10 11.8 Z M 6.2 9.8 C 6.1 9.8 6 9.9 6 10 L 6 11.1 L 4.9 11.1 C 4.8 11.1 4.7 11.2 4.7 11.3 L 4.7 12.2 C 4.7 12.3 4.8 12.4 4.9 12.4 L 6 12.4 L 6 13.4 C 6 13.5 6.1 13.6 6.2 13.6 L 7.1 13.6 C 7.2 13.6 7.3 13.5 7.3 13.4 L 7.3 12.4 L 8.4 12.4 C 8.5 12.4 8.6 12.3 8.6 12.2 L 8.6 11.3 C 8.6 11.2 8.5 11.1 8.4 11.1 L 7.3 11.1 L 7.3 10 C 7.3 9.9 7.2 9.8 7.1 9.8 L 6.2 9.8 Z">
</path-->
</svg>
</div> </div>
<div id="controller_XBOX"> <div id="controller_XBOX" style="z-index: -50;">
<svg hull style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"> <svg hull style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px; z-index: -50;">
<path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0.15)" <path style="transform:scale(1)" stroke-width=1 stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(var(--cbr), var(--cbg), var(--cbb), var(--cba))"
d="M 200 128 L 246 128 L 270 116 L 278 108 L 302 104 L 314 108 L 336 128 L 348 142 L 358 164 L 374 212 C 388 272 374 312 334 312 C 306 308 288.666 292.666 266 284 C 262 290 232 288 228 278 L 172 278 C 170 280 152 292 132 284 C 108.666 293.334 80 312 62 312 C 12 312 14 248 24 212 L 40 164 L 50 142 L 62 128 L 84 108 L 96 104 L 122 110 L 128 116 L 152 128 Z"> d="M 200 128 L 246 128 L 270 116 L 278 108 L 302 104 L 314 108 L 336 128 L 348 142 L 358 164 L 374 212 C 388 272 374 312 334 312 C 306 308 288.666 292.666 266 284 C 262 290 232 288 228 278 L 172 278 C 170 280 152 292 132 284 C 108.666 293.334 80 312 62 312 C 12 312 14 248 24 212 L 40 164 L 50 142 L 62 128 L 84 108 L 96 104 L 122 110 L 128 116 L 152 128 Z">
</path> </path>
</svg> </svg>
<svg hull with holes style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"> <svg hull with holes style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px; z-index: -50;">
<path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,0)" fill="rgba(0,0,0,0.15)" <path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,0)" fill="rgba(var(--cbr), var(--cbg), var(--cbb), var(--cba))"
d="M 200 128 L 246 128 L 270 116 L 278 108 L 302 104 L 314 108 L 336 128 L 348 142 L 358 164 L 374 212 C 388 272 374 312 334 312 C 306 308 288.666 292.666 266 284 C 262 290 232 288 228 278 L 172 278 C 170 280 152 292 132 284 C 108.666 293.334 80 312 62 312 C 12 312 14 248 24 212 L 40 164 L 50 142 L 62 128 L 84 108 L 96 104 L 122 110 L 128 116 L 152 128 Z M 52 182 C 36 210 84 254 122 216 C 148 184 80 144 52 182 Z M 218 232 C 190 266 250 294 284 264 C 314 230 244 206 218 232 Z M 38 170 L 58 156 C 132 126 126 172 170 172 L 234 172 C 266 170 278 128 348 156 L 360 170 L 358 164 L 346 148 C 326 140 316 136 294 136 C 268 136 260 158 234 160 L 170 160 C 148 162 126 136 104 136 C 76 138 74 140 52 148 L 40 164 L 38 170 Z M 280 192 C 262 196 270 212 282 210 C 300 208 292 190 280 192 Z M 308 216 C 294 216 294 236 310 234 C 322 234 328 214 308 216 Z M 338 190 C 324 196 328 212 344 208 C 354 204 358 186 338 190 Z M 308 166 C 296 172 300 192 316 186 C 330 182 326 160 308 166 Z M 160 194 C 148 194 146 206 160 208 C 170 208 174 196 160 194 Z M 240 194 C 228 194 228 208 240 208 C 250 208 256 194 240 194 Z"> d="M 200 128 L 246 128 L 270 116 L 278 108 L 302 104 L 314 108 L 336 128 L 348 142 L 358 164 L 374 212 C 388 272 374 312 334 312 C 306 308 288.666 292.666 266 284 C 262 290 232 288 228 278 L 172 278 C 170 280 152 292 132 284 C 108.666 293.334 80 312 62 312 C 12 312 14 248 24 212 L 40 164 L 50 142 L 62 128 L 84 108 L 96 104 L 122 110 L 128 116 L 152 128 Z M 52 182 C 36 210 84 254 122 216 C 148 184 80 144 52 182 Z M 218 232 C 190 266 250 294 284 264 C 314 230 244 206 218 232 Z M 38 170 L 58 156 C 132 126 126 172 170 172 L 234 172 C 266 170 278 128 348 156 L 360 170 L 358 164 L 346 148 C 326 140 316 136 294 136 C 268 136 260 158 234 160 L 170 160 C 148 162 126 136 104 136 C 76 138 74 140 52 148 L 40 164 L 38 170 Z M 280 192 C 262 196 270 212 282 210 C 300 208 292 190 280 192 Z M 308 216 C 294 216 294 236 310 234 C 322 234 328 214 308 216 Z M 338 190 C 324 196 328 212 344 208 C 354 204 358 186 338 190 Z M 308 166 C 296 172 300 192 316 186 C 330 182 326 160 308 166 Z M 160 194 C 148 194 146 206 160 208 C 170 208 174 196 160 194 Z M 240 194 C 228 194 228 208 240 208 C 250 208 256 194 240 194 Z">
</path> </path>
</svg> </svg>
<svg button bg style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"> <svg button bg style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px; z-index: -50;">
<path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,0)" fill="rgba(0,0,0,0.25)" <path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,0)" fill="rgba(var(--cbr), var(--cbg), var(--cbb), var(--cba))"
d="M 70 190 C 46 214 86 246 112 214 C 126 188 88 174 70 190 Z d="M 70 190 C 46 214 86 246 112 214 C 126 188 88 174 70 190 Z
M 234 242 C 210 264 250 290 272 268 C 290 244 252 226 234 242 Z M 234 242 C 210 264 250 290 272 268 C 290 244 252 226 234 242 Z
M 278 188 C 258 194 270 212 282 210 C 300 208 296 186 278 188 Z M 278 188 C 258 194 270 212 282 210 C 300 208 296 186 278 188 Z
@ -93,7 +145,7 @@
M 154 278 C 160 276 166 274 168 266 C 166 274 160 276 154 278 Z M 154 278 C 160 276 166 274 168 266 C 166 274 160 276 154 278 Z
M 168 252 C 164 244 158 240 152 240 C 158 240 164 244 168 252 Z"> M 168 252 C 164 244 158 240 152 240 C 158 240 164 244 168 252 Z">
</path> </path>
<path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0.25)" <path style="transform:scale(1)" stroke-width=1 stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(var(--cbr), var(--cbg), var(--cbb), var(--cba))"
d="M 134 240 C 124 240 118 250 118 252 C 118 250 124 240 134 240 Z d="M 134 240 C 124 240 118 250 118 252 C 118 250 124 240 134 240 Z
M 120 266 C 124 274 128 276 136 278 C 128 276 124 274 120 266 Z M 120 266 C 124 274 128 276 136 278 C 128 276 124 274 120 266 Z
M 154 278 C 160 276 166 274 168 266 C 166 274 160 276 154 278 Z M 154 278 C 160 276 166 274 168 266 C 166 274 160 276 154 278 Z
@ -105,32 +157,57 @@
</svg> </svg>
<svg up style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"> <svg up style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;">
<path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0.25)" <path style="transform:scale(1)" stroke-width=1 stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(var(--cbr), var(--cbg), var(--cbb), var(--cba))"
d="M 136 238 C 140 236 146 236 150 238 C 152 242 152 248 154 250 C 159 253 164 253 170 254 C 172 258 171.9 262 170 266 C 165 266 161 266 156 268 C 154 270 152 276 152 280 C 148 282 144 282 138 280 C 134 276 136 270 132 268 C 127 265 122 266 118 266 C 114 262 114 258 116 254 C 121 253 127 253 132 250 C 134 248 134 240 136 238 Z"> d="M 136 238 C 140 236 146 236 150 238 C 152 242 152 248 154 250 C 159 253 164 253 170 254 C 172 258 171.9 262 170 266 C 165 266 161 266 156 268 C 154 270 152 276 152 280 C 148 282 144 282 138 280 C 134 276 136 270 132 268 C 127 265 122 266 118 266 C 114 262 114 258 116 254 C 121 253 127 253 132 250 C 134 248 134 240 136 238 Z">
</path> </path>
</svg> </svg>
</div> </div>
<div id="buttons"></div>
<script type="text/javascript" src="gpcon.js"></script>
<div id="style_select_wrapper"> <div id="page" style=" top:15px; position:absolute; z-index: -100; background: (255, 255, 255, 1)">
<select id="style_select">
<option id="DS_option" value="DS">DS</option>
<option id="NES_option" value="NES">NES</option>
<option id="SNES_option" value="SNES">SNES</option>
<option id="XBOX_option" value="XBOX">XBox</option>
</select>
</div>
<script type="text/javascript" src="gpcon.js"></script>
<div id="controls" style="position:absolute; top: 0px; left: 500px; width:300px; padding: 0px; font-family: Arial; color: black; mix-blend-mode: difference; user-select: none;">
<div id="style_select_wrapper">
<div style="text-align: right; float: left;"><label for="darkmode_box">Dark mode:</label><input id="darkmode_box" type="checkbox" ></input></div>
<div style="text-align: right; float: right;"><label for="border_box">Show border:</label><input id="border_box" type="checkbox"></input></div>
<br>
<br>
<fieldset id="style_select">
<legend>Controller type:</legend>
<input type="radio" id="DS_option" name="style_select_options" value="DS" style="display: none;"></input> <label class="controller_select_option" for="DS_option">&nbsp;DS</label>
<input type="radio" id="NES_option" name="style_select_options" value="NES" style="display: none;"></input> <label class="controller_select_option" for="NES_option">&nbsp;NES</label>
<input type="radio" id="SNES_option" name="style_select_options" value="SNES" style="display: none;"></input> <label class="controller_select_option" for="SNES_option">&nbsp;SNES</label>
<input type="radio" id="XBOX_option" name="style_select_options" value="XBOX" style="display: none;"></input> <label class="controller_select_option" for="XBOX_option">&nbsp;XBox</label>
</fieldset>
<br>
<div id="color_ramps_base">
Base Color:
<div id="color_base" style="height:50px; border:1px solid black; background-color: rgba(170, 55, 10, 1);"></div>
<table style="width:100%;">
<tr><td>Red </td> <td><input id="red_slider_base" type="range" max="255", min="0" style="width:100%;" value="170"></input></td> <td style="width:1px;"><input id="red_input_base" style="width:30px; text-align: center;" value="170"></input></td></tr>
<tr><td>Green </td> <td><input id="green_slider_base" type="range" max="255", min="0" style="width:100%;" value="55"></input></td> <td style="width:1px;"><input id="green_input_base" style="width:30px; text-align: center;" value="55"></input></td></tr>
<tr><td>Blue </td> <td><input id="blue_slider_base" type="range" max="255", min="0" style="width:100%;" value="10"></input></td> <td style="width:1px;"><input id="blue_input_base" style="width:30px; text-align: center;" value="10"></input></td></tr>
<tr><td>Alpha </td> <td><input id="alpha_slider_base" type="range" max="100", min="0" style="width:100%;" value="100"></input></td> <td style="width:1px;"><input id="alpha_input_base" style="width:30px; text-align: center;" value="1"></input></td></tr>
</table>
</div>
<br><br>
<div id="color_ramps_lines">
Lines Color:
<div id="color_lines" style="height:50px; border:1px solid black; background-color: rgba(30, 30, 30, 1);"></div>
<table style="width:100%;">
<tr><td>Red </td> <td><input id="red_slider_lines" type="range" max="255", min="0" style="width:100%;" value="170"></input></td> <td style="width:1px;"><input id="red_input_lines" style="width:30px; text-align: center;" value="170"></input></td></tr>
<tr><td>Green </td> <td><input id="green_slider_lines" type="range" max="255", min="0" style="width:100%;" value="55"></input></td> <td style="width:1px;"><input id="green_input_lines" style="width:30px; text-align: center;" value="55"></input></td></tr>
<tr><td>Blue </td> <td><input id="blue_slider_lines" type="range" max="255", min="0" style="width:100%;" value="10"></input></td> <td style="width:1px;"><input id="blue_input_lines" style="width:30px; text-align: center;" value="10"></input></td></tr>
<tr><td>Alpha </td> <td><input id="alpha_slider_lines" type="range" max="100", min="0" style="width:100%;" value="100"></input></td> <td style="width:1px;" ><input id="alpha_input_lines" style="width:30px; text-align: center;" value="1"></input></td></tr>
</table>
</div>
</div>
</div>
</div>
<div id="buttons"><div id="buttons_border"></div></div>
</body> </body>
</html> </html>

221
main.css
View file

@ -1,221 +0,0 @@
body {
}
.button {
border:1px solid rgba(50,50,50,0.5);
width:25px;
height:25px;
border-radius:13px;
display:inline-block;
background: rgba(70,70,70,0.5);
padding:0px;
margin:px;
text-align:center;
vertical-align:middle;
font-weight: bold;
position:absolute;
text-shadow: 1px 1px 1px rgba(0,0,0,0.25), 0px 1px 1px rgba(0,0,0,0.25), 1px 0px 1px rgba(0,0,0,0.25);
}
.button_4, .button_5, .button_6, .button_7 {
width:35px;
height:20px;
border-radius:8px;
}
.button_8 {
width:30px;
height:15px;
border-radius:4px;
}
.button_9 {
border:0px;
background:transparent;
}
.button::after {
position:relative;
color: rgba(250,250,250,0.5);
font-size:13px;
}
.button_0::after {
content:"✕";
color: rgba(80,120,200,0.5);
font-size:22px;
top:-4px;
}
.button_1::after {
content:"○";
color: rgba(200,120,80,0.5);
font-size:41px;
top:-14px;
}
.button_2::after {
content:"□"; /*square*/
color: rgba(250,80,80,0.5);
font-size:35px;
top:-10px;
}
.button_3::after {
content:"△";/*triangle*/
color: rgba(60,200,100,0.5);
font-size:23px;
top:-2px;
}
.button_4::after {
content:"L1";
}
.button_5::after {
content:"R1";
}
.button_6::after {
content:"L2";
}
.button_7::after {
content:"R2";
}
.button_10::after {
content:"L3";
top:2px;
}
.button_11::after {
content:"R3";
top:2px;
}
#button_9_border {
position:relative;
top:3px;
}
.button_12, .button_13, .button_14, .button_15 {
border:0px;
background:transparent;
height:25px;
width:25px;
}
.button_12 {
left:46px;
top:14px;
}
.button_13 {
left:46px;
top:63px;
}
.button_14 {
left:21px;
top:39px;
}
.button_15 {
left:70px;
top:39px;
}
.button_3 {
left:226px;
top:12px;
}
.button_0 {
left:226px;
top:61px;
}
.button_2 {
left:201px;
top:37px;
}
.button_1 {
left:250px;
top:37px;
}
.button_4 {
left:2px;
top: 1px;
}
.button_6 {
left:80px;
top: 1px;
}
.button_5 {
left:260px;
top: 1px;
}
.button_7 {
left:182px;
top: 1px;
}
.button_8 {
left:111px;
top:42px;
}
.button_9 {
left:161px;
top:37px;
}
.button_10 {
position:relative;
border:1px solid rgba(250,200,150,0.5);
}
.button_11 {
position:relative;
border:1px solid rgba(250,200,150,0.5);
}
#buttons {
position:absolute;
transform: scale(1);
}
.axisbox {
border-radius:20px;
border:1px solid red;
width:40px;
height:40px;
position:absolute;
top: 65px;
border:1px solid rgba(50,50,50,0.5);
background: rgba(70,70,70,0.5);
}
.axisbox_0 {
left:105px;
}
.axisbox_1 {
left:155px;
}
.axis{
margin-left:-5px;
margin-top:-5px;
border-radius:5px;
border:1px solid black;
width:10px;
height:10px;
display:block;
position:relative;
}