Kirisame/dzura
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects 1 Releases Wiki Activity

Add button color to indicate page.

Browse Source
This commit is contained in:
yukirij 2024-08-20 15:11:00 -07:00
parent 37584de432
commit 87e59db684
3 changed files with 26 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
www/css/main.css
View File

@ -60,9 +60,13 @@ body>nav>section>button{
color:#c0c0c0; color:#c0c0c0;
border:0; border:0;
outline:0; outline:0;
} body>nav>section>button:hover{ }
body>nav>section>button.selected{
background-color:#343434;
}
body>nav>section>button:hover{
background-color:#383838; background-color:#383838;
color:#e0e0e0; color:hsl(0, 0%, 88%);
} }
body>nav>header{ body>nav>header{

18
www/js/scene.js
View File

@ -23,7 +23,7 @@ const SCENES = {
Register:{ Register:{
load() { load() {
if(CONTEXT.Auth !== null) return false; if(CONTEXT.Auth !== null) return false;
UI.mainmenu(); UI.mainmenu("register");
UI.mainnav([], []); UI.mainnav([], []);
let container = document.createElement("section"); let container = document.createElement("section");
@ -112,7 +112,7 @@ const SCENES = {
Authenticate:{ Authenticate:{
load() { load() {
if(CONTEXT.Auth !== null) return false; if(CONTEXT.Auth !== null) return false;
UI.mainmenu(); UI.mainmenu("authenticate");
UI.mainnav([], []); UI.mainnav([], []);
let container = document.createElement("section"); let container = document.createElement("section");
@ -188,7 +188,7 @@ const SCENES = {
records:[], records:[],
}; };
UI.mainmenu(); UI.mainmenu("browse");
let left_buttons = [ ]; let left_buttons = [ ];
if(CONTEXT.Auth !== null) { if(CONTEXT.Auth !== null) {
@ -250,7 +250,7 @@ const SCENES = {
records:[], records:[],
}; };
UI.mainmenu(); UI.mainmenu("continue");
let left_buttons = [ ]; let left_buttons = [ ];
if(CONTEXT.Auth !== null) { if(CONTEXT.Auth !== null) {
@ -312,7 +312,7 @@ const SCENES = {
records:[], records:[],
}; };
UI.mainmenu(); UI.mainmenu("join");
let left_buttons = [ ]; let left_buttons = [ ];
if(CONTEXT.Auth !== null) { if(CONTEXT.Auth !== null) {
@ -372,7 +372,7 @@ const SCENES = {
records:[], records:[],
}; };
UI.mainmenu(); UI.mainmenu("live");
let left_buttons = [ ]; let left_buttons = [ ];
if(CONTEXT.Auth !== null) { if(CONTEXT.Auth !== null) {
@ -432,7 +432,7 @@ const SCENES = {
records:[], records:[],
}; };
UI.mainmenu(); UI.mainmenu("history");
let left_buttons = [ ]; let left_buttons = [ ];
@ -481,7 +481,7 @@ const SCENES = {
Guide:{ Guide:{
load() { load() {
UI.mainmenu(); UI.mainmenu("guide");
UI.mainnav([ UI.mainnav([
UI.button("Game", () => { }), UI.button("Game", () => { }),
UI.button("Interface", () => { }), UI.button("Interface", () => { }),
@ -500,7 +500,7 @@ const SCENES = {
About:{ About:{
load() { load() {
UI.mainmenu(); UI.mainmenu("about");
UI.mainnav([], []); UI.mainnav([], []);

21
www/js/ui.js
View File

@ -3,9 +3,10 @@ const UI = {
return document.createTextNode(value); return document.createTextNode(value);
}, },
button(text, callback) { button(text, callback, select=false) {
let button = document.createElement("button"); let button = document.createElement("button");
button.innerText = text; button.innerText = text;
if(select) { button.setAttribute("class", "selected"); }
if(callback !== null) { button.addEventListener("click", callback); } if(callback !== null) { button.addEventListener("click", callback); }
return button; return button;
}, },
@ -109,21 +110,21 @@ const UI = {
MENU.appendChild(section); MENU.appendChild(section);
}, },
mainmenu() { mainmenu(page) {
if(SOCKET !== null) { if(SOCKET !== null) {
let top = [ ]; let top = [ ];
let bottom = [ ]; let bottom = [ ];
top.push(UI.button("Browse", () => { LOAD(SCENES.Browse); })); top.push(UI.button("Browse", () => { LOAD(SCENES.Browse); }, page == "browse"));
if(CONTEXT.Auth !== null) { if(CONTEXT.Auth !== null) {
top.push(UI.button("Continue", () => { LOAD(SCENES.Continue); })); top.push(UI.button("Continue", () => { LOAD(SCENES.Continue); }, page == "continue"));
top.push(UI.button("Join", () => { LOAD(SCENES.Join); })); top.push(UI.button("Join", () => { LOAD(SCENES.Join); }, page == "join"));
} }
top.push(UI.button("Live", () => { LOAD(SCENES.Live); })); top.push(UI.button("Live", () => { LOAD(SCENES.Live); }, page == "live"));
top.push(UI.button("History", () => { LOAD(SCENES.History); })); top.push(UI.button("History", () => { LOAD(SCENES.History); }, page == "history"));
top.push(UI.button("Practice", () => { LOAD(SCENES.GamePractice); })); top.push(UI.button("Practice", () => { LOAD(SCENES.GamePractice); }, page == "practice"));
top.push(UI.button("Guide", () => { LOAD(SCENES.Guide); })); top.push(UI.button("Guide", () => { LOAD(SCENES.Guide); }, page == "guide"));
top.push(UI.button("About", () => { LOAD(SCENES.About); })); top.push(UI.button("About", () => { LOAD(SCENES.About); }, page == "about"));
if(CONTEXT.Auth !== null) { if(CONTEXT.Auth !== null) {
bottom.push(UI.button("Logout", () => { bottom.push(UI.button("Logout", () => {