feat: static city suggestions by country, fix city dropdown, coloring animation on save

This commit is contained in:
haerikimmm
2026-06-16 19:21:26 +09:00
parent a7079c1f18
commit c7cf053105
4 changed files with 227 additions and 6 deletions

View File

@@ -3,8 +3,8 @@ import { nameToId } from '../shared/countries.js';
let selected = $state(new Set());
let totalCountries = $state(0);
let flashing = $state(new Set());
// Derive visited countries from journal entries
journals.subscribe((entries) => {
const ids = new Set();
for (const e of entries) {
@@ -25,3 +25,16 @@ export function setTotalCount(n) {
export function getTotalCount() {
return totalCountries;
}
export function getFlashing() {
return flashing;
}
export function flashCountry(countryName) {
const id = nameToId[countryName];
if (!id) return;
flashing = new Set([...flashing, id]);
setTimeout(() => {
flashing = new Set([...flashing].filter(x => x !== id));
}, 1600);
}

View File

@@ -0,0 +1,184 @@
export const countryCities = {
'Afghanistan': ['Kabul','Kandahar','Herat','Mazar-i-Sharif','Jalalabad'],
'Albania': ['Tirana','Durrës','Vlorë','Shkodër','Elbasan'],
'Algeria': ['Algiers','Oran','Constantine','Annaba','Blida'],
'Andorra': ['Andorra la Vella','Escaldes-Engordany','Encamp'],
'Angola': ['Luanda','Huambo','Lobito','Benguela','Lubango'],
'Argentina': ['Buenos Aires','Córdoba','Rosario','Mendoza','Bariloche','Salta','Mar del Plata'],
'Armenia': ['Yerevan','Gyumri','Vanadzor'],
'Australia': ['Sydney','Melbourne','Brisbane','Perth','Adelaide','Gold Coast','Cairns','Darwin','Hobart','Canberra'],
'Austria': ['Vienna','Salzburg','Graz','Innsbruck','Linz','Hallstatt'],
'Azerbaijan': ['Baku','Ganja','Sumqayit'],
'Bahamas': ['Nassau','Freeport'],
'Bahrain': ['Manama','Riffa','Muharraq'],
'Bangladesh': ['Dhaka','Chittagong','Sylhet','Rajshahi','Khulna'],
'Barbados': ['Bridgetown'],
'Belarus': ['Minsk','Gomel','Brest','Grodno'],
'Belgium': ['Brussels','Bruges','Ghent','Antwerp','Liège'],
'Belize': ['Belize City','San Ignacio','Placencia'],
'Benin': ['Cotonou','Porto-Novo','Abomey'],
'Bhutan': ['Thimphu','Paro','Punakha'],
'Bolivia': ['La Paz','Santa Cruz','Cochabamba','Sucre','Uyuni'],
'Bosnia and Herz.': ['Sarajevo','Mostar','Banja Luka'],
'Botswana': ['Gaborone','Francistown','Maun'],
'Brazil': ['São Paulo','Rio de Janeiro','Brasília','Salvador','Fortaleza','Manaus','Recife','Florianópolis','Foz do Iguaçu'],
'Brunei': ['Bandar Seri Begawan'],
'Bulgaria': ['Sofia','Plovdiv','Varna','Burgas','Ruse'],
'Burkina Faso': ['Ouagadougou','Bobo-Dioulasso'],
'Burundi': ['Bujumbura','Gitega'],
'Cabo Verde': ['Praia','Mindelo'],
'Cambodia': ['Phnom Penh','Siem Reap','Sihanoukville','Battambang'],
'Cameroon': ['Yaoundé','Douala','Bafoussam'],
'Canada': ['Toronto','Vancouver','Montreal','Calgary','Ottawa','Edmonton','Quebec City','Whistler','Banff','Niagara Falls','Halifax'],
'Central African Rep.': ['Bangui'],
'Chad': ["N'Djamena",'Moundou'],
'Chile': ['Santiago','Valparaíso','Atacama','Puerto Natales','Punta Arenas','Viña del Mar','San Pedro de Atacama'],
'China': ['Beijing','Shanghai','Guangzhou','Shenzhen','Chengdu','Xi\'an','Hangzhou','Chongqing','Guilin','Zhangjiajie','Lijiang','Hong Kong','Macau'],
'Colombia': ['Bogotá','Medellín','Cartagena','Cali','Santa Marta','Barranquilla'],
'Comoros': ['Moroni'],
'Congo': ['Brazzaville','Pointe-Noire'],
'Costa Rica': ['San José','Manuel Antonio','Tamarindo','Arenal','Monteverde'],
'Croatia': ['Zagreb','Dubrovnik','Split','Hvar','Zadar','Pula','Rijeka'],
'Cuba': ['Havana','Trinidad','Varadero','Santiago de Cuba','Cienfuegos'],
'Cyprus': ['Nicosia','Limassol','Paphos','Larnaca','Ayia Napa'],
'Czechia': ['Prague','Brno','Český Krumlov','Karlovy Vary','Olomouc'],
"Côte d'Ivoire": ['Abidjan','Yamoussoukro','Bouaké'],
'Dem. Rep. Congo': ['Kinshasa','Lubumbashi','Goma','Kisangani'],
'Denmark': ['Copenhagen','Aarhus','Odense','Aalborg'],
'Djibouti': ['Djibouti City'],
'Dominican Rep.': ['Santo Domingo','Punta Cana','Santiago','La Romana'],
'Ecuador': ['Quito','Guayaquil','Cuenca','Baños','Galápagos Islands'],
'Egypt': ['Cairo','Alexandria','Luxor','Aswan','Sharm el-Sheikh','Hurghada','Giza'],
'El Salvador': ['San Salvador','Santa Ana','San Miguel'],
'Eq. Guinea': ['Malabo','Bata'],
'Eritrea': ['Asmara','Massawa'],
'Estonia': ['Tallinn','Tartu','Pärnu'],
'Ethiopia': ['Addis Ababa','Lalibela','Gondar','Axum','Dire Dawa'],
'Fiji': ['Suva','Nadi','Mamanuca Islands'],
'Finland': ['Helsinki','Rovaniemi','Tampere','Turku','Oulu'],
'Fr. Polynesia': ['Papeete','Bora Bora','Moorea'],
'France': ['Paris','Nice','Lyon','Marseille','Bordeaux','Strasbourg','Toulouse','Cannes','Monaco','Mont Saint-Michel','Versailles'],
'Gabon': ['Libreville','Port-Gentil'],
'Gambia': ['Banjul','Serekunda'],
'Georgia': ['Tbilisi','Batumi','Kutaisi','Sighnaghi'],
'Germany': ['Berlin','Munich','Hamburg','Frankfurt','Cologne','Dresden','Heidelberg','Rothenburg ob der Tauber','Neuschwanstein','Stuttgart'],
'Ghana': ['Accra','Kumasi','Cape Coast','Tamale'],
'Greece': ['Athens','Santorini','Mykonos','Rhodes','Thessaloniki','Crete','Corfu','Meteora'],
'Greenland': ['Nuuk','Ilulissat'],
'Grenada': ["St. George's"],
'Guatemala': ['Guatemala City','Antigua','Lake Atitlán','Tikal','Quetzaltenango'],
'Guinea': ['Conakry'],
'Guyana': ['Georgetown'],
'Haiti': ['Port-au-Prince','Cap-Haïtien'],
'Honduras': ['Tegucigalpa','San Pedro Sula','Roatán'],
'Hong Kong': ['Hong Kong'],
'Hungary': ['Budapest','Debrecen','Pécs','Eger','Győr'],
'Iceland': ['Reykjavik','Akureyri','Blue Lagoon','Golden Circle'],
'India': ['Mumbai','Delhi','Jaipur','Agra','Bangalore','Chennai','Kolkata','Goa','Varanasi','Udaipur','Kerala','Leh','Shimla'],
'Indonesia': ['Jakarta','Bali','Yogyakarta','Lombok','Medan','Komodo','Raja Ampat','Surabaya'],
'Iran': ['Tehran','Isfahan','Shiraz','Persepolis','Yazd'],
'Iraq': ['Baghdad','Erbil','Basra','Najaf'],
'Ireland': ['Dublin','Cork','Galway','Killarney','Limerick'],
'Israel': ['Jerusalem','Tel Aviv','Haifa','Eilat','Dead Sea'],
'Italy': ['Rome','Florence','Venice','Milan','Naples','Amalfi','Sicily','Cinque Terre','Bologna','Turin'],
'Jamaica': ['Kingston','Montego Bay','Negril','Ocho Rios'],
'Japan': ['Tokyo','Kyoto','Osaka','Hiroshima','Nara','Sapporo','Hakone','Nikko','Kanazawa','Okinawa','Fukuoka'],
'Jordan': ['Amman','Petra','Wadi Rum','Aqaba','Jerash'],
'Kazakhstan': ['Almaty','Nur-Sultan','Shymkent'],
'Kenya': ['Nairobi','Mombasa','Masai Mara','Amboseli','Zanzibar'],
'Kosovo': ['Pristina','Prizren'],
'Kuwait': ['Kuwait City'],
'Kyrgyzstan': ['Bishkek','Osh','Karakol'],
'Laos': ['Vientiane','Luang Prabang','Vang Vieng'],
'Latvia': ['Riga','Jūrmala','Sigulda'],
'Lebanon': ['Beirut','Byblos','Baalbek','Sidon'],
'Libya': ['Tripoli','Benghazi','Leptis Magna'],
'Liechtenstein': ['Vaduz'],
'Lithuania': ['Vilnius','Kaunas','Trakai','Klaipėda'],
'Luxembourg': ['Luxembourg City','Vianden'],
'Madagascar': ['Antananarivo','Nosy Be','Morondava'],
'Malawi': ['Lilongwe','Blantyre','Lake Malawi'],
'Malaysia': ['Kuala Lumpur','Penang','Langkawi','Kota Kinabalu','Malacca','George Town'],
'Maldives': ['Malé','Maafushi'],
'Mali': ['Bamako','Timbuktu','Djenné'],
'Malta': ['Valletta','Mdina','Gozo'],
'Mauritania': ['Nouakchott'],
'Mauritius': ['Port Louis','Grand Baie','Flic en Flac'],
'Mexico': ['Mexico City','Cancún','Guadalajara','Oaxaca','Tulum','Playa del Carmen','San Miguel de Allende','Monterrey','Chichen Itza'],
'Moldova': ['Chișinău'],
'Monaco': ['Monaco'],
'Mongolia': ['Ulaanbaatar','Gobi Desert'],
'Montenegro': ['Podgorica','Kotor','Budva','Bar'],
'Morocco': ['Marrakech','Fes','Casablanca','Rabat','Chefchaouen','Essaouira','Sahara Desert'],
'Mozambique': ['Maputo','Beira','Pemba'],
'Myanmar': ['Yangon','Bagan','Mandalay','Inle Lake'],
'Namibia': ['Windhoek','Swakopmund','Etosha','Sossusvlei'],
'Nepal': ['Kathmandu','Pokhara','Everest Base Camp','Chitwan','Lumbini'],
'Netherlands': ['Amsterdam','Rotterdam','The Hague','Utrecht','Delft','Eindhoven'],
'New Zealand': ['Auckland','Queenstown','Wellington','Christchurch','Rotorua','Milford Sound'],
'Nicaragua': ['Managua','Granada','León'],
'Niger': ['Niamey','Agadez'],
'Nigeria': ['Lagos','Abuja','Kano','Ibadan'],
'North Korea': ['Pyongyang'],
'North Macedonia': ['Skopje','Ohrid'],
'Norway': ['Oslo','Bergen','Tromsø','Flåm','Ålesund','Stavanger'],
'Oman': ['Muscat','Nizwa','Salalah','Wahiba Sands'],
'Pakistan': ['Karachi','Lahore','Islamabad','Peshawar','Gilgit'],
'Palestine': ['Ramallah','Bethlehem','Jericho','Hebron'],
'Panama': ['Panama City','Bocas del Toro','Boquete'],
'Papua New Guinea': ['Port Moresby'],
'Paraguay': ['Asunción','Ciudad del Este'],
'Peru': ['Lima','Cusco','Machu Picchu','Arequipa','Puno','Iquitos'],
'Philippines': ['Manila','Cebu','Palawan','Boracay','Davao','Siargao'],
'Poland': ['Warsaw','Kraków','Gdańsk','Wrocław','Poznań','Zakopane'],
'Portugal': ['Lisbon','Porto','Algarve','Sintra','Madeira','Azores','Évora'],
'Puerto Rico': ['San Juan','Ponce','Rincon'],
'Qatar': ['Doha'],
'Romania': ['Bucharest','Transylvania','Cluj-Napoca','Sibiu','Brașov','Sinaia'],
'Russia': ['Moscow','St. Petersburg','Irkutsk','Vladivostok','Sochi','Kazan','Novosibirsk'],
'Rwanda': ['Kigali','Volcanoes National Park'],
'S. Sudan': ['Juba'],
'Saint Lucia': ['Castries','Soufrière'],
'Saudi Arabia': ['Riyadh','Jeddah','Mecca','Medina','AlUla','NEOM'],
'Senegal': ['Dakar','Saint-Louis','Ziguinchor'],
'Serbia': ['Belgrade','Novi Sad','Niš'],
'Seychelles': ['Victoria','La Digue','Praslin','Mahé'],
'Sierra Leone': ['Freetown'],
'Singapore': ['Singapore'],
'Slovakia': ['Bratislava','Košice','Banská Bystrica'],
'Slovenia': ['Ljubljana','Bled','Piran','Maribor'],
'Solomon Is.': ['Honiara'],
'Somalia': ['Mogadishu'],
'South Africa': ['Cape Town','Johannesburg','Durban','Stellenbosch','Kruger','Garden Route','Pretoria'],
'South Korea': ['Seoul','Busan','Jeju','Gyeongju','Incheon','Suwon'],
'Spain': ['Barcelona','Madrid','Seville','Granada','Valencia','Bilbao','Toledo','San Sebastián','Ibiza','Mallorca'],
'Sri Lanka': ['Colombo','Kandy','Galle','Ella','Sigiriya','Mirissa'],
'Sudan': ['Khartoum','Omdurman'],
'Suriname': ['Paramaribo'],
'Sweden': ['Stockholm','Gothenburg','Malmö','Uppsala','Kiruna'],
'Switzerland': ['Zurich','Geneva','Bern','Interlaken','Lucerne','Zermatt','Lugano','Grindelwald'],
'Syria': ['Damascus','Aleppo','Palmyra'],
'São Tomé and Príncipe': ['São Tomé'],
'Taiwan': ['Taipei','Kaohsiung','Tainan','Taichung'],
'Tajikistan': ['Dushanbe','Khujand'],
'Tanzania': ['Dar es Salaam','Zanzibar','Serengeti','Arusha','Kilimanjaro'],
'Thailand': ['Bangkok','Chiang Mai','Phuket','Koh Samui','Koh Phi Phi','Ayutthaya','Pai','Krabi'],
'Timor-Leste': ['Dili'],
'Togo': ['Lomé'],
'Trinidad and Tobago': ['Port of Spain'],
'Tunisia': ['Tunis','Carthage','Sousse','Hammamet','Djerba'],
'Turkey': ['Istanbul','Cappadocia','Antalya','Bodrum','Ankara','Ephesus','Pamukkale','Trabzon'],
'Turkmenistan': ['Ashgabat','Merv'],
'Uganda': ['Kampala','Bwindi','Jinja'],
'Ukraine': ['Kyiv','Lviv','Odessa','Kharkiv'],
'United Arab Emirates': ['Dubai','Abu Dhabi','Sharjah'],
'United Kingdom': ['London','Edinburgh','Manchester','Liverpool','Oxford','Cambridge','Bath','York','Brighton','Glasgow','Dublin'],
'United States of America': ['New York','Los Angeles','Chicago','Miami','San Francisco','Las Vegas','New Orleans','Seattle','Boston','Washington D.C.','Nashville','Denver','Honolulu','Anchorage','Portland'],
'Uruguay': ['Montevideo','Punta del Este','Colonia del Sacramento'],
'Uzbekistan': ['Tashkent','Samarkand','Bukhara','Khiva'],
'Venezuela': ['Caracas','Medellín','Canaima','Los Roques'],
'Vietnam': ['Hanoi','Ho Chi Minh City','Hoi An','Da Nang','Ha Long Bay','Hue','Sapa','Phu Quoc'],
'Yemen': ["Sana'a",'Aden'],
'Zambia': ['Lusaka','Livingstone','Victoria Falls'],
'Zimbabwe': ['Harare','Bulawayo','Victoria Falls'],
};

View File

@@ -1,6 +1,9 @@
<script>
import { journals, addJournal } from '../stores/journalStore.js';
import { get } from 'svelte/store';
import { flashCountry } from '../layout/selection.svelte.js';
import { countryNames } from '../shared/countries.js';
import { countryCities } from '../shared/countryCities.js';
import SearchInput from '../shared/SearchInput.svelte';
import PhotoEditor from './PhotoEditor.svelte';
import airplaneImg from '../../assets/airplane.png';
@@ -13,7 +16,7 @@
let { initialCountry = '', onBack, onSaved = onBack } = $props();
// ── Journal store (reactive) ────────────────────────────────────────
let journalEntries = $state([]);
let journalEntries = $state(get(journals));
$effect(() => {
const unsub = journals.subscribe(v => { journalEntries = v; });
return unsub;
@@ -61,8 +64,11 @@
// otherwise show all known cities.
let cityOptions = $derived(
country.trim()
? [...new Set(journalEntries.filter(j => (j.location?.country || '').toLowerCase() === country.trim().toLowerCase()).flatMap(e => e.location?.cities ?? []))].sort()
: [...new Set(journalEntries.flatMap(e => e.location?.cities ?? []))].sort()
? [...new Set([
...(countryCities[country.trim()] ?? []),
...journalEntries.filter(j => (j.location?.country || '').toLowerCase() === country.trim().toLowerCase()).flatMap(e => e.location?.cities ?? []),
])]
: []
);
function addCity(val) {
@@ -132,6 +138,7 @@
photos,
location: { cities, country },
});
flashCountry(country);
onSaved();
} catch (e) {
saving = false;

View File

@@ -3,7 +3,7 @@
import * as d3 from 'd3';
import { feature } from 'topojson-client';
import worldData from 'world-atlas/countries-50m.json';
import { getSelected, setTotalCount } from '../layout/selection.svelte.js';
import { getSelected, setTotalCount, getFlashing } from '../layout/selection.svelte.js';
import { getUserProfile } from '../auth/userStore.svelte.js';
import homeIconUrl from '../../assets 2/home.png';
import crayonCursorUrl from '../../assets/logo-cursor.png';
@@ -76,7 +76,7 @@
}
let frameEl;
let _paths = null;
let _paths = $state(null);
let _g = null;
let _pathFn = null;
let _countries = null;
@@ -120,6 +120,23 @@
$effect(updateAllFills);
$effect(() => {
const flashSet = getFlashing();
const paths = _paths; // reactive read so effect re-runs when _paths is set
if (!paths || flashSet.size === 0) return;
paths
.filter(d => flashSet.has(effId(d)))
.each(function() {
d3.select(this).interrupt()
.transition().duration(200).attr('fill', '#facc15')
.transition().duration(200).attr('fill', '#fb923c')
.transition().duration(200).attr('fill', '#facc15')
.transition().duration(200).attr('fill', '#fb923c')
.transition().duration(200).attr('fill', '#facc15')
.transition().duration(400).attr('fill', VISITED_COLOR);
});
});
onMount(() => {
const width = frameEl.clientWidth;
const height = frameEl.clientHeight;