From 2fdb719df886ba66604863ef9d9415eacf8c4ff5 Mon Sep 17 00:00:00 2001 From: Aelita4 Date: Mon, 25 Dec 2023 14:26:43 +0100 Subject: [PATCH] Improve navigation bar --- src/components/NavBar.astro | 220 +++++++++++++++++++++----------- src/lib/lang/en/navbar.json | 17 ++- src/pages/game/galaxyView.astro | 94 ++++++++++++++ src/pages/game/index.astro | 26 ++-- src/pages/index.astro | 70 ++-------- 5 files changed, 270 insertions(+), 157 deletions(-) create mode 100644 src/pages/game/galaxyView.astro diff --git a/src/components/NavBar.astro b/src/components/NavBar.astro index c1ea063..3250653 100644 --- a/src/components/NavBar.astro +++ b/src/components/NavBar.astro @@ -2,130 +2,198 @@ import { getHighestWeightedLanguage, getLocales } from '../lib/lang/langDriver'; interface Props { loggedIn: string; + active: string; } +type ShowType = "loggedInOnly" | "notLoggedInOnly" | "always" | "never"; + +type Position = "top" | "bottom"; + interface NavElement { + id: string; title: string; type: "simple" | "dropdown"; url: string; - showForLoggedIn: boolean; + show: ShowType; + position: Position; dropdowns?: Array; } const lang = await getLocales(getHighestWeightedLanguage(Astro.request.headers.get('accept-language')), 'navbar'); const listOfElements: Array = [{ + id: "home", title: lang["Link_home"], type: "simple", url: "/", - showForLoggedIn: true + show: "always", + position: "top" }, { + id: "about", + title: lang["Link_about"], + type: "simple", + url: "#", + show: "always", + position: "top" +}, { + id: "api", + title: lang["Link_api"], + type: "simple", + url: "#", + show: "always", + position: "top" +}, { + id: "login", title: lang["Link_login"], type: "simple", url: "/login", - showForLoggedIn: false + show: "notLoggedInOnly", + position: "bottom" }, { + id: "register", title: lang["Link_register"], type: "simple", url: "/register", - showForLoggedIn: false + show: "notLoggedInOnly", + position: "bottom" },{ - title: lang["Link_dropdown"], - type: "dropdown", - url: "about:blank", - showForLoggedIn: true, - dropdowns: [{ - title: "drop1", - type: "simple", - url: "aaa", - showForLoggedIn: true - }, { - title: "drop2", - type: "simple", - url: "aaa", - showForLoggedIn: true - }, { - title: "drop3", - type: "simple", - url: "aaa", - showForLoggedIn: true - }] + id: "overview", + title: lang["Link_overview"], + type: "simple", + url: "/game", + show: "loggedInOnly", + position: "bottom" +}, { + id: "buildings", + title: lang["Link_buildings"], + type: "simple", + url: "/game/buildings", + show: "loggedInOnly", + position: "bottom" +}, { + id: "research", + title: lang["Link_research"], + type: "simple", + url: "/game/research", + show: "loggedInOnly", + position: "bottom" +}, { + id: "ships", + title: lang["Link_ships"], + type: "simple", + url: "/game/ships", + show: "loggedInOnly", + position: "bottom" +}, { + id: "fleet", + title: lang["Link_fleet"], + type: "simple", + url: "/game/fleet", + show: "loggedInOnly", + position: "bottom" +}, { + id: "galaxyView", + title: lang["Link_galaxyView"], + type: "simple", + url: "/game/galaxyView", + show: "loggedInOnly", + position: "bottom" +}, { + id: "profile", + title: lang["Link_profile"], + type: "simple", + url: "/game/profile", + show: "loggedInOnly", + position: "bottom" }]; -const { loggedIn } = Astro.props; +const { loggedIn, active } = Astro.props; -const filteredList = listOfElements.filter(element => (element.showForLoggedIn && loggedIn === "true") || loggedIn === "false"); +const filteredList = listOfElements.filter(element => + ((element.show === "always" || element.show === "loggedInOnly") && loggedIn === "true") || + ((element.show === "always" || element.show === "notLoggedInOnly") && loggedIn === "false") +); + +const topRow = filteredList.filter(element => element.position === "top"); +const bottomRow = filteredList.filter(element => element.position === "bottom"); + +const username = Astro.cookies.get('username')?.value ?? ""; --- \ No newline at end of file diff --git a/src/lib/lang/en/navbar.json b/src/lib/lang/en/navbar.json index e0ab79a..0e68593 100644 --- a/src/lib/lang/en/navbar.json +++ b/src/lib/lang/en/navbar.json @@ -1,8 +1,17 @@ { "Link": { - "home": "home", - "login": "login", - "register": "register", - "dropdown": "dropdown" + "home": "[home]", + "login": "[login]", + "register": "[register]", + "about": "[about]", + "api": "[api]", + + "overview": "[overview]", + "buildings": "[buildings]", + "research": "[research]", + "ships": "[ships]", + "fleet": "[fleet]", + "galaxyView": "[galaxy view]", + "profile": "[profile]" } } \ No newline at end of file diff --git a/src/pages/game/galaxyView.astro b/src/pages/game/galaxyView.astro new file mode 100644 index 0000000..485bc4e --- /dev/null +++ b/src/pages/game/galaxyView.astro @@ -0,0 +1,94 @@ +--- +import Layout from '../../layouts/Layout.astro'; +import NavBar from '../../components/NavBar.astro'; +import { getAllUsers } from '../../lib/db/users'; +import { getHighestWeightedLanguage, getLocales } from '../../lib/lang/langDriver'; +import format from '../../lib/utils/format'; + +const loggedToken = Astro.cookies.get('sessionToken')?.value ?? null; +const username = Astro.cookies.get('username')?.value ?? ""; + +if(loggedToken === null || username === "") return Astro.redirect('/'); + +const allUsers = await getAllUsers(); + +const langGame = await getLocales(getHighestWeightedLanguage(Astro.request.headers.get('accept-language')), 'game'); +--- + + + +

{format(langGame['Header_user'], username)}

+

Galaxy view

+
    + {allUsers.map(user =>
  • {user.username}
    • )} +
+ + + \ No newline at end of file diff --git a/src/pages/game/index.astro b/src/pages/game/index.astro index b90307d..d276dfb 100644 --- a/src/pages/game/index.astro +++ b/src/pages/game/index.astro @@ -4,10 +4,6 @@ import NavBar from '../../components/NavBar.astro'; import { getUserResources, updateUserResources } from '../../lib/db/users'; import { getHighestWeightedLanguage, getLocales } from '../../lib/lang/langDriver'; -String.prototype.format = function() { - return [...arguments].reduce((p,c) => p.replace(/{}/,c), this); -}; - const loggedToken = Astro.cookies.get('sessionToken')?.value ?? null; const username = Astro.cookies.get('username')?.value ?? ""; @@ -22,23 +18,15 @@ await updateUserResources(username, { }); const langResources = await getLocales(getHighestWeightedLanguage(Astro.request.headers.get('accept-language')), 'resources'); -const langGame = await getLocales(getHighestWeightedLanguage(Astro.request.headers.get('accept-language')), 'game'); --- - - {langGame['Link_logout']} -

{langGame['Header_user'].format(username)}

+
  • {langResources['Label_coal']}: {resources.coal * 2}
  • {langResources['Label_iron']}: {resources.iron * 3}
  • {langResources['Label_gold']}: {resources.gold * 4}
- -