Skip to content

Commit bbbf09d

Browse files
SimHackerSimHacker
committed
Fix map viewport input and add smooth keyboard pan ramp.
Restore tool cursor alignment, shift-drag direct manipulation, and arrow-key scroll with tunable ramp-to-full-speed. Exclude workspace render packages from Vite prebundle to avoid stale TileRenderer methods, and add viewport sync fallbacks for dev HMR resilience.
1 parent 94524ff commit bbbf09d

88 files changed

Lines changed: 3719 additions & 662 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/micropolis/src/lib/About.svelte‎

Lines changed: 0 additions & 175 deletions
This file was deleted.

‎apps/micropolis/src/lib/BudgetModal.svelte‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<script lang="ts">
2+
import { micropolisReactive } from '$lib/MicropolisReactive.svelte';
3+
4+
const open = $derived(micropolisReactive.budgetModalRequested);
5+
6+
function accept() {
7+
micropolisReactive.poke.doBudget();
8+
}
9+
10+
function dismiss() {
11+
micropolisReactive.clearBudgetModalRequest();
12+
}
13+
14+
function toggleAutoBudget(event: Event) {
15+
const checked = (event.target as HTMLInputElement).checked;
16+
micropolisReactive.poke.setAutoBudget(checked);
17+
}
18+
</script>
19+
20+
{#if open}
21+
<div class="budget-backdrop" role="presentation" onclick={dismiss}></div>
22+
<div class="budget-modal" role="dialog" aria-labelledby="budget-title" aria-modal="true">
23+
<h2 id="budget-title">City budget</h2>
24+
<p class="budget-copy">
25+
End-of-year budget review. Accept to apply the current budget plan and continue the simulation.
26+
</p>
27+
<label class="auto-budget">
28+
<input
29+
type="checkbox"
30+
checked={micropolisReactive.attachedSimulator?.micropolis?.autoBudget ?? true}
31+
onchange={toggleAutoBudget}
32+
/>
33+
Auto-budget (engine manages funding)
34+
</label>
35+
<div class="budget-actions">
36+
<button type="button" onclick={dismiss}>Later</button>
37+
<button type="button" class="primary" onclick={accept}>Accept budget</button>
38+
</div>
39+
</div>
40+
{/if}
41+
42+
<style>
43+
.budget-backdrop {
44+
position: fixed;
45+
inset: 0;
46+
z-index: 40;
47+
background: rgba(0, 0, 0, 0.45);
48+
}
49+
.budget-modal {
50+
position: fixed;
51+
z-index: 41;
52+
left: 50%;
53+
top: 50%;
54+
transform: translate(-50%, -50%);
55+
width: min(22rem, 92vw);
56+
padding: 1rem 1.1rem;
57+
background: rgba(8, 12, 20, 0.96);
58+
border: 1px solid rgba(255, 255, 255, 0.15);
59+
border-radius: 10px;
60+
color: #eef2ff;
61+
font-size: 0.85rem;
62+
}
63+
h2 {
64+
margin: 0 0 0.5rem;
65+
font-size: 1rem;
66+
}
67+
.budget-copy {
68+
margin: 0 0 0.75rem;
69+
opacity: 0.9;
70+
line-height: 1.4;
71+
}
72+
.auto-budget {
73+
display: flex;
74+
gap: 0.5rem;
75+
align-items: center;
76+
margin-bottom: 1rem;
77+
}
78+
.budget-actions {
79+
display: flex;
80+
justify-content: flex-end;
81+
gap: 0.5rem;
82+
}
83+
button {
84+
padding: 0.35rem 0.75rem;
85+
border-radius: 6px;
86+
border: 1px solid rgba(255, 255, 255, 0.2);
87+
background: rgba(255, 255, 255, 0.08);
88+
color: inherit;
89+
cursor: pointer;
90+
}
91+
button.primary {
92+
background: rgba(80, 140, 255, 0.45);
93+
border-color: rgba(140, 180, 255, 0.6);
94+
}
95+
</style>

‎apps/micropolis/src/lib/GameHud.svelte‎

Lines changed: 50 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script lang="ts">
22
import { micropolisReactive } from '$lib/MicropolisReactive.svelte';
3+
import { toolState } from '$lib/ToolState.svelte';
34
45
const funds = $derived(micropolisReactive.totalFunds);
56
const dateLabel = $derived(
@@ -19,15 +20,18 @@
1920
</script>
2021

2122
<div class="game-hud" aria-live="polite">
22-
<div class="hud-row">
23+
<div class="hud-row hud-row-primary">
2324
<span class="hud-funds">${funds.toLocaleString()}</span>
24-
<span class="hud-date">{dateLabel}</span>
25+
<span class="hud-date" title={dateLabel}>{dateLabel}</span>
2526
</div>
2627
<div class="hud-row hud-meta">
27-
<span>{demand}</span>
28-
<span>{taxLabel}</span>
29-
<span class:paused={micropolisReactive.simPaused}>{simLabel}</span>
28+
<span class="hud-demand">{demand}</span>
29+
<span class="hud-tax">{taxLabel}</span>
30+
<span class="hud-speed" class:paused={micropolisReactive.simPaused}>{simLabel}</span>
3031
</div>
32+
{#if toolState.lastToolFeedback}
33+
<div class="hud-feedback">{toolState.lastToolFeedback}</div>
34+
{/if}
3135
</div>
3236

3337
<style>
@@ -45,20 +49,56 @@
4549
border: 1px solid rgba(255, 255, 255, 0.15);
4650
border-radius: 6px;
4751
padding: 0.45rem 0.65rem;
48-
min-width: 14rem;
52+
width: 20.5rem;
53+
box-sizing: border-box;
4954
backdrop-filter: blur(4px);
5055
}
5156
5257
.hud-row {
53-
display: flex;
54-
justify-content: space-between;
55-
gap: 1rem;
58+
display: grid;
59+
gap: 0.5rem;
60+
}
61+
62+
.hud-row-primary {
63+
grid-template-columns: 7.25rem 1fr;
64+
align-items: baseline;
5665
}
5766
5867
.hud-meta {
5968
margin-top: 0.25rem;
60-
opacity: 0.9;
69+
grid-template-columns: 1fr 4.25rem 4.5rem;
70+
align-items: baseline;
6171
font-size: 0.75rem;
72+
color: #dce4f8;
73+
}
74+
75+
.hud-funds,
76+
.hud-date,
77+
.hud-demand,
78+
.hud-tax,
79+
.hud-speed {
80+
font-variant-numeric: tabular-nums;
81+
}
82+
83+
.hud-date {
84+
text-align: right;
85+
overflow: hidden;
86+
text-overflow: ellipsis;
87+
white-space: nowrap;
88+
}
89+
90+
.hud-tax,
91+
.hud-speed {
92+
text-align: right;
93+
}
94+
95+
.hud-feedback {
96+
margin-top: 0.35rem;
97+
padding-top: 0.3rem;
98+
border-top: 1px solid rgba(255, 255, 255, 0.2);
99+
font-size: 0.78rem;
100+
font-weight: 600;
101+
color: #ffc840;
62102
}
63103
64104
.hud-funds {

0 commit comments

Comments
 (0)