Aelita4
/
AstroCol
1
0
Fork 0
Code Issues 2 Pull Requests Packages Projects 1 Releases Wiki Activity

Overhaul language driver and move lang data to db

This commit is contained in:
Aelita4 2024-08-07 23:28:53 +02:00
parent 4db4cc97ad
commit 99f92ddbd1
Signed by: Aelita4
GPG Key ID: E44490C2025906C1
13 changed files with 141 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/BuildingCard.astro
View File

@ -1,5 +1,5 @@
---
import { getHighestWeightedLanguage, getLocales } from '../lib/utils/langDriver';
import { getHighestWeightedLanguage, getLocales, getName } from '../lib/utils/langDriver';
interface Props {
id: string;
@ -8,7 +8,7 @@ interface Props {
image: string;
}
const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.headers.get('accept-language')), ['resources', 'game', 'buildings', 'research']);
const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.headers.get('accept-language')));
---
@ -17,7 +17,7 @@ const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.hea
<div>
<div class="building-card-name">{Astro.props.name}</div>
<div class="building-card-description">{Astro.props.description}</div>
<a id={`build_${Astro.props.id}`} href="#" class="building-card-build">{lang["game"]['Link_build']}</a>
<a id={`build_${Astro.props.id}`} href="#" class="building-card-build">{getName(lang, "general", "nav-build")}</a>
<div class="building-card-info-button">i</div>
</div>
</div>

28
src/components/NavBar.astro
View File

