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

Add optional number input for ItemCard

This commit is contained in:
Aelita4 2024-11-23 11:00:36 +01:00
parent 61e8d9d9fc
commit 4b85c2b30a
Signed by: Aelita4
GPG Key ID: E44490C2025906C1
4 changed files with 46 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/ItemCard.astro
View File

@ -10,6 +10,7 @@ interface Props {
image: string;
button_type: string;
button_name: string;
has_amount_input?: string;
}
const lang = await getLocales(Astro.cookies.get('language')?.value ?? await getHighestWeightedLanguage(Astro.request.headers.get('accept-language')));
@ -17,10 +18,14 @@ const lang = await getLocales(Astro.cookies.get('language')?.value ?? await getH
<div class="item-card" data-id={Astro.props.id}>
<img class="item-card-image" src={Astro.props.image} />
<div class="item-card-main-field">
<div class="item-card-name">{Astro.props.name} | {Astro.props.level}</div>
<div class="item-card-description">{Astro.props.description} <a href={`/wiki/${Astro.props.category}/${Astro.props.id}`}>[more]</a></div>
<form method="post"><input type="hidden" name="id" value={Astro.props.id} /><input type="submit" class="item-card-build" value={getName(lang, Astro.props.button_type, Astro.props.button_name)} /></form>
<div class="item-card-info-button">i</div>
<form method="post">
<input type="hidden" name="id" value={Astro.props.id} />
<div class="item-card-name">{Astro.props.name} | {Astro.props.level}</div>
<div class="item-card-description">{Astro.props.description} <a href={`/wiki/${Astro.props.category}/${Astro.props.id}`}>[more]</a></div>
<input type="submit" class="item-card-build" value={getName(lang, Astro.props.button_type, Astro.props.button_name)} />
<div class="item-card-info-button">i</div>
{Astro.props.has_amount_input === "true" && <input type="number" name="amount" />}
</form>
</div>
</div>
<style>

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

@ -117,6 +117,7 @@ const buildingsByCategory = buildingsList.reduce((acc: { [key: string]: Array<DB
border-radius: 8px;
padding: 1rem;
z-index: 101;
color: white;
}
h1 {
@ -144,9 +145,9 @@ h1 {
if(!modalDiv) return;
modalDiv.style.display = 'block';
const reqResources = modalSet[el.parentElement.parentElement.dataset.id]?.resources ?? [];
const reqBuildings = modalSet[el.parentElement.parentElement.dataset.id]?.buildings ?? [];
const reqResearch = modalSet[el.parentElement.parentElement.dataset.id]?.research ?? [];
const reqResources = modalSet[el.parentElement.parentElement.parentElement.dataset.id]?.resources ?? [];
const reqBuildings = modalSet[el.parentElement.parentElement.parentElement.dataset.id]?.buildings ?? [];
const reqResearch = modalSet[el.parentElement.parentElement.parentElement.dataset.id]?.research ?? [];
modalResources.innerHTML = reqResources.length === 0 ? "None" : reqResources.map(resource => {
return `${lang['resources'].find(r => r.id === resource.id).name}: ${resource.amount}`;

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

@ -100,6 +100,7 @@ for(const research of researchList) {
border-radius: 8px;
padding: 1rem;
z-index: 101;
color: white;
}
</style>
<script define:vars={{ modalSet, lang }}>
@ -116,9 +117,9 @@ for(const research of researchList) {
console.log(modalSet)
const reqResources = modalSet[el.parentElement.parentElement.dataset.id]?.resources ?? [];
const reqBuildings = modalSet[el.parentElement.parentElement.dataset.id]?.buildings ?? [];
const reqResearch = modalSet[el.parentElement.parentElement.dataset.id]?.research ?? [];
const reqResources = modalSet[el.parentElement.parentElement.parentElement.dataset.id]?.resources ?? [];
const reqBuildings = modalSet[el.parentElement.parentElement.parentElement.dataset.id]?.buildings ?? [];
const reqResearch = modalSet[el.parentElement.parentElement.parentElement.dataset.id]?.research ?? [];
modalResources.innerHTML = reqResources.length === 0 ? "None" : reqResources.map(resource => {
return `${lang['resources'].find(r => r.id === resource.id).name}: ${resource.amount}`;

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

@ -6,11 +6,33 @@ import SystemManager from '../../lib/classes/managers/SystemManager';
import { getAllShips } from '../../lib/db/ships';
import { getObj } from '../../lib/utils/langDriver';
const { lang } = Astro.locals;
const { token, lang } = Astro.locals;
const active: SystemManager | Planet = Astro.locals.active;
const ships = await getAllShips();
if(Astro.request.method === "POST") {
const body = await Astro.request.formData();
const id = body.get("id") as string;
const amount = parseInt(body.get("amount") as string ?? "1");
const request = await (await fetch(Astro.url.origin + '/api/ships/addShip', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + token
},
body: JSON.stringify({
planet: active instanceof SystemManager ? active.data._id : active._id,
ship: id,
amount
})
})).json();
console.log(request);
}
const modalSet: { [key: string]: { resources: Array<any>, research: Array<any>, buildings: Array<any> } } = {};
for(const ship of ships) {
@ -46,7 +68,8 @@ const planetId = active instanceof SystemManager ? active.data._id : active._id;
description={getObj(lang, "ships", ship.id).description ?? ""}
image={`/images/ships/${ship.id}.jpeg`}
button_type="general"
button_name="nav-build" />
button_name="nav-build"
has_amount_input="true" />
</>)}
</div>
</LoggedIn>
@ -84,6 +107,7 @@ const planetId = active instanceof SystemManager ? active.data._id : active._id;
border-radius: 8px;
padding: 1rem;
z-index: 101;
color: white;
}
</style>
<script define:vars={{ modalSet, lang, planetId }}>
@ -98,9 +122,9 @@ const planetId = active instanceof SystemManager ? active.data._id : active._id;
if(!modalDiv) return;
modalDiv.style.display = 'block';
const reqResources = modalSet[el.parentElement.parentElement.dataset.id]?.resources ?? [];
const reqBuildings = modalSet[el.parentElement.parentElement.dataset.id]?.buildings ?? [];
const reqResearch = modalSet[el.parentElement.parentElement.dataset.id]?.research ?? [];
const reqResources = modalSet[el.parentElement.parentElement.parentElement.dataset.id]?.resources ?? [];
const reqBuildings = modalSet[el.parentElement.parentElement.parentElement.dataset.id]?.buildings ?? [];
const reqResearch = modalSet[el.parentElement.parentElement.parentElement.dataset.id]?.research ?? [];
modalResources.innerHTML = reqResources.length === 0 ? "None" : reqResources.map(resource => {
return `${lang['resources'].find(r => r.id === resource.id).name}: ${resource.amount}`;