Explain what buildings do and show their building time.

This commit is contained in:
Adrian 2024-11-21 16:20:40 +01:00
parent 0ee34e6831
commit 4151e68b10
6 changed files with 155 additions and 16 deletions

View File

@ -56,6 +56,10 @@ export default [
},
constructionTimeReductionPerLevel: 0.025,
},
description: {
short: '',
long: 'Increases the construction time of buildings by 2,5% per level, and unlocks new buildings.'
},
},
{
type: 'woodcutter',
@ -84,6 +88,10 @@ export default [
return prod;
},
},
description: {
short: '',
long: 'Produces wood.'
},
},
{
type: 'mine',
@ -112,6 +120,10 @@ export default [
return prod;
},
},
description: {
short: '',
long: 'Produces iron.'
},
},
{
type: 'pit',
@ -140,6 +152,10 @@ export default [
return prod;
},
},
description: {
short: '',
long: 'Produces stone.'
},
},
{
type: 'field',
@ -164,6 +180,10 @@ export default [
return prod;
},
},
description: {
short: '',
long: 'Produces food.'
},
},
{
type: 'warehouse',
@ -191,6 +211,10 @@ export default [
};
},
},
description: {
short: 'Stores wood, stone and iron',
long: 'Stores wood, stone and iron.'
},
},
{
type: 'granary',
@ -218,6 +242,10 @@ export default [
};
},
},
description: {
short: 'Stores food',
long: 'Stores food.'
},
},
{
type: 'great-warehouse',
@ -245,6 +273,10 @@ export default [
};
},
},
description: {
short: 'Stores great quantities of wood, stone and iron',
long: 'Stores great quantities of wood, stone and iron.'
},
},
{
type: 'great-granary',
@ -272,6 +304,10 @@ export default [
};
},
},
description: {
short: 'Stores great quantities of food',
long: 'Stores great quantities of food.'
},
},
{
type: 'university',
@ -299,6 +335,10 @@ export default [
recruitmentTime: (V: VillageState, self: BuildingType) => 3 - 0.06 * self.level,
},
},
description: {
short: 'To recruit philosophers',
long: 'Recruit philosophers. Recruitment time is lowered by 2% per level.'
},
},
{
type: 'barracks',
@ -323,9 +363,13 @@ export default [
},
units: {
type: 'soldier',
recruitmentTime: (V: VillageState, self: BuildingType) => 2 - 0.03 * self.level,
recruitmentTime: (V: VillageState, self: BuildingType) => 2 - 0.04 * self.level,
},
},
description: {
short: 'To recruit soldiers',
long: 'Recruit soldiers. Recruitment time is lowered by 2% per level.'
},
},
{
type: 'palace',
@ -357,6 +401,10 @@ export default [
},
},
},
description: {
short: 'Attracts heroes',
long: 'Attracts a new hero at levels 5 and 10.'
},
},
{
type: 'sawmill',
@ -384,6 +432,10 @@ export default [
return prod;
},
},
description: {
short: 'Improves wood production',
long: 'Improves wood production by 5% per level.'
},
},
{
type: 'stonecutter',
@ -411,6 +463,10 @@ export default [
return prod;
},
},
description: {
short: 'Improves stone production',
long: 'Improves stone production by 5% per level.'
},
},
{
type: 'blacksmith',
@ -438,6 +494,10 @@ export default [
return prod;
},
},
description: {
short: 'Improves iron production',
long: 'Improves iron production by 5% per level.'
},
},
{
type: 'bakery',
@ -465,6 +525,10 @@ export default [
return prod;
},
},
description: {
short: 'Improves food production',
long: 'Improves food production by 5% per level.'
},
},
{
type: 'wonder',
@ -496,5 +560,9 @@ export default [
},
},
},
description: {
short: 'Provides a huge culture boost',
long: 'Gives 18,000 culture points upon construction.'
},
},
];

View File