@ -1,5 +1,5 @@
---
import { getHighestWeightedLanguage, getLocales } from '../lib/utils/langDriver';
import { getHighestWeightedLanguage, getLocales, getName } from '../lib/utils/langDriver';
interface Props {
loggedIn: string;
active: string;
@ -19,88 +19,88 @@ interface NavElement {
dropdowns?: Array<NavElement>;
}
const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.headers.get('accept-language')), ['navbar']);
const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.headers.get('accept-language')));
const listOfElements: Array<NavElement> = [{
id: "home",
title: lang["navbar"]["Link_home"],
title: getName(lang, "general", "nav-home"),
type: "simple",
url: "/",
show: "always",
position: "top"
}, {
id: "about",
title: lang["navbar"]["Link_about"],
title: getName(lang, "general", "nav-about"),
type: "simple",
url: "#",
show: "always",
position: "top"
}, {
id: "api",
title: lang["navbar"]["Link_api"],
title: getName(lang, "general", "nav-api"),
type: "simple",
url: "#",
show: "always",
position: "top"
}, {
id: "login",
title: lang["navbar"]["Link_login"],
title: getName(lang, "general", "nav-login"),
type: "simple",
url: "/login",
show: "notLoggedInOnly",
position: "bottom"
}, {
id: "register",
title: lang["navbar"]["Link_register"],
title: getName(lang, "general", "nav-register"),
type: "simple",
url: "/register",
show: "notLoggedInOnly",
position: "bottom"
},{
id: "overview",
title: lang["navbar"]["Link_overview"],
title: getName(lang, "general", "nav-overview"),
type: "simple",
url: "/game",
show: "loggedInOnly",
position: "bottom"
}, {
id: "buildings",
title: lang["navbar"]["Link_buildings"],
title: getName(lang, "general", "nav-buildings"),
type: "simple",
url: "/game/buildings",
show: "loggedInOnly",
position: "bottom"
}, {
id: "research",
title: lang["navbar"]["Link_research"],
title: getName(lang, "general", "nav-research"),
type: "simple",
url: "/game/research",
show: "loggedInOnly",
position: "bottom"
}, {
id: "ships",
title: lang["navbar"]["Link_ships"],
title: getName(lang, "general", "nav-ships"),
type: "simple",
url: "/game/ships",
show: "loggedInOnly",
position: "bottom"
}, {
id: "fleet",
title: lang["navbar"]["Link_fleet"],
title: getName(lang, "general", "nav-fleet"),
type: "simple",
url: "/game/fleet",
show: "loggedInOnly",
position: "bottom"
}, {
id: "galaxyView",
title: lang["navbar"]["Link_galaxyView"],
title: getName(lang, "general", "nav-galaxy-view"),
type: "simple",
url: "/game/galaxyView",
show: "loggedInOnly",
position: "bottom"
}, {
id: "profile",
title: lang["navbar"]["Link_profile"],
title: getName(lang, "general", "nav-profile"),
type: "simple",
url: "/game/profile",
show: "loggedInOnly",

13
src/components/ResourceBar.astro
View File

@ -1,11 +1,11 @@
---
import { ObjectId } from 'mongodb';
import { calculateCurrentAvailableResources } from '../lib/utils/resourceManager';
import { getHighestWeightedLanguage, getLocales } from '../lib/utils/langDriver';
import { getHighestWeightedLanguage, getLocales, getName } from '../lib/utils/langDriver';
import resourceTypes from '../lib/data/resources.json';
const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.headers.get('accept-language')), ['resourcebar', 'resources']);
const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.headers.get('accept-language')));
const resources = await calculateCurrentAvailableResources(new ObjectId(Astro.cookies.get('planetid')?.value ?? ''));
@ -13,6 +13,7 @@ const resourceArray = [];
for(const key in resources) {
resourceArray.push(resources[key as never]);
}
---
<div id="resourcebar">
<div class="resourcebar-item-identifier">
@ -30,13 +31,13 @@ for(const key in resources) {
<img src={resourceTypes.find(x => x.name === res.name)?.icon ?? "#"} alt={res.name} />
</div>
<div class="resourcebar-item-text-wrapper" data-resname={res.name}>
<div class="resourcebar-item-text">{lang["resources"][`Label_${res.name}`]}</div>
<div class="resourcebar-item-text">{getName(lang, 'resources', res.name)}</div>
<div class="resourcebar-item-amount">[fetching]</div>
</div>
<div class="resourcebar-item-tooltip">
<div class="resourcebar-item-tooltip-name">{lang["resourcebar"]['Label_avaliable']} - <span class="resourcebar-item-tooltip-avaliable">{Math.floor(res.amount).toString()}</span></div>
<div class="resourcebar-item-tooltip-name">{lang["resourcebar"]['Label_production']} - <span class="resourcebar-item-tooltip-production">{res.perHourMiningRate.toString()}</span></div>
<div class="resourcebar-item-tooltip-name">{lang["resourcebar"]['Label_capacity']} - <span class="resourcebar-item-tooltip-capacity">{'21372137'}</span></div>
<div class="resourcebar-item-tooltip-name">{getName(lang, 'general', 'avaliable')} - <span class="resourcebar-item-tooltip-avaliable">{Math.floor(res.amount).toString()}</span></div>
<div class="resourcebar-item-tooltip-name">{getName(lang, 'general', 'production')} - <span class="resourcebar-item-tooltip-production">{res.perHourMiningRate.toString()}</span></div>
<div class="resourcebar-item-tooltip-name">{getName(lang, 'general', 'capacity')} - <span class="resourcebar-item-tooltip-capacity">{'21372137'}</span></div>
</div>
</div>
)}

4
src/lib/data/research.json
View File

@ -137,6 +137,8 @@
"iron": 1000,
"gold": 500
}
}
},
"time": 3000,
"multiplier": 5
}
]

12
src/lib/db/lang.ts Normal file
View File

@ -0,0 +1,12 @@
import { Lang } from "./mongodb";
export const getLang = async (language = "en") => {
const lang = await Lang(language);
return {
general: await lang[0].find({}).toArray(),
buildings: await lang[1].find({}).toArray(),
ships: await lang[2].find({}).toArray(),
resources: await lang[3].find({}).toArray(),
research: await lang[4].find({}).toArray()
}
}

14
src/lib/db/mongodb.ts
View File

