migrated to vue wtf

2023-02-26 22:14:43 +01:00
parent b16e20a86a
commit 766faf5f56
54 changed files with 3135 additions and 3538 deletions
--- a/src/ui/Root/Toolbox.vue
+++ b/src/ui/Root/Toolbox.vue
@@ -0,0 +1,114 @@
+<template>
+    <div class="root-toolbox">
+        <div class="main-row">
+            <div 
+                class="toolbox-button"
+                :class="{ active: selectedTool === 'track-unit-type' }"
+                @click="selectedTool = 'track-unit-type'">
+                Track Type
+            </div>
+            <div 
+                class="toolbox-button"
+                :class="{ active: selectedTool === 'sticking' }"
+                @click="selectedTool = 'sticking'">
+                Sticking
+            </div>
+            <div 
+                class="toolbox-button"
+                :class="{ active: selectedTool === 'eraser' }"
+                @click="selectedTool = 'eraser'">
+                Eraser
+            </div>
+        </div>
+        <div v-if="selectedTool === 'track-unit-type'" class="details">
+            <div v-for="(type, i) in TrackUnitTypeList"
+                :key="type"
+                class="toolbox-button"
+                :class="{ active: i === activeTrackUnitType }"
+                @click="activeTrackUnitType = i">
+                <div :class="getClasses({ on: true, type, stickingType: 'none' })" />
+            </div>
+        </div>
+        <div v-else-if="selectedTool === 'sticking'" class="details">
+            <div v-for="(stickingType, i) in TrackUnitStickingTypeList.slice(1)"
+                :key="stickingType"
+                class="toolbox-button"
+                :class="{ active: i + 1 === activeStickingType }"
+                @click="activeStickingType = i + 1">
+                <icon :icon-name="StickingTypeIconMap[stickingType]" />
+            </div>
+        </div>
+        <div v-else-if="selectedTool === 'eraser'" class="details hidden" />
+    </div>
+</template>
+
+<script setup lang="ts">
+    import { useAppStateStore } from "@/AppState";
+    import { TrackUnitStickingTypeList, TrackUnitTypeList } from "@/Track";
+    import { StickingTypeIconMap } from "@/ui/TrackUnit/trackUnit";
+    import Icon from "@/ui/Widgets/Icon/Icon.vue";
+    import { getClasses } from "@/ui/TrackUnit/trackUnit";
+
+    const { 
+        selectedTool, 
+        activeTrackUnitType, 
+        activeStickingType 
+    } = useAppStateStore();
+</script>
+
+<style scoped lang="scss">
+    .root-toolbox { }
+
+    .root-toolbox .main-row {
+        height: 2.5em;
+        margin: auto;
+        display: flex;
+        background-color: var(--color-ui-neutral-dark);
+        justify-content: center;
+        width: 100%;
+    }
+
+    .root-toolbox .details {
+        margin: auto;
+        height: 4em;
+        width: min-content;
+        border-radius: 0 0 1em 1em;
+        padding: 0.5em;
+        background-color: var(--color-ui-neutral-dark-active);
+        display: flex;
+        justify-content: center;
+    }
+
+    .root-toolbox .details.hidden {
+        visibility: hidden; 
+    }
+
+    .root-toolbox .track-unit {
+        margin: 0;
+        padding: 0;
+    }
+
+    .root-toolbox .toolbox-button {
+        padding: 0.5em;
+        cursor: pointer;
+        color: black;
+        background-color: var(--color-ui-neutral-dark);
+    }
+    .root-toolbox .toolbox-button:hover {
+        background-color: var(--color-ui-neutral-dark-hover);
+    }
+    .root-toolbox .toolbox-button.active {
+        background-color: var(--color-ui-neutral-dark-active);
+    }
+
+    .root-toolbox .details .toolbox-button.active {
+        background-color: var(--color-ui-neutral-dark);
+    }
+    .root-toolbox .details .toolbox-button:hover {
+        background-color: var(--color-ui-neutral-dark-hover);
+    }
+    .root-toolbox .details .toolbox-button {
+        background-color: var(--color-ui-neutral-dark-active);
+    }
+</style>
+