character selection work

src/assets/scss/_variables.scss

@@ -0,0 +1,11 @@
+// Colors
+$white: #fff;
+$black: #000;
+$purple: #4741e6;
+$lilac: #7B76FF;
+$light-blue: #00c2ff;
+$red: #ff0000;
+$gray: #7f7f7f;
+$gray-2: #696969;
+$dark-gray: #454545;
+$light-gray: #b1b2b5;

src/assets/scss/login.scss

@@ -1,3 +1,5 @@
+@import '@/assets/scss/main';
+
 #bg-img {
   height: 100vh;
   width: 100%;
@@ -33,14 +35,14 @@
         .form-field {
           display: flex;
           flex-direction: column;
-          background-color: rgba(255, 255, 255, 0.5);
+          background-color: rgba($white, 0.5);
           border-radius: 3px;
           min-width: 25rem;
           margin: 0 auto;
 
           label {
-            color: #000;
-            background-color: rgba(255, 255, 255, 0.5);
+            color: $black;
+            background-color: rgba($white, 0.5);
             padding: 0.25rem 0.25rem;
             font-size: 0.875rem;
             border-top-left-radius: 3px;
@@ -71,17 +73,17 @@
         text-align: center;
         position: relative;
         font-size: 0.65rem;
-        background-color: rgba(71, 65, 230, 0.75);
-        border: rgba(255, 255, 255, 0.35) 1px solid;
+        background-color: rgba($purple, 0.75);
+        border: rgba($white, 0.35) 1px solid;
         border-radius: 5px;
 
         span {
-          color: white;
+          color: $white;
           margin: auto;
         }
 
         &:hover {
-          background-color: rgba(123, 118, 255, 0.75);
+          background-color: rgba($lilac, 0.75);
           cursor: pointer;
         }
       }
@@ -93,13 +95,13 @@
   margin-top: 7rem;
   text-align: center;
   font-size: 3rem;
-  color: #FFF;
-  text-shadow: -1px -1px 0 gray, 1px -1px 0 gray, -1px 1px 0 gray, 1px 1px 0 gray;
+  color: $white;
+  text-shadow: -1px -1px 0 $gray, 1px -1px 0 $gray, -1px 1px 0 $gray, 1px 1px 0 $gray;
 }
 
 p, a, li, label {
   font-family: Arial, sans-serif;
-  color: #FFF;
+  color: $white;
 }
 
 button {

src/assets/scss/main.scss

@@ -1,3 +1,6 @@
+@import "@/assets/scss/_variables";
+
+// Fonts
 @font-face {
     font-family: GentiumPlus;
     src: url('@/assets/fonts/Gentium_plus.ttf');
@@ -6,7 +9,7 @@
 body {
     -ms-overflow-style: none;
     scrollbar-width: none;
-    background: black;
+    background: $black;
 
     // Disable selection, might wanna comment when debugging
     -webkit-user-select: none; /* Safari */

src/components/game/Chat.vue

@@ -10,6 +10,8 @@
 </script>
 
 <style scoped lang="scss">
+@import '@/assets/scss/main';
+
 .chat-wrapper {
   width: 100%;
   height: 100px;
@@ -24,8 +26,8 @@
     opacity: 0.8;
     font-size: 1.2rem;
     padding: 0 1.5rem;
-    background-color: rgba(255, 255, 255, 0.85);
-    border: 2px solid #fff;
+    background-color: rgba($white, 0.85);
+    border: 2px solid $white;
     color: black;
 
   }

src/components/game/Hud.vue

@@ -14,6 +14,8 @@
 </script>
 
 <style scoped lang="scss">
+@import '@/assets/scss/main';
+
     .hud-wrapper {
         position: relative;
         .profile {
@@ -22,9 +24,9 @@
             top: 0;
             width: 4rem;
             height: 4rem;
-            background-color: rgba(255, 255, 255, 0.8);
+            background-color: rgba($white, 0.8);
             border-radius: 100%;
-            border: 2px solid #fff;
+            border: 2px solid $white;
             z-index: 1;
             img {
                 width: 2rem;
@@ -46,7 +48,7 @@
             // background-color: rgba(127, 127, 127, 0.7);
             clip-path: ellipse(3rem 3rem at 0% 0%) invert;
             border-radius: 1rem;
-            border: 2px solid #fff;
+            border: 2px solid $white;
         }
     }
 </style>

src/components/game/Menu.vue

@@ -34,71 +34,73 @@
 </script>
 
 <style scoped lang="scss">
-    .menu-wrapper {
-        .menu {
-            list-style: none;
-            display: flex;
-            gap: 1.25rem;
+  @import '@/assets/scss/main';
 
-            .menu-item {
-                position: relative;
-                p {
-                    position: absolute;
-                    bottom: 3.125rem;
-                    width: 4rem;
-                    text-align: center;
-                    background-color: #B1B2B5;
-                    border: 2px solid #fff;
-                    border-radius: 1.5rem;
-                    height: 1.5rem;
-                    font-size: 0.875rem;
-                    line-height: 1.5rem;
-                    left: 50%;
-                    transform: translateX(-50%);
-                    display: none;
+  .menu-wrapper {
+      .menu {
+          list-style: none;
+          display: flex;
+          gap: 1.25rem;
 
-                    &::after {
-                        content: '';
-                        position: absolute;
-                        top: 100%;
-                        background-color: #fff;
-                        height: 0.5rem;
-                        width: 0.875rem;
-                        clip-path: polygon(100% 0, 0 0, 50% 100%);
-                        left: calc(50% - 0.4375rem);
-                    }
-                }
-                
-                a {
-                    padding: 0.5rem;
-                    background-color: rgba(127, 127, 127, 0.7);
-                    border: 2px solid #fff;
-                    border-radius: 100%;
-                    display: block;
-                    width: 1.875rem;
-                    height: 1.875rem;
+          .menu-item {
+              position: relative;
+              p {
+                  position: absolute;
+                  bottom: 3.125rem;
+                  width: 4rem;
+                  text-align: center;
+                  background-color: #B1B2B5;
+                  border: 2px solid $white;
+                  border-radius: 1.5rem;
+                  height: 1.5rem;
+                  font-size: 0.875rem;
+                  line-height: 1.5rem;
+                  left: 50%;
+                  transform: translateX(-50%);
+                  display: none;
 
-                    img {
-                        width: inherit;
-                        height: inherit;
-                    }
-                }
+                  &::after {
+                      content: '';
+                      position: absolute;
+                      top: 100%;
+                      background-color: $white;
+                      height: 0.5rem;
+                      width: 0.875rem;
+                      clip-path: polygon(100% 0, 0 0, 50% 100%);
+                      left: calc(50% - 0.4375rem);
+                  }
+              }
 
-                &:hover {
-                    p {
-                        display: block;
-                    }
-                    a {
-                        background-image: url('/assets/galaxy.png');
-                        background-position: center;
-                        background-size: cover;
-                        img {
-                            -webkit-filter: drop-shadow(0px 3px 6px #000);
-                            filter: drop-shadow(0px 3px 6px #000);
-                        }
-                    }
-                }
-            }
-        }
-    }
+              a {
+                  padding: 0.5rem;
+                  background-color: rgba(127, 127, 127, 0.7);
+                  border: 2px solid $white;
+                  border-radius: 100%;
+                  display: block;
+                  width: 1.875rem;
+                  height: 1.875rem;
+
+                  img {
+                      width: inherit;
+                      height: inherit;
+                  }
+              }
+
+              &:hover {
+                  p {
+                      display: block;
+                  }
+                  a {
+                      background-image: url('/assets/galaxy.png');
+                      background-position: center;
+                      background-size: cover;
+                      img {
+                          -webkit-filter: drop-shadow(0px 3px 6px $black);
+                          filter: drop-shadow(0px 3px 6px $black);
+                      }
+                  }
+              }
+          }
+      }
+  }
 </style>

src/components/screens/Characters.vue

@@ -1,7 +1,7 @@
 <template>
-<div>
-  <div class="characters-wrapper">
-    <div class="list">
+<div class="character-select-screen">
+  <div class="ui-wrapper">
+    <div class="characters-wrapper">
       <div v-for="character in characters" :key="character.id" class="character">
         <input type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
         <label :for="character.id">
@@ -13,94 +13,136 @@
 
     <div class="buttons-wrapper">
       <button @click="select_character()">Play</button>
-      <button @click="openCreator">Create New</button>
-      
-    </div> 
-    <Create :isOpen="isCharacterCreatorOpened" @modal-close="closeCreator" @submit="submitHandler" name="character-create" />
+      <button @click="isModalOpen = true">Create New</button>
+    </div>
   </div>
-
-
 </div>
+
+<Modal :isModalOpen="isModalOpen">
+  <form method="post" @submit.prevent="create">
+    <h1>Create your character</h1>
+    <div>
+      <label for="name">Name</label>
+      <input v-model="name" name="name" id="name">
+    </div>
+    <div>
+      <button @click="create">Create</button>
+    </div>
+  </form>
+  <button @click="isModalOpen = false">Cancel</button>
+</Modal>
 </template>
 
 <script setup lang="ts">
 import { useSocketStore } from '@/stores/socket'
 import { ref } from 'vue'
-import Create from '@/components/screens/partials/characters/Create.vue'
 import type { Character } from '../../../env'
+import Modal from '@/components/utilities/Modal.vue'
 
 const socket = useSocketStore();
-const characters = ref([]);
-socket.getConnection.emit('character:list');
 
+// Fetch characters
+socket.getConnection.emit('character:list');
 socket.getConnection.on('character:list', (data: any) => {
   console.log(data);
   characters.value = data;
 });
 
+// Select character logics
+const characters = ref([]);
 const selected_character = ref(null);
 function select_character() {
   console.log(selected_character.value);
   if (selected_character.value) {
     socket.getConnection.emit('character:connect', {character_id: selected_character.value});
-    socket.getConnection.on('character:connect', (data: Character) => {
-      socket.setCharacter(data);
-    });
+    socket.getConnection.on('character:connect', (data: Character) => socket.setCharacter(data));
   }
 }
 
-const isCharacterCreatorOpened = ref(false);
-
-const openCreator = () => {
-  isCharacterCreatorOpened.value = true;
-};
-const closeCreator = () => {
-  isCharacterCreatorOpened.value = false;
-};
-
-const submitHandler = ()=>{
-  //here you do whatever
+// Create character logics
+const isModalOpen = ref(false);
+let name: any = ref('');
+function create() {
+  socket.getConnection.emit('character:create', { name: name.value });
+  name.value = '';
+  isModalOpen.value = false;
 }
-
 </script>
 
 <style lang="scss">
-.characters-wrapper {
-  // vertical and vertical center
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
+@import '@/assets/scss/main';
 
-.list {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-
-  // make all the divs same width
-  div {
-    width: 100px;
-  }
-
-  // hide the radio buttons
-  input[type="radio"] {
-    display: none;
-  }
-
-  // img under the label
-  label {
+.character-select-screen {
+  background-image: url("/assets/bglogin.png");
+  .ui-wrapper {
+    // vertical and vertical center
+    height: 100vh;
     display: flex;
     flex-direction: column;
+    justify-content: center;
     align-items: center;
-    margin: 10px;
-  }
+    gap: 6.25rem;
+    padding: 0 5rem;
+    &::before {
+      content: '';
 
-  // for selected radio, give bg color
-  input[type="radio"]:checked + label {
-    background: #ff0000;
-    padding: 5px;
+    }
+
+    .characters-wrapper {
+      display: flex;
+      justify-content: center;
+      gap: 5rem;
+      width: 100%;
+
+      .character {
+        min-width: 150px;
+        min-height: 250px;
+        display: flex;
+        flex-direction: column;
+        background-color: rgba($white, 0.8);
+        border-radius: 20px;
+        position: relative;
+        &::before {
+          content: '';
+          position: absolute;
+          width: 100%;
+          height: 40px;
+          background-color: rgba($purple, 0.6);
+          border-top-left-radius: 20px;
+          border-top-right-radius: 20px;
+        }
+
+        // hide the radio buttons
+        input[type="radio"] {
+          display: none;
+        }
+
+        // img under the label
+        label {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          margin: auto;
+        }
+
+        // for selected radio, give bg color
+        input[type="radio"]:checked + label {
+          background: rgba($purple, 0.6);
+          padding: 5px;
+        }
+      }
+    }
+
+    .buttons-wrapper {
+      display: flex;
+      gap: 30px;
+      button {
+        padding: 5px 12px;
+      }
+    }
   }
 }
+
+
+
 </style>

src/components/screens/Login.vue

@@ -78,5 +78,5 @@ async function registerFunc() {
 </script>
 
 <style scoped lang="scss">
-@import "@/assets/login";
+@import "@/assets/scss/login";
 </style>

src/components/screens/partials/characters/Create.vue

@@ -1,42 +0,0 @@
-<template>
-  <div class="create-container" v-if="isOpen">
-    <form method="post" @submit.prevent="create">
-      <h1>Create your character</h1>
-      <div>
-        <label for="name">Name</label>
-        <input v-model="name" type="text" name="name" id="name">
-      </div>
-      <div>
-        <button @click.stop="create">Create</button>
-      </div>
-    </form>
-    <button @click.stop="emit('modal-close')">Cancel</button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useSocketStore } from '@/stores/socket'
-import { ref, defineEmits, defineProps } from 'vue'
-import {onClickOutside} from '@vueuse/core'
-
-const props = defineProps({
-  isOpen: Boolean
-});
-
-const emit = defineEmits(["modal-close"]);
-
-const target = ref(null)
-onClickOutside(target, () => emit('modal-close'));
-
-const socket = useSocketStore();
-
-// const emit = defineEmits(['character:create']);
-let name: any = ref('');
-
-function create() {
-  socket.getConnection.emit('character:create', { name: name.value });
-  // emit('character:create');
-  name.value = '';
-  props.isOpen = false;
-}
-</script>

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>

src/main.ts

@@ -1,4 +1,4 @@
-import './assets/main.scss'
+import './assets/scss/main.scss'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'