Make the game use relative paths when loading assets, to make it work in a folder on my server.

This commit is contained in:
Adrian 2025-02-08 11:18:51 +01:00
parent 58c6d910bb
commit 3b38d16868
12 changed files with 27 additions and 26 deletions

View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="./vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bourgade</title> <title>Bourgade</title>
</head> </head>

View File

@ -20,7 +20,7 @@
<div class="building"> <div class="building">
<div class="illustration"> <div class="illustration">
<img src="/img/buildings/{ building.type }.png" alt=""> <img src="./img/buildings/{ building.type }.png" alt="">
</div> </div>
<div class="content"> <div class="content">
<div class="level"> <div class="level">

View File

@ -48,7 +48,7 @@
<div class="oasis-panel"> <div class="oasis-panel">
<header> <header>
<h1> <h1>
<img src="/img/icons/{ region.resource }.png" alt="{ region.resource }"> <img src="./img/icons/{ region.resource }.png" alt="{ region.resource }">
Oasis Oasis
</h1> </h1>
<span class="close"> <span class="close">

View File

@ -27,7 +27,7 @@
<Tile <Tile
onTileClick={ () => gameTab.set('village') } onTileClick={ () => gameTab.set('village') }
> >
<img src="/img/icons/village.svg" alt=""> <img src="./img/icons/village.svg" alt="">
</Tile> </Tile>
{ /if } { /if }
{ /each } { /each }

View File

