Added search config to disable some unneeded buttons

This commit is contained in:
Alexis
2025-03-15 21:25:21 +01:00
parent c5787f3ceb
commit a6063dd47b
10 changed files with 158 additions and 25 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
public/icon/death.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

View File

@@ -1,19 +1,9 @@
---
import type { MapMarker, PlayerMarker } from '@/types/Leaflet';
import type { MapProps } from '@/types/Map';
import MarkerCreator from './overlay/MarkerCreator.vue';
interface Props {
mapKey: string
zoomifyKey: string
mapHeight: number
mapWidth: number
markers?: MapMarker[]
players?: PlayerMarker
rulerMainUnit?: string
rulerDistanceRatio?: number
rulerHideWalkDistance?: boolean
backgroundColor?: string
}
interface Props extends MapProps {}
const {
mapKey,

View File

@@ -2,22 +2,24 @@
import type { MapMarker, PlayerMarker } from "@/types/Leaflet";
import SearchMarkers from "./overlay/SearchMarkers.vue";
import type { MapOverlayProps } from "@/types/Map";
interface Props {
mapKey: string
markers?: MapMarker[]
players?: PlayerMarker
}
interface Props extends MapOverlayProps {}
const {
mapKey,
markers = [] as MapMarker[],
players = {} as PlayerMarker,
searchConfig = {
disableCapitals: false,
disableLandmarks: false,
disableQuests: false,
}
} = Astro.props
---
<div class="world-overlay">
<SearchMarkers client:load mapKey={mapKey} markers={markers} players={players} />
<SearchMarkers client:load mapKey={mapKey} markers={markers} players={players} searchConfig={searchConfig} />
</div>
<style lang="scss">

View File

@@ -0,0 +1,72 @@
{
"data": [
{
"group": "landmarks",
"title": "Escalier principal",
"description": "Escalier principal menant à l'entrée des mines.",
"markerCoords": {
"x": 204.17153606569804,
"y": -97.2765317771096
}
},
{
"group": "landmarks",
"title": "Escalier secret",
"description": "Escalier secret menant à l'extérieur de la montagne. Il a été taillé dans la pierre par les Étincelles de Cantane.",
"markerCoords": {
"x": 30.312497957367608,
"y": -112.61072064780724
}
},
{
"group": "landmarks",
"title": "Cadavre de Taleb Vaht",
"description": "Son visage a été vidé de sa chair et ses yeux ont été arrachés. Son bas corps est fondu dans le mur.",
"markerCoords": {
"x": 73.98667751443935,
"y": -48.86054114319268
},
"icon": "death"
},
{
"group": "landmarks",
"title": "Cadavre de Thérence",
"description": "Le corps est transpercé par une lance ; il a l'air de s'être jeté dessus.",
"markerCoords": {
"x": 53.322483262000056,
"y": -47.64614423471167
},
"icon": "death"
},
{
"group": "landmarks",
"title": "Cadavre de Sébastien",
"description": "Le corps est tranché en deux dans la longueur.",
"markerCoords": {
"x": 114.33884300089663,
"y": -62.16106768041688
},
"icon": "death"
},
{
"group": "landmarks",
"title": "Cadavre de Donovane",
"description": "Le corps complètement fondu dans le sol. La pierre alentour a été minée par sa main.",
"markerCoords": {
"x": 187.9956058143303,
"y": 30.86756210204816
},
"icon": "death"
},
{
"group": "landmarks",
"title": "Cadavre de Mathilda Boulais",
"description": "Son corps a l'air d'avoir explosé et fondu de l'intérieur. Elle n'est pas reconnaissable.",
"markerCoords": {
"x": 54.935192730348106,
"y": 6.478401650708764
},
"icon": "death"
}
]
}

View File

@@ -1,15 +1,17 @@
<script setup lang="ts">
import type { MapMarker, MapMarkerGroup, PlayerMarker } from '@/types/Leaflet';
import type { SearchConfig } from '@/types/Map';
import type { SearchMode } from '@/types/Search';
import { onClickOutside, useFocus, useFocusWithin, useLocalStorage, useMagicKeys, whenever } from '@vueuse/core';
import { computed, onMounted, ref, onUpdated, watch } from 'vue';
import SearchMarkersTags from './SearchMarkersTags.vue';
import { computed, onMounted, onUpdated, ref, watch } from 'vue';
import SearchMapSwitch from './SearchMapSwitch.vue';
import SearchMarkersTags from './SearchMarkersTags.vue';
const props = defineProps<{
markers: MapMarker[],
players: PlayerMarker,
mapKey?: string
mapKey?: string,
searchConfig?: SearchConfig
}>()
const customMarkersKey = props.mapKey ? `custom-markers-${props.mapKey}` : 'custom-markers'
@@ -261,6 +263,7 @@ function resetAllFields(actionAfter?: "focusAfter") {
<SearchMarkersTags
:current-search-mode="currentSearchMode"
:custom-markers="customMarkersData"
:search-config="props.searchConfig"
@on-category-switch="handleCategorySwitch"
/>
</nav>

View File

@@ -1,10 +1,12 @@
<script lang="ts" setup>
import type { MapMarker, MapMarkerGroup } from '@/types/Leaflet';
import type { SearchConfig } from '@/types/Map';
import type { SearchMode } from '@/types/Search';
defineProps<{
currentSearchMode: SearchMode,
customMarkers: MapMarker[]
customMarkers: MapMarker[],
searchConfig?: SearchConfig
}>()
const emit = defineEmits<{
@@ -18,7 +20,7 @@ function emitCategorySwitch(newCategory: MapMarkerGroup) {
<template>
<menu class="tag-list">
<li>
<li v-if="!searchConfig?.disableQuests">
<button
@click="emitCategorySwitch('quests')"
class="red"
@@ -35,7 +37,7 @@ function emitCategorySwitch(newCategory: MapMarkerGroup) {
</button>
</li>
<li>
<li v-if="!searchConfig?.disableCapitals">
<button
@click="emitCategorySwitch('capitals')"
class="blue"
@@ -52,7 +54,7 @@ function emitCategorySwitch(newCategory: MapMarkerGroup) {
</button>
</li>
<li>
<li v-if="!searchConfig?.disableLandmarks">
<button
@click="emitCategorySwitch('landmarks')"
class="orange"

View File

@@ -14,6 +14,10 @@ const markers = markersData.data as MapMarker[]
<MapOverlay
mapKey='aldys-cantane'
markers={markers}
searchConfig={{
disableCapitals: true,
disableQuests: true,
}}
/>
<Map
mapKey='aldys-cantane'

View File

@@ -0,0 +1,33 @@
---
import type { MapMarker, PlayerMarker } from '@/types/Leaflet';
import Layout from '@/layouts/Layout.astro';
import Map from '@/components/maps/Map.astro'
import MapOverlay from '@/components/maps/MapOverlay.astro'
import markersData from '@/components/maps/data/aldys/cantane/les-mines-blanches/markers.json';
const markers = markersData.data as MapMarker[]
---
<Layout title="Les Mines Blanches ~ Cartographie">
<MapOverlay
mapKey='aldys-cantane-mines'
markers={markers}
searchConfig={{
disableCapitals: true,
disableQuests: true,
}}
/>
<Map
mapKey='aldys-cantane-mines'
zoomifyKey='mines-blanches'
mapHeight={6020}
mapWidth={10290}
markers={markers}
rulerDistanceRatio={1.15}
rulerMainUnit='Mètres'
rulerHideWalkDistance={true}
backgroundColor="#101010"
/>
</Layout>

27
src/types/Map.ts Normal file
View File

@@ -0,0 +1,27 @@
import type { MapMarker, PlayerMarker } from "./Leaflet"
export interface SearchConfig {
disableQuests?: boolean
disableCapitals?: boolean
disableLandmarks?: boolean
}
export interface MapProps {
mapKey: string
zoomifyKey: string
mapHeight: number
mapWidth: number
markers?: MapMarker[]
players?: PlayerMarker
rulerMainUnit?: string
rulerDistanceRatio?: number
rulerHideWalkDistance?: boolean
backgroundColor?: string
}
export interface MapOverlayProps {
mapKey: string
markers?: MapMarker[]
players?: PlayerMarker
searchConfig?: SearchConfig
}