src/board/BuildingTile.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import moves from "../moves";
     import type { BuildingType } from "../types";
-    import { canPayBuildingCost, getPrettyTime } from "../utils";
+    import { canPayBuildingCost } from "../utils";
     import village from "../village";
 
     export let building: BuildingType;
@@ -23,6 +23,7 @@
         <img src="/img/buildings/{ building.type }.png" alt="">
     </div>
     <div class="content">
+        <!-- <p>{ building.name }</p> -->
         <div class="level">
             <button
                 class:can-upgrade={ canUpgrade }
@@ -33,7 +34,7 @@
                 { building.level }
                 { #if building.state.upgrade.isUpgrading }
                 <span>
-                    ({ getPrettyTime(building.state.upgrade.remainingTime) })
+                    ({ Math.ceil(building.state.upgrade.remainingTime / 1000) }’)
                 </span>
                 { /if }
             </button>

src/data/buildings.ts

@@ -56,10 +56,6 @@ 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',
@@ -88,10 +84,6 @@ export default [
                 return prod;
             },
         },
-        description: {
-            short: '',
-            long: 'Produces wood.'
-        },
     },
     {
         type: 'mine',
@@ -120,10 +112,6 @@ export default [
                 return prod;
             },
         },
-        description: {
-            short: '',
-            long: 'Produces iron.'
-        },
     },
     {
         type: 'pit',
@@ -152,10 +140,6 @@ export default [
                 return prod;
             },
         },
-        description: {
-            short: '',
-            long: 'Produces stone.'
-        },
     },
     {
         type: 'field',
@@ -180,10 +164,6 @@ export default [
                 return prod;
             },
         },
-        description: {
-            short: '',
-            long: 'Produces food.'
-        },
     },
     {
         type: 'warehouse',
@@ -211,10 +191,6 @@ export default [
                 };
             },
         },
-        description: {
-            short: 'Stores wood, stone and iron',
-            long: 'Stores wood, stone and iron.'
-        },
     },
     {
         type: 'granary',
@@ -242,10 +218,6 @@ export default [
                 };
             },
         },
-        description: {
-            short: 'Stores food',
-            long: 'Stores food.'
-        },
     },
     {
         type: 'great-warehouse',
@@ -273,10 +245,6 @@ export default [
                 };
             },
         },
-        description: {
-            short: 'Stores great quantities of wood, stone and iron',
-            long: 'Stores great quantities of wood, stone and iron.'
-        },
     },
     {
         type: 'great-granary',
@@ -304,16 +272,12 @@ export default [
                 };
             },
         },
-        description: {
-            short: 'Stores great quantities of food',
-            long: 'Stores great quantities of food.'
-        },
     },
     {
         type: 'university',
         name: 'University',
         maxLevel: 20,
-        requiredTownhallLevel: 3,
+        requiredTownhallLevel: 5,
         cost: (level: number) => {
             return {
                 wood: getUnitBuildingCost(level, 75),
@@ -332,19 +296,15 @@ export default [
             },
             units: {
                 type: 'philosopher',
-                recruitmentTime: (V: VillageState, self: BuildingType) => 3 - 0.06 * self.level,
+                recruitmentTime: (V: VillageState, self: BuildingType) => 2 - 0.06 * self.level,
             },
         },
-        description: {
-            short: 'To recruit philosophers',
-            long: 'Recruit philosophers. Recruitment time is lowered by 2% per level.'
-        },
     },
     {
         type: 'barracks',
         name: 'Barracks',
         maxLevel: 20,
-        requiredTownhallLevel: 0,
+        requiredTownhallLevel: 3,
         cost: (level: number) => {
             return {
                 wood: getUnitBuildingCost(level, 60),
@@ -363,13 +323,9 @@ export default [
             },
             units: {
                 type: 'soldier',
-                recruitmentTime: (V: VillageState, self: BuildingType) => 2 - 0.04 * self.level,
+                recruitmentTime: (V: VillageState, self: BuildingType) => 1 - 0.03 * self.level,
             },
         },
-        description: {
-            short: 'To recruit soldiers',
-            long: 'Recruit soldiers. Recruitment time is lowered by 2% per level.'
-        },
     },
     {
         type: 'palace',
@@ -401,10 +357,6 @@ export default [
                 },
             },
         },
-        description: {
-            short: 'Attracts heroes',
-            long: 'Attracts a new hero at levels 5 and 10.'
-        },
     },
     {
         type: 'sawmill',
@@ -432,10 +384,6 @@ export default [
                 return prod;
             },
         },
-        description: {
-            short: 'Improves wood production',
-            long: 'Improves wood production by 5% per level.'
-        },
     },
     {
         type: 'stonecutter',
@@ -463,10 +411,6 @@ export default [
                 return prod;
             },
         },
-        description: {
-            short: 'Improves stone production',
-            long: 'Improves stone production by 5% per level.'
-        },
     },
     {
         type: 'blacksmith',
@@ -494,10 +438,6 @@ export default [
                 return prod;
             },
         },
-        description: {
-            short: 'Improves iron production',
-            long: 'Improves iron production by 5% per level.'
-        },
     },
     {
         type: 'bakery',
@@ -525,10 +465,6 @@ export default [
                 return prod;
             },
         },
-        description: {
-            short: 'Improves food production',
-            long: 'Improves food production by 5% per level.'
-        },
     },
     {
         type: 'wonder',
@@ -560,9 +496,5 @@ export default [
                 },
             },
         },
-        description: {
-            short: 'Provides a huge culture boost',
-            long: 'Gives 18,000 culture points upon construction.'
-        },
     },
 ];

