Skip to content

Commit ee1cf4f

Browse files
andersfischernielsenandersfischernielsen
committed
Restructure setup
1 parent e56f53b commit ee1cf4f

6 files changed

Lines changed: 109 additions & 131 deletions

File tree

‎islanders-client/src/lib/components/trade/ResourcePanel.svelte‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,11 @@
2525
const dec = (r: ResourceType) => onChange(r, clamp(r, resources[r] - 1));
2626
</script>
2727

28-
<article class="rounded bg-base-300 p-4">
29-
<h3 class="mb-3 text-sm font-semibold tracking-wide uppercase">{title}</h3>
30-
<div class="space-y-2">
28+
<div>
29+
<article class="rounded bg-base-300 px-4 py-3">
30+
<h4 class="pb-2 uppercase">{title}</h4>
3131
{#each Object.entries(resources) as [resource, count]}
32-
<div class="flex items-center justify-between rounded-lg p-2">
32+
<div class="flex items-center justify-between rounded-lg p-1">
3333
<div class="flex min-w-0 flex-1 items-center gap-2 text-sm capitalize">
3434
<span class={`h-3 w-3 rounded ${resourceColors[resource as ResourceType]}`}></span>
3535
<span class="truncate">{resource}</span>
@@ -57,5 +57,5 @@
5757
</div>
5858
</div>
5959
{/each}
60-
</div>
61-
</article>
60+
</article>
61+
</div>

‎islanders-client/src/routes/game/[gameId]/+layout.svelte‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@
1919
{ id: 'players' as const, href: `${base}`, label: 'Players' },
2020
{ id: 'build' as const, href: `${base}/build`, label: 'Build' },
2121
{ id: 'trade' as const, href: `${base}/trade`, label: 'Trade' },
22-
{ id: 'chat' as const, href: `${base}/chat`, label: 'Chat' }
22+
{ id: 'chat' as const, href: `${base}/chat`, label: 'Chat' },
23+
{ id: 'setup' as const, href: `${base}/setup`, label: 'Setup' }
2324
];
2425
2526
const currentPath = $derived(page.url.pathname);
@@ -112,7 +113,7 @@
112113
</div>
113114
</section>
114115
<aside
115-
class="z-10 flex h-full w-[28rem] flex-shrink-0 flex-col bg-base-100"
116+
class="z-10 flex h-full w-[22rem] flex-shrink-0 flex-col bg-base-100"
116117
aria-label="Game sidebar"
117118
>
118119
<nav class="tabs-border tabs">

‎islanders-client/src/routes/game/[gameId]/+page.svelte‎

Lines changed: 2 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,18 @@
11
<script lang="ts">
22
import { gameStore } from '$lib/stores/game.svelte';
33
import PlayerSummary from '$lib/components/PlayerSummary.svelte';
4-
import { uiStore } from '$lib/stores/ui.svelte';
5-
import type { BuildingType } from '$lib/stores/ui.svelte';
6-
import { goto } from '$app/navigation';
7-
import { WorldGenerator, type Tile } from '../../../../../islanders-shared/lib/Shared';
8-
import {
9-
BuyCardAction,
10-
EndTurnAction,
11-
UndoAction
12-
} from '../../../../../islanders-shared/lib/Action';
134
145
const props = $props();
15-
const { gameId } = props.data as { gameId: string };
16-
const base = `/game/${encodeURIComponent(gameId)}`;
176
const world = $derived(gameStore.world);
187
const players = $derived(world?.players ?? []);
198
const currentPlayerIndex = $derived(world?.currentPlayer ?? -1);
209
21-
let radius = $state(4);
22-
let numberOfIslands = $state(1);
23-
const worldGenerator = new WorldGenerator();
24-
25-
const randomizeMap = async () => {
26-
const map: Tile[] = worldGenerator.generateRandomMap(radius, numberOfIslands);
27-
await gameStore.updateMap(map);
28-
};
29-
30-
const start = (pointsToWin: number) => async () => {
31-
await gameStore.startGame(pointsToWin);
32-
};
33-
3410
const defaultResources = { clay: 0, grain: 0, stone: 0, wood: 0, wool: 0 };
35-
36-
const currentWorld = $derived(gameStore.world);
37-
const currentPlayer = $derived(
38-
currentWorld ? currentWorld.players?.[currentWorld.currentPlayer] : undefined
39-
);
4011
</script>
4112

