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

fix: color home country purple on world map

Browse Source
This commit is contained in:
haerikimmm
2026-06-16 19:42:42 +09:00
parent 2226a483c5
commit 665472b281
1 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,6 +6,7 @@
import { getSelected, setTotalCount, getFlashing } from '../layout/selection.svelte.js'; import { getSelected, setTotalCount, getFlashing } from '../layout/selection.svelte.js';
import { getUserProfile } from '../auth/userStore.svelte.js'; import { getUserProfile } from '../auth/userStore.svelte.js';
import homeIconUrl from '../../assets/home.png'; import homeIconUrl from '../../assets/home.png';
import { nameToId } from '../shared/countries.js';
import crayonCursorUrl from '../../assets/logo-cursor.png'; import crayonCursorUrl from '../../assets/logo-cursor.png';
let { onCountryClick = (_name) => {} } = $props(); let { onCountryClick = (_name) => {} } = $props();
@@ -111,11 +112,17 @@
proj.scale(s).translate([w / 2, h * 0.70]); proj.scale(s).translate([w / 2, h * 0.70]);
} }
function getHomeCode() {
const name = getUserProfile()?.homeCountry;
return name ? (nameToId[name] ?? null) : null;
}
function updateAllFills() { function updateAllFills() {
const sel = getSelected(); const sel = getSelected();
const hc = getHomeCode();
if (!_paths || !_g) return; if (!_paths || !_g) return;
_paths.attr('fill', d => countryColor(d, sel, null)); _paths.attr('fill', d => countryColor(d, sel, hc));
_g.selectAll('.micro-state').attr('fill', d => countryColor(d, sel, null)); _g.selectAll('.micro-state').attr('fill', d => countryColor(d, sel, hc));
} }
$effect(updateAllFills); $effect(updateAllFills);
@@ -178,7 +185,7 @@
}) })
.on('mouseenter', (event, d) => { .on('mouseenter', (event, d) => {
const s = getSelected(); const s = getSelected();
d3.select(event.currentTarget).attr('fill', countryHoverColor(d, s, null)); d3.select(event.currentTarget).attr('fill', countryHoverColor(d, s, getHomeCode()));
tooltip.style('display', 'block').text(d.properties.name); tooltip.style('display', 'block').text(d.properties.name);
}) })
.on('mousemove', (event) => { .on('mousemove', (event) => {
@@ -187,7 +194,7 @@
}) })
.on('mouseleave', (event, d) => { .on('mouseleave', (event, d) => {
const s = getSelected(); const s = getSelected();
d3.select(event.currentTarget).attr('fill', countryColor(d, s, null)); d3.select(event.currentTarget).attr('fill', countryColor(d, s, getHomeCode()));
tooltip.style('display', 'none'); tooltip.style('display', 'none');
}); });
} }
@@ -215,7 +222,7 @@
.attr('cx', cx) .attr('cx', cx)
.attr('cy', cy) .attr('cy', cy)
.attr('r', 2) .attr('r', 2)
.attr('fill', countryColor(d, getSelected(), null)) .attr('fill', countryColor(d, getSelected(), getHomeCode()))
.attr('stroke', '#94a3b8') .attr('stroke', '#94a3b8')
.attr('stroke-width', 0.5); .attr('stroke-width', 0.5);
attachEvents(c); attachEvents(c);