src/hud/BuildingCreator.svelte

@@ -1,10 +1,9 @@
 <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, getPrettyTime, getTownhall } from "../utils";
+    import { canPayBuildingCost, getTownhall } from "../utils";
     import village from "../village";
     import Cost from "./Cost.svelte";
 
@@ -39,27 +38,21 @@
 <section>
     <div class="building-creator">
         <header>
-            <h1>Choose a new building</h1>
+            <h1>Build</h1>
             <span class="close">
                 <button on:click={ close }>X</button>
             </span>
         </header>
         <div class="buildings">
             { #each constructible as building }
-            <div class="building">
+            <div>
-                <div class="content">
+                <p>{ building.name }</p>
-                    <img src="/img/buildings/{building.type}.png" alt="">
-                    <div>
-                        <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 ({ getPrettyTime(getTimeToBuild($village, building, 1)) })
+                    Build
                 </button>
             </div>
             { /each }
@@ -82,60 +75,25 @@
 
     .building-creator {
         background-color: hsl(0, 0%, 20%);
-        border: 0.2em solid hsl(0, 0%, 40%);
+        border: 0.2em solid grey;
         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: 1em;
+        top: 0;
     }
 
     .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>

src/hud/BuildingPanel.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-    import { getTimeToBuild } from "../logic";
     import moves from "../moves";
     import showBuildingPanel from "../stores/showBuildingPanel";
-    import { canPayBuildingCost, getBuilding, getBuildingUpgradeCost, getPrettyTime } from "../utils";
+    import { getBuilding, getBuildingUpgradeCost } from "../utils";
     import village from "../village";
     import BuildingRecruitment from "./BuildingRecruitment.svelte";
     import Cost from "./Cost.svelte";
@@ -34,9 +33,6 @@
                 <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>
@@ -48,19 +44,14 @@
             { #if building.state.upgrade.isUpgrading }
             <p>
                 Upgrading to level { building.level + 1 }
-                ({ getPrettyTime(building.state.upgrade.remainingTime) })
+                ({ Math.ceil(building.state.upgrade.remainingTime / 1000) }’)
             </p>
             { :else if building.level === building.maxLevel }
             <p>Max level reached!</p>
             { :else }
             <div>
                 <Cost cost={ getBuildingUpgradeCost($village, building) } />
-                <button
+                <button on:click={ () => upgrade() }>Upgrade</button>
-                    disabled={ !canPayBuildingCost($village, building) }
-                    on:click={ () => upgrade() }
-                >
-                    Upgrade ({ getPrettyTime(getTimeToBuild($village, building, building.level + 1)) })
-                </button>
             </div>
             { /if }
         </div>

src/hud/Cost.svelte

@@ -2,7 +2,6 @@
     import { Duration } from 'luxon';
 
     import type { CostType } from "../types";
-    import village from '../village';
 
     export let cost: CostType;
     export let duration: number | null = null;
@@ -12,30 +11,19 @@
 </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>
@@ -60,8 +48,4 @@
         align-items: center;
         gap: 0.2em;
     }
-
-    .cost .short {
-        color: red;
-    }
 </style>

src/hud/Quests.svelte

@@ -1,11 +1,10 @@
 <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";
 
 
     $: availableHeroes = $village.heroes.filter(h => !$village.quests.some(q => q.hero === h.id));
@@ -29,7 +28,7 @@
         <p>
             <img src="/img/icons/time.png" alt="Duration">
             { #if quest.started }
-            { getPrettyTime(quest.remainingTime || 0) }
+            { Math.ceil((quest.remainingTime || 0) / 1000) }
             { :else }
             { quest.duration }
             { #each availableHeroes as hero }

src/hud/RecruitmentQueue.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
     import type { BuildingType } from "../types";
-    import { getPrettyTime } from "../utils";
     import village from "../village";
 
     export let building: BuildingType;
@@ -10,11 +9,12 @@
     $: recruitmentTime = building.behavior.units?.recruitmentTime($village, building) || 0;
     $: currentRecruitTime = building.state.recruitment?.elapsedTime || 0;
     $: timeToNextRecruit = recruitmentTime * 1000 - currentRecruitTime;
+    $: prettyDuration = Math.ceil(timeToNextRecruit / 1000);
 </script>
 
 { #if unitsCount > 0 }
 <div>
     { unitsCount }
-    ({ getPrettyTime(timeToNextRecruit) })
+    ({ prettyDuration }’)
 </div>
 { /if }

src/types.ts

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

src/utils.ts

@@ -216,9 +216,3 @@ export function indexToPoint(index: number): Point {
         y: Math.floor(index / WORLD_MAP_WIDTH),
     };
 }
-
-
-export function getPrettyTime(milliseconds: number) {
-    const timeInSeconds = Math.ceil(milliseconds / 1000.0);
-    return `${timeInSeconds}s`;
-}

src/village.ts

@@ -137,7 +137,7 @@ function getInitialState() {
 
     // Create the Town hall.
     const townhall = createBuilding('townhall');
-    townhall.level = 20;
+    // townhall.level = 20;
     state.villageTiles[0][0] = townhall.id;
     state.buildings.push(townhall);
 
@@ -160,7 +160,7 @@ function getInitialState() {
             }
             const newBuilding = createBuilding(type);
             newBuilding.tile = new Hex(x, y);
-            newBuilding.level = 20; //newBuilding.type === 'field' ? 1 : 10;
+            newBuilding.level = 1; //20; //newBuilding.type === 'field' ? 1 : 10;
             state.outsideTiles[y][x] = newBuilding.id;
             state.buildings.push(newBuilding);
         });