Compare commits
6 Commits
c74e61716c
...
b13a116cd4
Author | SHA1 | Date |
---|---|---|
Aelita4 | b13a116cd4 | |
Aelita4 | 503c098475 | |
Aelita4 | b6b2a2daa6 | |
Aelita4 | f97d394eb4 | |
Aelita4 | 7bd5a055e2 | |
Aelita4 | 1413ab8f83 |
After Width: | Height: | Size: 40 KiB |
After Width: | Height: | Size: 23 KiB |
After Width: | Height: | Size: 36 KiB |
After Width: | Height: | Size: 35 KiB |
After Width: | Height: | Size: 24 KiB |
After Width: | Height: | Size: 27 KiB |
After Width: | Height: | Size: 28 KiB |
After Width: | Height: | Size: 43 KiB |
After Width: | Height: | Size: 33 KiB |
After Width: | Height: | Size: 25 KiB |
After Width: | Height: | Size: 37 KiB |
After Width: | Height: | Size: 28 KiB |
After Width: | Height: | Size: 29 KiB |
After Width: | Height: | Size: 34 KiB |
After Width: | Height: | Size: 32 KiB |
After Width: | Height: | Size: 37 KiB |
After Width: | Height: | Size: 29 KiB |
After Width: | Height: | Size: 30 KiB |
|
@ -6,23 +6,25 @@ interface Props {
|
|||
name: string;
|
||||
description: string;
|
||||
image: string;
|
||||
button_type: string;
|
||||
button_name: string;
|
||||
}
|
||||
|
||||
const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.headers.get('accept-language')));
|
||||
|
||||
---
|
||||
|
||||
<div class="building-card" data-id={Astro.props.id}>
|
||||
<div><img src={Astro.props.image} /></div>
|
||||
<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">{getName(lang, "general", "nav-build")}</a>
|
||||
<div class="building-card-info-button">i</div>
|
||||
<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}</div>
|
||||
<div class="item-card-description">{Astro.props.description}</div>
|
||||
<a id={`button_${Astro.props.id}`} href="#" class="item-card-build">{getName(lang, Astro.props.button_type, Astro.props.button_name)}</a>
|
||||
<div class="item-card-info-button">i</div>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.building-card {
|
||||
.item-card {
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
border-radius: 8px;
|
||||
|
@ -35,21 +37,38 @@ const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.hea
|
|||
width: 49%;
|
||||
}
|
||||
|
||||
.building-card-expanded {
|
||||
.item-card-expanded {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.building-card-name {
|
||||
.item-card-image {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin: 4px;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.item-card-main-field {
|
||||
background-color: #ccc;
|
||||
width: 100%;
|
||||
margin: 4px;
|
||||
border-radius: 8px;
|
||||
padding-left: 8px;
|
||||
padding-right: 100px;
|
||||
}
|
||||
|
||||
.item-card-name {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.building-card-description {
|
||||
.item-card-description {
|
||||
font-size: 24px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.building-card-build {
|
||||
.item-card-build {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
|
@ -61,7 +80,7 @@ const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.hea
|
|||
right: 16px;
|
||||
}
|
||||
|
||||
.building-card-info-button {
|
||||
.item-card-info-button {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
|
@ -2,8 +2,9 @@
|
|||
import { ObjectId } from 'mongodb';
|
||||
import { calculateCurrentAvailableResources } from '../lib/utils/resourceManager';
|
||||
import { getHighestWeightedLanguage, getLocales, getName } from '../lib/utils/langDriver';
|
||||
import { getAllResources } from '../lib/db/resources';
|
||||
|
||||
import resourceTypes from '../lib/data/resources.json';
|
||||
const resourceTypes = await getAllResources();
|
||||
|
||||
const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.headers.get('accept-language')));
|
||||
|
||||
|
@ -22,13 +23,13 @@ for(const key in resources) {
|
|||
<div id="resourcebar-elements" class="resourcebar-elements">
|
||||
{resourceArray.map(res =>
|
||||
<div class="resourcebar-item"
|
||||
data-res-type={resourceTypes.find(x => x.name === res.name)?.type ?? "solid"}
|
||||
data-res-type={resourceTypes.find(x => x.id === res.name)?.type ?? "solid"}
|
||||
data-res-amount={res.amount}
|
||||
data-res-mining-rate={res.perHourMiningRate}
|
||||
style={(resourceTypes.find(x => x.name === res.name)?.type ?? "solid") === "solid" ? "" : "display: none;"}
|
||||
style={(resourceTypes.find(x => x.id === res.name)?.type ?? "solid") === "solid" ? "" : "display: none;"}
|
||||
>
|
||||
<div class="resourcebar-item-icon">
|
||||
<img src={resourceTypes.find(x => x.name === res.name)?.icon ?? "#"} alt={res.name} />
|
||||
<img src={resourceTypes.find(x => x.id === res.name)?.icon ?? "#"} alt={res.name} />
|
||||
</div>
|
||||
<div class="resourcebar-item-text-wrapper" data-resname={res.name}>
|
||||
<div class="resourcebar-item-text">{getName(lang, 'resources', res.name)}</div>
|
||||
|
|
|
@ -1,196 +0,0 @@
|
|||
[
|
||||
{
|
||||
"category": "mines",
|
||||
"buildings": [
|
||||
{
|
||||
"id": "iron-mine",
|
||||
"requirements": {
|
||||
"buildings": [],
|
||||
"research": [],
|
||||
"resources": [
|
||||
{
|
||||
"name": "iron",
|
||||
"amount": 1
|
||||
},
|
||||
{
|
||||
"name": "gold",
|
||||
"amount": 1
|
||||
},
|
||||
{
|
||||
"name": "coal",
|
||||
"amount": 1
|
||||
}
|
||||
]
|
||||
},
|
||||
"energy": 11,
|
||||
"multiplier": 2
|
||||
},
|
||||
{
|
||||
"id": "gold-mine",
|
||||
"requirements": {
|
||||
"buildings": [],
|
||||
"research": [],
|
||||
"resources": [
|
||||
{
|
||||
"name": "iron",
|
||||
"amount": 1
|
||||
},
|
||||
{
|
||||
"name": "gold",
|
||||
"amount": 1
|
||||
},
|
||||
{
|
||||
"name": "coal",
|
||||
"amount": 1
|
||||
}
|
||||
]
|
||||
},
|
||||
"energy": 11,
|
||||
"multiplier": 2.5
|
||||
},
|
||||
{
|
||||
"id": "coal-mine",
|
||||
"requirements": {
|
||||
"buildings": [],
|
||||
"research": [],
|
||||
"resources": [
|
||||
{
|
||||
"name": "iron",
|
||||
"amount": 1
|
||||
},
|
||||
{
|
||||
"name": "gold",
|
||||
"amount": 1
|
||||
},
|
||||
{
|
||||
"name": "coal",
|
||||
"amount": 1
|
||||
}
|
||||
]
|
||||
},
|
||||
"energy": 11,
|
||||
"multiplier": 3
|
||||
}
|
||||
]
|
||||
}, {
|
||||
"category": "utilities",
|
||||
"buildings": [
|
||||
{
|
||||
"id": "research-lab",
|
||||
"requirements": {
|
||||
"buildings": [],
|
||||
"research": [],
|
||||
"resources": [
|
||||
{
|
||||
"name": "iron",
|
||||
"amount": 1
|
||||
},
|
||||
{
|
||||
"name": "gold",
|
||||
"amount": 1
|
||||
},
|
||||
{
|
||||
"name": "coal",
|
||||
"amount": 1
|
||||
}
|
||||
]
|
||||
},
|
||||
"energy": 100,
|
||||
"multiplier": 3
|
||||
},
|
||||
{
|
||||
"id": "research-facility",
|
||||
"requirements": {
|
||||
"buildings": [
|
||||
{
|
||||
"id": "research-lab",
|
||||
"level": 3
|
||||
}
|
||||
],
|
||||
"research": [
|
||||
{
|
||||
"id": "advanced-technologies",
|
||||
"level": 2
|
||||
}
|
||||
],
|
||||
"resources": [
|
||||
{
|
||||
"name": "iron",
|
||||
"amount": 1
|
||||
},
|
||||
{
|
||||
"name": "gold",
|
||||
"amount": 1
|
||||
},
|
||||
{
|
||||
"name": "coal",
|
||||
"amount": 1
|
||||
}
|
||||
]
|
||||
},
|
||||
"energy": 100,
|
||||
"multiplier": 2
|
||||
}
|
||||
]
|
||||
}, {
|
||||
"category": "power-plants",
|
||||
"buildings": [
|
||||
{
|
||||
"id": "coal-power-plant",
|
||||
"requirements": {
|
||||
"buildings": [],
|
||||
"research": [],
|
||||
"resources": [
|
||||
{
|
||||
"name": "iron",
|
||||
"amount": 1
|
||||
},
|
||||
{
|
||||
"name": "gold",
|
||||
"amount": 1
|
||||
},
|
||||
{
|
||||
"name": "coal",
|
||||
"amount": 1
|
||||
}
|
||||
]
|
||||
},
|
||||
"energy": 100,
|
||||
"multiplier": 3
|
||||
},
|
||||
{
|
||||
"id": "nuclear-power-plant",
|
||||
"requirements": {
|
||||
"buildings": [
|
||||
{
|
||||
"id": "coal-power-plant",
|
||||
"level": 3
|
||||
}
|
||||
],
|
||||
"research": [
|
||||
{
|
||||
"id": "nuclear-power",
|
||||
"level": 2
|
||||
}
|
||||
],
|
||||
"resources": [
|
||||
{
|
||||
"name": "iron",
|
||||
"amount": 1
|
||||
},
|
||||
{
|
||||
"name": "gold",
|
||||
"amount": 1
|
||||
},
|
||||
{
|
||||
"name": "coal",
|
||||
"amount": 1
|
||||
}
|
||||
]
|
||||
},
|
||||
"energy": 100,
|
||||
"multiplier": 2
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
|
@ -1,144 +0,0 @@
|
|||
[
|
||||
{
|
||||
"id": "basic-engine",
|
||||
"requirements": {
|
||||
"buildings": [
|
||||
{
|
||||
"id": "research-lab",
|
||||
"level": 1
|
||||
}
|
||||
],
|
||||
"research": [],
|
||||
"resources": {
|
||||
"iron": 1000,
|
||||
"gold": 500
|
||||
}
|
||||
},
|
||||
"time": 60,
|
||||
"multiplier": 2
|
||||
}, {
|
||||
"id": "advanced-engine",
|
||||
"requirements": {
|
||||
"buildings": [
|
||||
{
|
||||
"id": "research-lab",
|
||||
"level": 5
|
||||
}
|
||||
],
|
||||
"research": [
|
||||
{
|
||||
"id": "basic-engine",
|
||||
"level": 1
|
||||
}
|
||||
],
|
||||
"resources": {
|
||||
"iron": 2000,
|
||||
"gold": 1000
|
||||
}
|
||||
},
|
||||
"time": 120,
|
||||
"multiplier": 3
|
||||
}, {
|
||||
"id": "combat-utilities",
|
||||
"requirements": {
|
||||
"buildings": [
|
||||
{
|
||||
"id": "research-lab",
|
||||
"level": 1
|
||||
}
|
||||
],
|
||||
"research": [],
|
||||
"resources": {
|
||||
"iron": 1000,
|
||||
"gold": 500
|
||||
}
|
||||
},
|
||||
"time": 60,
|
||||
"multiplier": 2
|
||||
}, {
|
||||
"id": "defensive-utilities",
|
||||
"requirements": {
|
||||
"buildings": [
|
||||
{
|
||||
"id": "research-lab",
|
||||
"level": 1
|
||||
}
|
||||
],
|
||||
"research": [],
|
||||
"resources": {
|
||||
"iron": 1000,
|
||||
"gold": 500
|
||||
}
|
||||
},
|
||||
"time": 60,
|
||||
"multiplier": 2
|
||||
}, {
|
||||
"id": "oxygen-production",
|
||||
"requirements": {
|
||||
"buildings": [
|
||||
{
|
||||
"id": "research-lab",
|
||||
"level": 1
|
||||
}
|
||||
],
|
||||
"research": [],
|
||||
"resources": {
|
||||
"iron": 1000,
|
||||
"gold": 500
|
||||
}
|
||||
},
|
||||
"time": 200,
|
||||
"multiplier": 2
|
||||
}, {
|
||||
"id": "terraforming",
|
||||
"requirements": {
|
||||
"buildings": [
|
||||
{
|
||||
"id": "research-lab",
|
||||
"level": 1
|
||||
}
|
||||
],
|
||||
"research": [],
|
||||
"resources": {
|
||||
"iron": 1000,
|
||||
"gold": 500
|
||||
}
|
||||
},
|
||||
"time": 500,
|
||||
"multiplier": 3
|
||||
}, {
|
||||
"id": "advanced-technologies",
|
||||
"requirements": {
|
||||
"buildings": [
|
||||
{
|
||||
"id": "research-lab",
|
||||
"level": 6
|
||||
}
|
||||
],
|
||||
"research": [],
|
||||
"resources": {
|
||||
"iron": 1000,
|
||||
"gold": 500
|
||||
}
|
||||
},
|
||||
"time": 1500,
|
||||
"multiplier": 4
|
||||
}, {
|
||||
"id": "nuclear-power",
|
||||
"requirements": {
|
||||
"buildings": [
|
||||
{
|
||||
"id": "research-lab",
|
||||
"level": 10
|
||||
}
|
||||
],
|
||||
"research": [],
|
||||
"resources": {
|
||||
"iron": 1000,
|
||||
"gold": 500
|
||||
}
|
||||
},
|
||||
"time": 3000,
|
||||
"multiplier": 5
|
||||
}
|
||||
]
|
|
@ -1,49 +0,0 @@
|
|||
[
|
||||
{
|
||||
"name": "coal",
|
||||
"type": "solid",
|
||||
"icon": "https://gamepedia.cursecdn.com/minecraft_gamepedia/5/58/Coal_JE4_BE3.png"
|
||||
},
|
||||
{
|
||||
"name": "iron",
|
||||
"type": "solid",
|
||||
"icon": "https://vignette.wikia.nocookie.net/minecraft/images/e/e8/New_Iron_IngotB.png/revision/latest?cb=20190520101024"
|
||||
},
|
||||
{
|
||||
"name": "gold",
|
||||
"type": "solid",
|
||||
"icon": "https://gamepedia.cursecdn.com/minecraft_gamepedia/5/57/Gold_Ingot_JE3_BE2.png"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "water",
|
||||
"type": "liquid",
|
||||
"icon": "https://ael.ovh/uranium.png"
|
||||
},
|
||||
{
|
||||
"name": "sulfuricAcid",
|
||||
"type": "liquid",
|
||||
"icon": "https://ael.ovh/uranium.png"
|
||||
},
|
||||
{
|
||||
"name": "liquidNitrogen",
|
||||
"type": "liquid",
|
||||
"icon": "https://ael.ovh/uranium.png"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "hydrogen",
|
||||
"type": "gas",
|
||||
"icon": "https://ael.ovh/uranium.png"
|
||||
},
|
||||
{
|
||||
"name": "oxygen",
|
||||
"type": "gas",
|
||||
"icon": "https://ael.ovh/uranium.png"
|
||||
},
|
||||
{
|
||||
"name": "helium3",
|
||||
"type": "gas",
|
||||
"icon": "https://ael.ovh/uranium.png"
|
||||
}
|
||||
]
|
|
@ -1,57 +0,0 @@
|
|||
[
|
||||
{
|
||||
"id": "transporter",
|
||||
"capacity": {
|
||||
"solid": 10000,
|
||||
"liquid": 10000,
|
||||
"gas": 10000
|
||||
},
|
||||
"requirements": {
|
||||
"buildings": [
|
||||
{
|
||||
"id": "shipyard",
|
||||
"level": 1
|
||||
}
|
||||
],
|
||||
"research": [],
|
||||
"resources": {
|
||||
"iron": 1000,
|
||||
"gold": 500
|
||||
}
|
||||
},
|
||||
"time": 40,
|
||||
"structure": {
|
||||
"hitpoints": 1000,
|
||||
"defense": 10,
|
||||
"attack": 0
|
||||
},
|
||||
"speed": 10
|
||||
}, {
|
||||
"id": "fighter",
|
||||
"capacity": {
|
||||
"solid": 100,
|
||||
"liquid": 100,
|
||||
"gas": 100
|
||||
},
|
||||
"requirements": {
|
||||
"buildings": [
|
||||
{
|
||||
"id": "shipyard",
|
||||
"level": 1
|
||||
}
|
||||
],
|
||||
"research": [],
|
||||
"resources": {
|
||||
"iron": 500,
|
||||
"gold": 200
|
||||
}
|
||||
},
|
||||
"time": 15,
|
||||
"structure": {
|
||||
"hitpoints": 800,
|
||||
"defense": 20,
|
||||
"attack": 20
|
||||
},
|
||||
"speed": 12
|
||||
}
|
||||
]
|
|
@ -0,0 +1,18 @@
|
|||
import DBBuilding from '../../types/DBBuilding';
|
||||
import { Buildings } from '../db/mongodb';
|
||||
|
||||
export const getAllBuildings = async () => {
|
||||
return (await Buildings()).find({}).toArray() as unknown as Array<DBBuilding>;
|
||||
}
|
||||
|
||||
export const getBuildingById = async (id: string) => {
|
||||
return (await Buildings()).findOne({
|
||||
id
|
||||
}) as unknown as DBBuilding;
|
||||
}
|
||||
|
||||
export const getBuildingsByCategory = async (category: string) => {
|
||||
return (await Buildings()).find({
|
||||
category
|
||||
}).toArray() as unknown as Array<DBBuilding>;
|
||||
}
|
|
@ -35,6 +35,26 @@ export const Planets = async () => {
|
|||
return db.collection('planets');
|
||||
}
|
||||
|
||||
export const Buildings = async() => {
|
||||
const db = await getDB();
|
||||
return db.collection('buildings');
|
||||
}
|
||||
|
||||
export const Research = async() => {
|
||||
const db = await getDB();
|
||||
return db.collection('research');
|
||||
}
|
||||
|
||||
export const Resources = async() => {
|
||||
const db = await getDB();
|
||||
return db.collection('resources');
|
||||
}
|
||||
|
||||
export const Ships = async() => {
|
||||
const db = await getDB();
|
||||
return db.collection('ships');
|
||||
}
|
||||
|
||||
export const Lang = async (language = "en") => {
|
||||
const db = await getDB(`${config.MONGODB_DB}_${language}`);
|
||||
return [
|
||||
|
|
|
@ -5,7 +5,7 @@ import type Planet from '../../types/Planet';
|
|||
import { getUserById } from './users';
|
||||
import type Building from '../../types/Building';
|
||||
import type Ship from '../../types/Ship';
|
||||
import type DBResource from '../../types/DBResource';
|
||||
import type PlayerResource from '../../types/PlayerResource';
|
||||
|
||||
export const getAllPlanets = async (options?: { fetchUserPlanets: boolean }) => {
|
||||
const planets = await Planets();
|
||||
|
@ -32,7 +32,7 @@ export const createPlanet = async (options: { name: string, owner?: User, ownerI
|
|||
owner: user,
|
||||
name: options.name,
|
||||
fields: options.fields,
|
||||
resources: new Array<DBResource>,
|
||||
resources: new Array<PlayerResource>,
|
||||
buildings: new Array<Building>,
|
||||
ships: new Array<Ship>
|
||||
}
|
||||
|
|
|
@ -0,0 +1,12 @@
|
|||
import DBResearch from '../../types/DBResearch';
|
||||
import { Research } from '../db/mongodb';
|
||||
|
||||
export const getAllResearch = async () => {
|
||||
return (await Research()).find({}).toArray() as unknown as Array<DBResearch>;
|
||||
}
|
||||
|
||||
export const getResearchById = async (id: string) => {
|
||||
return (await Research()).findOne({
|
||||
id
|
||||
}) as unknown as DBResearch;
|
||||
}
|
|
@ -0,0 +1,12 @@
|
|||
import DBResource from '../../types/DBResource';
|
||||
import { Resources } from '../db/mongodb';
|
||||
|
||||
export const getAllResources = async () => {
|
||||
return (await Resources()).find({}).toArray() as unknown as Array<DBResource>;
|
||||
}
|
||||
|
||||
export const getResourceById = async (id: string) => {
|
||||
return (await Resources()).findOne({
|
||||
id
|
||||
}) as unknown as DBResource;
|
||||
}
|
|
@ -0,0 +1,12 @@
|
|||
import DBShip from '../../types/DBShip';
|
||||
import { Ships } from '../db/mongodb';
|
||||
|
||||
export const getAllShips = async () => {
|
||||
return (await Ships()).find({}).toArray() as unknown as Array<DBShip>;
|
||||
}
|
||||
|
||||
export const getResourceById = async (id: string) => {
|
||||
return (await Ships()).findOne({
|
||||
id
|
||||
}) as unknown as DBShip;
|
||||
}
|
|
@ -1,10 +1,10 @@
|
|||
import { ObjectId } from "mongodb"
|
||||
import { Planets } from "../db/mongodb";
|
||||
import type DBResource from "../../types/DBResource";
|
||||
import type PlayerResource from "../../types/PlayerResource";
|
||||
import { getPlanetById } from "../db/planets";
|
||||
|
||||
export const createInitialResources = async (planetId: ObjectId) => {
|
||||
const resources: Array<DBResource> = [
|
||||
const resources: Array<PlayerResource> = [
|
||||
{
|
||||
name: "coal",
|
||||
amount: 11,
|
||||
|
@ -64,7 +64,7 @@ export const createInitialResources = async (planetId: ObjectId) => {
|
|||
updatePlanetResources(planetId, resources);
|
||||
}
|
||||
|
||||
export const getResourcesFromPlanet = async (planetId: ObjectId): Promise<Array<DBResource> | null> => {
|
||||
export const getResourcesFromPlanet = async (planetId: ObjectId): Promise<Array<PlayerResource> | null> => {
|
||||
const planet = await getPlanetById(planetId);
|
||||
|
||||
if(!planet) return null;
|
||||
|
@ -72,7 +72,7 @@ export const getResourcesFromPlanet = async (planetId: ObjectId): Promise<Array<
|
|||
return planet.resources;
|
||||
}
|
||||
|
||||
export const updatePlanetResources = async (planetId: ObjectId, resources: Array<DBResource>) => {
|
||||
export const updatePlanetResources = async (planetId: ObjectId, resources: Array<PlayerResource>) => {
|
||||
const planets = await Planets();
|
||||
await planets.updateOne({ _id: planetId }, {
|
||||
$set: {
|
||||
|
@ -81,7 +81,7 @@ export const updatePlanetResources = async (planetId: ObjectId, resources: Array
|
|||
});
|
||||
}
|
||||
|
||||
export const calculateCurrentAvailableResources = async (planetId: ObjectId): Promise<Array<DBResource>> => {
|
||||
export const calculateCurrentAvailableResources = async (planetId: ObjectId): Promise<Array<PlayerResource>> => {
|
||||
const resources = await getResourcesFromPlanet(planetId);
|
||||
|
||||
if(resources === null) return [];
|
||||
|
|
|
@ -1,12 +1,13 @@
|
|||
import { build, type APIRoute } from "astro";
|
||||
import validateAccessToken from "../../../lib/utils/validateAccessToken";
|
||||
import { calculateCurrentAvailableResources, updatePlanetResources } from "../../../lib/utils/resourceManager";
|
||||
import buildings from '../../../lib/data/buildings.json';
|
||||
import { getUserByAccessToken, getUserResearch } from "../../../lib/db/users";
|
||||
import Planet from "../../../types/Planet";
|
||||
import { createOrUpgradeBuilding, getPlanetById } from "../../../lib/db/planets";
|
||||
import { ObjectId } from "mongodb";
|
||||
import DBResource from "../../../types/DBResource";
|
||||
import DBResource from "../../../types/PlayerResource";
|
||||
import { getAllBuildings } from "../../../lib/db/buildings";
|
||||
import DBBuilding from "../../../types/DBBuilding";
|
||||
|
||||
export const POST: APIRoute = async({ request }) => {
|
||||
const response = await validateAccessToken(request);
|
||||
|
@ -36,12 +37,12 @@ export const POST: APIRoute = async({ request }) => {
|
|||
}
|
||||
|
||||
const buildingId = body.building;
|
||||
let buildingData: {id: string, name: string, requirements: { buildings: Array<{}>, research: Array<{}>, resources: Array<DBResource> }, multiplier: number} | null = null;
|
||||
buildings.forEach((category: any) => {
|
||||
// console.log(category.buildings.filter((element: any) => element.id === buildingId)[0]);
|
||||
if(buildingData !== null) return;
|
||||
buildingData = category.buildings.find((element: any) => element.id === buildingId);
|
||||
});
|
||||
let buildingData: DBBuilding | null = null;
|
||||
|
||||
const buildings = await getAllBuildings();
|
||||
|
||||
buildingData = buildings.find((element) => element.id === buildingId) ?? null;
|
||||
|
||||
if(!buildingData) {
|
||||
return new Response(
|
||||
JSON.stringify({
|
||||
|
@ -51,7 +52,6 @@ export const POST: APIRoute = async({ request }) => {
|
|||
}), { status: 400 }
|
||||
)
|
||||
}
|
||||
buildingData = buildingData as {id: string, name: string, requirements: { buildings: Array<{}>, research: Array<{}>, resources: Array<DBResource> }, multiplier: number}; // fuck you typescript
|
||||
let userPlanet: Planet | null;
|
||||
try {
|
||||
userPlanet = await getPlanetById(new ObjectId(body.planetId));
|
||||
|
|
|
@ -1,13 +1,13 @@
|
|||
import { type APIRoute } from "astro";
|
||||
import validateAccessToken from "../../../lib/utils/validateAccessToken";
|
||||
import research from '../../../lib/data/research.json';
|
||||
import { createOrUpgradeResearch, getUserByAccessToken, getUserResearch } from "../../../lib/db/users";
|
||||
import { getPlanetById } from "../../../lib/db/planets";
|
||||
import Planet from "../../../types/Planet";
|
||||
import { ObjectId } from "mongodb";
|
||||
import { calculateCurrentAvailableResources, getResourcesFromPlanet, updatePlanetResources } from "../../../lib/utils/resourceManager";
|
||||
import DBResource from "../../../types/DBResource";
|
||||
import PlayerResource from "../../../types/PlayerResource";
|
||||
import calculateAvailableResources from "../../../lib/utils/calculateAvailableResources";
|
||||
import { getAllResearch, getResearchById } from "../../../lib/db/research";
|
||||
|
||||
export const POST: APIRoute = async({ request }) => {
|
||||
const response = await validateAccessToken(request);
|
||||
|
@ -36,9 +36,11 @@ export const POST: APIRoute = async({ request }) => {
|
|||
)
|
||||
}
|
||||
|
||||
|
||||
const researchId = body.research;
|
||||
const researchData = research.filter((element: any) => element.id === researchId)[0];
|
||||
if(!researchId || !researchData) {
|
||||
const research = await getResearchById(researchId);
|
||||
|
||||
if(!research) {
|
||||
return new Response(
|
||||
JSON.stringify({
|
||||
code: 400,
|
||||
|
@ -72,7 +74,7 @@ export const POST: APIRoute = async({ request }) => {
|
|||
// check requirements
|
||||
// buildings
|
||||
const buildings = userPlanet.buildings;
|
||||
researchData.requirements.buildings.forEach((buildingReq) => {
|
||||
research.requirements.buildings.forEach((buildingReq) => {
|
||||
if(buildings.filter((building) => building.id === buildingReq.id)[0]?.level ?? 0 < buildingReq.level) {
|
||||
return new Response(
|
||||
JSON.stringify({
|
||||
|
@ -86,7 +88,7 @@ export const POST: APIRoute = async({ request }) => {
|
|||
|
||||
// research
|
||||
const playerResearch = await getUserResearch(user);
|
||||
researchData.requirements.research.forEach((researchReq) => {
|
||||
research.requirements.research.forEach((researchReq) => {
|
||||
if(playerResearch.filter((research) => research.id === researchReq.id)[0].level < researchReq.level) {
|
||||
return new Response(
|
||||
JSON.stringify({
|
||||
|
@ -113,19 +115,19 @@ export const POST: APIRoute = async({ request }) => {
|
|||
const level = playerCurrentResearch ? playerCurrentResearch.level : 0;
|
||||
const newResources = structuredClone(resources);
|
||||
const missingResources: Array<{}> = [];
|
||||
Object.entries(researchData.requirements.resources).forEach(([key, value]) => {
|
||||
const res = resources.filter((element: DBResource) => element.name === key)[0];
|
||||
const cost = playerCurrentResearch ? value * Math.pow(researchData.multiplier, level) : value;
|
||||
research.requirements.resources.forEach(resource => {
|
||||
const res = resources.filter((element: PlayerResource) => element.name === resource.name)[0];
|
||||
const cost = playerCurrentResearch ? resource.amount * Math.pow(research.multiplier, level) : resource.amount;
|
||||
|
||||
if(res.amount < cost) {
|
||||
missingResources.push({
|
||||
name: key,
|
||||
name: resource.name,
|
||||
required: cost,
|
||||
available: res.amount
|
||||
});
|
||||
return;
|
||||
}
|
||||
else newResources.filter((element: DBResource) => element.name === key)[0].amount -= cost;
|
||||
else newResources.filter((element: PlayerResource) => element.name === resource.name)[0].amount -= cost;
|
||||
});
|
||||
|
||||
if(missingResources.length > 0) {
|
||||
|
|
|
@ -1,12 +1,14 @@
|
|||
---
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
import NavBar from '../../components/NavBar.astro';
|
||||
import BuildingCard from '../../components/BuildingCard.astro';
|
||||
import BuildingCard from '../../components/ItemCard.astro';
|
||||
import { getUserByAccessToken } from '../../lib/db/users';
|
||||
import { getHighestWeightedLanguage, getLocales, getObj } from '../../lib/utils/langDriver';
|
||||
import { getHighestWeightedLanguage, getLocales, getName, getObj } from '../../lib/utils/langDriver';
|
||||
import ResourceBar from '../../components/ResourceBar.astro';
|
||||
import { getAllBuildings } from '../../lib/db/buildings';
|
||||
import DBBuilding from '../../types/DBBuilding';
|
||||
|
||||
const buildingsList = (await import('../../lib/data/buildings.json')).default;
|
||||
const buildingsList = await getAllBuildings();
|
||||
|
||||
const loggedToken = Astro.cookies.get('sessionToken')?.value ?? null;
|
||||
const username = Astro.cookies.get('username')?.value ?? "";
|
||||
|
@ -21,16 +23,20 @@ const lang = await getLocales(locale);
|
|||
|
||||
const modalSet: { [key: string]: { resources: Array<any>, research: Array<any>, buildings: Array<any>, energy: number } } = {};
|
||||
|
||||
buildingsList.forEach(cat => {
|
||||
cat.buildings.forEach(building => {
|
||||
modalSet[building.id] = {
|
||||
"resources": building.requirements.resources,
|
||||
"research": building.requirements.research,
|
||||
"buildings": building.requirements.buildings,
|
||||
"energy": building.energy
|
||||
};
|
||||
});
|
||||
});
|
||||
for(const building of buildingsList) {
|
||||
modalSet[building.id] = {
|
||||
resources: building.requirements.resources,
|
||||
research: building.requirements.research,
|
||||
buildings: building.requirements.buildings,
|
||||
energy: building.energy
|
||||
};
|
||||
}
|
||||
|
||||
const buildingsByCategory = buildingsList.reduce((acc: { [key: string]: DBBuilding[] }, building) => {
|
||||
if(!acc[building.category]) acc[building.category] = [];
|
||||
acc[building.category].push(building);
|
||||
return acc;
|
||||
}, {});
|
||||
---
|
||||
|
||||
<Layout title="Buildings">
|
||||
|
@ -48,19 +54,20 @@ buildingsList.forEach(cat => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{buildingsList.map(cat => (
|
||||
<div class="building-card">
|
||||
{console.log(cat.category)}
|
||||
<h3>{lang["buildings"][`Label_${cat.category}`]}</h3>
|
||||
<div class="building-cat">
|
||||
{cat.buildings.map(building => <BuildingCard
|
||||
{Object.entries(buildingsByCategory).map(([category, buildings]) => <>
|
||||
<h1>{getName(lang, 'buildings', `cat-${category}`)}</h1>
|
||||
<div class="building-cat">
|
||||
{buildings.map(building => (
|
||||
<BuildingCard
|
||||
id={building.id}
|
||||
name={getObj(lang, "buildings", building.id).name}
|
||||
description={getObj(lang, "buildings", building.id).description ?? ""}
|
||||
image="/favicon.svg" />)}
|
||||
</div>
|
||||
image={`/images/buildings/${building.id}.jpeg`}
|
||||
button_type="general"
|
||||
button_name="nav-build" />
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</>)}
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
|
@ -183,23 +190,27 @@ buildingsList.forEach(cat => {
|
|||
const modalBuildings = document.getElementById("building-modal-req-buildings");
|
||||
const modalResearch = document.getElementById("building-modal-req-research");
|
||||
|
||||
document.querySelectorAll('.building-card-info-button').forEach((el) => {
|
||||
document.querySelectorAll('.item-card-info-button').forEach((el) => {
|
||||
el.addEventListener('click', () => {
|
||||
// modal
|
||||
const modalDiv = document.getElementById('building-modal-details');
|
||||
if(!modalDiv) return;
|
||||
modalDiv.style.display = 'block';
|
||||
|
||||
modalResources.innerHTML = modalSet[el.parentElement.parentElement.dataset.id].resources.map(resource => {
|
||||
return `${lang['resources'][`Label_${resource.name}`]}: ${resource.amount}`;
|
||||
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 ?? [];
|
||||
|
||||
modalResources.innerHTML = reqResources.length === 0 ? "None" : reqResources.map(resource => {
|
||||
return `${lang['resources'].find(r => r.id === resource.name).name}: ${resource.amount}`;
|
||||
}).join("<br />");
|
||||
|
||||
modalBuildings.innerHTML = modalSet[el.parentElement.parentElement.dataset.id].buildings.map(building => {
|
||||
return `${lang['buildings'][`Label_${building.id}`].name}: ${building.level}`;
|
||||
modalBuildings.innerHTML = reqBuildings.length === 0 ? "None" : reqBuildings.map(building => {
|
||||
return `${lang['buildings'].find(b => b.id === building.id).name}: ${building.level}`;
|
||||
}).join("<br />");
|
||||
|
||||
modalResearch.innerHTML = modalSet[el.parentElement.parentElement.dataset.id].research.map(research => {
|
||||
return `${lang['research'][`Label_${research.id}`].name}: ${research.level}`;
|
||||
modalResearch.innerHTML = reqResearch.length === 0 ? "None" : reqResearch.map(research => {
|
||||
return `${lang['research'].find(r => r.id === research.id).name}: ${research.level}`;
|
||||
}).join("<br />");
|
||||
|
||||
// background
|
||||
|
|
|
@ -1,15 +1,14 @@
|
|||
---
|
||||
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, getName, getObj } from '../../lib/utils/langDriver';
|
||||
import ResourceBar from '../../components/ResourceBar.astro';
|
||||
import ItemCard from '../../components/ItemCard.astro';
|
||||
import DBResearch from '../../types/DBResearch';
|
||||
import { getAllResearch } from '../../lib/db/research';
|
||||
|
||||
type ResearchDetail = { id: string, level: number, requiredResearch: { id: string, level: number}[], cost: { [key: string]: number } };
|
||||
|
||||
const researchList = (await import('../../lib/data/research.json')).default;
|
||||
const researchList = await getAllResearch();
|
||||
|
||||
const loggedToken = Astro.cookies.get('sessionToken')?.value ?? null;
|
||||
const username = Astro.cookies.get('username')?.value ?? "";
|
||||
|
@ -22,57 +21,57 @@ const locale = await getHighestWeightedLanguage(Astro.request.headers.get('accep
|
|||
|
||||
const lang = await getLocales(locale);
|
||||
|
||||
const researchDetails: ResearchDetail[] = []; //TODO: Add union type for cost keys
|
||||
researchList.forEach(element => {
|
||||
const userLevel = checkUser.research.find(x => x.id === element.id)?.level ?? 0;
|
||||
const tempResDetails: ResearchDetail = {
|
||||
id: element.id,
|
||||
level: userLevel,
|
||||
requiredResearch: element.requirements.research,
|
||||
cost: {}
|
||||
}
|
||||
// type DBResearchDetails = DBResearch & { level: number };
|
||||
// const researchDetails: DBResearchDetails[] = [];
|
||||
// researchList.forEach(element => {
|
||||
// const userLevel = checkUser.research.find(x => x.id === element.id)?.level ?? 0;
|
||||
// const tempResDetails: DBResearchDetails = {
|
||||
// level: userLevel,
|
||||
// ...element
|
||||
// }
|
||||
|
||||
Object.entries(element.requirements.resources).forEach(([key, value]) => {
|
||||
tempResDetails.cost[key] = value * Math.pow(element.multiplier, userLevel);
|
||||
});
|
||||
researchDetails.push(tempResDetails);
|
||||
});
|
||||
// researchDetails.push(tempResDetails);
|
||||
// });
|
||||
|
||||
|
||||
const modalSet: { [key: string]: { resources: Array<any>, research: Array<any>, buildings: Array<any> } } = {};
|
||||
|
||||
for(const research of researchList) {
|
||||
modalSet[research.id] = {
|
||||
resources: research.requirements.resources,
|
||||
research: research.requirements.research,
|
||||
buildings: research.requirements.buildings,
|
||||
// energy: building.energy
|
||||
};
|
||||
}
|
||||
---
|
||||
|
||||
<Layout title="Research">
|
||||
<NavBar loggedIn="true" active="research" />
|
||||
<ResourceBar />
|
||||
|
||||
{researchDetails.map(research => (
|
||||
<div class="research-card">
|
||||
<h2>{getObj(lang, "research", research.id).name}</h2>
|
||||
<div class="research-card-wrapper">
|
||||
<div class="research-image"></div>
|
||||
{getObj(lang, "research", research.id).description}<br />
|
||||
|
||||
<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>{getName(lang, "general", "required")}:</div>
|
||||
{research.requiredResearch.length !== 0 ? research.requiredResearch.map(req => (
|
||||
<div>
|
||||
{getObj(lang, "research", req.id).name} - {req.level}
|
||||
</div>
|
||||
)) : getName(lang, "general", "none")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
Level: {research.level}
|
||||
</div>
|
||||
<div class="research-cost-wrapper">
|
||||
{Object.entries(research.cost).map(([key, value]) => <div>
|
||||
{getName(lang, "resources", key)}: {value} ||
|
||||
</div>)}
|
||||
</div>
|
||||
<div id="research-modal-background">
|
||||
<div id="research-modal-details" data-building-id="">
|
||||
<h3>Required resources</h3>
|
||||
<div class="research-modal-text" id="research-modal-req-resources">None</div>
|
||||
<h3>Required buildings</h3>
|
||||
<div class="research-modal-text" id="research-modal-req-buildings">None</div>
|
||||
<h3>Required research</h3>
|
||||
<div class="research-modal-text" id="research-modal-req-research">None</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div class="research-cards">
|
||||
{researchList.map(research => <>
|
||||
<ItemCard
|
||||
id={research.id}
|
||||
name={getObj(lang, "research", research.id).name}
|
||||
description={getObj(lang, "research", research.id).description ?? ""}
|
||||
image={`/images/research/${research.id}.jpeg`}
|
||||
button_type="general"
|
||||
button_name="nav-research" />
|
||||
</>)}
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
|
@ -154,53 +153,90 @@ researchList.forEach(element => {
|
|||
color: lime;
|
||||
}
|
||||
|
||||
.research-card {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
padding: 1rem;
|
||||
margin: 1rem;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.research-card-wrapper {
|
||||
.research-cards {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 40px;
|
||||
column-gap: 2%;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.research-image {
|
||||
background-color: pink;
|
||||
border-radius: 20px;
|
||||
width: 10em;
|
||||
height: 10em;
|
||||
}
|
||||
|
||||
.research-cost-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.research-req-icon {
|
||||
background-color: gray;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.research-req-icon-proper {
|
||||
#research-modal-background {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.research-req-icon .research-req-tooltip {
|
||||
position: absolute;
|
||||
background-color: grey;
|
||||
border-radius: 5px;
|
||||
transition: opacity 1s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.research-req-icon:hover .research-req-tooltip {
|
||||
opacity: 1;
|
||||
#research-modal-details {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 80%;
|
||||
max-width: 800px;
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
z-index: 101;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
<script define:vars={{ modalSet, lang }}>
|
||||
const modalResources = document.getElementById("research-modal-req-resources");
|
||||
const modalBuildings = document.getElementById("research-modal-req-buildings");
|
||||
const modalResearch = document.getElementById("research-modal-req-research");
|
||||
|
||||
document.querySelectorAll('.item-card-info-button').forEach((el) => {
|
||||
el.addEventListener('click', () => {
|
||||
// modal
|
||||
const modalDiv = document.getElementById('research-modal-details');
|
||||
if(!modalDiv) return;
|
||||
modalDiv.style.display = 'block';
|
||||
|
||||
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 ?? [];
|
||||
|
||||
modalResources.innerHTML = reqResources.length === 0 ? "None" : reqResources.map(resource => {
|
||||
return `${lang['resources'].find(r => r.id === resource.id).name}: ${resource.amount}`;
|
||||
}).join("<br />");
|
||||
|
||||
modalBuildings.innerHTML = reqBuildings.length === 0 ? "None" : reqBuildings.map(building => {
|
||||
return `${lang['buildings'].find(b => b.id === building.id).name}: ${building.level}`;
|
||||
}).join("<br />");
|
||||
|
||||
modalResearch.innerHTML = reqResearch.length === 0 ? "None" : reqResearch.map(research => {
|
||||
return `${lang['research'].find(r => r.id === research.id).name}: ${research.level}`;
|
||||
}).join("<br />");
|
||||
|
||||
// background
|
||||
const backgroundDiv = document.getElementById('research-modal-background');
|
||||
if(!backgroundDiv) return;
|
||||
backgroundDiv.style.display = 'block';
|
||||
});
|
||||
});
|
||||
|
||||
// close modal on background click
|
||||
const bg = document.getElementById('research-modal-background');
|
||||
|
||||
bg?.addEventListener('click', () => {
|
||||
const modalDiv = document.getElementById('research-modal-details');
|
||||
if(!modalDiv) return;
|
||||
modalDiv.style.display = 'none';
|
||||
|
||||
const backgroundDiv = document.getElementById('research-modal-background');
|
||||
if(!backgroundDiv) return;
|
||||
backgroundDiv.style.display = 'none';
|
||||
});
|
||||
|
||||
const allButtons = document.getElementsByClassName("a-button");
|
||||
|
||||
for(const researchButton of allButtons) {
|
||||
|
|
|
@ -2,12 +2,10 @@
|
|||
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, getObj } from '../../lib/utils/langDriver';
|
||||
import ResourceBar from '../../components/ResourceBar.astro';
|
||||
|
||||
import ships from '../../lib/data/ships.json';
|
||||
import { getPlanetById } from '../../lib/db/planets';
|
||||
import { ObjectId } from 'mongodb';
|
||||
import { getAllShips } from '../../lib/db/ships';
|
||||
import ItemCard from '../../components/ItemCard.astro';
|
||||
|
||||
const loggedToken = Astro.cookies.get('sessionToken')?.value ?? null;
|
||||
const username = Astro.cookies.get('username')?.value ?? "";
|
||||
|
@ -16,24 +14,48 @@ if(loggedToken === null || username === "") return Astro.redirect('/logout');
|
|||
const checkUser = await getUserByAccessToken(loggedToken);
|
||||
if(checkUser === null || checkUser.username !== username) return Astro.redirect('/logout');
|
||||
|
||||
const planet = await getPlanetById(new ObjectId(Astro.cookies.get('planetid')?.value));
|
||||
|
||||
if(!planet) return;
|
||||
const ships = await getAllShips();
|
||||
|
||||
const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.headers.get('accept-language')));
|
||||
|
||||
const modalSet: { [key: string]: { resources: Array<any>, research: Array<any>, buildings: Array<any> } } = {};
|
||||
|
||||
for(const ship of ships) {
|
||||
modalSet[ship.id] = {
|
||||
resources: ship.requirements.resources,
|
||||
research: ship.requirements.research,
|
||||
buildings: ship.requirements.buildings,
|
||||
// energy: building.energy
|
||||
};
|
||||
}
|
||||
---
|
||||
|
||||
<Layout title="Ships">
|
||||
<NavBar loggedIn="true" active="ships" />
|
||||
<ResourceBar />
|
||||
|
||||
{ships.map(ship => (
|
||||
<div class="ship-card">
|
||||
<div class="ship-title">
|
||||
<b>({planet.ships.find((s => s.id === ship.id))?.amount ?? 0})</b> <i>{ship.id}</i>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div id="ship-modal-background">
|
||||
<div id="ship-modal-details" data-building-id="">
|
||||
<h3>Required resources</h3>
|
||||
<div class="ship-modal-text" id="ship-modal-req-resources">None</div>
|
||||
<h3>Required buildings</h3>
|
||||
<div class="ship-modal-text" id="ship-modal-req-buildings">None</div>
|
||||
<h3>Required research</h3>
|
||||
<div class="ship-modal-text" id="ship-modal-req-research">None</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ship-cards">
|
||||
{ships.map(ship => <>
|
||||
<ItemCard
|
||||
id={ship.id}
|
||||
name={getObj(lang, "ships", ship.id).name}
|
||||
description={getObj(lang, "ships", ship.id).description ?? ""}
|
||||
image={`/images/ships/${ship.id}.jpeg`}
|
||||
button_type="general"
|
||||
button_name="nav-build" />
|
||||
</>)}
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
|
@ -114,8 +136,93 @@ const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.hea
|
|||
.a-button:hover {
|
||||
color: lime;
|
||||
}
|
||||
|
||||
.ship-cards {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 40px;
|
||||
column-gap: 2%;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
#ship-modal-background {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#ship-modal-details {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 80%;
|
||||
max-width: 800px;
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
z-index: 101;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
<script define:vars={{ modalSet, lang }}>
|
||||
const modalResources = document.getElementById("ship-modal-req-resources");
|
||||
const modalBuildings = document.getElementById("ship-modal-req-buildings");
|
||||
const modalResearch = document.getElementById("ship-modal-req-research");
|
||||
|
||||
document.querySelectorAll('.item-card-info-button').forEach((el) => {
|
||||
el.addEventListener('click', () => {
|
||||
// modal
|
||||
const modalDiv = document.getElementById('ship-modal-details');
|
||||
if(!modalDiv) return;
|
||||
modalDiv.style.display = 'block';
|
||||
|
||||
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 ?? [];
|
||||
|
||||
console.log(modalSet)
|
||||
|
||||
modalResources.innerHTML = reqResources.length === 0 ? "None" : reqResources.map(resource => {
|
||||
return `${lang['resources'].find(r => r.id === resource.id).name}: ${resource.amount}`;
|
||||
}).join("<br />");
|
||||
|
||||
modalBuildings.innerHTML = reqBuildings.length === 0 ? "None" : reqBuildings.map(building => {
|
||||
return `${lang['buildings'].find(b => b.id === building.id).name}: ${building.level}`;
|
||||
}).join("<br />");
|
||||
|
||||
modalResearch.innerHTML = reqResearch.length === 0 ? "None" : reqResearch.map(research => {
|
||||
return `${lang['research'].find(r => r.id === research.id).name}: ${research.level}`;
|
||||
}).join("<br />");
|
||||
|
||||
// background
|
||||
const backgroundDiv = document.getElementById('ship-modal-background');
|
||||
if(!backgroundDiv) return;
|
||||
backgroundDiv.style.display = 'block';
|
||||
});
|
||||
});
|
||||
|
||||
// close modal on background click
|
||||
const bg = document.getElementById('ship-modal-background');
|
||||
|
||||
bg?.addEventListener('click', () => {
|
||||
const modalDiv = document.getElementById('ship-modal-details');
|
||||
if(!modalDiv) return;
|
||||
modalDiv.style.display = 'none';
|
||||
|
||||
const backgroundDiv = document.getElementById('ship-modal-background');
|
||||
if(!backgroundDiv) return;
|
||||
backgroundDiv.style.display = 'none';
|
||||
});
|
||||
|
||||
const allButtons = document.getElementsByClassName("a-button");
|
||||
|
||||
for(const researchButton of allButtons) {
|
||||
|
|
|
@ -0,0 +1,11 @@
|
|||
export default interface DBBuilding {
|
||||
id: string,
|
||||
category: string,
|
||||
requirements: {
|
||||
buildings: Array<{ id: string, level: number }>,
|
||||
research: Array<{ id: string, level: number }>,
|
||||
resources: Array<{ name: string, amount: number }>,
|
||||
},
|
||||
energy: number,
|
||||
multiplier: number,
|
||||
}
|
|
@ -0,0 +1,10 @@
|
|||
export default interface DBResearch {
|
||||
id: string,
|
||||
requirements: {
|
||||
buildings: Array<{ id: string, level: number }>,
|
||||
research: Array<{ id: string, level: number }>,
|
||||
resources: Array<{ name: string, amount: number }>,
|
||||
},
|
||||
time: number,
|
||||
multiplier: number,
|
||||
}
|
|
@ -1,6 +1,5 @@
|
|||
import type Resource from "./Resource";
|
||||
|
||||
export default interface DBResource extends Resource {
|
||||
lastUpdated: Date;
|
||||
perHourMiningRate: number;
|
||||
export default interface DBResource {
|
||||
id: string,
|
||||
type: string,
|
||||
icon: string
|
||||
}
|
|
@ -0,0 +1,20 @@
|
|||
export default interface DBShip {
|
||||
id: string,
|
||||
capacity: {
|
||||
solid: number,
|
||||
liquid: number,
|
||||
gas: number,
|
||||
},
|
||||
requirements: {
|
||||
buildings: Array<{ id: string, level: number }>,
|
||||
research: Array<{ id: string, level: number }>,
|
||||
resources: Array<{ name: string, amount: number }>,
|
||||
},
|
||||
time: number,
|
||||
structure: {
|
||||
hitpoints: number,
|
||||
defense: number,
|
||||
attack: number,
|
||||
},
|
||||
speed: number,
|
||||
}
|
|
@ -1,5 +1,5 @@
|
|||
import type { ObjectId } from "mongodb";
|
||||
import type DBResource from "./DBResource";
|
||||
import type PlayerResource from "./PlayerResource";
|
||||
import type Building from "./Building";
|
||||
import type Ship from "./Ship";
|
||||
import type User from "./User";
|
||||
|
@ -9,7 +9,7 @@ export default interface Planet {
|
|||
owner: User,
|
||||
name: string,
|
||||
fields: number,
|
||||
resources: Array<DBResource>,
|
||||
resources: Array<PlayerResource>,
|
||||
buildings: Array<Building>,
|
||||
ships: Array<Ship>,
|
||||
}
|
|
@ -0,0 +1,6 @@
|
|||
import type Resource from "./Resource";
|
||||
|
||||
export default interface DBResource extends Resource {
|
||||
lastUpdated: Date;
|
||||
perHourMiningRate: number;
|
||||
}
|