20256426/Map-Jurnal
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

after merge fix

Browse Source
This commit is contained in:
Tomas Horsky
2026-06-16 20:14:45 +09:00
parent b518016a21
commit 8d36c3faca
6 changed files with 82 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/plane 2.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.1 KiB

0
public/airplane.png → src/assets/animationPlane.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

6
src/lib/layout/selection.svelte.js
View File

@@ -1,5 +1,6 @@
import { journals } from '../stores/journalStore.js';
import { nameToId } from '../shared/countries.js';
import { getUserProfile } from '../auth/userStore.svelte.js';
let selected = $state(new Set());
let totalCountries = $state(0);
@@ -11,6 +12,11 @@ journals.subscribe((entries) => {
const id = nameToId[e.location?.country];
if (id) ids.add(id);
}
const profile = getUserProfile();
if (profile?.homeCountry) {
const homeId = nameToId[profile.homeCountry];
if (homeId) ids.add(homeId);
}
selected = ids;
});

138
src/lib/timeline/detail/NewEntryForm.svelte
View File

@@ -178,18 +178,24 @@
<div class="form">
{#if step === 1}
<!-- ── STEP 1: Details ── -->
<h2 class="step-title">Trip details</h2>
<!-- headline -->
<h1 class="page-headline">
{#if country.trim()}
Journal your trip to <strong>{country}</strong>!
{:else}
Journal your trip!
{/if}
</h1>
<div class="row">
<div class="field">
<label class="label" for="nc-country">Where did you go? <span class="req">*</span></label>
<label class="label" for="nc-country">Which <span class="kw">country</span> did you visit? <span class="req">*</span></label>
<SearchInput id="nc-country" bind:value={country} options={countryNames} />
{#if errors.country}<span class="ferr">{errors.country}</span>{/if}
</div>
<div class="field">
<label class="label" for="nc-city">Which cities did you visit? <span class="req">*</span></label>
<SearchInput id="nc-city" bind:value={cityInput} options={cityOptions} onselect={addCity} onblurcommit={addCity} />
<label class="label" for="nc-city">Which <span class="kw">cities</span> did you visit? <span class="req">*</span></label>
<SearchInput id="nc-city" bind:value={cityInput} options={cityOptions} onselect={addCity} />
{#if errors.cities}<span class="ferr">{errors.cities}</span>{/if}
{#if cities.length > 0}
<div class="tags">
@@ -203,24 +209,24 @@
<div class="row">
<div class="field">
<label class="label" for="nc-date">When did you travel? <span class="req">*</span></label>
<label class="label" for="nc-date">When did you <span class="kw">arrive</span>? <span class="req">*</span></label>
<input id="nc-date" class="input" type="date" bind:value={date} />
{#if errors.date}<span class="ferr">{errors.date}</span>{/if}
</div>
<div class="field">
<label class="label" for="nc-days">How long was the trip? <span class="req">*</span></label>
<label class="label" for="nc-days">How many <span class="kw">days</span> did you stay? <span class="req">*</span></label>
<input id="nc-days" class="input" type="number" min="1" bind:value={days} />
{#if errors.days}<span class="ferr">{errors.days}</span>{/if}
</div>
</div>
<div class="field">
<label class="label">Who did you travel with? <span class="req">*</span></label>
<label class="label"><span class="kw">Who</span> did you go <span class="kw">with</span>? <span class="req">*</span></label>
<div class="toggle-row">
{#each ['solo','friends','family'] as t}
<label class="toggle-opt" class:active={tripType === t}>
<input type="radio" name="nc-tripType" value={t} bind:group={tripType} />
{t === 'solo' ? 'Solo' : t === 'friends' ? 'With friends' : 'With family'}
{t === 'solo' ? '🧑 Solo' : t === 'friends' ? '👥 With friends' : '👨‍👩‍👧‍👦 With family'}
</label>
{/each}
</div>
@@ -228,13 +234,13 @@
</div>
<div class="field">
<label class="label">How did you get there? <span class="req">*</span></label>
<label class="label">How did you <span class="kw">get</span> there? <span class="req">*</span></label>
<div class="transport-grid">
{#each transportOptions as opt}
<label class="transport-opt" class:active={transport === opt.value}>
<label class="toggle-opt" class:active={transport === opt.value}>
<input type="radio" name="nc-transport" value={opt.value} bind:group={transport} />
<img src={opt.img} alt={opt.label} class="transport-img" />
<span class="transport-label">{opt.label}</span>
{opt.label}
</label>
{/each}
</div>
@@ -249,11 +255,16 @@
{:else}
<!-- ── STEP 3: Questions ── -->
<h2 class="step-title">Your memories</h2>
<h2 class="step-title">
Your memories{cities.length > 0 ? ` of ${cities.join(', ')}` : country.trim() ? ` of ${country}` : ''}
</h2>
{#if cities.length > 0 || country.trim()}
<p class="step-sub">{cities.join(', ')}{cities.length > 0 && country.trim() ? `, ${country}` : country.trim()}</p>
{/if}
{#each questions as q, i}
<div class="q-card">
<p class="q-text">{q}</p>
<p class="q-text">{q}{country.trim() ? ` in ${country}` : ''}</p>
<textarea class="q-input" rows="3" placeholder="Your answer…" bind:value={answers[i]}></textarea>
</div>
{/each}
@@ -316,13 +327,13 @@
align-items: center;
gap: 6px;
font-family: var(--sans);
font-size: 13px;
font-weight: 300;
font-size: 15px;
font-weight: 400;
color: var(--text);
background: none;
border: 1px solid transparent;
border-radius: 8px;
padding: 6px 10px;
border-radius: 10px;
padding: 8px 14px;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
@@ -330,20 +341,19 @@
.save-btn {
font-family: var(--sans);
font-size: 13px;
font-weight: 300;
font-size: 15px;
font-weight: 400;
color: #fff;
background: var(--accent);
border: 1px solid var(--accent);
border-radius: 8px;
padding: 7px 14px;
border-radius: 10px;
padding: 8px 18px;
cursor: pointer;
transition: background 0.15s;
white-space: nowrap;
}
.save-btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.save-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.save-err { font-size: 12px; color: #ef4444; margin-top: 4px; display: block; text-align: right; }
/* scroll + form */
.scroll { flex: 1; overflow-y: auto; }
@@ -364,6 +374,14 @@
letter-spacing: -0.3px;
margin: 0 0 2px;
}
.page-headline {
font-size: 28px;
font-weight: 500;
color: var(--text-h);
letter-spacing: -0.5px;
margin: 0 0 4px;
}
.page-headline strong { font-weight: 600; }
.step-sub {
font-size: 13px;
font-weight: 300;
@@ -384,27 +402,9 @@
color: var(--text-sub);
}
.req { color: var(--accent); font-size: 11px; }
.kw { color: var(--accent); }
.ferr { font-size: 11px; color: #dc2626; }
.combo-select, .city-text {
font-family: var(--sans);
font-size: 14px;
font-weight: 300;
color: var(--text-h);
background: var(--bg-subtle);
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px 12px;
outline: none;
transition: border-color 0.15s;
width: 100%;
box-sizing: border-box;
display: block;
}
.combo-select:focus, .city-text:focus { border-color: var(--accent-border); }
.combo-select { margin-bottom: 6px; cursor: pointer; }
.city-text { margin-top: 0; }
.ferr { font-size: 13px; font-weight: 500; color: #dc2626; }
.input {
font-family: var(--sans);
@@ -422,33 +422,22 @@
}
.input:focus { border-color: var(--accent-border); }
.toggle-row { display: flex; gap: 8px; }
.toggle-row { display: flex; gap: 10px; flex-wrap: wrap; }
.toggle-opt {
display: flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 300; color: var(--text);
padding: 7px 14px; border-radius: 8px;
display: flex; align-items: center; justify-content: center; gap: 8px;
font-size: 16px; font-weight: 400; color: var(--text);
padding: 12px 14px; border-radius: 10px;
border: 1px solid var(--border);
cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s;
cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
background: var(--bg-subtle);
white-space: nowrap;
}
.toggle-opt input { display: none; }
.toggle-opt.active { border-color: var(--accent-border); background: var(--accent-bg); color: var(--accent); }
.toggle-opt.active { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.toggle-opt.active img { filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(1169%) hue-rotate(239deg) brightness(80%) contrast(92%); }
.transport-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.transport-opt {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 8px; aspect-ratio: 1;
border-radius: 12px; border: 1px solid var(--border); background: var(--bg-subtle);
cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.transport-opt input { display: none; }
.transport-opt.active { border-color: var(--accent-border); background: var(--accent-bg); }
.transport-img { width: 60px; height: 60px; object-fit: contain; }
.transport-label {
font-size: 12px; font-weight: 300; color: var(--text-sub);
letter-spacing: 0.02em;
}
.transport-opt.active .transport-label { color: var(--accent); }
.transport-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.transport-img { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tag {
@@ -467,15 +456,16 @@
.q-card {
display: flex;
flex-direction: column;
gap: 10px;
background: var(--bg-subtle);
border: 1px solid var(--border);
border-radius: 12px;
padding: 20px;
gap: 14px;
background: var(--bg);
border: 1.5px solid var(--accent-border);
border-radius: 16px;
padding: 28px;
box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.q-text {
font-size: 14px;
font-weight: 400;
font-size: 20px;
font-weight: 500;
color: var(--text-h);
line-height: 1.5;
margin: 0;
@@ -483,10 +473,10 @@
}
.q-input {
font-family: var(--sans);
font-size: 13px;
font-weight: 300;
font-size: 16px;
font-weight: 400;
color: var(--text-h);
background: var(--bg);
background: var(--bg-subtle);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 12px;

31
src/lib/world-map/JourneyView.svelte
View File

@@ -5,26 +5,13 @@
import worldData from 'world-atlas/countries-50m.json';
import { get } from 'svelte/store';
import { journals } from '../stores/journalStore.js';
import airplaneImg from '../../assets/airplane.png';
import trainImg from '../../assets/train.png';
import busImg from '../../assets/bus.png';
import carImg from '../../assets/car.png';
import shipImg from '../../assets/ship.png';
import walkImg from '../../assets/walk.png';
import airplaneImg from '../../assets/animationPlane.png';
let { onclose, onprogress, mode = 'map', onmodechange } = $props();
const HOME_CODE = '203';
const TRANSPORT_IMG = {
flight: airplaneImg,
train: trainImg,
bus: busImg,
car: carImg,
ship: shipImg,
walk: walkImg,
};
const PLANE_SIZE = 28;
const PLANE_SIZE = 26;
const HOME_COLOR = '#8b5cf6';
const VISITED_COLOR = '#22c55e';
@@ -229,7 +216,7 @@
async function animateTrip(destCode, destFeature, transport = 'flight') {
if (!homeFeature || !destFeature) return;
const iconSrc = TRANSPORT_IMG[transport] ?? airplaneImg;
const iconSrc = airplaneImg;
const homeCentroid = d3.geoCentroid(homeFeature);
const destCentroid = d3.geoCentroid(destFeature);
if (mode === 'map') {
@@ -391,11 +378,15 @@
{#if isFinished}Journey complete!{:else if currentDateLabel}{currentDateLabel}{/if}
</div>
<div class="control-bar">
<button class="control-btn" onclick={replay}>⟳ Replay</button>
<button class="control-btn" onclick={() => switchMode(mode === 'map' ? 'globe' : 'map')}>
{mode === 'map' ? '🌍 Globe view' : '🗺 Map view'}
<button class="control-btn" onclick={replay}>
⟳ Replay
</button>
<button class="control-btn" onclick={() => switchMode(mode === 'map' ? 'globe' : 'map')}>
{mode === 'map' ? 'Globe animation' : 'Map animation'}
</button>
<button class="control-btn" onclick={close}>
✕ Back to Journaling
</button>
<button class="control-btn" onclick={close}>✕ Close</button>
</div>
</div>

2
src/lib/world-map/WorldMap.svelte
View File

@@ -90,7 +90,7 @@
if (!found) return;
const [cx, cy] = _pathFn.centroid(found);
if (isNaN(cx) || isNaN(cy)) return;
const SIZE = 24;
const SIZE = 18;
_g.append('image')
.attr('class', 'home-marker')
.attr('href', homeIconUrl)