Merge branch 'feature/FE/gamedescription' into 'develop'

feature/FE/gamedescription : Update game description image

See merge request s03-final/s03p31a503!187

frontend/src/components/meetingpage/multipanel/gamepanel/gamedescription/ConsonantQuizDescription.vue

@@ -9,8 +9,8 @@
       <div class="carousel-inner">
         <div class="carousel-item active">
           <img 
-            :src="require('@/assets/images/sample.png')" 
-            class="d-block w-100" 
+            :src="require('@/assets/images/consonant1.png')" 
+            class="d-block w-50 mx-auto" 
             alt="sample image"
           >
           <p class="description">
@@ -19,8 +19,8 @@
         </div>
         <div class="carousel-item">
           <img 
-            :src="require('@/assets/images/sample.png')" 
-            class="d-block w-100" 
+            :src="require('@/assets/images/consonant2.png')" 
+            class="d-block w-50 mx-auto" 
             alt="sample image"
           >
           <p class="description">
@@ -29,8 +29,8 @@
         </div>
         <div class="carousel-item">
           <img 
-            :src="require('@/assets/images/sample.png')" 
-            class="d-block w-100" 
+            :src="require('@/assets/images/consonant3.png')" 
+            class="d-block w-50 mx-auto" 
             alt="sample image"
           >
           <p class="description">
