character selection work

src/components/utilities/Modal.vue

@@ -0,0 +1,99 @@
+<template>
+  <Teleport to="body" v-if="isModalOpen">
+  <div class="modal-container" :style="{ top: y + 'px', left: x + 'px' }">
+    <div class="modal-header" @mousedown="startDrag">
+      <h3>Modal</h3>
+      <button @click="close">X</button>
+    </div>
+    <div class="modal-body">
+      <slot />
+    </div>
+  </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { defineEmits, onMounted, onUnmounted, ref } from 'vue'
+
+const properties = defineProps({
+  isModalOpen: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const isModalOpen = ref(properties.isModalOpen);
+const emit = defineEmits(["modal:close", "character:create"]);
+
+function close () {
+  emit('modal:close');
+}
+
+// make modal draggable
+let startX = 0;
+let startY = 0;
+let initialX = 0;
+let initialY = 0;
+const x = ref(0);
+const y = ref(0);
+const isDragging = ref(false);
+
+const startDrag = (event: MouseEvent) => {
+  isDragging.value = true;
+  startX = event.clientX;
+  startY = event.clientY;
+  initialX = x.value;
+  initialY = y.value;
+  event.preventDefault();
+};
+
+const drag = (event: MouseEvent) => {
+  if (!isDragging.value) return;
+  const dx = event.clientX - startX;
+  const dy = event.clientY - startY;
+  x.value = initialX + dx;
+  y.value = initialY + dy;
+};
+
+const stopDrag = () => {
+  isDragging.value = false;
+};
+
+onMounted(() => {
+  addEventListener('mousemove', drag);
+  addEventListener('mouseup', stopDrag);
+});
+
+onUnmounted(() => {
+  removeEventListener('mousemove', drag);
+  removeEventListener('mouseup', stopDrag);
+});
+</script>
+
+<style lang="scss">
+@import '@/assets/scss/main';
+
+.modal-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 30%;
+  height: 40%;
+  border-radius: 30px;
+  background-color: #cfcfcf;
+  z-index: 999;
+
+  // make draggable
+  .modal-header {
+    cursor: move;
+    background-color: #333;
+    color: white;
+    padding: 3px 15px;
+    border-radius: 5px 5px 0 0;
+  }
+
+  .modal-body {
+    padding: 15px;
+  }
+}
+</style>