From 5af0950c25a9bf6d5584ff39221e653e0bba808e Mon Sep 17 00:00:00 2001 From: sin_yu Date: Sun, 29 Sep 2024 07:59:45 +0800 Subject: [PATCH 1/9] fix: change RoomView style --- .../{images => roomPlayers}/aptenodytes.png | Bin src/assets/roomPlayers/edit.jpg | Bin 0 -> 648 bytes src/assets/roomPlayers/edit.svg | 3 + .../{images => roomPlayers}/eudyptes.png | Bin .../{images => roomPlayers}/eudyptula.png | Bin src/assets/roomPlayers/goBackButton.jpg | Bin 0 -> 7693 bytes src/assets/{images => roomPlayers}/papua.png | Bin src/assets/roomPlayers/ready.svg | 10 + src/assets/styles/main.css | 20 +- src/components/RoomPlayerSlide.vue | 6 + src/stores/room.js | 1 + src/views/RoomView.vue | 361 ++++++++++-------- 12 files changed, 237 insertions(+), 164 deletions(-) rename src/assets/{images => roomPlayers}/aptenodytes.png (100%) create mode 100644 src/assets/roomPlayers/edit.jpg create mode 100644 src/assets/roomPlayers/edit.svg rename src/assets/{images => roomPlayers}/eudyptes.png (100%) rename src/assets/{images => roomPlayers}/eudyptula.png (100%) create mode 100644 src/assets/roomPlayers/goBackButton.jpg rename src/assets/{images => roomPlayers}/papua.png (100%) create mode 100644 src/assets/roomPlayers/ready.svg create mode 100644 src/components/RoomPlayerSlide.vue diff --git a/src/assets/images/aptenodytes.png b/src/assets/roomPlayers/aptenodytes.png similarity index 100% rename from src/assets/images/aptenodytes.png rename to src/assets/roomPlayers/aptenodytes.png diff --git a/src/assets/roomPlayers/edit.jpg b/src/assets/roomPlayers/edit.jpg new file mode 100644 index 0000000000000000000000000000000000000000..e8afdc39e51207c04595cbe41d61a00e6bce7efe GIT binary patch literal 648 zcmex=Jq?U}9uuW@2GxWo2Ojs;&jfGq4D< z3Mm>ovIz$!vMUve7&T5@$f4}C@t|nX#SbdRNkvVZTw>x9l2WQ_>Kd9_CZ=ZQ7M51d zF0O9w9-dyoA)#U65s^{JDXD4c8JStdC8cHM6_r)ZEv;?s9i3g1CQq3GGAU*RJ2VdF$b$$4{OP zfBE|D`;VW$K>lK6V1@@7#A9gw0tNyj6AKG73p>bPj7;S~%q+;ls%Xe2 + + diff --git a/src/assets/images/eudyptes.png b/src/assets/roomPlayers/eudyptes.png similarity index 100% rename from src/assets/images/eudyptes.png rename to src/assets/roomPlayers/eudyptes.png diff --git a/src/assets/images/eudyptula.png b/src/assets/roomPlayers/eudyptula.png similarity index 100% rename from src/assets/images/eudyptula.png rename to src/assets/roomPlayers/eudyptula.png diff --git a/src/assets/roomPlayers/goBackButton.jpg b/src/assets/roomPlayers/goBackButton.jpg new file mode 100644 index 0000000000000000000000000000000000000000..001bda8a90317d0ca199242b4ec3fde2a7fd6cd8 GIT binary patch literal 7693 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 literal 0 HcmV?d00001 diff --git a/src/assets/images/papua.png b/src/assets/roomPlayers/papua.png similarity index 100% rename from src/assets/images/papua.png rename to src/assets/roomPlayers/papua.png diff --git a/src/assets/roomPlayers/ready.svg b/src/assets/roomPlayers/ready.svg new file mode 100644 index 0000000..33046b1 --- /dev/null +++ b/src/assets/roomPlayers/ready.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/styles/main.css b/src/assets/styles/main.css index aa8e5ce..6670c5b 100644 --- a/src/assets/styles/main.css +++ b/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; + } } diff --git a/src/components/RoomPlayerSlide.vue b/src/components/RoomPlayerSlide.vue new file mode 100644 index 0000000..e745819 --- /dev/null +++ b/src/components/RoomPlayerSlide.vue @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/src/stores/room.js b/src/stores/room.js index 90734a0..fc8c0b9 100644 --- a/src/stores/room.js +++ b/src/stores/room.js @@ -9,6 +9,7 @@ export const useRoomStore = defineStore('useRoomStore', () => { }) const getRooms = () => { return api.getRooms().then((res) => { + console.log(res) rooms.value = res.rooms }) } diff --git a/src/views/RoomView.vue b/src/views/RoomView.vue index 81c3443..7fa747b 100644 --- a/src/views/RoomView.vue +++ b/src/views/RoomView.vue @@ -7,14 +7,14 @@ import { useRoute, useRouter } from 'vue-router' import { useUserStore } from '../stores/user' import { usePublicStore } from '../stores/public' import { useRoomStore } from '../stores/room' -import Tux from '@/assets/images/tux.png' -import Gunter from '@/assets/images/gunter.png' -import Sin from '@/assets/images/sin.png' -import Abc from '@/assets/images/abc.png' +import Aptenodytes from '@/assets/roomPLayers/aptenodytes.png' +import Eudyptes from '@/assets/roomPLayers/eudyptes.png' +import Eudyptula from '@/assets/roomPLayers/eudyptula.png' +import Papua from '@/assets/roomPLayers/papua.png' import ChangeNicknameModal from '@/components/ChangeNicknameModal.vue' -import RoomButton from '@/components/RoomButton.vue' -const penguins = [ Tux, Gunter, Sin, Abc ] -const roles = [ 'tux', 'gunter', 'abc', 'sin' ] + +const penguins = [ Aptenodytes, Eudyptes, Eudyptula, Papua ] +const roles = [ 'Aptenodytes', 'Eudyptes', 'Eudyptula', 'Papua' ] const publicStore = usePublicStore() const userStore = useUserStore() const roomStore = useRoomStore() @@ -26,8 +26,11 @@ const { user } = toRefs(userStore) const { getUserInfo } = userStore const { roomInfo } = toRefs(roomStore) const { - getRooms, updateRoomPlayers, clearRoomInfo, joinRoom, updateRoomData, closeRoom, addAiPlayer + getRooms, updateRoomPlayers, clearRoomInfo, joinRoom, updateRoomData, } = roomStore +// const { +// getRooms, updateRoomPlayers, clearRoomInfo, joinRoom, updateRoomData, closeRoom, addAiPlayer +// } = roomStore const { params, query } = useRoute() let { roomId } = params roomId = Number(roomId) @@ -40,20 +43,16 @@ const trueToken = ref(localStorage.getItem('token')) const handleChangeRole = (index) => { roomChannel.send({ action: 'set_character', character: roles[index] }) } -const roomMe = computed(() => { - return roomInfo.value.players?.find((player) => player.id === user.value.id) || {} -}) - +const roomMe = computed(() => roomInfo.value.players?.find((player) => player.id === user.value.id) || {}) +const playerNum = computed(() => roomInfo.value.players?.length || 1) const showChangeNicknameModal = ref(false) -const aiPlayerJoined = ref(false) -const handleReady = async () => { - console.log('ready') - roomChannel.send({ action: 'ready' }) -} -const handleCancelReady = async () => { - console.log('cancel ready') - roomChannel.send({ action: 'cancel_ready' }) -} +// const aiPlayerJoined = ref(false) +const handleReadyChange = computed(() => { + if (roomMe.value.is_ready) { + return function (){ return roomChannel.send({ action: 'cancel_ready' })} + } + return function (){ return roomChannel.send({ action: 'ready' })} +}) const isGaasRoom = computed(() => { return !!gaasToken.value }) @@ -72,23 +71,19 @@ const handleLeaveRoom = async () => { router.push('/') } } -const handleCloseRoom = async () => { - closeRoom().catch(() => { - // showErrorMessage(error.error) - }) - router.push('/') -} -const handleAddAiPlayer = async () => { - await addAiPlayer() - aiPlayerJoined.value = true - console.log('add ai player success') -} +// const handleCloseRoom = async () => { +// closeRoom().catch(() => { +// // showErrorMessage(error.error) +// }) +// router.push('/') +// } +// const handleAddAiPlayer = async () => { +// await addAiPlayer() +// aiPlayerJoined.value = true +// } let roomChannel = null -// let publicStoreRoomChannel = null -// let consumer = null + onMounted(async () => { - console.log('roomId', roomId) - console.log('gaasToken: ', gaasToken.value) if (!gaasToken.value && sessionStorage.getItem('gaasToken')){ gaasToken.value = sessionStorage.getItem('gaasToken') } @@ -97,7 +92,6 @@ onMounted(async () => { trueToken.value = gaasToken.value } if (!consumer){ - console.log('no consumer') initConnection(trueToken.value) consumer = toRaw(publicStore.consumer) getUserInfo() @@ -105,7 +99,6 @@ onMounted(async () => { initRoomChannel() } else { - console.log('has consumer') initRoomChannel() } joinRoom({ id: roomId }) @@ -119,7 +112,6 @@ const initRoomChannel = () => { } roomChannel = consumer.subscriptions.create({ channel: 'RoomChannel', room_id: roomId }, { connected () { - console.log('connected room channel', roomId) // 隨機選一個角色 const randomIndex = Math.floor(Math.random() * roles.length) handleChangeRole(randomIndex) @@ -176,92 +168,27 @@ const initRoomChannel = () => { else if (data.event === 'room_closed') { handleLeaveRoom() } - console.log(data, 'data room channel', roomId) } }) } -const buttonConfig = computed(() => [ - { - text: !roomMe.value.is_ready ? '準備' : '取消準備', - onClick: !roomMe.value.is_ready ? handleReady : handleCancelReady, - }, - { - text: '離開房間', - isShow: !gaasToken.value, - onClick: handleLeaveRoom - }, - { - text: '修改暱稱', - onClick: () => {showChangeNicknameModal.value = true} - }, - { - text: '關閉房間', - onClick: handleCloseRoom - } -]) \ No newline at end of file From 8f9445e24b1a8bdeb846d0b0a93e72a7a01c62a5 Mon Sep 17 00:00:00 2001 From: sin_yu Date: Tue, 8 Oct 2024 23:14:58 +0800 Subject: [PATCH 2/9] =?UTF-8?q?feat:=20roomview=20style=20change=EF=BC=8Ca?= =?UTF-8?q?dd=20roomplayerslide=20conmponent?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/roomPlayers/edit.jpg | Bin 648 -> 0 bytes src/assets/roomPlayers/editGray.svg | 5 + src/assets/roomPlayers/stage.svg | 16 ++++ src/components/RoomPlayerSlide.vue | 108 +++++++++++++++++++++- src/views/RoomView.vue | 138 +++++++++++++++++----------- 5 files changed, 209 insertions(+), 58 deletions(-) delete mode 100644 src/assets/roomPlayers/edit.jpg create mode 100644 src/assets/roomPlayers/editGray.svg create mode 100644 src/assets/roomPlayers/stage.svg diff --git a/src/assets/roomPlayers/edit.jpg b/src/assets/roomPlayers/edit.jpg deleted file mode 100644 index e8afdc39e51207c04595cbe41d61a00e6bce7efe..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 648 zcmex=Jq?U}9uuW@2GxWo2Ojs;&jfGq4D< z3Mm>ovIz$!vMUve7&T5@$f4}C@t|nX#SbdRNkvVZTw>x9l2WQ_>Kd9_CZ=ZQ7M51d zF0O9w9-dyoA)#U65s^{JDXD4c8JStdC8cHM6_r)ZEv;?s9i3g1CQq3GGAU*RJ2VdF$b$$4{OP zfBE|D`;VW$K>lK6V1@@7#A9gw0tNyj6AKG73p>bPj7;S~%q+;ls%Xe2 + + + + diff --git a/src/assets/roomPlayers/stage.svg b/src/assets/roomPlayers/stage.svg new file mode 100644 index 0000000..1dcf700 --- /dev/null +++ b/src/assets/roomPlayers/stage.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/components/RoomPlayerSlide.vue b/src/components/RoomPlayerSlide.vue index e745819..f071860 100644 --- a/src/components/RoomPlayerSlide.vue +++ b/src/components/RoomPlayerSlide.vue @@ -1,6 +1,108 @@ - + \ No newline at end of file + + + \ No newline at end of file diff --git a/src/views/RoomView.vue b/src/views/RoomView.vue index 7fa747b..ede80c2 100644 --- a/src/views/RoomView.vue +++ b/src/views/RoomView.vue @@ -7,13 +7,14 @@ import { useRoute, useRouter } from 'vue-router' import { useUserStore } from '../stores/user' import { usePublicStore } from '../stores/public' import { useRoomStore } from '../stores/room' -import Aptenodytes from '@/assets/roomPLayers/aptenodytes.png' -import Eudyptes from '@/assets/roomPLayers/eudyptes.png' -import Eudyptula from '@/assets/roomPLayers/eudyptula.png' -import Papua from '@/assets/roomPLayers/papua.png' +import Aptenodytes from '@/assets/images/3.png' +import Eudyptes from '@/assets/images/4.png' +import Eudyptula from '@/assets/images/2.png' +import Papua from '@/assets/images/1.png' import ChangeNicknameModal from '@/components/ChangeNicknameModal.vue' +import RoomPlayerSlide from '../components/RoomPlayerSlide.vue' -const penguins = [ Aptenodytes, Eudyptes, Eudyptula, Papua ] +const penguins = [ Aptenodytes, Papua, Eudyptula, Eudyptes ] const roles = [ 'Aptenodytes', 'Eudyptes', 'Eudyptula', 'Papua' ] const publicStore = usePublicStore() const userStore = useUserStore() @@ -35,6 +36,7 @@ const { params, query } = useRoute() let { roomId } = params roomId = Number(roomId) const { token: queryGaasToken } = query +const defaultChoseAvatar = ref() if (queryGaasToken){ gaasToken.value = queryGaasToken localStorage.setItem('token', queryGaasToken) @@ -46,6 +48,7 @@ const handleChangeRole = (index) => { const roomMe = computed(() => roomInfo.value.players?.find((player) => player.id === user.value.id) || {}) const playerNum = computed(() => roomInfo.value.players?.length || 1) const showChangeNicknameModal = ref(false) +const nameEditSwitch = computed(() => roomInfo.value.status !== 'starting') // const aiPlayerJoined = ref(false) const handleReadyChange = computed(() => { if (roomMe.value.is_ready) { @@ -114,6 +117,7 @@ const initRoomChannel = () => { connected () { // 隨機選一個角色 const randomIndex = Math.floor(Math.random() * roles.length) + defaultChoseAvatar.value = randomIndex handleChangeRole(randomIndex) getRooms() }, @@ -188,6 +192,16 @@ const initRoomChannel = () => { 請選擇你的企鵝 +
+ +
+ +
@@ -258,7 +284,6 @@ const initRoomChannel = () => {
--> -
{

{{ roomInfo.name }}

- + > -->