@@ -87,4 +87,9 @@ p, h1, h2, h3, h4, h5, h6, button {
 .v-select__selection--comma {
   margin: 0 !important;
 }
+
+
+img {
+  border: 1px solid white;
+}
 </style>

frontend/src/components/meetingpage/multipanel/gamepanel/gamedescription/FindOutDrunkenDescription.vue

@@ -10,8 +10,8 @@
         <div class="carousel-inner">
           <div class="carousel-item active">
             <img 
-              :src="require('@/assets/images/sample.png')" 
-              class="d-block w-100" 
+              :src="require('@/assets/images/drunken1.png')" 
+              class="d-block w-50 mx-auto" 
               alt="sample image"
             >
             <p class="description">
@@ -20,8 +20,8 @@
           </div>
           <div class="carousel-item">
             <img 
-              :src="require('@/assets/images/sample.png')" 
-              class="d-block w-100" 
+              :src="require('@/assets/images/drunken2.png')" 
+              class="d-block w-50 mx-auto" 
               alt="sample image"
             >
             <p class="description">
@@ -30,8 +30,8 @@
           </div>
           <div class="carousel-item">
             <img 
-              :src="require('@/assets/images/sample.png')" 
-              class="d-block w-100" 
+              :src="require('@/assets/images/drunken3.png')" 
+              class="d-block w-50 mx-auto" 
               alt="sample image"
             >
             <p class="description">
@@ -106,4 +106,8 @@ p, h1, h2, h3, h4, h5, h6, button {
 button {
   color: black;
 }
+
+img {
+  border: 1px solid white;
+}
 </style>

frontend/src/components/meetingpage/multipanel/gamepanel/gamedescription/LiarGameDescription.vue

@@ -9,8 +9,8 @@
       <div class="carousel-inner">
         <div class="carousel-item active">
           <img 
-            :src="require('@/assets/images/sample.png')" 
-            class="d-block w-100" 
+            :src="require('@/assets/images/liar1.png')" 
+            class="d-block w-50  mx-auto" 
             alt="sample image"
           >
           <p class="description">
@@ -19,8 +19,8 @@
         </div>
         <div class="carousel-item">
           <img 
-            :src="require('@/assets/images/sample.png')" 
-            class="d-block w-100" 
+            :src="require('@/assets/images/liar2.png')" 
+            class="d-block w-50 mx-auto" 
             alt="sample image"
           >
           <p class="description">
@@ -29,8 +29,8 @@
         </div>
         <div class="carousel-item">
           <img 
-            :src="require('@/assets/images/sample.png')" 
-            class="d-block w-100" 
+            :src="require('@/assets/images/liar3.png')" 
+            class="d-block w-50 mx-auto" 
             alt="sample image"
           >
           <p class="description">
@@ -39,8 +39,8 @@
         </div>
         <div class="carousel-item">
           <img 
-            :src="require('@/assets/images/sample.png')" 
-            class="d-block w-100" 
+            :src="require('@/assets/images/liar5.png')" 
+            class="d-block w-50 mx-auto" 
             alt="sample image"
           >
           <p class="description">
@@ -49,8 +49,8 @@
         </div>
         <div class="carousel-item">
           <img 
-            :src="require('@/assets/images/sample.png')" 
-            class="d-block w-100" 
+            :src="require('@/assets/images/liar4.png')" 
+            class="d-block w-50 mx-auto" 
             alt="sample image"
           >
           <p class="description">
@@ -59,8 +59,8 @@
         </div>
         <div class="carousel-item">
           <img 
-            :src="require('@/assets/images/sample.png')" 
-            class="d-block w-100" 
+            :src="require('@/assets/images/liar6.png')" 
+            class="d-block w-50 mx-auto" 
             alt="sample image"
           >
           <p class="description">
@@ -117,16 +117,8 @@ p, h1, h2, h3, h4, h5, h6, button {
 .v-select__selection--comma {
   margin: 0 !important;
 }
-/* 
-.v-input {
-  width: 60% !important;
-}
 
-.v-input__slot {
-  width: 60% !important;
+img {
+  border: 1px solid white;
 }
-
-.v-input__control {
-  width: 60% !important;
-} */
 </style>

frontend/src/components/meetingpage/multipanel/gamepanel/gamedescription/SmileLeadsToAlcoholDescription.vue

@@ -9,8 +9,8 @@
       <div class="carousel-inner">
         <div class="carousel-item active">
           <img 
-            :src="require('@/assets/images/sample.png')" 
-            class="d-block w-100" 
+            :src="require('@/assets/images/smile1.png')" 
+            class="d-block w-50 mx-auto" 
             alt="sample image"
           >
           <p class="description">
@@ -19,8 +19,8 @@
         </div>
         <div class="carousel-item">
           <img 
-            :src="require('@/assets/images/sample.png')" 
-            class="d-block w-100" 
+            :src="require('@/assets/images/smile2.png')" 
+            class="d-block w-50 mx-auto" 
             alt="sample image"
           >
           <p class="description">
@@ -29,12 +29,12 @@
         </div>
         <div class="carousel-item">
           <img 
-            :src="require('@/assets/images/sample.png')" 
-            class="d-block w-100" 
+            :src="require('@/assets/images/smile3.png')" 
+            class="d-block w-50 mx-auto" 
             alt="sample image"
           >
           <p class="description">
-            3. 이 과정에서 이를 보인다면<br> 당신은...벌칙 당첨!
+            3. 이 과정에서 웃는다면<br> 당신은...벌칙 당첨!
           </p>
         </div>
       </div>
@@ -87,16 +87,8 @@ p, h1, h2, h3, h4, h5, h6, button {
 .v-select__selection--comma {
   margin: 0 !important;
 }
-/* 
-.v-input {
-  width: 60% !important;
-}
 
-.v-input__slot {
-  width: 60% !important;
+img {
+  border: 1px solid white;
 }
-
-.v-input__control {
-  width: 60% !important;
-} */
 </style>

frontend/src/components/meetingpage/multipanel/gamepanel/gamedescription/UpAndDownDescription.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="upanddown" data-app>
-    <h5 class="pt-3">Up🔺 & Down🔻 </h5>
+    <h5 class="pt-3">Up&Down🔺🔻 </h5>
     <div 
       id="carouselExampleControls" 
       class="carousel slide m-1 p-1" 
@@ -9,8 +9,8 @@
       <div class="carousel-inner">
         <div class="carousel-item active">
           <img 
-            :src="require('@/assets/images/sample.png')" 
-            class="d-block w-100" 
+            :src="require('@/assets/images/updown1.png')" 
+            class="d-block w-50 mx-auto" 
             alt="sample image"
           >
           <p class="description">
@@ -19,8 +19,8 @@
         </div>
         <div class="carousel-item">
           <img 
-            :src="require('@/assets/images/sample.png')" 
-            class="d-block w-100" 
+            :src="require('@/assets/images/updown2.png')" 
+            class="d-block w-50 mx-auto" 
             alt="sample image"
           >
           <p class="description">
@@ -29,12 +29,12 @@
         </div>
         <div class="carousel-item">
           <img 
-            :src="require('@/assets/images/sample.png')" 
-            class="d-block w-100" 
+            :src="require('@/assets/images/updown3.png')" 
+            class="d-block w-50 mx-auto" 
             alt="sample image"
           >
           <p class="description">
-            3. 숫자를 맞힌다면 Win!!!<br> 이전 순서의 사람이 벌칙 당첨!!
+            3. 숫자를 맞힌다면 벌칙 당첨!!!
           </p>
         </div>
       </div>
@@ -86,4 +86,8 @@ p, h1, h2, h3, h4, h5, h6, button {
 .v-select__selection--comma {
   margin: 0 !important;
 }
+
+img {
+  border: 1px solid white;
+}
 </style>

frontend/src/components/meetingpage/multipanel/gamepanel/gameprocess/LoserPanel.vue

@@ -1,16 +1,19 @@
 <template>
   <div class="d-flex flex-column justify-space-around align-items-center h-100" v-if="loser">
+    <div class="w-100" v-if="selectedGame==1">
+      <p class="answers color-white"> 번호 : <span class="color-yellow">{{this.gameUpDownNumber}}</span></p>
+    </div>
     <div class="w-100" v-if="selectedGame==2">
       <div class="answerList mb-2">
         <p 
+          class="color-white other-user"
           v-if="gameAnswerWords.length"
-          class="other-user"
         >
           ⭐다른 유저의 정답⭐
         </p>
         <div class="d-flex row no-gutters answers">
           <p 
-            class="col-4 answer2"
+            class="col-4 answer2 color-white"
             v-for="word in gameAnswerWords" 
             :key="word.word"
           >
@@ -39,19 +42,18 @@
       v-if="selectedGame != 4"
     />
     <div v-if="selectedGame == 1">
-      <p> 번호 : {{this.gameUpDownNumber}}</p>
-      <p><span class="color-yellow">{{ loser.stream.connection.data.slice(15,-2) }}</span> 당첨!!! </p>
+      <p class="color-white"><span class="color-yellow">{{ loser.stream.connection.data.slice(15,-2) }}</span> 당첨!!! </p>
     </div>
     <div class="w-100" v-if="selectedGame == 2">
-      <p><span class="color-yellow">{{ loser.stream.connection.data.slice(15,-2).slice(0, 10) }}</span>님이 <u>꼴찌</u> 입니다!!!</p>
+      <p class="color-white"><span class="color-yellow">{{ loser.stream.connection.data.slice(15,-2).slice(0, 10) }}</span>님이 <u>꼴찌</u> 입니다!!!</p>
     </div>
     <div class="w-100 mt-auto d-flex row no-gutters" v-if="selectedGame == 3">
-      <p class="col-4"> <span class="color-gray">최다득표자 :</span> {{this.gameVoteData}} </p>
-      <p class="col-4"> <span class="color-gray">라이어 :</span> {{this.gameLiarData}} </p>
-      <p class="col-4"> <span class="color-gray">벌칙자 :</span> {{ loser.stream.connection.data.slice(15,-2).slice(0, 6) }} </p>
+      <p class="col-4 color-white"> <span class="color-gray">최다득표자 :</span> {{this.gameVoteData}} </p>
+      <p class="col-4 color-white"> <span class="color-gray">라이어 :</span> {{this.gameLiarData}} </p>
+      <p class="col-4 color-white"> <span class="color-gray">벌칙자 :</span> {{ loser.stream.connection.data.slice(15,-2).slice(0, 6) }} </p>
     </div>
     <div v-if="selectedGame == 4">
-      <p><span class="color-yellow">{{ loser.stream.connection.data.slice(15,-2) }}</span>님이 끝내 웃음을 참지 못했습니다.</p>
+      <p class="color-white"><span class="color-yellow">{{ loser.stream.connection.data.slice(15,-2) }}</span>님이 끝내 웃음을 참지 못했습니다.</p>
     </div>
     <div v-if="selectedGame == 5">
       <div class="w-100">