diff --git a/src/Home.js b/src/Home.js index e79a904..91eb850 100644 --- a/src/Home.js +++ b/src/Home.js @@ -1,9 +1,6 @@ import "./components/Sidebar.js" import "./components/AppMenu.js" -import "./apps/Forum/Forum.js" -import "./apps/Messages/Messages.js" -import "./apps/Jobs/Jobs.js" -import "./apps/People/People.js" +import "./components/AppWindow.js" class Home extends Shadow { @@ -16,7 +13,6 @@ class Home extends Shadow { .left(2, em) .top(2, em) .onTouch(function (start) { - console.log("touch", start) if(start) { this.style.scale = "0.8" } else if(start === false) { @@ -28,34 +24,14 @@ class Home extends Shadow { Sidebar() VStack(() => { - switch(global.currentApp) { - case "Dashboard": - Forum() - break; - - case "Messages": - Messages() - break; - - case "People": - People() - break; - } + AppWindow() AppMenu() }) .height(100, pct) .minHeight(0) - .onNavigate(() => { - console.log("navigate") - this.rerender() - }) - // .onClick(() => { - // this.rerender() - // }) }) - .backgroundColor("var(--main)") - + .backgroundColor("var(--main)") .overflowX("hidden") .height(100, vh) } diff --git a/src/_/code/ws/Socket.js b/src/_/code/ws/Socket.js index debb7b9..55c249c 100644 --- a/src/_/code/ws/Socket.js +++ b/src/_/code/ws/Socket.js @@ -11,7 +11,6 @@ export default class Socket { } async init() { - console.log("initting") await this.connection.init() } diff --git a/src/_/icons/people.svg b/src/_/icons/people.svg index a248419..f2b266a 100644 --- a/src/_/icons/people.svg +++ b/src/_/icons/people.svg @@ -1,29 +1,3 @@ -<<<<<<< HEAD -======= - - - - - - - - - - - -ionicons-v5-j - - - - - - - - - - - ->>>>>>> 770d3bb012b8c49c52b5b8313e298a0dc720208c \ No newline at end of file diff --git a/src/components/AppMenu.js b/src/components/AppMenu.js index 9270317..2ebac47 100644 --- a/src/components/AppMenu.js +++ b/src/components/AppMenu.js @@ -3,25 +3,22 @@ class AppMenu extends Shadow { onNewSelection() { this.$$("img").forEach((image) => { - image.style.background = "" + image.style.outline = "" }) } render() { - console.log("rendering") HStack(() => { img("/_/icons/Column.svg", "1.5em", "1.5em") .attr({app: "forum"}) .padding(0.5, em) .borderRadius(10, px) - .background(global.currentApp === "Dashboard" ? "var(--accent)" : "transparent") + .outline(global.currentApp() === "Dashboard" ? "1px solid black" : "none") .onClick((finished, e) => { if(finished) { this.onNewSelection() - } - e.target.style.background = "var(--accent)" - if(finished) { - window.navigateTo("/dashboard") + e.target.style.outline = "1px solid black" + global.openApp("Dashboard") } }) @@ -29,26 +26,24 @@ class AppMenu extends Shadow { .attr({app: "messages"}) .padding(0.5, em) .borderRadius(10, px) - .background(global.currentApp === "Messages" ? "rgb(112 150 114)" : "transparent") + .outline(global.currentApp() === "Messages" ? "1px solid black" : "none") .onClick((finished, e) => { if(finished) { this.onNewSelection() - } - if(finished) { - window.navigateTo("/messages") + e.target.style.outline = "1px solid black" + global.openApp("Messages") } }) img("/_/icons/people.svg", "1.5em", "1.5em") .attr({app: "people"}) .padding(0.5, em) .borderRadius(10, px) - .background(global.currentApp === "People" ? "#9392bb" : "transparent") + .outline(global.currentApp() === "People" ? "1px solid black" : "none") .onClick((finished, e) => { if(finished) { this.onNewSelection() - } - if(finished) { - window.navigateTo(`/people`) + e.target.style.outline = "1px solid black" + global.openApp("People") } }) }) diff --git a/src/components/AppWindow.js b/src/components/AppWindow.js new file mode 100644 index 0000000..cd6850c --- /dev/null +++ b/src/components/AppWindow.js @@ -0,0 +1,32 @@ +import "../apps/Forum/Forum.js" +import "../apps/Messages/Messages.js" +import "../apps/Jobs/Jobs.js" +import "../apps/People/People.js" + +class AppWindow extends Shadow { + render() { + ZStack(() => { + let app = global.currentApp() + switch(app) { + case "Dashboard": + Forum() + break; + + case "Messages": + Messages() + break; + + case "People": + People() + break; + } + }) + .height(100, pct) + .display("flex") + .onNavigate(() => { + this.rerender() + }) + } +} + +register(AppWindow) \ No newline at end of file diff --git a/src/index.js b/src/index.js index 4784701..f002471 100644 --- a/src/index.js +++ b/src/index.js @@ -6,7 +6,15 @@ let Global = class { Socket = new Socket() profile = null currentNetwork = "" - currentApp = "" + lastApp = "" + + currentApp() { + const pathname = window.location.pathname; + const segments = pathname.split('/').filter(Boolean); + const secondSegment = segments[1] || "" + const capitalized = secondSegment.charAt(0).toUpperCase() + secondSegment.slice(1); + return capitalized + } openApp = function(appName) { const appUrl = appName.charAt(0).toLowerCase() + appName.slice(1); @@ -30,17 +38,13 @@ let Global = class { onNavigate = async () => { let selectedNetwork = this.networkFromPath() - let selectedApp = this.appFromPath() if(!selectedNetwork) { if (!this.currentNetwork || this.currentNetwork === this.profile) { let path = `/${this.getDefaultNetworkName()}/${this.getDefaultAppName()}` history.replaceState({}, '', path) - } else { - let path = `/${this.currentNetwork.abbreviation}${window.location.pathname}` - history.replaceState({}, '', path) } - } else if(!selectedApp) { + } else if(!this.currentApp()) { if(this.currentNetwork === window.profile) { history.replaceState({}, '', `${window.location.pathname}/${window.profile.apps[0]}`) } else { @@ -49,14 +53,14 @@ let Global = class { } selectedNetwork = this.networkFromPath() - selectedApp = this.appFromPath() - let networkChanged = this.currentNetwork !== selectedNetwork - let appChanged = this.currentApp !== selectedApp + let appChanged = this.currentApp() !== this.lastApp + if(appChanged) { + this.lastApp = this.currentApp() + } + if(networkChanged) { - console.log("onNavigate: network changed ->", selectedNetwork?.abbreviation) this.currentNetwork = selectedNetwork - this.currentApp = selectedApp const event = new CustomEvent('networkchange', { detail: { name: this.currentNetwork } }); @@ -68,10 +72,8 @@ let Global = class { } if(appChanged && !networkChanged) { - console.log("onNavigate: app changed ->", selectedApp, "\n") - this.currentApp = selectedApp const event = new CustomEvent('appchange', { - detail: { name: this.currentApp } + detail: { name: this.currentApp() } }); window.dispatchEvent(event) } @@ -112,14 +114,6 @@ let Global = class { } } - appFromPath = function() { - const pathname = window.location.pathname; - const segments = pathname.split('/').filter(Boolean); - const secondSegment = segments[1] || "" - const capitalized = secondSegment.charAt(0).toUpperCase() + secondSegment.slice(1); - return capitalized - } - async getProfile() { try { const res = await fetch("/profile", {