4213
<section class="flex flex-col gap-5">
4314
<div>
15+
<h2 class="mb-4 text-2xl font-semibold">Players</h2>
4416
{#if players.length}
4517
<div class="space-y-3">
4618
{#each players as player, index}
@@ -49,53 +21,7 @@
4921
{/each}
5022
</div>
5123
{:else}
52-
<p class="text-sm">No players have joined yet.</p>
24+
<p class="text-sm text-white/70">No players have joined yet.</p>
5325
{/if}
5426
</div>
55-
56-
<div>
57-
<h3 class="text-lg font-semibold">Map Configuration</h3>
58-
<div class="mt-4 space-y-4">
59-
<div>
60-
<label for="numberOfIslands" class="mb-2 flex justify-between text-sm">
61-
<span>Islands</span>
62-
</label>
63-
<input
64-
id="numberOfIslands"
65-
type="range"
66-
bind:value={numberOfIslands}
67-
min="1"
68-
max="8"
69-
class="range w-full range-xs"
70-
/>
71-
</div>
72-
{#if numberOfIslands > 1}
73-
<div>
74-
<label for="radius" class="mb-2 flex justify-between text-sm">
75-
<span>Size</span>
76-
<span class="font-mono text-white/90">{radius}</span>
77-
</label>
78-
<input
79-
id="radius"
80-
type="range"
81-
bind:value={radius}
82-
min="2"
83-
max="8"
84-
class="range w-full range-xs"
85-
/>
86-
<div class="mt-1 flex justify-between text-xs">
87-
<span>Tiny (2)</span>
88-
<span>Large (8)</span>
89-
</div>
90-
</div>
91-
{/if}
92-
<button class="btn w-full" onclick={randomizeMap}>
93-
<span>Generate Random Map</span>
94-
</button>
95-
</div>
96-
</div>
97-
98-
<button class="btn w-full btn-primary" onclick={start(10)}>
99-
<span>Start Game</span>
100-
</button>
10127
</section>

‎islanders-client/src/routes/game/[gameId]/build/+page.svelte‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363
disabled={!isMyTurn || !canAfford(buildingCosts.road)}
6464
onclick={() => handleBuild('road')}
6565
>
66-
Build Road
66+
Road
6767
</button>
6868
</div>
6969
</div>
@@ -81,7 +81,7 @@
8181
disabled={!isMyTurn || !canAfford(buildingCosts.settlement)}
8282
onclick={() => handleBuild('settlement')}
8383
>
84-
Build Settlement
84+
Settlement
8585
</button>
8686
</div>
8787
</div>
@@ -99,7 +99,7 @@
9999
disabled={!isMyTurn || !canAfford(buildingCosts.city)}
100100
onclick={() => handleBuild('city')}
101101
>
102-
Upgrade to City
102+
City
103103
</button>
104104
</div>
105105
</div>
@@ -117,7 +117,7 @@
117117
disabled={!isMyTurn || !canAfford(buildingCosts.developmentCard)}
118118
onclick={() => handleBuild('developmentCard')}
119119
>
120-
Buy Card
120+
Card
121121
</button>
122122
</div>
123123
</div>

‎islanders-client/src/routes/game/[gameId]/chat/+page.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,14 +67,14 @@
6767
aria-label="Send chat message"
6868
>
6969
<textarea
70-
class="textarea max-h-24 min-h-24 flex-1 resize-none text-sm"
70+
class="textarea max-h-18 min-h-18 flex-1 resize-none text-sm"
7171
placeholder={gameStore.playerName ? 'Type a message' : 'Join the game to chat'}
7272
bind:value={messageInput}
7373
onkeydown={handleKey}
7474
disabled={!gameStore.playerName}
7575
maxlength={500}
7676
></textarea>
77-
<button type="submit" class="btn h-full min-h-24 btn-primary" disabled={!canSend}>Send</button
77+
<button type="submit" class="btn h-full min-h-18 btn-primary" disabled={!canSend}>Send</button
7878
>
7979
</form>
8080

‎islanders-client/src/routes/game/[gameId]/setup/+page.svelte‎

Lines changed: 92 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,100 @@
11
<script lang="ts">
2+
import { gameStore } from '$lib/stores/game.svelte';
3+
import { WorldGenerator, type Tile } from '../../../../../../islanders-shared/lib/Shared';
4+
import { goto } from '$app/navigation';
5+
26
const props = $props();
37
const { gameId } = props.data as { gameId: string };
48
const base = `/game/${encodeURIComponent(gameId)}`;
9+
10+
const world = $derived(gameStore.world);
11+
const isGameStarted = $derived(world?.gameState === 'Started');
12+
13+
let radius = $state(4);
14+
let numberOfIslands = $state(1);
15+
let pointsToWin = $state(10);
16+
const worldGenerator = new WorldGenerator();
17+
18+
const randomizeMap = async () => {
19+
const map: Tile[] = worldGenerator.generateRandomMap(radius, numberOfIslands);
20+
await gameStore.updateMap(map);
21+
};
22+
23+
const startGame = async () => {
24+
await gameStore.startGame(pointsToWin);
25+
await goto(base);
26+
};
527
</script>
628

7-
<section class="space-y-6 text-white/80">
8-
<header class="space-y-2">
9-
<h2 class="text-2xl font-semibold text-white">Pregame Setup</h2>
10-
<p class="leading-relaxed">
11-
This screen will host the Svelte port of the customization tools—map randomization, radius,
12-
and points to win—from the current Vue client.
13-
</p>
14-
</header>
15-
16-
<div class="space-y-4">
17-
<article
18-
class="rounded-3xl border border-white/10 bg-slate-950/80 p-6 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.05)]"
19-
>
20-
<h3 class="text-sm font-semibold tracking-wide text-white/70 uppercase">Setup checklist</h3>
21-
<ul class="mt-3 list-disc space-y-2 pl-5 text-xs text-white/60">
22-
<li>Confirm the target map radius and island count.</li>
23-
<li>Share the lobby code with anyone who still needs to join.</li>
24-
<li>Lock in the starting resources once everyone is ready.</li>
25-
</ul>
26-
</article>
27-
<article
28-
class="rounded-3xl border border-white/10 bg-slate-950/80 p-6 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.05)]"
29-
>
30-
<h3 class="text-sm font-semibold tracking-wide text-white/70 uppercase">Quick links</h3>
31-
<ul class="mt-3 space-y-2 text-xs text-white/60">
32-
<li>
33-
<a class="font-semibold text-sky-200 hover:text-sky-100" href={base}> Return to board </a>
34-
</li>
35-
<li>
36-
<a class="font-semibold text-sky-200 hover:text-sky-100" href={`${base}/players`}>
37-
Review player overview
38-
</a>
39-
</li>
40-
</ul>
41-
</article>
42-
</div>
29+
<section class="flex flex-col gap-6">
30+
<div class="space-y-6">
31+
<div class="rounded-lg bg-base-200 p-6">
32+
<div class="space-y-4">
33+
<div>
34+
<label for="numberOfIslands" class="mb-2 flex justify-between text-sm">
35+
<span>Number of Islands</span>
36+
</label>
37+
<input
38+
id="numberOfIslands"
39+
type="range"
40+
bind:value={numberOfIslands}
41+
min="1"
42+
max="8"
43+
class="range w-full range-primary range-xs"
44+
disabled={isGameStarted}
45+
/>
46+
</div>
47+
48+
{#if numberOfIslands > 1}
49+
<div>
50+
<label for="radius" class="mb-2 flex justify-between text-sm">
51+
<span>Island Size</span>
52+
</label>
53+
<input
54+
id="radius"
55+
type="range"
56+
bind:value={radius}
57+
min="2"
58+
max="8"
59+
class="range w-full range-primary range-xs"
60+
disabled={isGameStarted}
61+
/>
62+
<div class="mt-1 flex justify-between text-xs text-white/60">
63+
<span>Tiny (2)</span>
64+
<span>Large (8)</span>
65+
</div>
66+
</div>
67+
{/if}
68+
69+
<button class="btn w-full" onclick={randomizeMap} disabled={isGameStarted}>
70+
<span>Randomize</span>
71+
</button>
72+
</div>
73+
</div>
4374

44-
<p class="text-sm text-white/70">
45-
When the lobby is set, jump back to the
46-
<a class="font-semibold text-sky-200 hover:text-sky-100" href={base}>board</a>
47-
and start the game.
48-
</p>
75+
<!-- Game Rules -->
76+
<div class="rounded-lg bg-base-200 p-6">
77+
<div class="space-y-4">
78+
<div>
79+
<label for="pointsToWin" class="mb-2 flex justify-between text-sm">
80+
<span>Points to Win</span>
81+
<span class="font-mono">{pointsToWin}</span>
82+
</label>
83+
<input
84+
id="pointsToWin"
85+
type="range"
86+
bind:value={pointsToWin}
87+
min="5"
88+
max="15"
89+
class="range w-full range-primary range-xs"
90+
disabled={isGameStarted}
91+
/>
92+
</div>
93+
</div>
94+
</div>
95+
96+
<button class="btn w-full btn-lg btn-primary" onclick={startGame} disabled={isGameStarted}>
97+
<span>Start Game</span>
98+
</button>
99+
</div>
49100
</section>

0 commit comments

Comments
 (0)