feat: add maps layouts
This commit is contained in:
@ -2,26 +2,24 @@
|
||||
import { onMount } from "svelte";
|
||||
import {
|
||||
getStatus,
|
||||
getConfig,
|
||||
toggleLayout,
|
||||
setLayoutSize,
|
||||
startLayoutDrag,
|
||||
endLayoutDrag,
|
||||
startLayoutResize,
|
||||
endLayoutResize,
|
||||
type Status,
|
||||
type Config,
|
||||
} from "$lib/api";
|
||||
import {
|
||||
loadManifest,
|
||||
childrenOf,
|
||||
imageUrl,
|
||||
isDeadEnd,
|
||||
isLegend,
|
||||
rotationBlocked,
|
||||
type LayoutManifest,
|
||||
} from "$lib/layouts";
|
||||
|
||||
let manifest = $state<LayoutManifest>({});
|
||||
let status = $state<Status | null>(null);
|
||||
let config = $state<Config | null>(null);
|
||||
|
||||
// Decision-tree cursor + per-zone view state (reset whenever the zone changes).
|
||||
let path = $state("");
|
||||
@ -47,9 +45,29 @@
|
||||
const areaName = $derived(status?.area_name || areaId || "—");
|
||||
const paths = $derived(manifest[areaId] ?? []);
|
||||
const hasZone = $derived(paths.length > 0);
|
||||
// Real layout candidates at the current branch (legends are pulled out below).
|
||||
const candidates = $derived(
|
||||
childrenOf(paths, path).filter((p) => !excluded.includes(p)),
|
||||
childrenOf(paths, path).filter((p) => !excluded.includes(p) && !isLegend(p)),
|
||||
);
|
||||
// The zone's legend pages ("x", "x_x", …), ordered by depth. A legend at depth
|
||||
// d documents the layout candidates at hierarchy level d (verified: e.g. g1_8
|
||||
// ~x explains the level-1 symbols, ~x_x the level-2 ones).
|
||||
const legendPaths = $derived(
|
||||
paths
|
||||
.filter((p) => isLegend(p))
|
||||
.sort((a, b) => a.split("_").length - b.split("_").length),
|
||||
);
|
||||
// The single legend to show for the current level: the i-th legend at level i,
|
||||
// clamped to the last one (so it carries forward when a level has none of its
|
||||
// own), and the last legend once the layout is identified.
|
||||
const activeLegend = $derived.by(() => {
|
||||
if (legendPaths.length === 0) return null;
|
||||
const pathDepth = path === "" ? 0 : path.split("_").length;
|
||||
const idx = resolved
|
||||
? legendPaths.length - 1
|
||||
: Math.min(pathDepth, legendPaths.length - 1);
|
||||
return legendPaths[idx];
|
||||
});
|
||||
const resolved = $derived(path !== "" && childrenOf(paths, path).length === 0);
|
||||
const blocked = $derived(rotationBlocked(areaId));
|
||||
const transform = $derived(
|
||||
@ -77,13 +95,6 @@
|
||||
flipV = false;
|
||||
}
|
||||
|
||||
// Keep the OS window sized to the rendered content.
|
||||
let boxW = $state(0);
|
||||
let boxH = $state(0);
|
||||
$effect(() => {
|
||||
if (boxW > 0 && boxH > 0) setLayoutSize(Math.ceil(boxW), Math.ceil(boxH));
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
let alive = true;
|
||||
// The layout window is created hidden, and its `listen` event subscription
|
||||
@ -92,7 +103,6 @@
|
||||
// poll it and only react when the area actually changes (cheap; no flicker).
|
||||
(async () => {
|
||||
manifest = await loadManifest();
|
||||
config = await getConfig();
|
||||
while (alive) {
|
||||
const s = await getStatus();
|
||||
if (!status || s.area_id !== status.area_id) {
|
||||
@ -107,8 +117,6 @@
|
||||
};
|
||||
});
|
||||
|
||||
const imgSize = $derived(config?.layout_size ?? 360);
|
||||
|
||||
// Drag the window by its title bar. WebKitGTK's `data-tauri-drag-region` and
|
||||
// Tauri's `setPosition` don't move this window under KWin, so the Rust side
|
||||
// follows the mouse with xdotool between start/end (driven by pointerdown/up,
|
||||
@ -125,9 +133,26 @@
|
||||
window.removeEventListener("blur", endDrag);
|
||||
endLayoutDrag();
|
||||
}
|
||||
|
||||
// Resize the window via the corner grip. Same approach as the drag: the Rust
|
||||
// side follows the mouse (pointermove is flaky in this WebKitGTK window) and
|
||||
// resizes via set_size; pointerdown/up drive start/end.
|
||||
function startResize(e: PointerEvent) {
|
||||
if (e.button !== 0) return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
startLayoutResize();
|
||||
window.addEventListener("pointerup", endResize, { once: true });
|
||||
window.addEventListener("blur", endResize, { once: true });
|
||||
}
|
||||
function endResize() {
|
||||
window.removeEventListener("pointerup", endResize);
|
||||
window.removeEventListener("blur", endResize);
|
||||
endLayoutResize();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="viewer" bind:clientWidth={boxW} bind:clientHeight={boxH}>
|
||||
<div class="viewer">
|
||||
<div class="bar" role="toolbar" tabindex="-1" onpointerdown={startDrag}>
|
||||
<span class="title">🗺 {areaName}</span>
|
||||
<button class="close" title="Fermer (hotkey)" onclick={() => toggleLayout()}>✕</button>
|
||||
@ -136,8 +161,9 @@
|
||||
{#if !hasZone}
|
||||
<div class="empty">Pas de layout répertorié pour cette zone.</div>
|
||||
{:else}
|
||||
<!-- Main image: the deepest committed pick, with the zone's orientation. -->
|
||||
<div class="stage" style="width:{imgSize}px;height:{imgSize}px;">
|
||||
<!-- Main image: the deepest committed pick, with the zone's orientation.
|
||||
The stage flex-grows to fill the window, so the image scales with it. -->
|
||||
<div class="stage">
|
||||
{#if path !== ""}
|
||||
<img src={imageUrl(areaId, path)} alt={path} style="transform:{transform};" />
|
||||
{:else}
|
||||
@ -166,12 +192,22 @@
|
||||
<button
|
||||
class="link"
|
||||
onclick={() => (path = crumbs.slice(0, i + 1).join("_"))}
|
||||
>{seg === "x" ? "?" : seg}</button>
|
||||
>{seg}</button>
|
||||
{/each}
|
||||
<button class="back" onclick={back}>◀ retour</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Zone legend for the current level: always visible while navigating (not a
|
||||
layout candidate). Rendered without the orientation transform — it's a
|
||||
symbol key, not a map. -->
|
||||
{#if activeLegend}
|
||||
<div class="label">Légende :</div>
|
||||
<div class="legend">
|
||||
<img class="legend-img" src={imageUrl(areaId, activeLegend)} alt="légende" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Candidate thumbnails at the current branch. -->
|
||||
{#if candidates.length}
|
||||
<div class="label">{resolved ? "" : path === "" ? "Layouts possibles :" : "Affine :"}</div>
|
||||
@ -179,8 +215,7 @@
|
||||
{#each candidates as c}
|
||||
<button
|
||||
class="thumb"
|
||||
class:dead={isDeadEnd(c)}
|
||||
title={isDeadEnd(c) ? "Aucun de ceux-ci / non répertorié" : c}
|
||||
title={c}
|
||||
onclick={() => pick(c)}
|
||||
oncontextmenu={(e) => {
|
||||
e.preventDefault();
|
||||
@ -188,7 +223,7 @@
|
||||
}}
|
||||
>
|
||||
<img src={imageUrl(areaId, c)} alt={c} style="transform:{transform};" />
|
||||
<span class="cap">{isDeadEnd(c) ? "?" : c.split("_").slice(-1)[0]}</span>
|
||||
<span class="cap">{c.split("_").slice(-1)[0]}</span>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
@ -197,16 +232,27 @@
|
||||
<div class="label done">Layout identifié.</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<!-- Corner resize grip (the window has no WM resize borders under KWin). -->
|
||||
<div
|
||||
class="grip"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
title="Redimensionner"
|
||||
onpointerdown={startResize}
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.viewer {
|
||||
display: inline-flex;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #0f0c08;
|
||||
border: 1px solid var(--border);
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
width: max-content;
|
||||
}
|
||||
.bar {
|
||||
display: flex;
|
||||
@ -239,10 +285,12 @@
|
||||
text-align: center;
|
||||
}
|
||||
.stage {
|
||||
flex: 1 1 auto;
|
||||
min-height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 8px auto 4px;
|
||||
margin: 8px 8px 4px;
|
||||
background: #000;
|
||||
border: 1px solid var(--border);
|
||||
overflow: hidden;
|
||||
@ -250,6 +298,7 @@
|
||||
.stage img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
transition: transform 0.12s ease;
|
||||
}
|
||||
.stage .hint {
|
||||
@ -329,12 +378,16 @@
|
||||
gap: 6px;
|
||||
padding: 4px 8px;
|
||||
justify-content: center;
|
||||
max-width: 460px;
|
||||
/* Without this, items stretch on the cross axis, which overrides the
|
||||
thumbs' aspect-ratio and collapses their height to 0. */
|
||||
align-items: flex-start;
|
||||
}
|
||||
.thumb {
|
||||
position: relative;
|
||||
width: 92px;
|
||||
height: 92px;
|
||||
/* Scale with the window width (the viewer fills the viewport), staying
|
||||
square via aspect-ratio, clamped so it never gets tiny or huge. */
|
||||
width: clamp(72px, 24vw, 200px);
|
||||
aspect-ratio: 1;
|
||||
padding: 0;
|
||||
background: #000;
|
||||
border: 1px solid var(--border);
|
||||
@ -345,9 +398,22 @@
|
||||
.thumb:hover {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.thumb.dead {
|
||||
opacity: 0.6;
|
||||
border-style: dashed;
|
||||
.legend {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
padding: 4px 8px;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.legend-img {
|
||||
/* Symbol key: shown whole (contain, never rotated), scaling with the window. */
|
||||
width: clamp(90px, 28vw, 240px);
|
||||
aspect-ratio: 1;
|
||||
object-fit: contain;
|
||||
background: #000;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.thumb img {
|
||||
width: 100%;
|
||||
@ -371,4 +437,20 @@
|
||||
color: var(--muted);
|
||||
text-align: center;
|
||||
}
|
||||
.grip {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
cursor: nwse-resize;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
transparent 0 55%,
|
||||
var(--border) 55% 70%,
|
||||
transparent 70% 80%,
|
||||
var(--accent) 80% 100%
|
||||
);
|
||||
z-index: 10;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
setOverlayLocked,
|
||||
toggleOverlay,
|
||||
toggleLayout,
|
||||
setLayoutSize,
|
||||
saveOverlayGeometry,
|
||||
getTimer,
|
||||
timerStart,
|
||||
@ -194,8 +195,23 @@
|
||||
<label>Hotkey « layouts »
|
||||
<input type="text" bind:value={config.hotkey_layout} onchange={save} />
|
||||
</label>
|
||||
<label>Taille image (px)
|
||||
<input type="number" min="160" max="800" bind:value={config.layout_size} onchange={save} />
|
||||
<label>Largeur fenêtre (px)
|
||||
<input
|
||||
type="number"
|
||||
min="240"
|
||||
max="2000"
|
||||
bind:value={config.layout_w}
|
||||
onchange={() => { save(); if (config) setLayoutSize(config.layout_w, config.layout_h); }}
|
||||
/>
|
||||
</label>
|
||||
<label>Hauteur fenêtre (px)
|
||||
<input
|
||||
type="number"
|
||||
min="200"
|
||||
max="2000"
|
||||
bind:value={config.layout_h}
|
||||
onchange={() => { save(); if (config) setLayoutSize(config.layout_w, config.layout_h); }}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<p class="muted">
|
||||
|
||||
@ -17,7 +17,8 @@ export interface Config {
|
||||
feature_layouts: boolean;
|
||||
layout_x: number;
|
||||
layout_y: number;
|
||||
layout_size: number;
|
||||
layout_w: number;
|
||||
layout_h: number;
|
||||
timer_enabled: boolean;
|
||||
timer_pause_in_town: boolean;
|
||||
timer_afk_enabled: boolean;
|
||||
@ -107,6 +108,8 @@ export const restoreOverlayPosition = () => invoke("restore_overlay_position");
|
||||
export const toggleLayout = () => invoke("toggle_layout");
|
||||
export const setLayoutSize = (width: number, height: number) =>
|
||||
invoke("set_layout_size", { width, height });
|
||||
export const startLayoutResize = () => invoke("start_layout_resize");
|
||||
export const endLayoutResize = () => invoke("end_layout_resize");
|
||||
export const saveLayoutGeometry = () => invoke("save_layout_geometry");
|
||||
export const startLayoutDrag = () => invoke("start_layout_drag");
|
||||
export const endLayoutDrag = () => invoke("end_layout_drag");
|
||||
|
||||
@ -4,7 +4,8 @@
|
||||
// where the path is a decision tree encoded as underscore-separated segments:
|
||||
// "1", "2", "3" = the candidate layouts you first see entering a zone
|
||||
// "3_1", "3_2" = refinements of "3" revealed as you explore deeper
|
||||
// "x", "x_x" = "none of these / not catalogued" dead-ends
|
||||
// "x", "x_x" = the zone's legend pages (key to the map symbols), NOT
|
||||
// decision candidates — they're shown persistently.
|
||||
// You pick the candidate matching what you see in-game, then keep refining until
|
||||
// no children remain. (On disk the space is stored as "~" for URL-safe serving.)
|
||||
|
||||
@ -56,8 +57,12 @@ export function childrenOf(paths: string[], path: string): string[] {
|
||||
.sort(sortPaths);
|
||||
}
|
||||
|
||||
/** A path is an "x" (none-of-these / not catalogued) marker. */
|
||||
export function isDeadEnd(path: string): boolean {
|
||||
/**
|
||||
* A path is a legend page rather than a layout candidate. These are named with
|
||||
* a leading "x" segment ("x", "x_x", …) and hold the key to the map symbols, so
|
||||
* the viewer pulls them out of the decision tree and keeps them always visible.
|
||||
*/
|
||||
export function isLegend(path: string): boolean {
|
||||
return path.split("_")[0] === "x";
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user