@ -1,9 +1,10 @@
<script lang="ts">
import { createBuilding } from "../create";
import buildings from "../data/buildings";
import { getTimeToBuild } from "../logic";
import moves from "../moves";
import showBuildingCreator from "../stores/showBuildingCreator";
import { canPayBuildingCost, getTownhall } from "../utils";
import { canPayBuildingCost, getPrettyTime, getTownhall } from "../utils";
import village from "../village";
import Cost from "./Cost.svelte";
@ -38,21 +39,27 @@
<section>
<div class="building-creator">
<header>
<h1>Build</h1>
<h1>Choose a new building</h1>
<span class="close">
<button on:click={ close }>X</button>
</span>
</header>
<div class="buildings">
{ #each constructible as building }
<div class="building">
<div class="content">
<img src="/img/buildings/{building.type}.png" alt="">
<div>
<p>{ building.name }</p>
<h3>{ building.name }</h3>
<p>{ building.description.short }</p>
</div>
</div>
<Cost cost={ building.cost(1) } />
<button
on:click={ () => build(building.type) }
disabled={ !canPayBuildingCost($village, building) }
>
Build
Build ({ getPrettyTime(getTimeToBuild($village, building, 1)) })
</button>
</div>
{ /each }
@ -75,25 +82,60 @@
.building-creator {
background-color: hsl(0, 0%, 20%);
border: 0.2em solid grey;
border: 0.2em solid hsl(0, 0%, 40%);
border-radius: .4em;
box-sizing: border-box;
width: 80%;
height: 60%;
}
.building-creator header {
align-items: center;
border-bottom: 2px solid hsl(0, 0%, 40%);
box-sizing: border-box;
display: flex;
height: 15%;
justify-content: center;
position: relative;
}
.building-creator header h1 {
margin: 0;
}
.building-creator header .close {
position: absolute;
right: 1em;
top: 0;
top: 1em;
}
.building-creator .buildings {
box-sizing: border-box;
display: grid;
gap: 1em;
grid-template-columns: repeat(4, 1fr);
height: 85%;
overflow: hidden;
overflow-y: scroll;
padding: 0.5em;
}
.building {
background-color: hsl(0, 0%, 22%);
box-shadow: 0 0 0.2em hsl(0, 0%, 15%);
padding: 0.4em 0.2em;
}
.building .content {
display: flex;
text-align: left;
}
.building .content img {
height: 10em;
}
.building .content h3 {
margin: 0;
}
</style>

View File

@ -1,7 +1,8 @@
<script lang="ts">
import { getTimeToBuild } from "../logic";
import moves from "../moves";
import showBuildingPanel from "../stores/showBuildingPanel";
import { getBuilding, getBuildingUpgradeCost, getPrettyTime } from "../utils";
import { canPayBuildingCost, getBuilding, getBuildingUpgradeCost, getPrettyTime } from "../utils";
import village from "../village";
import BuildingRecruitment from "./BuildingRecruitment.svelte";
import Cost from "./Cost.svelte";
@ -33,6 +34,9 @@
<button on:click={ close }>X</button>
</span>
</header>
<div class="description">
<p>{ building.description.long }</p>
</div>
<div class="content">
{ #if building.level === 0 }
<p>Building in construction…</p>
@ -51,7 +55,12 @@
{ :else }
<div>
<Cost cost={ getBuildingUpgradeCost($village, building) } />
<button on:click={ () => upgrade() }>Upgrade</button>
<button
disabled={ !canPayBuildingCost($village, building) }
on:click={ () => upgrade() }
>
Upgrade ({ getPrettyTime(getTimeToBuild($village, building, building.level + 1)) })
</button>
</div>
{ /if }
</div>

View File

@ -2,6 +2,7 @@
import { Duration } from 'luxon';
import type { CostType } from "../types";
import village from '../village';
export let cost: CostType;
export let duration: number | null = null;
@ -11,19 +12,30 @@
</script>
<div class="cost">
<div>
<div
class:short={ $village.resources.wood < cost.wood }
>
<img src="/img/icons/wood.png" alt="Wood" />
{ cost.wood }
</div>
<div>
<div
class:short={ $village.resources.stone < cost.stone }
>
<img src="/img/icons/stone.png" alt="Stone" />
{ cost.stone }
</div>
<div>
<div
class:short={ $village.resources.iron < cost.iron }
>
<img src="/img/icons/iron.png" alt="Iron" />
{ cost.iron }
</div>
<div>
<div
class:short={ $village.resources.food < cost.food }
>
<img src="/img/icons/food.png" alt="Food" />
{ cost.food }
</div>
@ -48,4 +60,8 @@
align-items: center;
gap: 0.2em;
}
.cost .short {
color: red;
}
</style>

View File

@ -1,11 +1,11 @@
<script lang="ts">
import { flip } from "svelte/animate";
import { fly } from "svelte/transition";
import moves from "../moves";
import { getPrettyTime } from "../utils";
import village from "../village";
import Reward from "./Reward.svelte";
import { flip } from "svelte/animate";
import { getPrettyTime } from "../utils";
$: availableHeroes = $village.heroes.filter(h => !$village.quests.some(q => q.hero === h.id));

View File

@ -47,6 +47,10 @@ export interface BuildingSource {
onLevelUp?: Function;
};
};
description: {
short: string;
long: string;
};
}