From e9ecc1d11d7dbcb8752c884a004365e394743374 Mon Sep 17 00:00:00 2001
From: Nzt3 <nzt3pro@gmail.com>
Date: Sun, 16 Jun 2024 01:15:01 +0900
Subject: [PATCH 01/18] set enterRoom

---
 src/pages/EnterRoom.vue | 58 +++++++++++++++++++++++++++++++++++++++++
 src/router/index.ts     |  5 ++++
 2 files changed, 63 insertions(+)
 create mode 100644 src/pages/EnterRoom.vue

diff --git a/src/pages/EnterRoom.vue b/src/pages/EnterRoom.vue
new file mode 100644
index 0000000..f061561
--- /dev/null
+++ b/src/pages/EnterRoom.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { ref,onMounted } from 'vue'
+import api,{EnterRoom} from '@/lib/apis'
+import router from '@/router';
+
+// 部屋に入る前のページ
+// 必須: 名前
+// private -> 合言葉の入力欄
+// 名前を適切に設定 && 合言葉が正しい -> IndividualRoom へ
+// 名前に被り || 合言葉が不正 -> 失敗を表示して再入力へ
+
+const thisRoomId=ref('')
+const thisRoomName=ref('')
+const userNickName=ref('')
+const roomPassword=ref('')
+const errMsg=ref('')
+const submit = async () => {
+  const enterInfo:EnterRoom={
+    "userName": userNickName.value,
+    "password": roomPassword.value
+  }
+  try{
+    // enterRoom を送る
+     const resp = (await api.apiRoomRoomIdEnterPost(thisRoomId.value,enterInfo)).data
+    // ここで resp から userId と RoomId と userName を持たせて IndividualRoom へ
+    // userId を持たせておけば password とかは不要そう
+     router.push(
+      {path: `/rooms/${thisRoomId}`}
+     )
+  }catch (e){
+    // 通信エラー or userNameエラー or password エラー
+    console.error(e)
+  }
+}
+</script>
+<template>
+<h1">
+  部屋名: {{ thisRoomName }}
+</h1>
+<p>部屋名: {{ thisRoomName }}</p>
+<p>ユーザー名を設定してください。</p>
+<p>
+  <label>
+    ユーザー名
+    <input v-model="userNickName">
+  </label>
+</p>
+<p>
+  <label>
+    合言葉
+    <input v-model="roomPassword">
+  </label>
+</p>
+
+<p v-if="userNickName">{{ userNickName }}として<button @click="submit">参加</button></p>
+
+<p>{{ errMsg }}</p>
+</template>
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 2d2ead4..caac579 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -16,6 +16,11 @@ const routes: RouteRecordRaw[] = [
     name: 'IndividualRoom',
     component: () => import('@/pages/IndividualRoom.vue'),
   },
