From 9a11e0f4a38297006b89cc7bb2a60734111582e0 Mon Sep 17 00:00:00 2001
From: Leonardo Bishop <me@leonardobishop.com>
Date: Sun, 10 Mar 2024 00:13:25 +0000
Subject: Migrate to nuxt

---
 src/components/Control/Button.vue          |  82 --------------
 src/components/Control/Checkbox.vue        |  42 -------
 src/components/Control/ItemStackForm.vue   |  50 ---------
 src/components/Control/ItemStackModal.vue  | 172 -----------------------------
 src/components/Control/ItemStackPicker.vue | 100 -----------------
 src/components/Control/Modal.vue           |  68 ------------
 src/components/Control/TrueFalseSwitch.vue |  54 ---------
 7 files changed, 568 deletions(-)
 delete mode 100644 src/components/Control/Button.vue
 delete mode 100644 src/components/Control/Checkbox.vue
 delete mode 100644 src/components/Control/ItemStackForm.vue
 delete mode 100644 src/components/Control/ItemStackModal.vue
 delete mode 100644 src/components/Control/ItemStackPicker.vue
 delete mode 100644 src/components/Control/Modal.vue
 delete mode 100644 src/components/Control/TrueFalseSwitch.vue

(limited to 'src/components/Control')

diff --git a/src/components/Control/Button.vue b/src/components/Control/Button.vue
deleted file mode 100644
index efd91c2..0000000
--- a/src/components/Control/Button.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<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/src/components/Control/Checkbox.vue b/src/components/Control/Checkbox.vue
deleted file mode 100644
index e0325e7..0000000
--- a/src/components/Control/Checkbox.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<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/src/components/Control/ItemStackForm.vue b/src/components/Control/ItemStackForm.vue
deleted file mode 100644
index 250e8c9..0000000
--- a/src/components/Control/ItemStackForm.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<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/src/components/Control/ItemStackModal.vue b/src/components/Control/ItemStackModal.vue
deleted file mode 100644
index 642c5f9..0000000
--- a/src/components/Control/ItemStackModal.vue
+++ /dev/null
@@ -1,172 +0,0 @@
-<script setup lang="ts">
-import Modal from '@/components/Control/Modal.vue';
-import Button from '@/components/Control/Button.vue';
-import { computed, ref } from 'vue';
-import materials from '@/lib/materials';
-import ItemStackForm from './ItemStackForm.vue';
-
-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/src/components/Control/ItemStackPicker.vue b/src/components/Control/ItemStackPicker.vue
deleted file mode 100644
index d16090e..0000000
--- a/src/components/Control/ItemStackPicker.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<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/src/components/Control/Modal.vue b/src/components/Control/Modal.vue
deleted file mode 100644
index 46d5da5..0000000
--- a/src/components/Control/Modal.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<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/src/components/Control/TrueFalseSwitch.vue b/src/components/Control/TrueFalseSwitch.vue
deleted file mode 100644
index a0a3392..0000000
--- a/src/components/Control/TrueFalseSwitch.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<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
-- 
cgit v1.2.3-70-g09d2