Merge pull request #9 from side-project-at-SPT/sin-changeRoom

Sin change room

src/assets/api.js

@@ -9,6 +9,7 @@ const axiosInstance = axios.create({
     'Authorization': 'Bearer ' + token.value
   },
 })
+
 axiosInstance.interceptors.response.use(response => {
   return response
 }, error => {
@@ -101,6 +102,15 @@ const api = {
       return error.response.data
     }
   },
+  getRoomToken: async (roomId) => { 
+    try { 
+      const response = await axiosInstance.get('/api/v1/rooms/' + roomId + '/knock-knock')
+      return response.data
+    }
+    catch (error) {
+      return error.response.data
+    }
+  },
   getRoomInfo: async (id) => {
     try {
       const response = await axiosInstance.get('/api/v1/rooms/' + id)
@@ -148,6 +158,18 @@ const api = {
       throw error.response.data
     }
   },
+  setRoomPreferences: async ({ id, name } = param) => {
+    try {
+      const response = await axiosInstance.patch(`/api/v1/rooms/${ id }`, { name })
+      return response.data
+    }
+    catch (error) {
+      if (error.response.status === 304) {
+        return { status: 304 }
+      }
+      throw error.response.data
+    }
+  },
   startGame: async (id) => {
     try {
       const response = await axiosInstance.post('/api/v1/rooms/' + id + '/game')
@@ -186,6 +208,5 @@ const api = {
     axiosInstance.defaults.headers['Authorization'] = 'Bearer ' + newToken
     token.value = newToken
   },
-
 }
 export default api

src/assets/styles/main.css

@@ -1,17 +1,17 @@
-@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap');
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer base {
-  body {
-    font-family: "Noto Sans TC", sans-serif;
-  }
-  h6 {
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: normal;
-  }
+	body {
+		font-family: 'Noto Sans TC', sans-serif;
+	}
+	h6 {
+		font-size: 20px;
+		font-style: normal;
+		font-weight: 500;
+		line-height: normal;
+	}
 }

src/components/ChangeNicknameModal.vue

@@ -25,7 +25,7 @@ const handleSetNickname = () => {
 <template>
   <div
     v-if="showChangeNicknameModal"
-    class="absolute w-svw h-dvh bg-black bg-opacity-50 flex items-center justify-center z-10"
+    class="absolute w-svw h-dvh bg-black bg-opacity-50 flex items-center justify-center z-50 top-0"
   >
     <div class="hexagon-ice w-[300px] h-[300px] flex flex-col items-center justify-center">
       <div class="text-center text-white text-2xl font-semibold">

src/components/DefaultButton.vue

@@ -0,0 +1,61 @@
+<script setup>
+
+defineProps({
+  text: {
+    type: String,
+    default: '',
+    required: true,
+  },
+  buttonType: {
+    type: String,
+    required: false,
+    default: 'confirm',
+    validator (value) {
+      if ([ 'confirm', 'cancel' ].includes(value)) {
+        return value
+      }
+      return 'confirm'
+    }
+  },
+  isDisabled: {
+    type: Boolean,
+    default: false,
+    required: false,
+  }
+})
+const emit = defineEmits([ 'onClick' ])
+
+</script>
+
+<template>
+  <button
+    :class="buttonType"
+    :disabled="isDisabled"
+    @click="emit('onClick')"
+  >
+    {{ text }}
+  </button>
+</template>
+
+<style scoped>
+button {
+  width: 140px;
+  height: 50px;
+  font-size: 1.25rem;
+  border-radius: 30px;
+}
+
+.confirm {
+  color: #982000;
+  text-shadow: 0px 0px 4px 0px #fff7ae;
+  background: linear-gradient(180deg, #fffbd6 0%, #ffba39 100%);
+  border-radius: 30px;
+  box-shadow: 0px 4px 0px 0px #ff9200;
+}
+
+.cancel {
+  color: #ffff;
+  background: linear-gradient(180deg, #afb7b9 0%, #6b7375 100%);
+  border: 1px solid #dbdfe0;
+}
+</style>

src/components/RoomDialog.vue

@@ -0,0 +1,103 @@
+<script setup>
+import { ref } from 'vue'
+import DefaultButton from './DefaultButton.vue'
+import EditPenguin from '@/assets/images/Dialog/editName.svg'
+import LeavePenguin from '@/assets/images/Dialog/closeRoom.svg'
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+    default: ''
+  },
+  inputDefaultValue: {
+    type: String,
+    required: false,
+    default: ''
+  },
+  isEdit: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  contentText: {
+    type: String,
+    require: false,
+    default: '是否確認離開這個房間？'
+  },
+  submitButtonText: {
+    type: String,
+    required: false,
+    default: '確認修改'
+  }
+})
+const emits = defineEmits([ 'onCheck' ])
+
+const newName = ref(props.inputDefaultValue)
+const showChangeNameModal = defineModel({ type: Boolean })
+
+</script>
+
+<template>
+  <div
+    class="absolute w-svw h-dvh dialogBackground flex items-center justify-center z-40 top-0"
+  >
+    <div class="w-[296px] h-[222px] flex flex-col items-center justify-between relative">
+      <div class="text-center text-white text-3xl font-medium">
+        {{ title }}
+      </div>
+      <template v-if="isEdit">
+        <input
+          v-model="newName"
+          class="w-full h-12 rounded-full border bg-transparent  placeholder:text-gray-400 text-center text-[#006989] focus:outline-none text-xl font-medium bg-white"
+          :placeholder="'請輸入'+title.replace('修改','')"
+        >
+        <div class="flex gap-2">
+          <DefaultButton
+            :text="'取消'"
+            :button-type="'cancel'"
+            @on-click="showChangeNameModal = false, newName = ''"
+          />
+          <DefaultButton
+            :text="submitButtonText"
+            :button-type="'confirm'"
+            @on-click="()=>emits('onCheck',newName)"
+          />
+        </div>
+      </template>
+      <template v-else>
+        <p class="text-center text-lg font-normal text-white px-8">
+          {{ contentText }}
+        </p>
+        <div class="flex gap-2">
+          <DefaultButton
+            :text="submitButtonText"
+            :button-type="'cancel'"
+            @on-click="()=>emits('onCheck')"
+          />
+          <DefaultButton
+            :text="'取消'"
+            :button-type="'confirm'"
+            @on-click="showChangeNameModal = false"
+          />
+        </div>
+      </template>
+      <div
+        class="absolute w-80 h-80 top-[-49px] flex"
+        :class="isEdit?'left-[296px] justify-start':'right-[296px] justify-end'"
+      >
+        <img
+          class="w-auto h-auto"
+          :src="isEdit? EditPenguin:LeavePenguin"
+          alt=""
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.dialogBackground {
+  background: rgba(15, 42, 48, .9);
+}
+</style>