+  {
+    path: '/rooms/:id/enter',
+    name: 'EnterRoom',
+    component: () => import('@/pages/EnterRoom.vue'),
+  },
   {
     path: '/rooms/create',
     name: 'CreateRoom',

From 8b6a3dda044f59c860589ae72baf9bbf1403f554 Mon Sep 17 00:00:00 2001
From: Nzt3 <nzt3pro@gmail.com>
Date: Sun, 16 Jun 2024 09:27:46 +0900
Subject: [PATCH 02/18] =?UTF-8?q?=E7=A7=BB=E5=8B=95=E5=85=88=E3=81=AEURL?=
 =?UTF-8?q?=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/CreateRoom.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/CreateRoom.vue b/src/pages/CreateRoom.vue
index 4ae77b3..5ecad4a 100644
--- a/src/pages/CreateRoom.vue
+++ b/src/pages/CreateRoom.vue
@@ -28,7 +28,7 @@ const submit = async ()=>  {
       const resp = await api.apiRoomPost(roomInfo)
       const roomId = resp.data.roomId
       router.push(
-        {path: `/rooms/${roomId}`,query: {password:roomPassword.value}}
+        {path: `/rooms/${roomId}/enter`,query: {password:roomPassword.value}}
       )
     }catch(e){
       console.error(e)

From 1b63357a78ef1a79639d6bac77811467d17f9265 Mon Sep 17 00:00:00 2001
From: Nzt3 <nzt3pro@gmail.com>
Date: Sun, 16 Jun 2024 09:37:37 +0900
Subject: [PATCH 03/18] =?UTF-8?q?add=20=E3=83=91=E3=82=B9=E3=83=91?=
 =?UTF-8?q?=E3=83=A9=E3=83=A1=E3=82=BF=E3=80=81=E3=82=AF=E3=82=A8=E3=83=AA?=
 =?UTF-8?q?=E3=83=91=E3=83=A9=E3=83=A1=E3=82=BF=E3=81=AE=E5=8F=96=E5=BE=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/EnterRoom.vue | 36 +++++++++++++++++++++++++++---------
 1 file changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/pages/EnterRoom.vue b/src/pages/EnterRoom.vue
index f061561..c6de145 100644
--- a/src/pages/EnterRoom.vue
+++ b/src/pages/EnterRoom.vue
@@ -10,7 +10,6 @@ import router from '@/router';
 // 名前に被り || 合言葉が不正 -> 失敗を表示して再入力へ
 
 const thisRoomId=ref('')
-const thisRoomName=ref('')
 const userNickName=ref('')
 const roomPassword=ref('')
 const errMsg=ref('')
@@ -22,8 +21,11 @@ const submit = async () => {
   try{
     // enterRoom を送る
      const resp = (await api.apiRoomRoomIdEnterPost(thisRoomId.value,enterInfo)).data
-    // ここで resp から userId と RoomId と userName を持たせて IndividualRoom へ
-    // userId を持たせておけば password とかは不要そう
+    // ここで resp から userId と userName を持たせて IndividualRoom へ
+    userNickName.value=resp.userName
+    const userId=resp.userId
+    userNickName.value=resp.userName
+    // stores/user に userId と userName を記録して、 /rooms/:id に移動させる
      router.push(
       {path: `/rooms/${thisRoomId}`}
      )
@@ -32,16 +34,32 @@ const submit = async () => {
     console.error(e)
   }
 }
+
+onMounted(
+  ()=>{
+    const roomId=router.currentRoute.value.params.id
+    if(typeof roomId == 'string'){
+      thisRoomId.value=roomId
+    }else{
+      console.error("Invalid RoomId type")
+    }
+    const queryPassword=router.currentRoute.value.query['password']
+    if(typeof queryPassword == 'string'){
+      roomPassword.value=queryPassword
+    }
+  }
+
+)
 </script>
 <template>
-<h1">
-  部屋名: {{ thisRoomName }}
+<h1>
+  部屋に入る
 </h1>
-<p>部屋名: {{ thisRoomName }}</p>
-<p>ユーザー名を設定してください。</p>
+<p>部屋ID: {{ thisRoomId }}</p>
+<p>この部屋で使うニックネームを設定してください。</p>
 <p>
   <label>
-    ユーザー名
+    ニックネーム
     <input v-model="userNickName">
   </label>
 </p>
@@ -52,7 +70,7 @@ const submit = async () => {
   </label>
 </p>
 
-<p v-if="userNickName">{{ userNickName }}として<button @click="submit">参加</button></p>
+<p><button @click="submit">参加</button></p>
 
 <p>{{ errMsg }}</p>
 </template>
\ No newline at end of file

From 40447f7a8074eb9fdf8dc585e1c4362c5f27173f Mon Sep 17 00:00:00 2001
From: Nzt3 <nzt3pro@gmail.com>
Date: Sun, 16 Jun 2024 10:11:45 +0900
Subject: [PATCH 04/18] test pinia

---
 src/pages/EnterRoom.vue | 36 +++++++++++++++++++++++++-----------
 src/stores/room.ts      | 13 +++++++++++++
 2 files changed, 38 insertions(+), 11 deletions(-)
 create mode 100644 src/stores/room.ts

diff --git a/src/pages/EnterRoom.vue b/src/pages/EnterRoom.vue
index c6de145..278ace5 100644
--- a/src/pages/EnterRoom.vue
+++ b/src/pages/EnterRoom.vue
@@ -3,6 +3,8 @@ import { ref,onMounted } from 'vue'
 import api,{EnterRoom} from '@/lib/apis'
 import router from '@/router';
 
+import {useRoomStore} from '@/stores/room'
+const store=useRoomStore()
 // 部屋に入る前のページ
 // 必須: 名前
 // private -> 合言葉の入力欄
@@ -12,7 +14,8 @@ import router from '@/router';
 const thisRoomId=ref('')
 const userNickName=ref('')
 const roomPassword=ref('')
-const errMsg=ref('')
+const submitError=ref(false)
+const userSettingError=ref(false)
 const submit = async () => {
   const enterInfo:EnterRoom={
     "userName": userNickName.value,
@@ -20,18 +23,25 @@ const submit = async () => {
   }
   try{
     // enterRoom を送る
-     const resp = (await api.apiRoomRoomIdEnterPost(thisRoomId.value,enterInfo)).data
+     const resp = (await api.apiRoomRoomIdEnterPost(thisRoomId.value,enterInfo))
     // ここで resp から userId と userName を持たせて IndividualRoom へ
-    userNickName.value=resp.userName
-    const userId=resp.userId
-    userNickName.value=resp.userName
-    // stores/user に userId と userName を記録して、 /rooms/:id に移動させる
-     router.push(
-      {path: `/rooms/${thisRoomId}`}
-     )
+    if(resp.status==200){
+      userNickName.value=resp.data.userName
+      const userId=resp.data.userId
+      userNickName.value=resp.userName
+      store.setName(userNickName.value)
+      submitError.value=false
+      // stores/user に userId と userName を記録して、 /rooms/:id に移動させる
+      router.push(
+        {path: `/rooms/${thisRoomId.value}`}
+      )
+    }else{
+      userSettingError.value=true
+    }
   }catch (e){
     // 通信エラー or userNameエラー or password エラー
     console.error(e)
+    submitError.value=true
   }
 }
 
@@ -71,6 +81,10 @@ onMounted(
 </p>
 
 <p><button @click="submit">参加</button></p>
-
-<p>{{ errMsg }}</p>
+<div v-if="userSettingError">
+  <p>ニックネームが使用不可能。もしくは間違った合言葉です。</p>
+</div>
+<div v-if="submitError">
+  <p>エラーが発生しました。操作をやり直してください。</p>
+</div>
 </template>
\ No newline at end of file
diff --git a/src/stores/room.ts b/src/stores/room.ts
new file mode 100644
index 0000000..2818d8b
--- /dev/null
+++ b/src/stores/room.ts
@@ -0,0 +1,13 @@
+import {defineStore} from 'pinia'
+import { ref } from 'vue'
+
+export const useRoomStore=  defineStore('room',
+  ()=>{
+    const count=ref(0)
+    const name=ref('')
+    function setName(newName :string){
+      name.value=newName
+    }
+    return {count,name,setName}
+  }
+)
\ No newline at end of file

From 0336681817a1c9ef3faababb0a9e099a04b8c287 Mon Sep 17 00:00:00 2001
From: Nzt3 <nzt3pro@gmail.com>
Date: Sun, 16 Jun 2024 10:13:30 +0900
Subject: [PATCH 05/18] lint

---
 src/pages/EnterRoom.vue | 52 ++++++++++++++++++++++-------------------
 1 file changed, 28 insertions(+), 24 deletions(-)

diff --git a/src/pages/EnterRoom.vue b/src/pages/EnterRoom.vue
index 278ace5..37a70b9 100644
--- a/src/pages/EnterRoom.vue
+++ b/src/pages/EnterRoom.vue
@@ -62,29 +62,33 @@ onMounted(
 )
 </script>
 <template>
-<h1>
-  部屋に入る
-</h1>
-<p>部屋ID: {{ thisRoomId }}</p>
-<p>この部屋で使うニックネームを設定してください。</p>
-<p>
-  <label>
-    ニックネーム
-    <input v-model="userNickName">
-  </label>
-</p>
-<p>
-  <label>
-    合言葉
-    <input v-model="roomPassword">
-  </label>
-</p>
+  <h1>
+    部屋に入る
+  </h1>
+  <p>部屋ID: {{ thisRoomId }}</p>
+  <p>この部屋で使うニックネームを設定してください。</p>
+  <p>
+    <label>
+      ニックネーム
+      <input v-model="userNickName">
+    </label>
+  </p>
+  <p>
+    <label>
+      合言葉
+      <input v-model="roomPassword">
+    </label>
+  </p>
 
-<p><button @click="submit">参加</button></p>
-<div v-if="userSettingError">
-  <p>ニックネームが使用不可能。もしくは間違った合言葉です。</p>
-</div>
-<div v-if="submitError">
-  <p>エラーが発生しました。操作をやり直してください。</p>
-</div>
+  <p>
+    <button @click="submit">
+      参加
+    </button>
+  </p>
+  <div v-if="userSettingError">
+    <p>ニックネームが使用不可能。もしくは間違った合言葉です。</p>
+  </div>
+  <div v-if="submitError">
+    <p>エラーが発生しました。操作をやり直してください。</p>
+  </div>
 </template>
\ No newline at end of file

From 7a375680ea3f5959eff53b2a163ca71325850ac2 Mon Sep 17 00:00:00 2001
From: Nzt3 <nzt3pro@gmail.com>
Date: Sun, 16 Jun 2024 10:16:46 +0900
Subject: [PATCH 06/18] fix unused value

---
 src/pages/EnterRoom.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/pages/EnterRoom.vue b/src/pages/EnterRoom.vue
index 37a70b9..36d86e3 100644
--- a/src/pages/EnterRoom.vue
+++ b/src/pages/EnterRoom.vue
@@ -27,8 +27,6 @@ const submit = async () => {
     // ここで resp から userId と userName を持たせて IndividualRoom へ
     if(resp.status==200){
       userNickName.value=resp.data.userName
-      const userId=resp.data.userId
-      userNickName.value=resp.userName
       store.setName(userNickName.value)
       submitError.value=false
       // stores/user に userId と userName を記録して、 /rooms/:id に移動させる

From 7ec1cfbb1fb8ef1eaaa798747cd708efca6a0a20 Mon Sep 17 00:00:00 2001
From: Nzt3 <nzt3pro@gmail.com>
Date: Sun, 16 Jun 2024 10:36:41 +0900
Subject: [PATCH 07/18] add User Store

---
 src/pages/EnterRoom.vue |  9 +++++----
 src/stores/room.ts      | 13 -------------
 src/stores/user.ts      | 12 ++++++++++++
 3 files changed, 17 insertions(+), 17 deletions(-)
 delete mode 100644 src/stores/room.ts
 create mode 100644 src/stores/user.ts

diff --git a/src/pages/EnterRoom.vue b/src/pages/EnterRoom.vue
index 36d86e3..9c13605 100644
--- a/src/pages/EnterRoom.vue
+++ b/src/pages/EnterRoom.vue
@@ -3,8 +3,8 @@ import { ref,onMounted } from 'vue'
 import api,{EnterRoom} from '@/lib/apis'
 import router from '@/router';
 
-import {useRoomStore} from '@/stores/room'
-const store=useRoomStore()
+import {userUserStore} from '@/stores/user'
+const store=userUserStore()
 // 部屋に入る前のページ
 // 必須: 名前
 // private -> 合言葉の入力欄
@@ -26,10 +26,11 @@ const submit = async () => {
      const resp = (await api.apiRoomRoomIdEnterPost(thisRoomId.value,enterInfo))
     // ここで resp から userId と userName を持たせて IndividualRoom へ
     if(resp.status==200){
-      userNickName.value=resp.data.userName
-      store.setName(userNickName.value)
       submitError.value=false
       // stores/user に userId と userName を記録して、 /rooms/:id に移動させる
+      userNickName.value=resp.data.userName
+      const userId=resp.data.userId
+      store.setUser(userNickName.value,userId)
       router.push(
         {path: `/rooms/${thisRoomId.value}`}
       )
diff --git a/src/stores/room.ts b/src/stores/room.ts
deleted file mode 100644
index 2818d8b..0000000
--- a/src/stores/room.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import {defineStore} from 'pinia'
-import { ref } from 'vue'
-
-export const useRoomStore=  defineStore('room',
-  ()=>{
-    const count=ref(0)
-    const name=ref('')
-    function setName(newName :string){
-      name.value=newName
-    }
-    return {count,name,setName}
-  }
-)
\ No newline at end of file
diff --git a/src/stores/user.ts b/src/stores/user.ts
new file mode 100644
index 0000000..3c7126c
--- /dev/null
+++ b/src/stores/user.ts
@@ -0,0 +1,12 @@
+import {defineStore} from 'pinia'
+import { ref } from 'vue'
+
+export const userUserStore = defineStore('userInfo',() => {
+  const userId=ref('')
+  const userName=ref('')
+  function setUser(newName: string,newId: string){
+    userName.value=newName
+    userId.value=newId
+  }
+  return {userId,userName,setUser}
+})
\ No newline at end of file

From 123ed65ebe5787788007b37c85c02d543989123a Mon Sep 17 00:00:00 2001
From: Nzt3 <nzt3pro@gmail.com>
Date: Sun, 16 Jun 2024 10:43:25 +0900
Subject: [PATCH 08/18] format

---
 src/pages/EnterRoom.vue | 60 ++++++++++++++++++++---------------------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/pages/EnterRoom.vue b/src/pages/EnterRoom.vue
index 9c13605..9f650aa 100644
--- a/src/pages/EnterRoom.vue
+++ b/src/pages/EnterRoom.vue
@@ -1,60 +1,60 @@
 <script setup lang="ts">
-import { ref,onMounted } from 'vue'
-import api,{EnterRoom} from '@/lib/apis'
+import { ref, onMounted } from 'vue'
+import api, { EnterRoom } from '@/lib/apis'
 import router from '@/router';
 
-import {userUserStore} from '@/stores/user'
-const store=userUserStore()
+import { userUserStore } from '@/stores/user'
+const store = userUserStore()
 // 部屋に入る前のページ
 // 必須: 名前
 // private -> 合言葉の入力欄
 // 名前を適切に設定 && 合言葉が正しい -> IndividualRoom へ
 // 名前に被り || 合言葉が不正 -> 失敗を表示して再入力へ
 
-const thisRoomId=ref('')
-const userNickName=ref('')
-const roomPassword=ref('')
-const submitError=ref(false)
-const userSettingError=ref(false)
+const thisRoomId = ref('')
+const userNickName = ref('')
+const roomPassword = ref('')
+const submitError = ref(false)
+const userSettingError = ref(false)
 const submit = async () => {
-  const enterInfo:EnterRoom={
+  const enterInfo: EnterRoom = {
     "userName": userNickName.value,
     "password": roomPassword.value
   }
-  try{
+  try {
     // enterRoom を送る
-     const resp = (await api.apiRoomRoomIdEnterPost(thisRoomId.value,enterInfo))
+    const resp = (await api.apiRoomRoomIdEnterPost(thisRoomId.value, enterInfo))
     // ここで resp から userId と userName を持たせて IndividualRoom へ
-    if(resp.status==200){
-      submitError.value=false
+    if (resp.status == 200) {
+      submitError.value = false
       // stores/user に userId と userName を記録して、 /rooms/:id に移動させる
-      userNickName.value=resp.data.userName
-      const userId=resp.data.userId
-      store.setUser(userNickName.value,userId)
+      userNickName.value = resp.data.userName
+      const userId = resp.data.userId
+      store.setUser(userNickName.value, userId)
       router.push(
-        {path: `/rooms/${thisRoomId.value}`}
+        { path: `/rooms/${thisRoomId.value}` }
       )
-    }else{
-      userSettingError.value=true
+    } else {
+      userSettingError.value = true
     }
-  }catch (e){
+  } catch (e) {
     // 通信エラー or userNameエラー or password エラー
     console.error(e)
-    submitError.value=true
+    submitError.value = true
   }
 }
 
 onMounted(
-  ()=>{
-    const roomId=router.currentRoute.value.params.id
-    if(typeof roomId == 'string'){
-      thisRoomId.value=roomId
-    }else{
+  () => {
+    const roomId = router.currentRoute.value.params.id
+    if (typeof roomId == 'string') {
+      thisRoomId.value = roomId
+    } else {
       console.error("Invalid RoomId type")
     }
-    const queryPassword=router.currentRoute.value.query['password']
-    if(typeof queryPassword == 'string'){
-      roomPassword.value=queryPassword
+    const queryPassword = router.currentRoute.value.query['password']
+    if (typeof queryPassword == 'string') {
+      roomPassword.value = queryPassword
     }
   }
 

From 811194f8342f101fee7df1be871ec63554e1d879 Mon Sep 17 00:00:00 2001
From: Nzt3 <nzt3pro@gmail.com>
Date: Sun, 16 Jun 2024 10:51:34 +0900
Subject: [PATCH 09/18] del stores/user

---
 src/stores/user.ts | 12 ------------
 1 file changed, 12 deletions(-)
 delete mode 100644 src/stores/user.ts

diff --git a/src/stores/user.ts b/src/stores/user.ts
deleted file mode 100644
index 3c7126c..0000000
--- a/src/stores/user.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {defineStore} from 'pinia'
-import { ref } from 'vue'
-
-export const userUserStore = defineStore('userInfo',() => {
-  const userId=ref('')
-  const userName=ref('')
-  function setUser(newName: string,newId: string){
-    userName.value=newName
-    userId.value=newId
-  }
-  return {userId,userName,setUser}
-})
\ No newline at end of file

From 8ee7a6f088d5062a494e5b6cf4bc903374c7aaed Mon Sep 17 00:00:00 2001
From: Nzt3 <nzt3pro@gmail.com>
Date: Sun, 16 Jun 2024 10:56:10 +0900
Subject: [PATCH 10/18] =?UTF-8?q?=E7=A7=BB=E5=8B=95=E5=85=88url=E3=82=92?=
 =?UTF-8?q?=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/CreateRoom.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/CreateRoom.vue b/src/pages/CreateRoom.vue
index d80102f..019b84d 100644
--- a/src/pages/CreateRoom.vue
+++ b/src/pages/CreateRoom.vue
@@ -28,7 +28,7 @@ const submit = async () => {
       const resp = await api.apiRoomPost(roomInfo)
       const roomId = resp.data.roomId
       router.push({
-        path: `/rooms/${roomId}`,
+        path: `/rooms/${roomId}/enter`,
         query: { password: roomPassword.value },
       })
     } catch (e) {

From 432b261d9feaba47190ac8d248faa5b9dda2af6b Mon Sep 17 00:00:00 2001
From: Nzt3 <nzt3pro@gmail.com>
Date: Sun, 16 Jun 2024 11:00:49 +0900
Subject: [PATCH 11/18] use store/user

---
 src/pages/EnterRoom.vue | 4 ++--
 src/stores/user.ts      | 6 ++++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/pages/EnterRoom.vue b/src/pages/EnterRoom.vue
index 9f650aa..a7c2291 100644
--- a/src/pages/EnterRoom.vue
+++ b/src/pages/EnterRoom.vue
@@ -3,8 +3,8 @@ import { ref, onMounted } from 'vue'
 import api, { EnterRoom } from '@/lib/apis'
 import router from '@/router';
 
-import { userUserStore } from '@/stores/user'
-const store = userUserStore()
+import { useStoreUser } from '@/stores/user'
+const store = useStoreUser()
 // 部屋に入る前のページ
 // 必須: 名前
 // private -> 合言葉の入力欄
diff --git a/src/stores/user.ts b/src/stores/user.ts
index 9be0b62..3a94f49 100644
--- a/src/stores/user.ts
+++ b/src/stores/user.ts
@@ -5,4 +5,10 @@ export const useStoreUser = defineStore('user', {
     userName: '',
     userId: '',
   }),
+  actions:{
+    setUser(newName:string,newId:string){
+      this.userName=newName
+      this.userId=newId
+    }
+  }
 })

From ae58a18ca186d148f19aea57a2133f3062f8401a Mon Sep 17 00:00:00 2001
From: Nzt3 <nzt3pro@gmail.com>
Date: Sun, 16 Jun 2024 11:06:47 +0900
Subject: [PATCH 12/18] fix format

---
 src/stores/user.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/stores/user.ts b/src/stores/user.ts
index 3a94f49..962aa2a 100644
--- a/src/stores/user.ts
+++ b/src/stores/user.ts
@@ -5,10 +5,10 @@ export const useStoreUser = defineStore('user', {
     userName: '',
     userId: '',
   }),
-  actions:{
-    setUser(newName:string,newId:string){
-      this.userName=newName
-      this.userId=newId
-    }
-  }
+  actions: {
+    setUser(newName: string, newId: string) {
+      this.userName = newName
+      this.userId = newId
+    },
+  },
 })

From 630cf5fde7e299783db74c8be97bfcffa78d367a Mon Sep 17 00:00:00 2001
From: Nzt3 <nzt3pro@gmail.com>
Date: Sun, 16 Jun 2024 11:08:48 +0900
Subject: [PATCH 13/18] fix format

---
 src/pages/EnterRoom.vue | 51 +++++++++++++++++------------------------
 1 file changed, 21 insertions(+), 30 deletions(-)

diff --git a/src/pages/EnterRoom.vue b/src/pages/EnterRoom.vue
index a7c2291..a6c1563 100644
--- a/src/pages/EnterRoom.vue
+++ b/src/pages/EnterRoom.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import api, { EnterRoom } from '@/lib/apis'
-import router from '@/router';
+import router from '@/router'
 
 import { useStoreUser } from '@/stores/user'
 const store = useStoreUser()
@@ -18,12 +18,12 @@ const submitError = ref(false)
 const userSettingError = ref(false)
 const submit = async () => {
   const enterInfo: EnterRoom = {
-    "userName": userNickName.value,
-    "password": roomPassword.value
+    userName: userNickName.value,
+    password: roomPassword.value,
   }
   try {
     // enterRoom を送る
-    const resp = (await api.apiRoomRoomIdEnterPost(thisRoomId.value, enterInfo))
+    const resp = await api.apiRoomRoomIdEnterPost(thisRoomId.value, enterInfo)
     // ここで resp から userId と userName を持たせて IndividualRoom へ
     if (resp.status == 200) {
       submitError.value = false
@@ -31,9 +31,7 @@ const submit = async () => {
       userNickName.value = resp.data.userName
       const userId = resp.data.userId
       store.setUser(userNickName.value, userId)
-      router.push(
-        { path: `/rooms/${thisRoomId.value}` }
-      )
+      router.push({ path: `/rooms/${thisRoomId.value}` })
     } else {
       userSettingError.value = true
     }
@@ -44,45 +42,38 @@ const submit = async () => {
   }
 }
 
-onMounted(
-  () => {
-    const roomId = router.currentRoute.value.params.id
-    if (typeof roomId == 'string') {
-      thisRoomId.value = roomId
-    } else {
-      console.error("Invalid RoomId type")
-    }
-    const queryPassword = router.currentRoute.value.query['password']
-    if (typeof queryPassword == 'string') {
-      roomPassword.value = queryPassword
-    }
+onMounted(() => {
+  const roomId = router.currentRoute.value.params.id
+  if (typeof roomId == 'string') {
+    thisRoomId.value = roomId
+  } else {
+    console.error('Invalid RoomId type')
   }
-
-)
+  const queryPassword = router.currentRoute.value.query['password']
+  if (typeof queryPassword == 'string') {
+    roomPassword.value = queryPassword
+  }
+})
 </script>
 <template>
-  <h1>
-    部屋に入る
-  </h1>
+  <h1>部屋に入る</h1>
   <p>部屋ID: {{ thisRoomId }}</p>
   <p>この部屋で使うニックネームを設定してください。</p>
   <p>
     <label>
       ニックネーム
-      <input v-model="userNickName">
+      <input v-model="userNickName" />
     </label>
   </p>
   <p>
     <label>
       合言葉
-      <input v-model="roomPassword">
+      <input v-model="roomPassword" />
     </label>
   </p>
 
   <p>
-    <button @click="submit">
-      参加
-    </button>
+    <button @click="submit">参加</button>
   </p>
   <div v-if="userSettingError">
     <p>ニックネームが使用不可能。もしくは間違った合言葉です。</p>
@@ -90,4 +81,4 @@ onMounted(
   <div v-if="submitError">
     <p>エラーが発生しました。操作をやり直してください。</p>
   </div>
-</template>
\ No newline at end of file
+</template>

From fd4e10a792d4257d3687a74d10291c90171e1b3a Mon Sep 17 00:00:00 2001
From: Nzt3 <nzt3pro@gmail.com>
Date: Sun, 16 Jun 2024 11:22:33 +0900
Subject: [PATCH 14/18] =?UTF-8?q?fix=20=E3=83=A6=E3=83=BC=E3=82=B6?=
 =?UTF-8?q?=E3=83=BC=E5=90=8D=E3=81=AE=E8=A8=AD=E5=AE=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/EnterRoom.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/EnterRoom.vue b/src/pages/EnterRoom.vue
index a6c1563..0f332d2 100644
--- a/src/pages/EnterRoom.vue
+++ b/src/pages/EnterRoom.vue
@@ -28,9 +28,8 @@ const submit = async () => {
     if (resp.status == 200) {
       submitError.value = false
       // stores/user に userId と userName を記録して、 /rooms/:id に移動させる
-      userNickName.value = resp.data.userName
       const userId = resp.data.userId
-      store.setUser(userNickName.value, userId)
+      store.setUser(resp.data.userName, userId)
       router.push({ path: `/rooms/${thisRoomId.value}` })
     } else {
       userSettingError.value = true

From 2378adc0b191c759955b421b23e32102e33c1d97 Mon Sep 17 00:00:00 2001
From: Rozelin <rozelin.dc@gmail.com>
Date: Sun, 16 Jun 2024 11:55:28 +0900
Subject: [PATCH 15/18] =?UTF-8?q?=E8=87=AA=E5=88=86=E3=81=AE=E6=8A=95?=
 =?UTF-8?q?=E7=A8=BF=E3=81=AB=E3=81=84=E3=81=84=E3=81=AD=E3=81=A8=E9=80=9A?=
 =?UTF-8?q?=E5=A0=B1=E3=81=8C=E3=81=A7=E3=81=8D=E3=81=AA=E3=81=84=E3=82=88?=
 =?UTF-8?q?=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.cjs                | 11 ++++++++
 src/icons/ReportIcon.vue     |  8 +++++-
 src/icons/ThumbUpIcon.vue    |  8 +++++-
 src/pages/IndividualRoom.vue | 32 ++++++++++++++++------
 src/stores/individualRoom.ts | 51 +++++++++++++++++++++++++++++-------
 5 files changed, 91 insertions(+), 19 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 3a65063..955540c 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -33,6 +33,17 @@ module.exports = {
       },
     ],
     'no-case-declarations': 'off',
+    '@typescript-eslint/ban-types': [
+      'error',
+      {
+        types: {
+          '{}': false,
+          Object: false,
+          Function: false,
+        },
+        extendDefaults: true,
+      },
+    ],
   },
   parser: 'vue-eslint-parser',
   parserOptions: {
diff --git a/src/icons/ReportIcon.vue b/src/icons/ReportIcon.vue
index 0e8052f..85e78f9 100644
--- a/src/icons/ReportIcon.vue
+++ b/src/icons/ReportIcon.vue
@@ -1,3 +1,9 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ color: string }>(), {
+  color: '#FF0000',
+})
+</script>
+
 <template>
   <svg
     width="20"
@@ -20,7 +26,7 @@
     <g mask="url(#mask0_37_82)">
       <path
         d="M10 14.1667C10.2361 14.1667 10.434 14.0868 10.5938 13.9271C10.7535 13.7674 10.8333 13.5694 10.8333 13.3333C10.8333 13.0972 10.7535 12.8993 10.5938 12.7396C10.434 12.5799 10.2361 12.5 10 12.5C9.76389 12.5 9.56597 12.5799 9.40625 12.7396C9.24653 12.8993 9.16667 13.0972 9.16667 13.3333C9.16667 13.5694 9.24653 13.7674 9.40625 13.9271C9.56597 14.0868 9.76389 14.1667 10 14.1667ZM9.16667 10.8333H10.8333V5.83333H9.16667V10.8333ZM6.875 17.5L2.5 13.125V6.875L6.875 2.5H13.125L17.5 6.875V13.125L13.125 17.5H6.875ZM7.58333 15.8333H12.4167L15.8333 12.4167V7.58333L12.4167 4.16667H7.58333L4.16667 7.58333V12.4167L7.58333 15.8333Z"
-        fill="#FF0000"
+        :fill="color"
       />
     </g>
   </svg>
diff --git a/src/icons/ThumbUpIcon.vue b/src/icons/ThumbUpIcon.vue
index 5fc4ab3..81249b7 100644
--- a/src/icons/ThumbUpIcon.vue
+++ b/src/icons/ThumbUpIcon.vue
@@ -1,3 +1,9 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ color: string }>(), {
+  color: '#24A005',
+})
+</script>
+
 <template>
   <svg
     width="20"
@@ -20,7 +26,7 @@
     <g mask="url(#mask0_37_77)">
       <path
         d="M15.0001 17.5H5.83341V6.66666L11.6667 0.833328L12.7084 1.87499C12.8056 1.97222 12.8855 2.10416 12.948 2.27083C13.0105 2.43749 13.0417 2.59722 13.0417 2.74999V3.04166L12.1251 6.66666H17.5001C17.9445 6.66666 18.3334 6.83333 18.6667 7.16666C19.0001 7.49999 19.1667 7.88888 19.1667 8.33333V9.99999C19.1667 10.0972 19.1529 10.2014 19.1251 10.3125C19.0973 10.4236 19.0695 10.5278 19.0417 10.625L16.5417 16.5C16.4167 16.7778 16.2084 17.0139 15.9167 17.2083C15.6251 17.4028 15.3195 17.5 15.0001 17.5ZM7.50008 15.8333H15.0001L17.5001 9.99999V8.33333H10.0001L11.1251 3.74999L7.50008 7.37499V15.8333ZM5.83341 6.66666V8.33333H3.33341V15.8333H5.83341V17.5H1.66675V6.66666H5.83341Z"
-        fill="#24A005"
+        :fill="color"
       />
     </g>
   </svg>
diff --git a/src/pages/IndividualRoom.vue b/src/pages/IndividualRoom.vue
index 1164e91..eb7487e 100644
--- a/src/pages/IndividualRoom.vue
+++ b/src/pages/IndividualRoom.vue
@@ -1,20 +1,24 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { useIndividualRoom } from '@/stores/individualRoom'
+import { Post, useIndividualRoom } from '@/stores/individualRoom'
 import ThumbUpIcon from '@/icons/ThumbUpIcon.vue'
 import ReportIcon from '@/icons/ReportIcon.vue'
+import { useStoreUser } from '@/stores/user'
 
 const router = useRouter()
 const roomId = computed(() =>
   Array.isArray(router.currentRoute.value.params.id)
     ? router.currentRoute.value.params.id[0]
-    : router.currentRoute.value.params.id,
+    : router.currentRoute.value.params.id
 )
 
 const individualRoomStore = useIndividualRoom()
 const posts = computed(() => individualRoomStore.state.posts)
 
+const userStore = useStoreUser()
+const userId = computed(() => userStore.$state.userId)
+
 onMounted(async () => {
   try {
     await individualRoomStore.connect(roomId.value)
@@ -29,13 +33,13 @@ const postWord = () => {
   individualRoomStore.sendPost(postWordInput.value, postReadingInput.value)
 }
 
-const goodWord = (wordId: number) => {
+const goodWord = (post: Post) => {
   // TODO: デバウンス入れて連打時のリクエスト回数減らしたい
-  individualRoomStore.goodPost(wordId, 1)
+  individualRoomStore.goodPost(post, 1)
 }
 
-const reportWord = (wordId: number) => {
-  individualRoomStore.reportPost(wordId)
+const reportWord = (post: Post) => {
+  individualRoomStore.reportPost(post)
 }
 </script>
 
@@ -49,10 +53,18 @@ const reportWord = (wordId: number) => {
           <span>{{ `基礎点: ${post.basicScore}` }}</span>
           <div class="icons-container">
             <div class="thumb-container">
-              <ThumbUpIcon @click="() => goodWord(post.wordId)" />
+              <ThumbUpIcon
+                :class="{ 'icon-disabled': userId === post.senderId }"
+                :color="userId === post.senderId ? '#a8d89c' : '#24A005'"
+                @click="() => goodWord(post)"
+              />
               <span>{{ post.additionalScore }}</span>
             </div>
-            <ReportIcon @click="() => reportWord(post.wordId)" />
+            <ReportIcon
+              :class="{ 'icon-disabled': userId === post.senderId }"
+              :color="userId === post.senderId ? '#c15353' : '#FF0000'"
+              @click="() => reportWord(post)"
+            />
           </div>
         </div>
       </div>
@@ -138,6 +150,10 @@ const reportWord = (wordId: number) => {
   gap: 4px;
 }
 
+.icon-disabled {
+  cursor: not-allowed;
+}
+
 .input-container {
   width: 100%;
   display: flex;
diff --git a/src/stores/individualRoom.ts b/src/stores/individualRoom.ts
index ea2cd7d..680f4cf 100644
--- a/src/stores/individualRoom.ts
+++ b/src/stores/individualRoom.ts
@@ -1,5 +1,6 @@
 import { ref } from 'vue'
 import { defineStore } from 'pinia'
+import { useStoreUser } from './user'
 
 type IndividualRoomState =
   | {
@@ -7,16 +8,18 @@ type IndividualRoomState =
       roomId: undefined
       posts: []
       rejectedPosts: []
+      userScoreMap: {}
     }
   | {
       ws: WebSocket
       roomId: string
       posts: Post[]
       rejectedPosts: RejectedPostResponse[]
+      userScoreMap: Record<string, number>
     }
 
 interface BasicPost {
-  wordId: number
+  wordId: string
   word: string
   reading: string
   basicScore: number
@@ -43,7 +46,7 @@ interface PostedWord extends BasicPost {
 interface ScoreChangeResponse {
   // いいねや通報で得点が変動した時
   type: 'score_change'
-  wordId: number
+  wordId: string
   additionalScore: number
   basicScore: number
   totalScore: number
@@ -59,15 +62,18 @@ const BASE_URL =
 const websocketUrl = (roomId: string) => `${BASE_URL}/api/ws/${roomId}`
 
 export const useIndividualRoom = defineStore('individualRoom', () => {
-  const initialState = {
+  const initialState: IndividualRoomState = {
     ws: null,
     roomId: undefined,
     posts: [] as [],
     rejectedPosts: [] as [],
+    userScoreMap: {},
   }
 
   const state = ref<IndividualRoomState>(initialState)
 
+  const userStore = useStoreUser()
+
   const connect = (roomId: string) => {
     const ws = new WebSocket(websocketUrl(roomId))
     ws.onopen = () => {
@@ -77,6 +83,7 @@ export const useIndividualRoom = defineStore('individualRoom', () => {
         roomId,
         posts: [],
         rejectedPosts: [],
+        userScoreMap: {},
       }
     }
 
@@ -100,17 +107,21 @@ export const useIndividualRoom = defineStore('individualRoom', () => {
             totalScore: data.basicScore,
             isInvalid: false,
           })
+          userScoreChange(data.senderId, data.basicScore)
           break
         case 'post_word_rejected':
           state.value.rejectedPosts.push(data)
           break
         case 'score_change':
           const post = state.value.posts.find(
-            (post) => post.wordId === data.wordId,
+            (post) => post.wordId === data.wordId
           )
           if (post === undefined) {
             throw new Error('Post not found')
           }
+
+          userScoreChange(post.senderId, data.totalScore - post.totalScore)
+
           post.additionalScore = data.additionalScore
           post.basicScore = data.basicScore
           post.totalScore = data.totalScore
@@ -134,28 +145,50 @@ export const useIndividualRoom = defineStore('individualRoom', () => {
       throw new Error('WebSocket is not connected')
     }
     state.value.ws.send(
-      JSON.stringify({ type: 'postWord', args: { word, reading } }),
+      JSON.stringify({ type: 'postWord', args: { word, reading } })
     )
   }
 
-  const reportPost = (wordId: number) => {
+  const reportPost = (post: Post) => {
     if (state.value.ws === null) {
       throw new Error('WebSocket is not connected')
     }
+
+    if (post.senderId === userStore.userId) {
+      return
+    }
+
     state.value.ws.send(
-      JSON.stringify({ type: 'reportWord', args: { wordId } }),
+      JSON.stringify({ type: 'reportWord', args: { wordId: post.wordId } })
     )
   }
 
-  const goodPost = (wordId: number, score: number) => {
+  const goodPost = (post: Post, score: number) => {
     if (state.value.ws === null) {
       throw new Error('WebSocket is not connected')
     }
+
+    if (post.senderId === userStore.userId) {
+      retrun
+    }
+
     state.value.ws.send(
-      JSON.stringify({ type: 'goodWord', args: { wordId, score } }),
+      JSON.stringify({
+        type: 'goodWord',
+        args: { wordId: post.wordId, score },
+      })
     )
   }
 
+  const userScoreChange = (userId: string, score: number) => {
+    if (state.value.ws === null) {
+      throw new Error('WebSocket is not connected')
+    }
+
+    const prevScore = state.value.userScoreMap[userId] || 0
+    state.value.userScoreMap[userId] = prevScore + score
+  }
+
   return {
     state,
     connect,

From f5508d2c100ba3498a51c0c41d58c98c627436fe Mon Sep 17 00:00:00 2001
From: Rozelin <rozelin.dc@gmail.com>
Date: Sun, 16 Jun 2024 12:18:32 +0900
Subject: [PATCH 16/18] =?UTF-8?q?=E3=83=A9=E3=83=B3=E3=82=AD=E3=83=B3?=
 =?UTF-8?q?=E3=82=B0=E8=A1=A8=E7=A4=BA=E3=81=AE=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/IndividualRoom.vue | 143 +++++++++++++++++++++++++++--------
 src/stores/individualRoom.ts |  20 ++---
 2 files changed, 120 insertions(+), 43 deletions(-)

diff --git a/src/pages/IndividualRoom.vue b/src/pages/IndividualRoom.vue
index eb7487e..256738a 100644
--- a/src/pages/IndividualRoom.vue
+++ b/src/pages/IndividualRoom.vue
@@ -10,7 +10,7 @@ const router = useRouter()
 const roomId = computed(() =>
   Array.isArray(router.currentRoute.value.params.id)
     ? router.currentRoute.value.params.id[0]
-    : router.currentRoute.value.params.id
+    : router.currentRoute.value.params.id,
 )
 
 const individualRoomStore = useIndividualRoom()
@@ -41,63 +41,110 @@ const goodWord = (post: Post) => {
 const reportWord = (post: Post) => {
   individualRoomStore.reportPost(post)
 }
+
+const ranking = computed(() => {
+  if (individualRoomStore.state.ws === null) {
+    return []
+  }
+
+  const ranking: { name: string; score: number }[] = []
+  for (const userName of Object.keys(individualRoomStore.state.userScoreMap)) {
+    ranking.push({
+      name: userName,
+      score: individualRoomStore.state.userScoreMap[userName],
+    })
+  }
+  ranking.sort((a, b) => b.score - a.score)
+  return ranking
+})
 </script>
 
 <template>
   <div class="container">
-    <div class="posted-word-container">
-      <div v-for="post in posts" :key="post.wordId" class="word-card">
-        <span class="user-name">{{ post.senderName }}</span>
-        <span class="word">{{ `${post.word} (${post.reading})` }}</span>
-        <div class="word-footer">
-          <span>{{ `基礎点: ${post.basicScore}` }}</span>
-          <div class="icons-container">
-            <div class="thumb-container">
-              <ThumbUpIcon
+    <div class="post-area-container">
+      <div class="posted-word-container">
+        <div v-for="post in posts" :key="post.wordId" class="word-card">
+          <span class="user-name">{{ post.senderName }}</span>
+          <span class="word">{{ `${post.word} (${post.reading})` }}</span>
+          <div class="word-footer">
+            <span>{{ `基礎点: ${post.basicScore}` }}</span>
+            <div class="icons-container">
+              <div class="thumb-container">
+                <ThumbUpIcon
+                  :class="{ 'icon-disabled': userId === post.senderId }"
+                  :color="userId === post.senderId ? '#a8d89c' : '#24A005'"
+                  @click="() => goodWord(post)"
+                />
+                <span>{{ post.additionalScore }}</span>
+              </div>
+              <ReportIcon
                 :class="{ 'icon-disabled': userId === post.senderId }"
-                :color="userId === post.senderId ? '#a8d89c' : '#24A005'"
-                @click="() => goodWord(post)"
+                :color="userId === post.senderId ? '#c15353' : '#FF0000'"
+                @click="() => reportWord(post)"
               />
-              <span>{{ post.additionalScore }}</span>
             </div>
-            <ReportIcon
-              :class="{ 'icon-disabled': userId === post.senderId }"
-              :color="userId === post.senderId ? '#c15353' : '#FF0000'"
-              @click="() => reportWord(post)"
-            />
           </div>
         </div>
       </div>
+
+      <div class="input-container">
+        <div class="input-area">
+          <label class="input-label">
+            {{ '単語' }}
+            <input v-model="postWordInput" type="text" />
+          </label>
+          <label class="input-label">
+            {{ '単語の読み' }}
+            <input v-model="postReadingInput" type="text" />
+          </label>
+        </div>
+        <button @click="postWord">
+          {{ '送信' }}
+        </button>
+      </div>
     </div>
 
-    <div class="input-container">
-      <div class="input-area">
-        <label class="input-label">
-          {{ '単語' }}
-          <input v-model="postWordInput" type="text" />
-        </label>
-        <label class="input-label">
-          {{ '単語の読み' }}
-          <input v-model="postReadingInput" type="text" />
-        </label>
+    <div class="ranking-container">
+      <div class="ranking-title">{{ 'ランキング' }}</div>
+      <div class="ranking-list">
+        <div
+          v-for="(user, index) in ranking"
+          :key="user.name"
+          class="ranking-individual"
+        >
+          <div>
+            <span :style="{ fontWeight: 'bold', marginRight: '16px' }">
+              {{ `${index + 1}位` }}
+            </span>
+            <span>{{ user.name }}</span>
+          </div>
+          <span>{{ `${user.score}点` }}</span>
+        </div>
       </div>
-      <button @click="postWord">
-        {{ '送信' }}
-      </button>
     </div>
   </div>
 </template>
 
 <style scoped>
 .container {
-  max-width: 700px;
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: 1fr 400px;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+.post-area-container {
   height: 100%;
   width: 100%;
-  margin: 0 auto;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   position: relative;
+  padding: 0 20px;
+  margin-right: 10px;
+  box-sizing: border-box;
 }
 
 .posted-word-container {
@@ -179,4 +226,34 @@ const reportWord = (post: Post) => {
   width: 100%;
   font-size: 20px;
 }
+
+.ranking-container {
+  width: 100%;
+  overflow-y: auto;
+  padding: 10px;
+  margin: 10px;
+  border-left: 2px solid #5b5b5b;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  gap: 10px;
+}
+
+.ranking-title {
+  font-size: 25px;
+  font-weight: bold;
+}
+
+.ranking-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.ranking-individual {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 20px;
+}
 </style>
diff --git a/src/stores/individualRoom.ts b/src/stores/individualRoom.ts
index 680f4cf..96406b8 100644
--- a/src/stores/individualRoom.ts
+++ b/src/stores/individualRoom.ts
@@ -107,20 +107,20 @@ export const useIndividualRoom = defineStore('individualRoom', () => {
             totalScore: data.basicScore,
             isInvalid: false,
           })
-          userScoreChange(data.senderId, data.basicScore)
+          userScoreChange(data.senderName, data.basicScore)
           break
         case 'post_word_rejected':
           state.value.rejectedPosts.push(data)
           break
         case 'score_change':
           const post = state.value.posts.find(
-            (post) => post.wordId === data.wordId
+            (post) => post.wordId === data.wordId,
           )
           if (post === undefined) {
             throw new Error('Post not found')
           }
 
-          userScoreChange(post.senderId, data.totalScore - post.totalScore)
+          userScoreChange(post.senderName, data.totalScore - post.totalScore)
 
           post.additionalScore = data.additionalScore
           post.basicScore = data.basicScore
@@ -145,7 +145,7 @@ export const useIndividualRoom = defineStore('individualRoom', () => {
       throw new Error('WebSocket is not connected')
     }
     state.value.ws.send(
-      JSON.stringify({ type: 'postWord', args: { word, reading } })
+      JSON.stringify({ type: 'postWord', args: { word, reading } }),
     )
   }
 
@@ -159,7 +159,7 @@ export const useIndividualRoom = defineStore('individualRoom', () => {
     }
 
     state.value.ws.send(
-      JSON.stringify({ type: 'reportWord', args: { wordId: post.wordId } })
+      JSON.stringify({ type: 'reportWord', args: { wordId: post.wordId } }),
     )
   }
 
@@ -169,24 +169,24 @@ export const useIndividualRoom = defineStore('individualRoom', () => {
     }
 
     if (post.senderId === userStore.userId) {
-      retrun
+      return
     }
 
     state.value.ws.send(
       JSON.stringify({
         type: 'goodWord',
         args: { wordId: post.wordId, score },
-      })
+      }),
     )
   }
 
-  const userScoreChange = (userId: string, score: number) => {
+  const userScoreChange = (userName: string, score: number) => {
     if (state.value.ws === null) {
       throw new Error('WebSocket is not connected')
     }
 
-    const prevScore = state.value.userScoreMap[userId] || 0
-    state.value.userScoreMap[userId] = prevScore + score
+    const prevScore = state.value.userScoreMap[userName] || 0
+    state.value.userScoreMap[userName] = prevScore + score
   }
 
   return {

From 450313c641d7a720193b3060090eab88acc77002 Mon Sep 17 00:00:00 2001
From: Rozelin <rozelin.dc@gmail.com>
Date: Sun, 16 Jun 2024 12:25:39 +0900
Subject: [PATCH 17/18] =?UTF-8?q?ns=E7=94=A8=E3=81=ABURL=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/apis/index.ts        | 2 +-
 src/stores/individualRoom.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/apis/index.ts b/src/lib/apis/index.ts
index b224473..21d3235 100644
--- a/src/lib/apis/index.ts
+++ b/src/lib/apis/index.ts
@@ -4,7 +4,7 @@ const api = new Apis(
   new Configuration({
     basePath:
       process.env.NODE_ENV === 'production'
-        ? 'https://trap.show/h24s_19_server'
+        ? 'https://h24s-19.trap.show/server'
         : 'http://localhost:3000',
   }),
 )
diff --git a/src/stores/individualRoom.ts b/src/stores/individualRoom.ts
index 96406b8..f163c6a 100644
--- a/src/stores/individualRoom.ts
+++ b/src/stores/individualRoom.ts
@@ -57,7 +57,7 @@ type WebSocketResponse = PostedWord | RejectedPostResponse | ScoreChangeResponse
 
 const BASE_URL =
   process.env.NODE_ENV === 'production'
-    ? 'wss://trap.show/h24s_19_server'
+    ? 'wss://h24s-19.trap.show/server'
     : 'ws://localhost:3000'
 const websocketUrl = (roomId: string) => `${BASE_URL}/api/ws/${roomId}`
 

From 67dee3ad0c52c0f63e98e1c6e5f040251fac4c78 Mon Sep 17 00:00:00 2001
From: Rozelin <rozelin.dc@gmail.com>
Date: Sun, 16 Jun 2024 14:08:27 +0900
Subject: [PATCH 18/18] =?UTF-8?q?=E5=85=A5=E5=AE=A4=E3=81=AE=E9=81=B7?=
 =?UTF-8?q?=E7=A7=BB=E5=91=A8=E3=82=8Afix?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/CreateRoom.vue |  8 +++++++-
 src/pages/EnterRoom.vue  | 21 ++++++++++-----------
 src/pages/RoomList.vue   | 12 +++++++++++-
 3 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/src/pages/CreateRoom.vue b/src/pages/CreateRoom.vue
index 019b84d..7a4f541 100644
--- a/src/pages/CreateRoom.vue
+++ b/src/pages/CreateRoom.vue
@@ -27,9 +27,15 @@ const submit = async () => {
     try {
       const resp = await api.apiRoomPost(roomInfo)
       const roomId = resp.data.roomId
+
+      let query = undefined
+      if (!isPublic.value) {
+        query = { password: roomPassword.value, isPrivate: 1 }
+      }
+
       router.push({
         path: `/rooms/${roomId}/enter`,
-        query: { password: roomPassword.value },
+        query,
       })
     } catch (e) {
       console.error(e)
diff --git a/src/pages/EnterRoom.vue b/src/pages/EnterRoom.vue
index 0f332d2..5af0df2 100644
--- a/src/pages/EnterRoom.vue
+++ b/src/pages/EnterRoom.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import api, { EnterRoom } from '@/lib/apis'
 import router from '@/router'
 
@@ -25,15 +25,12 @@ const submit = async () => {
     // enterRoom を送る
     const resp = await api.apiRoomRoomIdEnterPost(thisRoomId.value, enterInfo)
     // ここで resp から userId と userName を持たせて IndividualRoom へ
-    if (resp.status == 200) {
-      submitError.value = false
-      // stores/user に userId と userName を記録して、 /rooms/:id に移動させる
-      const userId = resp.data.userId
-      store.setUser(resp.data.userName, userId)
-      router.push({ path: `/rooms/${thisRoomId.value}` })
-    } else {
-      userSettingError.value = true
-    }
+
+    submitError.value = false
+    // stores/user に userId と userName を記録して、 /rooms/:id に移動させる
+    const userId = resp.data.userId
+    store.setUser(resp.data.userName, userId)
+    router.push({ path: `/rooms/${thisRoomId.value}` })
   } catch (e) {
     // 通信エラー or userNameエラー or password エラー
     console.error(e)
@@ -41,6 +38,8 @@ const submit = async () => {
   }
 }
 
+const isPrivate = computed(() => 'isPrivate' in router.currentRoute.value.query)
+
 onMounted(() => {
   const roomId = router.currentRoute.value.params.id
   if (typeof roomId == 'string') {
@@ -64,7 +63,7 @@ onMounted(() => {
       <input v-model="userNickName" />
     </label>
   </p>
-  <p>
+  <p v-if="isPrivate">
     <label>
       合言葉
       <input v-model="roomPassword" />
diff --git a/src/pages/RoomList.vue b/src/pages/RoomList.vue
index c0a82d0..6330492 100644
--- a/src/pages/RoomList.vue
+++ b/src/pages/RoomList.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
 import api, { GetRoomsInner } from '@/lib/apis'
 
 const rooms = ref<GetRoomsInner[]>([])
@@ -7,6 +8,15 @@ onMounted(async () => {
   const res = await api.apiRoomsGet()
   rooms.value = res.data
 })
+
+const router = useRouter()
+const enterRoom = (room: GetRoomsInner) => {
+  let query = undefined
+  if (!room.isPublic) {
+    query = { isPrivate: 1 }
+  }
+  router.push({ path: '/rooms/' + room.roomId + '/enter', query })
+}
 </script>
 
 <template>
@@ -20,7 +30,7 @@ onMounted(async () => {
         <button
           @click="
             () => {
-              $router.push({ path: '/rooms/' + room.roomId + '/enter' })
+              enterRoom(room)
             }
           "
         >