🐞 fix: 修复房间创建会自动拉所有人进房间的问题

Author: imlinhanchao

game/frontend/src/components/common/RoomControls.vue

@@ -3,7 +3,7 @@
     <!-- Waiting: Player Actions -->
     <template v-if="!isPlaying && roomPlayer.role === PlayerRole.player">
       <button class="btn btn-circle md:btn-lg btn-soft tooltip tooltip-left" 
-        @click="game?.leaveRoom(roomPlayer.room.id)"
+        @click="game?.leaveRoom(roomPlayer.room.id), $router.push('/')"
         :disabled="roomPlayer.isReady"
         data-tip="离开房间"
       >

game/frontend/src/components/gobang/GobangLite.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="flex flex-col items-center justify-center p-2 py-4" ref="containerRef">
     <!-- 棋盘 -->
-    <div class="inline-block p-2 m-auto border rounded shadow-2xl bg-base-300 border-base-content/20">
+    <div class="inline-block p-2 m-auto border rounded shadow-2xl bg-base-300 border-base-content/20 select-none">
       <!-- 顶部留白 -->
       <div class="flex">
         <div class="w-[4vw] md:w-6 h-[4vw] md:h-6"></div>

game/frontend/src/components/gobang/GobangRoom.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="flex flex-col md:flex-row gap-4 md:h-full">
-    <section class="flex-1 md:h-full flex flex-col items-center justify-start md:justify-center overflow-auto p-4">
+    <section class="flex-1 md:h-full flex flex-col items-center justify-start md:justify-center overflow-auto p-4 select-none">
       <!-- 棋盘 -->
       <div class="inline-block bg-base-300 border border-base-content/20 p-2 rounded shadow-2xl m-auto">
         <!-- 顶部留白 -->

game/frontend/src/components/othello/OthelloLite.vue

@@ -5,7 +5,7 @@
   >
     <!-- 棋盘 -->
     <div
-      class="inline-block bg-base-300 border border-base-content/20 p-1 rounded shadow-2xl m-auto max-w-[99vw] max-h-[90vh]"
+      class="inline-block bg-base-300 border border-base-content/20 p-1 rounded shadow-2xl m-auto max-w-[99vw] max-h-[90vh] select-none"
     >
       <!-- 顶部横坐标 (A-H) -->
       <div class="flex">

game/frontend/src/components/othello/OthelloRoom.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="flex flex-col md:flex-row gap-4 md:h-full">
-    <section class="flex-1 md:h-full flex flex-col items-center justify-start md:justify-center overflow-auto p-4">
+    <section class="flex-1 md:h-full flex flex-col items-center justify-start md:justify-center overflow-auto p-4 select-none">
       <!-- 棋盘 -->
       <div class="inline-block bg-base-300 border border-base-content/20 p-2 rounded shadow-2xl m-auto">
         <!-- 顶部横坐标 (A-H) -->

game/frontend/src/stores/game.ts

@@ -100,7 +100,8 @@ export const useGameStore = defineStore('game', () => {
         rooms.value = [...data]
       })
       .onRoomCreate((room) => {
-        router.replace('/r/' + room.id)
+        if (room.players.find(p => p.id === player.value?.id))
+          router.replace('/r/' + room.id)
       })
       .onPlayerReady(onPlayerReady)
       .onPlayerUnready(onPlayerReady)

game/frontend/src/views/Room.vue

@@ -3,7 +3,7 @@ import msg from "@/components/msg";
 import { getComponent } from "@/main";
 import { useGameStore } from "@/stores/game";
 import { openSmallWindow } from "@/utils/dom";
-import { computed, onMounted } from "vue";
+import { computed, onMounted, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 
 const gameStore = useGameStore();
@@ -42,10 +42,21 @@ function init() {
 }
 const room = computed(() => gameStore.roomPlayer?.room)
 
-onMounted(() => {
+function load() {
   gameStore.game?.getRoomOneTime(roomId.value).then(() => {
     init();
   });
+}
+
+watch(
+  () => route.params.id,
+  () => {
+    load();
+  }
+);
+
+onMounted(() => {
+  load();
 });
 
 const hasLiteComponent = computed(() => {

lib/index.ts

@@ -206,7 +206,7 @@ export class Tiaoom extends EventEmitter {
 
     this.rooms.push(room);
     this.emit("room", room);
-    this.joinPlayer(sender, { roomId: room.id, ...sender }, true);
+    await this.joinPlayer(sender, { roomId: room.id, ...sender }, true);
     return room;
   }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tiaoom",
-  "version": "0.0.37",
+  "version": "0.0.38",
   "description": "",
   "main": "./src/index.cjs",
   "module": "./src/index.mjs",