@ -20,11 +20,11 @@
> >
{ #if region.type === WORLDMAP_TYPES.BOURGADE } { #if region.type === WORLDMAP_TYPES.BOURGADE }
<button class="invisible" on:click={ () => gameTab.set('resources') }> <button class="invisible" on:click={ () => gameTab.set('resources') }>
<img src="/img/icons/field.svg" alt=""> <img src="./img/icons/field.svg" alt="">
</button> </button>
{ :else if region.type === WORLDMAP_TYPES.OASIS } { :else if region.type === WORLDMAP_TYPES.OASIS }
<button class="invisible" on:click={ () => showOasisPanel.set(region.id) }> <button class="invisible" on:click={ () => showOasisPanel.set(region.id) }>
<img src="/img/icons/{region.resource}.png" alt=""> <img src="./img/icons/{region.resource}.png" alt="">
</button> </button>
{ :else } { :else }
{ region.id } { region.id }

View File

@ -48,7 +48,7 @@
{ #each constructible as building } { #each constructible as building }
<div class="building"> <div class="building">
<div class="content"> <div class="content">
<img src="/img/buildings/{building.type}.png" alt=""> <img src="./img/buildings/{building.type}.png" alt="">
<div> <div>
<h3>{ building.name }</h3> <h3>{ building.name }</h3>
<p>{ building.description.short }</p> <p>{ building.description.short }</p>

View File

@ -15,33 +15,33 @@
<div <div
class:short={ $village.resources.wood < cost.wood } class:short={ $village.resources.wood < cost.wood }
> >
<img src="/img/icons/wood.png" alt="Wood" /> <img src="./img/icons/wood.png" alt="Wood" />
{ cost.wood } { cost.wood }
</div> </div>
<div <div
class:short={ $village.resources.stone < cost.stone } class:short={ $village.resources.stone < cost.stone }
> >
<img src="/img/icons/stone.png" alt="Stone" /> <img src="./img/icons/stone.png" alt="Stone" />
{ cost.stone } { cost.stone }
</div> </div>
<div <div
class:short={ $village.resources.iron < cost.iron } class:short={ $village.resources.iron < cost.iron }
> >
<img src="/img/icons/iron.png" alt="Iron" /> <img src="./img/icons/iron.png" alt="Iron" />
{ cost.iron } { cost.iron }
</div> </div>
<div <div
class:short={ $village.resources.food < cost.food } class:short={ $village.resources.food < cost.food }
> >
<img src="/img/icons/food.png" alt="Food" /> <img src="./img/icons/food.png" alt="Food" />
{ cost.food } { cost.food }
</div> </div>
{ #if duration !== null } { #if duration !== null }
<div> <div>
<img src="/img/icons/time.png" alt="Duration"> <img src="./img/icons/time.png" alt="Duration">
{ prettyDuration } { prettyDuration }
</div> </div>
{ /if } { /if }

View File

@ -9,21 +9,21 @@
class="invisible" class="invisible"
on:click={ () => setTab('village') } on:click={ () => setTab('village') }
> >
<img src="/img/icons/village.svg" alt=""> <img src="./img/icons/village.svg" alt="">
<span>Village</span> <span>Village</span>
</button> </button>
<button <button
class="invisible" class="invisible"
on:click={ () => setTab('resources') } on:click={ () => setTab('resources') }
> >
<img src="/img/icons/field.svg" alt=""> <img src="./img/icons/field.svg" alt="">
<span>Resources</span> <span>Resources</span>
</button> </button>
<button <button
class="invisible" class="invisible"
on:click={ () => setTab('world') } on:click={ () => setTab('world') }
> >
<img src="/img/icons/world.svg" alt=""> <img src="./img/icons/world.svg" alt="">
<span>Worldmap</span> <span>Worldmap</span>
</button> </button>
</nav> </nav>

View File

@ -27,7 +27,7 @@
<Reward reward={ quest.reward } /> <Reward reward={ quest.reward } />
</p> </p>
<p> <p>
<img src="/img/icons/time.png" alt="Duration"> <img src="./img/icons/time.png" alt="Duration">
{ #if quest.started } { #if quest.started }
{ getPrettyTime(quest.remainingTime || 0) } { getPrettyTime(quest.remainingTime || 0) }
{ :else } { :else }

View File

@ -9,27 +9,27 @@
<div class="resources"> <div class="resources">
<div> <div>
<img src="/img/icons/wood.png" alt="Wood" /> <img src="./img/icons/wood.png" alt="Wood" />
{ Math.floor($village.resources.wood) } / { capacity.wood } { Math.floor($village.resources.wood) } / { capacity.wood }
({ production.wood >= 0 ? '+' : '' }{ production.wood }) ({ production.wood >= 0 ? '+' : '' }{ production.wood })
</div> </div>
<div> <div>
<img src="/img/icons/stone.png" alt="Stone" /> <img src="./img/icons/stone.png" alt="Stone" />
{ Math.floor($village.resources.stone) } / { capacity.stone } { Math.floor($village.resources.stone) } / { capacity.stone }
({ production.stone >= 0 ? '+' : '' }{ production.stone }) ({ production.stone >= 0 ? '+' : '' }{ production.stone })
</div> </div>
<div> <div>
<img src="/img/icons/iron.png" alt="Iron" /> <img src="./img/icons/iron.png" alt="Iron" />
{ Math.floor($village.resources.iron) } / { capacity.iron } { Math.floor($village.resources.iron) } / { capacity.iron }
({ production.iron >= 0 ? '+' : '' }{ production.iron }) ({ production.iron >= 0 ? '+' : '' }{ production.iron })
</div> </div>
<div> <div>
<img src="/img/icons/food.png" alt="Food" /> <img src="./img/icons/food.png" alt="Food" />
{ Math.floor($village.resources.food) } / { capacity.food } { Math.floor($village.resources.food) } / { capacity.food }
({ production.food >= 0 ? '+' : '' }{ production.food }) ({ production.food >= 0 ? '+' : '' }{ production.food })
</div> </div>
<div> <div>
<img src="/img/icons/culture.png" alt="Culture" /> <img src="./img/icons/culture.png" alt="Culture" />
{ Math.floor($village.resources.culture) } { Math.floor($village.resources.culture) }
({ production.culture >= 0 ? '+' : '' }{ production.culture }) ({ production.culture >= 0 ? '+' : '' }{ production.culture })
</div> </div>

View File

@ -7,31 +7,31 @@
<div class="reward"> <div class="reward">
{ #if reward.wood > 0 } { #if reward.wood > 0 }
<div> <div>
<img src="/img/icons/wood.png" alt="Wood" /> <img src="./img/icons/wood.png" alt="Wood" />
{ reward.wood } { reward.wood }
</div> </div>
{ /if } { /if }
{ #if reward.stone > 0 } { #if reward.stone > 0 }
<div> <div>
<img src="/img/icons/stone.png" alt="Stone" /> <img src="./img/icons/stone.png" alt="Stone" />
{ reward.stone } { reward.stone }
</div> </div>
{ /if } { /if }
{ #if reward.iron > 0 } { #if reward.iron > 0 }
<div> <div>
<img src="/img/icons/iron.png" alt="Iron" /> <img src="./img/icons/iron.png" alt="Iron" />
{ reward.iron } { reward.iron }
</div> </div>
{ /if } { /if }
{ #if reward.food > 0 } { #if reward.food > 0 }
<div> <div>
<img src="/img/icons/food.png" alt="Food" /> <img src="./img/icons/food.png" alt="Food" />
{ reward.food } { reward.food }
</div> </div>
{ /if } { /if }
{ #if reward.culture > 0 } { #if reward.culture > 0 }
<div> <div>
<img src="/img/icons/culture.png" alt="Culture" /> <img src="./img/icons/culture.png" alt="Culture" />
{ reward.culture } { reward.culture }
</div> </div>
{ /if } { /if }

View File

@ -4,4 +4,5 @@ import { svelte } from '@sveltejs/vite-plugin-svelte'
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [svelte()], plugins: [svelte()],
base: './',
}) })