@ -2,7 +2,6 @@ import { MongoClient } from "mongodb";
import config from '../../../config.json'
const uri = config.MONGODB_URI;
const dbName = config.MONGODB_DB;
const options = {};
const mongo = new MongoClient(uri, options);
@ -16,7 +15,7 @@ export const disconnect = async () => {
mongo.close();
}
export const getDB = async () => {
export const getDB = async (dbName = config.MONGODB_DB) => {
await connect();
return mongo.db(dbName);
}
@ -34,4 +33,15 @@ export const AccessTokens = async () => {
export const Planets = async () => {
const db = await getDB();
return db.collection('planets');
}
export const Lang = async (language = "en") => {
const db = await getDB(`${config.MONGODB_DB}_${language}`);
return [
await db.collection('general'),
await db.collection('buildings'),
await db.collection('ships'),
await db.collection('resources'),
await db.collection('research')
]
}

26
src/lib/utils/langDriver.ts
View File

@ -1,5 +1,7 @@
import { GET as langs } from '../../pages/api/lang.json';
export async function getSupportedLanguages() {
const metadata: [] = await (await fetch('http://localhost:4321/lang/metadata.json')).json();
const metadata: { id: string, name: string }[] = await (await langs()).json();
const response: Array<string> = [];
@ -32,23 +34,21 @@ export async function getHighestWeightedLanguage(header: string | null): Promise
return highestWeightedLang;
}
export async function getLocales(language: string, types: string[]) {
export async function getLocales(language: string) {
if(!(await getSupportedLanguages()).includes(language)) {
console.log(await getSupportedLanguages(), language)
return null;
}
const out: any = {};
const lang = await (await fetch(`http://localhost:4321/api/lang/${language}.json`)).json();
for(const type of types) {
const lang = await (await fetch(`http://localhost:4321/lang/${language}/${type}.json`)).json();
out[type] = {};
for(const category in lang) {
for(const element in lang[category]) {
out[type][`${category}_${element}`] = lang[category][element];
}
}
}
return lang.data;
}
return out;
export function getName(locale: { [key: string]: { id: string, name: string }[] }, type: string, name: string) {
return locale[type].find((element: { id: string }) => element.id === name)?.name ?? `NTL_${name}`;
}
export function getObj(locale: { [key: string]: { id: string, name: string, description: string | null }[] }, type: string, name: string) {
return locale[type].find((element: { id: string }) => element.id === name) ?? { id: name, name: `NTL_${name}`, description: `NTL_${name}` };
}

14
src/pages/api/lang.json.ts Normal file
View File

@ -0,0 +1,14 @@
export async function GET() {
return new Response(
JSON.stringify([
{
"id": "en",
"name": "English"
},
{
"id": "pl",
"name": "Polish"
}
]),
)
}

35
src/pages/api/lang/[id].json.ts Normal file
View File

@ -0,0 +1,35 @@
import type { APIRoute } from 'astro';
import { GET as langs } from '../lang.json';
import { getLang } from '../../../lib/db/lang';
const supportedLanguages: { id: string, name: string }[] = await (await langs()).json();
export const GET: APIRoute = async ({ params, request }) => {
const id = params.id;
if (!supportedLanguages.find(lang => lang.id === id)) {
return new Response(
JSON.stringify({
code: 404,
message: "Language not found"
}), { status: 404 }
)
}
const lang = await getLang(id);
if (!lang) {
return new Response(
JSON.stringify({
code: 500,
message: "Internal Server Error"
}), { status: 500 }
)
}
return new Response(
JSON.stringify({
code: 200,
message: "OK",
data: lang
})
)
}

8
src/pages/game/buildings.astro
View File

@ -3,7 +3,7 @@ import Layout from '../../layouts/Layout.astro';
import NavBar from '../../components/NavBar.astro';
import BuildingCard from '../../components/BuildingCard.astro';
import { getUserByAccessToken } from '../../lib/db/users';
import { getHighestWeightedLanguage, getLocales } from '../../lib/utils/langDriver';
import { getHighestWeightedLanguage, getLocales, getObj } from '../../lib/utils/langDriver';
import ResourceBar from '../../components/ResourceBar.astro';
const buildingsList = (await import('../../lib/data/buildings.json')).default;
@ -17,7 +17,7 @@ if(checkUser === null || checkUser.username !== username) return Astro.redirect(
const locale = await getHighestWeightedLanguage(Astro.request.headers.get('accept-language'));
const lang = await getLocales(locale, ['resources', 'game', 'buildings', 'research']);
const lang = await getLocales(locale);
const modalSet: { [key: string]: { resources: Array<any>, research: Array<any>, buildings: Array<any>, energy: number } } = {};
@ -55,8 +55,8 @@ buildingsList.forEach(cat => {
<div class="building-cat">
{cat.buildings.map(building => <BuildingCard
id={building.id}
name={lang["buildings"][`Label_${building.id}`].name}
description={lang["buildings"][`Label_${building.id}`].description}
name={getObj(lang, "buildings", building.id).name}
description={getObj(lang, "buildings", building.id).description ?? ""}
image="/favicon.svg" />)}
</div>
</div>

28
src/pages/game/profile.astro
View File

@ -2,7 +2,7 @@
import Layout from '../../layouts/Layout.astro';
import NavBar from '../../components/NavBar.astro';
import { getUserByAccessToken, getUserByNickOrEmail } from '../../lib/db/users';
import { getHighestWeightedLanguage, getLocales } from '../../lib/utils/langDriver';
import { getHighestWeightedLanguage, getLocales, getName } from '../../lib/utils/langDriver';
import ResourceBar from '../../components/ResourceBar.astro';
import format from '../../lib/utils/format';
@ -17,7 +17,7 @@ const locale = await getHighestWeightedLanguage(Astro.request.headers.get('accep
const user = await getUserByNickOrEmail(username);
const lang = await getLocales(locale, ['game']);
const lang = await getLocales(locale);
---
<Layout title="Profile">
@ -25,24 +25,24 @@ const lang = await getLocales(locale, ['game']);
<ResourceBar loggedIn="true" />
<div class="wrapper">
<h3>{format(lang["game"]['Label_userCreationDate'], user?.createdAt.toISOString().slice(0, 19).replace(/-/g, "/").replace("T", " ").toString() ?? "")}</h3>
<a href="/logout" class="a-button">{lang["game"]['Link_logout']}</a>
<h3>{format(getName(lang, 'general', 'user-creation-date'), user?.createdAt.toISOString().slice(0, 19).replace(/-/g, "/").replace("T", " ").toString() ?? "")}</h3>
<a href="/logout" class="a-button">{getName(lang, 'general', 'nav-logout')}</a>
</div>
<form id="changeUsernameForm" class="data-form">
<input class="data-form-input" type="text" name="username" placeholder={lang["game"]['Label_newUsernamePlaceholder']} />
<input class="data-form-input" type="password" name="password" placeholder={lang["game"]['Label_passwordPlaceholder']} />
<input class="data-form-button" type="button" value={lang["game"]['Link_changeUsername']} />
<input class="data-form-input" type="text" name="username" placeholder={getName(lang, 'general', 'input-placeholder-new-username')} />
<input class="data-form-input" type="password" name="password" placeholder={getName(lang, 'general', 'input-placeholder-password')} />
<input class="data-form-button" type="button" value={getName(lang, 'general', 'change-username')} />
</form>
<form id="changeEmailForm" class="data-form">
<input class="data-form-input" type="email" name="email" placeholder={lang["game"]['Label_newEmailPlaceholder']} />
<input class="data-form-input" type="password" name="password" placeholder={lang["game"]['Label_passwordPlaceholder']} />
<input class="data-form-button" type="button" value={lang["game"]['Link_changeEmail']} />
<input class="data-form-input" type="email" name="email" placeholder={getName(lang, 'general', 'input-placeholder-new-email')} />
<input class="data-form-input" type="password" name="password" placeholder={getName(lang, 'general', 'input-placeholder-password')} />
<input class="data-form-button" type="button" value={getName(lang, 'general', 'change-email')} />
</form>
<form id="changePasswordForm" class="data-form">
<input class="data-form-input" type="password" name="oldPassword" placeholder={lang["game"]['Label_oldPasswordPlaceholder']} />
<input class="data-form-input" type="password" name="password1" placeholder={lang["game"]['Label_newPasswordPlaceholder']} />
<input class="data-form-input" type="password" name="password2" placeholder={lang["game"]['Label_newPasswordVerifyPlaceholder']} />
<input class="data-form-button" type="button" value={lang["game"]['Link_changePassword']} />
<input class="data-form-input" type="password" name="oldPassword" placeholder={getName(lang, 'general', 'input-placeholder-old-password')} />
<input class="data-form-input" type="password" name="password1" placeholder={getName(lang, 'general', 'input-placeholder-new-password')} />
<input class="data-form-input" type="password" name="password2" placeholder={getName(lang, 'general', 'input-placeholder-new-password-verify')} />
<input class="data-form-button" type="button" value={getName(lang, 'general', 'change-password')} />
</form>
</Layout>

18
src/pages/game/research.astro
View File

@ -4,7 +4,7 @@ import { Icon } from 'astro-icon/components'
import Layout from '../../layouts/Layout.astro';
import NavBar from '../../components/NavBar.astro';
import { getUserByAccessToken } from '../../lib/db/users';
import { getHighestWeightedLanguage, getLocales } from '../../lib/utils/langDriver';
import { getHighestWeightedLanguage, getLocales, getName, getObj } from '../../lib/utils/langDriver';
import ResourceBar from '../../components/ResourceBar.astro';
type ResearchDetail = { id: string, level: number, requiredResearch: { id: string, level: number}[], cost: { [key: string]: number } };
@ -20,7 +20,7 @@ if(checkUser === null || checkUser.username !== username) return Astro.redirect(
const locale = await getHighestWeightedLanguage(Astro.request.headers.get('accept-language'));
const lang = await getLocales(locale, ['game', 'resources', 'buildings', 'research']);
const lang = await getLocales(locale);
const researchDetails: ResearchDetail[] = []; //TODO: Add union type for cost keys
researchList.forEach(element => {
@ -45,21 +45,21 @@ researchList.forEach(element => {
{researchDetails.map(research => (
<div class="research-card">
<h2>{lang["research"][`Label_${research.id}`].name}</h2>
<h2>{getObj(lang, "research", research.id).name}</h2>
<div class="research-card-wrapper">
<div class="research-image"></div>
{lang["research"][`Label_${research.id}`].description}<br />
{getObj(lang, "research", research.id).description}<br />
<a id={`research_${research.id}`} href="#" class="a-button">{lang["game"]['Link_research']}</a>
<a id={`research_${research.id}`} href="#" class="a-button">{getName(lang, "general", "nav-research")}</a>
<div class="research-req-icon">
<Icon class="research-req-icon-proper" name="mdi:help" />
<div class="research-req-tooltip">
<div>{lang["research"]['Label_required']}:</div>
<div>{getName(lang, "general", "required")}:</div>
{research.requiredResearch.length !== 0 ? research.requiredResearch.map(req => (
<div>
{lang["research"][`Label_${req.id}`].name} - {req.level}
{getObj(lang, "research", req.id).name} - {req.level}
</div>
)) : lang["research"]['Label_none']}
)) : getName(lang, "general", "none")}
</div>
</div>
</div>
@ -68,7 +68,7 @@ researchList.forEach(element => {
</div>
<div class="research-cost-wrapper">
{Object.entries(research.cost).map(([key, value]) => <div>
{lang["resources"][`Label_${key}`]}: {value} ||
{getName(lang, "resources", key)}: {value} ||
</div>)}
</div>
</div>

2
src/pages/game/ships.astro
View File

@ -20,7 +20,7 @@ const planet = await getPlanetById(new ObjectId(Astro.cookies.get('planetid')?.v
if(!planet) return;
const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.headers.get('accept-language')), ['ships']);
const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.headers.get('accept-language')));
---
<Layout title="Ships">