aboutsummaryrefslogtreecommitdiffstats
path: root/components/base
diff options
context:
space:
mode:
Diffstat (limited to 'components/base')
-rw-r--r--components/base/Button.vue82
-rw-r--r--components/base/Checkbox.vue42
-rw-r--r--components/base/ItemStackForm.vue50
-rw-r--r--components/base/ItemStackModal.vue159
-rw-r--r--components/base/ItemStackPicker.vue100
-rw-r--r--components/base/Modal.vue68
-rw-r--r--components/base/TrueFalseSwitch.vue54
7 files changed, 555 insertions, 0 deletions
diff --git a/components/base/Button.vue b/components/base/Button.vue
new file mode 100644
index 0000000..efd91c2
--- /dev/null
+++ b/components/base/Button.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+const props = defineProps({
+ type: {
+ type: String,
+ required: false,
+ default: 'text',
+ },
+ label: String,
+ icon: Array<String>,
+ disabled: Boolean,
+});
+
+const emit = defineEmits(['click']);
+
+const onClick = (event: MouseEvent) => {
+ if (!props.disabled) {
+ emit('click', event);
+ }
+};
+</script>
+
+<template>
+ <a id="button" :class="{text: type === 'text', solid: type === 'solid', disabled: disabled}" @click.stop="onClick">
+ <font-awesome-icon :icon="icon" />
+ {{ label }}
+ </a>
+</template>
+
+<style scoped>
+#button {
+ display: flex;
+ align-items: center;
+ gap: 0.25rem;
+ user-select: none;
+}
+
+.text {
+ background-color: transparent;
+ color: var(--color-text-primary);
+ transition: color 0.3s;
+ font-weight: 700;
+ cursor: pointer;
+
+ &.disabled {
+ color: var(--color-text-mute);
+ cursor: not-allowed;
+ }
+
+ &:hover {
+ color: var(--color-primary-dark);
+ }
+
+ &.disabled:hover {
+ color: var(--color-text-mute);
+ }
+}
+
+.solid {
+ background-color: var(--color-primary);
+ transition: background-color 0.3s;
+ color: var(--color-text);
+ padding: 0.25rem 0.5rem;
+ border-radius: 4px;
+ font-weight: 700;
+ cursor: pointer;
+
+ &.disabled {
+ background-color: var(--color-border);
+ color: var(--color-text-mute);
+ cursor: not-allowed;
+ }
+
+ &:hover {
+ background-color: var(--color-primary-dark);
+ }
+
+ &.disabled:hover {
+ background-color: var(--color-border);
+ }
+}
+
+</style> \ No newline at end of file
diff --git a/components/base/Checkbox.vue b/components/base/Checkbox.vue
new file mode 100644
index 0000000..e0325e7
--- /dev/null
+++ b/components/base/Checkbox.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const model = defineModel();
+
+defineProps({
+ id: String,
+ label: String,
+ description: String,
+});
+
+</script>
+
+<template>
+ <div class="checkbox">
+ <label id="wrapper" :for="id">
+ <input :id="id" type="checkbox" v-model="model" />
+ <span id="label">{{ label }}</span>
+ <span id="description">{{ description }}</span>
+ </label>
+ </div>
+</template>
+
+<style scoped>
+#label {
+ display: block;
+ font-weight: bold;
+}
+
+#description {
+ display: block;
+ font-size: 0.8em;
+}
+
+input {
+ float: left;
+ margin: 5px 0 0 -20px;
+}
+
+.checkbox {
+ padding: 0 0 0 20px;
+}
+
+</style> \ No newline at end of file
diff --git a/components/base/ItemStackForm.vue b/components/base/ItemStackForm.vue
new file mode 100644
index 0000000..250e8c9
--- /dev/null
+++ b/components/base/ItemStackForm.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import materials from '@/lib/materials';
+
+const model = defineModel<any>();
+
+if (typeof model.value !== 'object' || model.value === null) {
+ model.value = {};
+}
+
+const itemName = computed({
+ get() {
+ return model.value.name;
+ },
+ set(newValue: string) {
+ model.value.name = newValue;
+ },
+});
+
+const itemType = computed({
+ get() {
+ return model.value.type || model.value.material || model.value.item;
+ },
+ set(newValue: string) {
+ if (model.value.material) {
+ model.value.material = newValue;
+ } else if (model.value.item) {
+ model.value.item = newValue;
+ } else {
+ model.value.type = newValue;
+ }
+ },
+});
+</script>
+
+<template>
+ <div class="option-group">
+ <label for="itemstack-name">Name</label>
+ <input id="itemstack-name" name="itemstack-name" v-model="itemName" placeholder="Enter a display name" />
+ </div>
+
+ <div class="option-group">
+ <label for="itemstack-name">Type</label>
+ <multiselect v-model="itemType"
+ :options="materials" :searchable="true" placeholder="Choose a material" />
+ </div>
+</template>
+
+<style scoped>
+</style> \ No newline at end of file
diff --git a/components/base/ItemStackModal.vue b/components/base/ItemStackModal.vue
new file mode 100644
index 0000000..9a1e2b5
--- /dev/null
+++ b/components/base/ItemStackModal.vue
@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import materials from '@/lib/materials';
+
+const model = defineModel();
+
+const emit = defineEmits(['confirm']);
+
+const props = defineProps({
+ value: String,
+});
+
+//TODO unshitify
+const value = ref<any>(props.value);
+
+const isQuestItem = computed(() => {
+ return value.value?.['quest-item'] !== undefined;
+});
+const isItemStack = computed(() => {
+ return (
+ typeof value.value === 'object'
+ && (
+ value.value?.item !== undefined
+ || value.value?.type !== undefined
+ || value.value?.material !== undefined
+ ))
+});
+const isMaterial = computed(() => {
+ return typeof value.value === 'string' && materials.includes(value.value)
+});
+
+const selectedType = ref(
+ isQuestItem.value
+ ? 'questitem'
+ : isItemStack.value
+ ? 'itemstack'
+ : isMaterial.value
+ ? 'material'
+ : ''
+);
+
+const noTypeSelected = computed(() => selectedType.value === '');
+const noValue = computed(() => !isQuestItem.value && !isItemStack.value && !isMaterial.value);
+
+const setSelectedType = (type: string) => {
+ if (type === 'questitem') {
+ value.value = {};
+ } else if (type === 'itemstack') {
+ value.value = {};
+ } else if (type === 'material') {
+ value.value = '';
+ }
+ selectedType.value = type;
+};
+
+const confirm = () => {
+ emit('confirm', value.value);
+};
+</script>
+
+<template>
+ <Modal v-model="model">
+ <template v-slot:header>
+ <h2>Edit ItemStack</h2>
+ </template>
+
+ <template v-slot:body>
+ <div id="type">
+ <span class="option" @click="setSelectedType('questitem')" :class="{ selected: selectedType === 'questitem' }">
+ <span>
+ <font-awesome-icon :icon="['fas', 'fa-tag']" />
+ Quest Item
+ </span>
+ <p v-if="noTypeSelected">Re-use a quest item.</p>
+ </span>
+ <span class="option" @click="setSelectedType('itemstack')" :class="{ selected: selectedType === 'itemstack' }">
+ <span>
+ <font-awesome-icon :icon="['fas', 'fa-cube']" />
+ ItemStack
+ </span>
+ <p v-if="noTypeSelected">Define a new item stack.</p>
+ </span>
+ <span class="option" @click="setSelectedType('material')" :class="{ selected: selectedType === 'material' }">
+ <span>
+ <font-awesome-icon :icon="['fas', 'fa-apple-whole']" />
+ Material
+ </span>
+ <p v-if="noTypeSelected">Define a specific item type.</p>
+ </span>
+ </div>
+
+ <div id="material" class="option-group" v-if="selectedType === 'material'">
+ <label for="material">Material</label>
+ <multiselect v-model="value" :options="materials" :searchable="true" placeholder="Enter material name" />
+ </div>
+
+ <div id="itemstack" class="option-group" v-if="selectedType === 'itemstack'">
+ <ItemStackForm v-model="value" />
+ </div>
+
+
+ <div id="confirm" class="control-group">
+ <Button :icon="['fas', 'fa-times']" :label="'Cancel'" @click="model = false"></Button>
+ <Button type="solid" :icon="['fas', 'fa-check']" :label="'Confirm'" @click="confirm"></Button>
+ <!-- :disabled="noTypeSelected || noValue" -->
+ </div>
+ </template>
+ </Modal>
+</template>
+
+<style scoped>
+#confirm {
+ display: flex;
+ justify-content: flex-end;
+ margin-top: 1rem;
+}
+
+#type {
+ display: flex;
+ justify-content: space-around;
+ gap: 0.25rem;
+ user-select: none;
+ margin-bottom: 1rem;
+
+ .option {
+ border: 1px solid var(--color-border);
+ cursor: pointer;
+ display: flex;
+ flex-direction: column;
+ flex-basis: 0;
+ flex-grow: 1;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.5rem;
+ background-color: var(--color-background-soft);
+ transition: background-color 0.3s;
+
+ span {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-weight: 700;
+ }
+
+ p {
+ text-align: center;
+ font-size: 0.8rem;
+ }
+
+ &:hover {
+ background-color: var(--color-hover);
+ }
+
+ &.selected {
+ background-color: var(--color-primary-mute);
+ }
+ }
+}
+</style> \ No newline at end of file
diff --git a/components/base/ItemStackPicker.vue b/components/base/ItemStackPicker.vue
new file mode 100644
index 0000000..d16090e
--- /dev/null
+++ b/components/base/ItemStackPicker.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import ItemStackModal from './ItemStackModal.vue';
+import materials from '@/lib/materials';
+
+const props = defineProps<{
+ value: any;
+}>();
+const emit = defineEmits(['update']);
+
+const value = ref(props.value);
+
+const showItemStackModal = ref(false);
+
+//TODO unshitify
+const empty = computed(() => {
+ return value.value === undefined
+ || value.value === null
+ || value.value === ''
+ || (Array.isArray(value.value) && value.value.length === 0)
+ || (typeof value.value === 'object' && Object.keys(value.value).length === 0);
+});
+const isQuestItem = computed(() => {
+ return value.value?.['quest-item'] !== undefined;
+});
+const isItemStack = computed(() => {
+ if (typeof value.value !== 'object' || value.value === null) {
+ return false;
+ }
+
+ const key = 'item' in value.value
+ ? 'item'
+ : 'type' in value.value
+ ? 'type'
+ : 'material'
+
+ return (!!value.value[key]);
+});
+const isMaterial = computed(() => {
+ return typeof value.value === 'string' && materials.includes(value.value)
+});
+
+const update = (newValue: any) => {
+ value.value = newValue;
+ showItemStackModal.value = false;
+ emit('update', value.value);
+};
+</script>
+
+<template>
+ <div class="itemstack" @click="showItemStackModal = true">
+ <span v-if="empty" class="empty">ItemStack...</span>
+ <span v-if="isQuestItem" class="item"><font-awesome-icon :icon="['fas', 'fa-tag']" /> Quest Item</span>
+ <span v-if="isItemStack" class="item"><font-awesome-icon :icon="['fas', 'fa-cube']" /> ItemStack of '{{ value.type || value.item || value.material }}'</span>
+ <span v-if="isMaterial" class="item"><font-awesome-icon :icon="['fas', 'fa-apple-whole']" /> {{ value }}</span>
+ <span v-if="!empty && !isQuestItem && !isItemStack && !isMaterial" class="invalid"><font-awesome-icon :icon="['fas', 'fa-triangle-exclamation']" /> Invalid ItemStack</span>
+ </div>
+
+ <ItemStackModal
+ v-model="showItemStackModal"
+ :value="value"
+ @confirm="update"
+ />
+</template>
+
+<style scoped>
+.itemstack {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ cursor: pointer;
+ align-items: center;
+ padding: 0.5rem;
+ user-select: none;
+ transition: background-color 0.3s;
+ background-color: var(--color-background-soft);
+
+ span {
+ font-family: monospace;
+ font-size: 0.8rem;
+ }
+
+ .empty {
+ color: var(--color-text-mute);
+ }
+
+ .item {
+ color: var(--color-primary);
+ }
+
+ .invalid {
+ color: var(--color-false);
+ }
+
+ &:hover {
+ background-color: var(--color-hover);
+ }
+}
+
+</style> \ No newline at end of file
diff --git a/components/base/Modal.vue b/components/base/Modal.vue
new file mode 100644
index 0000000..46d5da5
--- /dev/null
+++ b/components/base/Modal.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+const model = defineModel();
+
+</script>
+
+<template>
+ <div id="modal" class="modal" :class="{ 'is-active': model }">
+ <div class="modal-background" @click="model = false"></div>
+ <div class="modal-content">
+ <div class="header" v-if="$slots.header">
+ <slot name="header" />
+ </div>
+ <slot name="body" />
+ <slot />
+ </div>
+ </div>
+</template>
+
+<style scoped>
+#modal {
+ align-items: center;
+ justify-content: center;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 1000;
+ background-color: rgba(0, 0, 0, 0.5);
+ transition: opacity 0.3s;
+ display: none;
+ overflow: visible;
+}
+
+.modal-content {
+ background-color: var(--color-background);
+ border: 1px solid var(--color-border);
+ padding: 1rem;
+ width: 100%;
+ max-width: 600px;
+ max-height: 80%;
+ overflow-y: visible;
+ border-radius: 4px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+}
+
+.modal-background {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: -1;
+}
+
+.is-active {
+ opacity: 1 !important;
+ pointer-events: all !important;
+ display: flex !important;
+}
+
+.header {
+ border-bottom: 1px solid var(--color-border);
+ margin-bottom: 1rem;
+}
+
+</style> \ No newline at end of file
diff --git a/components/base/TrueFalseSwitch.vue b/components/base/TrueFalseSwitch.vue
new file mode 100644
index 0000000..a0a3392
--- /dev/null
+++ b/components/base/TrueFalseSwitch.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const props = defineProps<{
+ value: boolean;
+}>();
+const emit = defineEmits(['update']);
+
+const value = ref(props.value);
+
+const invert = () => {
+ value.value = !value.value;
+ emit('update', value.value);
+};
+</script>
+
+<template>
+ <div class="switch" @click="invert">
+ <span v-if="value" class="true"><font-awesome-icon :icon="['fas', 'fa-check']" /> True</span>
+ <span v-else class="false"><font-awesome-icon :icon="['fas', 'fa-xmark']" /> False</span>
+ </div>
+</template>
+
+<style scoped>
+.switch {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ cursor: pointer;
+ align-items: center;
+ padding: 0.5rem;
+ user-select: none;
+ transition: background-color 0.3s;
+ background-color: var(--color-background-soft);
+
+ span {
+ font-family: monospace;
+ font-size: 0.8rem;
+ }
+
+ .true {
+ color: var(--color-text-primary);
+ }
+
+ .false {
+ color: var(--color-false);
+ }
+
+ &:hover {
+ background-color: var(--color-hover);
+ }
+}
+
+</style> \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.51.2) at 2025-11-25 06:46:32 +0000