aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/App.vue85
-rw-r--r--src/components/HelpModal.vue9
-rw-r--r--src/components/SearchModal.vue9
-rw-r--r--src/components/SettingsPane.vue9
-rw-r--r--src/components/TileImg.vue8
-rw-r--r--src/components/TileInfoModal.vue10
-rw-r--r--src/components/icon/CloseIcon.vue12
-rw-r--r--src/components/icon/HelpIcon.vue13
-rw-r--r--src/components/icon/InfoIcon.vue13
-rw-r--r--src/components/icon/PlayIcon.vue13
-rw-r--r--src/components/icon/SearchIcon.vue12
-rw-r--r--src/components/icon/SettingsIcon.vue22
12 files changed, 127 insertions, 88 deletions
diff --git a/src/App.vue b/src/App.vue
index 541e630..6f9c77c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,18 @@
<script lang="ts">
import {defineComponent, PropType} from 'vue';
+//
import Tile from './components/Tile.vue';
import AncestryBar from './components/AncestryBar.vue';
import TileInfoModal from './components/TileInfoModal.vue';
import SearchModal from './components/SearchModal.vue';
import HelpModal from './components/HelpModal.vue';
import SettingsPane from './components/SettingsPane.vue';
+//
+import SearchIcon from './components/icon/SearchIcon.vue';
+import PlayIcon from './components/icon/PlayIcon.vue';
+import HelpIcon from './components/icon/HelpIcon.vue';
+import SettingsIcon from './components/icon/SettingsIcon.vue';
+//
import {TolNode, TolNodeRaw, tolFromRaw, getTolMap} from './tol';
import {LayoutNode, initLayoutTree, initLayoutMap, tryLayout} from './layout';
import type {LayoutOptions} from './layout';
@@ -468,7 +475,10 @@ export default defineComponent({
window.removeEventListener('resize', this.onResize);
window.removeEventListener('keyup', this.onKeyUp);
},
- components: {Tile, AncestryBar, TileInfoModal, SettingsPane, SearchModal, HelpModal, },
+ components: {
+ Tile, AncestryBar, TileInfoModal, SettingsPane, SearchModal, HelpModal,
+ SearchIcon, PlayIcon, HelpIcon, SettingsIcon,
+ },
});
</script>
@@ -483,18 +493,12 @@ export default defineComponent({
:pos="[0,0]" :dims="ancestryBarDims" :nodes="detachedAncestors" :options="componentOptions"
@detached-ancestor-clicked="onDetachedAncestorClicked" @info-icon-clicked="onInnerInfoIconClicked"/>
<!-- Icons -->
- <svg class="absolute top-[6px] right-[54px] w-[18px] h-[18px] text-white/40 hover:text-white hover:cursor-pointer"
- @click="onSearchIconClick">
- <use href="#svg-search"/>
- </svg>
- <svg class="absolute top-[6px] right-[30px] w-[18px] h-[18px] text-white/40 hover:text-white hover:cursor-pointer"
- @click="onPlayIconClick">
- <use href="#svg-play"/>
- </svg>
- <svg class="absolute top-[6px] right-[6px] w-[18px] h-[18px] text-white/40 hover:text-white hover:cursor-pointer"
- @click="onHelpIconClick">
- <use href="#svg-help"/>
- </svg>
+ <search-icon @click="onSearchIconClick"
+ class="absolute top-[6px] right-[54px] w-[18px] h-[18px] text-white/40 hover:text-white hover:cursor-pointer"/>
+ <play-icon @click="onPlayIconClick"
+ class="absolute top-[6px] right-[30px] w-[18px] h-[18px] text-white/40 hover:text-white hover:cursor-pointer"/>
+ <help-icon @click="onHelpIconClick"
+ class="absolute top-[6px] right-[6px] w-[18px] h-[18px] text-white/40 hover:text-white hover:cursor-pointer"/>
<!-- Modals -->
<transition name="fade">
<tile-info-modal v-if="infoModalNode != null" :tolNode="infoModalNode" :options="componentOptions"
@@ -515,66 +519,13 @@ export default defineComponent({
<div v-else class="absolute bottom-0 right-0 w-[100px] h-[100px] invisible">
<div class="absolute bottom-[-50px] right-[-50px] w-[100px] h-[100px] visible -rotate-45
bg-black text-white hover:cursor-pointer" @click="onSettingsIconClick">
- <svg class="w-6 h-6 mx-auto mt-2"><use href="#svg-settings"/></svg>
+ <settings-icon class="w-6 h-6 mx-auto mt-2"/>
</div>
</div>
</transition>
<!-- Overlay used to prevent interaction and capture clicks -->
<div :style="{visibility: animationActive ? 'visible' : 'hidden'}"
class="absolute left-0 top-0 w-full h-full" @click="onOverlayClick"></div>
- <!-- SVGs reference-able from elsewhere -->
- <svg style="display:none">
- <defs>
- <svg id="svg-info"
- xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
- stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
- <circle cx="12" cy="12" r="10"/>
- <line x1="12" y1="16" x2="12" y2="12"/>
- <line x1="12" y1="8" x2="12.01" y2="8"/>
- </svg>
- <svg id="svg-settings"
- xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
- stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
- <circle cx="12" cy="12" r="3"/>
- <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0
- 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2
- 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0
- 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65
- 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1
- 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2
- 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65
- 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0
- 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0
- 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2
- 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
- </svg>
- <svg id="svg-search"
- xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
- stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
- <circle cx="11" cy="11" r="8"/>
- <line x1="21" y1="21" x2="16.65" y2="16.65"/>
- </svg>
- <svg id="svg-play"
- xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
- stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
- <circle cx="12" cy="12" r="10"/>
- <polygon points="10 8 16 12 10 16 10 8"/>
- </svg>
- <svg id="svg-help"
- xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
- stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
- <circle cx="12" cy="12" r="10"/>
- <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
- <line x1="12" y1="17" x2="12.01" y2="17"/>
- </svg>
- <svg id="svg-close"
- xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
- stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
- <line x1="18" y1="6" x2="6" y2="18"/>
- <line x1="6" y1="6" x2="18" y2="18"/>
- </svg>
- </defs>
- </svg>
</div>
</template>
diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue
index f56807c..8be08f4 100644
--- a/src/components/HelpModal.vue
+++ b/src/components/HelpModal.vue
@@ -1,5 +1,6 @@
<script lang="ts">
import {defineComponent, PropType} from 'vue';
+import CloseIcon from './icon/CloseIcon.vue';
export default defineComponent({
props: {
@@ -7,11 +8,12 @@ export default defineComponent({
},
methods: {
closeClicked(evt: Event){
- if (evt.target == this.$el || (this.$refs.closeIcon as HTMLElement).contains(evt.target as HTMLElement)){
+ if (evt.target == this.$el || (this.$refs.closeIcon.$el as HTMLElement).contains(evt.target as HTMLElement)){
this.$emit('help-modal-close');
}
},
},
+ components: {CloseIcon, },
emits: ['help-modal-close'],
});
</script>
@@ -20,9 +22,8 @@ export default defineComponent({
<div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="closeClicked">
<div class="absolute left-1/2 -translate-x-1/2 w-4/5 top-1/2 -translate-y-1/2 p-4
bg-stone-50 rounded-md shadow shadow-black">
- <svg class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer" @click.stop="closeClicked" ref="closeIcon">
- <use href="#svg-close"/>
- </svg>
+ <close-icon @click.stop="closeClicked" ref="closeIcon"
+ class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer"/>
<h1 class="text-center text-xl font-bold mb-2">Help Info</h1>
<hr class="mb-4 border-stone-400"/>
<div class="mb-4">
diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue
index 1d9b181..f3bcb3e 100644
--- a/src/components/SearchModal.vue
+++ b/src/components/SearchModal.vue
@@ -1,5 +1,6 @@
<script lang="ts">
import {defineComponent, PropType} from 'vue';
+import SearchIcon from './icon/SearchIcon.vue';
import {TolNode} from '../tol';
import {LayoutNode} from '../layout';
@@ -11,7 +12,7 @@ export default defineComponent({
},
methods: {
closeClicked(evt: Event){
- if (evt.target == this.$el || evt.target == this.$refs.closeIcon){
+ if (evt.target == this.$el || (this.$refs.closeIcon.$el as HTMLElement).contains(evt.target as HTMLElement)){
this.$emit('search-close');
}
},
@@ -35,6 +36,7 @@ export default defineComponent({
mounted(){
(this.$refs.searchInput as HTMLInputElement).focus();
},
+ components: {SearchIcon, },
emits: ['search-node', 'search-close']
});
</script>
@@ -45,9 +47,8 @@ export default defineComponent({
bg-stone-50 rounded-md shadow shadow-black flex gap-1">
<input type="text" class="block border"
@keyup.enter="onSearchEnter" @keyup.esc="closeClicked" ref="searchInput"/>
- <svg class="block w-6 h-6 ml-1 hover:cursor-pointer hover:bg-stone-200" @click.stop="onSearchEnter">
- <use href="#svg-search"/>
- </svg>
+ <search-icon @click.stop="onSearchEnter"
+ class="block w-6 h-6 ml-1 hover:cursor-pointer hover:bg-stone-200" />
</div>
</div>
</template>
diff --git a/src/components/SettingsPane.vue b/src/components/SettingsPane.vue
index d49dd68..2b777e2 100644
--- a/src/components/SettingsPane.vue
+++ b/src/components/SettingsPane.vue
@@ -1,5 +1,6 @@
<script lang="ts">
import {defineComponent, PropType} from 'vue';
+import CloseIcon from './icon/CloseIcon.vue';
import type {LayoutOptions} from '../layout';
export default defineComponent({
@@ -9,7 +10,7 @@ export default defineComponent({
},
methods: {
closeClicked(evt: Event){
- if (evt.target == this.$el || (this.$refs.closeIcon as HTMLElement).contains(evt.target as HTMLElement)){
+ if (evt.target == this.$el || (this.$refs.closeIcon.$el as HTMLElement).contains(evt.target as HTMLElement)){
this.$emit('settings-close');
}
},
@@ -33,15 +34,15 @@ export default defineComponent({
this.onLayoutOptChg();
},
},
+ components: {CloseIcon, },
emits: ['settings-close', 'layout-option-change', ],
});
</script>
<template>
<div class="absolute bottom-4 right-4 min-w-[5cm] p-3 bg-stone-50 visible rounded-md shadow shadow-black">
- <svg class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer" @click="closeClicked" ref="closeIcon">
- <use href="#svg-close"/>
- </svg>
+ <close-icon @click="closeClicked" ref="closeIcon"
+ class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer" />
<h1 class="text-xl font-bold mb-2">Settings</h1>
<hr class="border-stone-400"/>
<div>
diff --git a/src/components/TileImg.vue b/src/components/TileImg.vue
index ebd350d..3de0fa8 100644
--- a/src/components/TileImg.vue
+++ b/src/components/TileImg.vue
@@ -1,5 +1,6 @@
<script lang="ts">
import {defineComponent, PropType} from 'vue';
+import InfoIcon from './icon/InfoIcon.vue';
import {LayoutNode} from '../layout';
export default defineComponent({
@@ -88,6 +89,7 @@ export default defineComponent({
this.$emit('info-icon-clicked', this.layoutNode);
},
},
+ components: {InfoIcon, },
emits: ['info-icon-clicked'],
});
</script>
@@ -96,10 +98,8 @@ export default defineComponent({
<div :style="styles" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousedown="onMouseDown"
:class="isExpandable ? ['hover:cursor-pointer'] : []">
<h1 :style="headerStyles">{{layoutNode.tolNode.name}}</h1>
- <svg :style="infoIconStyles" class="hover:cursor-pointer"
+ <info-icon :style="infoIconStyles" class="hover:cursor-pointer"
@mouseenter="onInfoMouseEnter" @mouseleave="onInfoMouseLeave"
- @click.stop="onInfoClick" @mousedown.stop @mouseup.stop>
- <use href="#svg-info"/>
- </svg>
+ @click.stop="onInfoClick" @mousedown.stop @mouseup.stop/>
</div>
</template>
diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue
index 9d9dd15..f45ef04 100644
--- a/src/components/TileInfoModal.vue
+++ b/src/components/TileInfoModal.vue
@@ -1,5 +1,6 @@
<script lang="ts">
import {defineComponent, PropType} from 'vue';
+import CloseIcon from './icon/CloseIcon.vue';
import {TolNode} from '../tol';
export default defineComponent({
@@ -20,11 +21,12 @@ export default defineComponent({
},
methods: {
closeClicked(evt: Event){
- if (evt.target == this.$el || (this.$refs.closeIcon as HTMLElement).contains(evt.target as HTMLElement)){
+ if (evt.target == this.$el || (this.$refs.closeIcon.$el as HTMLElement).contains(evt.target as HTMLElement)){
this.$emit('info-modal-close');
}
},
},
+ components: {CloseIcon, },
emits: ['info-modal-close'],
});
</script>
@@ -33,10 +35,8 @@ export default defineComponent({
<div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="closeClicked">
<div class="absolute left-1/2 -translate-x-1/2 w-4/5 top-1/2 -translate-y-1/2 p-4
bg-stone-50 rounded-md shadow shadow-black">
- <svg class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer"
- @click.stop="closeClicked" ref="closeIcon">
- <use href="#svg-close"/>
- </svg>
+ <close-icon @click.stop="closeClicked" ref="closeIcon"
+ class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer"/>
<h1 class="text-center text-xl font-bold mb-2">{{tolNode.name}}</h1>
<hr class="mb-4 border-stone-400"/>
<div :style="imgStyles" class="float-left mr-4" alt="an image"></div>
diff --git a/src/components/icon/CloseIcon.vue b/src/components/icon/CloseIcon.vue
new file mode 100644
index 0000000..eed0c0f
--- /dev/null
+++ b/src/components/icon/CloseIcon.vue
@@ -0,0 +1,12 @@
+<script lang="ts">
+import {defineComponent, PropType} from 'vue';
+export default defineComponent({});
+</script>
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+ stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+ <line x1="18" y1="6" x2="6" y2="18"/>
+ <line x1="6" y1="6" x2="18" y2="18"/>
+</svg>
+</template>
diff --git a/src/components/icon/HelpIcon.vue b/src/components/icon/HelpIcon.vue
new file mode 100644
index 0000000..ecd40a0
--- /dev/null
+++ b/src/components/icon/HelpIcon.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+import {defineComponent, PropType} from 'vue';
+export default defineComponent({});
+</script>
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+ stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+ <circle cx="12" cy="12" r="10"/>
+ <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
+ <line x1="12" y1="17" x2="12.01" y2="17"/>
+</svg>
+</template>
diff --git a/src/components/icon/InfoIcon.vue b/src/components/icon/InfoIcon.vue
new file mode 100644
index 0000000..0a17ce1
--- /dev/null
+++ b/src/components/icon/InfoIcon.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+import {defineComponent, PropType} from 'vue';
+export default defineComponent({});
+</script>
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+ stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+ <circle cx="12" cy="12" r="10"/>
+ <line x1="12" y1="16" x2="12" y2="12"/>
+ <line x1="12" y1="8" x2="12.01" y2="8"/>
+</svg>
+</template>
diff --git a/src/components/icon/PlayIcon.vue b/src/components/icon/PlayIcon.vue
new file mode 100644
index 0000000..293c827
--- /dev/null
+++ b/src/components/icon/PlayIcon.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+import {defineComponent, PropType} from 'vue';
+export default defineComponent({});
+</script>
+
+<template>
+<svg
+ xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+ stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+ <circle cx="12" cy="12" r="10"/>
+ <polygon points="10 8 16 12 10 16 10 8"/>
+</svg>
+</template>
diff --git a/src/components/icon/SearchIcon.vue b/src/components/icon/SearchIcon.vue
new file mode 100644
index 0000000..c84c0e4
--- /dev/null
+++ b/src/components/icon/SearchIcon.vue
@@ -0,0 +1,12 @@
+<script lang="ts">
+import {defineComponent, PropType} from 'vue';
+export default defineComponent({});
+</script>
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+ stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+ <circle cx="11" cy="11" r="8"/>
+ <line x1="21" y1="21" x2="16.65" y2="16.65"/>
+</svg>
+</template>
diff --git a/src/components/icon/SettingsIcon.vue b/src/components/icon/SettingsIcon.vue
new file mode 100644
index 0000000..2e6f621
--- /dev/null
+++ b/src/components/icon/SettingsIcon.vue
@@ -0,0 +1,22 @@
+<script lang="ts">
+import {defineComponent, PropType} from 'vue';
+export default defineComponent({});
+</script>
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+ stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+ <circle cx="12" cy="12" r="3"/>
+ <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0
+ 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2
+ 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0
+ 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65
+ 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1
+ 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2
+ 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65
+ 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0
+ 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0
+ 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2
+ 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+</svg>
+</template>
generated by cgit v1.2.3 (git 2.39.1) at 2026-04-25 16:06:22 +0000