Feat gameend

src/components/game/GameEnd.vue

@@ -0,0 +1,103 @@
+<template>
+  <main>
+    <div id="popup-area">
+        <div id="header">
+      <img src="../../../public/images/rank/winner.gif" id="winner-icon" alt="win-icon" />
+      WINNER
+      <img src="../../../public/images/rank/winner.gif" id="winner-icon" alt="win-icon" />
+    </div>
+    <div id="winner-img">
+      <img
+        :src="'../../../public/images/icon/' + this.winNo + '.png'"
+        id="win-profile-img"
+        alt="win-member"
+      />
+    </div>
+    <div id="win-content">
+        <div id="winner-name">{{ this.winName }}</div>
+    <div id="time">{{ this.winTime }}</div>
+    </div>
+    <div id="button-div">
+      <button id="close-button" @click="$emit('close-popup')">닫기</button>
+    </div>
+    </div>
+</main>
+</template>
+<script>
+export default {
+  name: 'GameEnd',
+  data() {
+    return {
+      winNo: '0',
+      winName: '닉네임1212',
+      winTime: '21:25'
+    }
+  }
+}
+</script>
+<style scoped>
+
+#header,
+#winner-name,
+#time {
+  color: var(--white-color);
+}
+
+#time {
+    color: var(--main1-color);
+    font-size: 18px;
+}
+
+#header {
+  margin-top: 20px;
+  text-align: center;
+  font-size: 25px;
+}
+
+#winner-img {
+  margin-top: 40px;
+  text-align: center;
+}
+
+#win-profile-img {
+  width: 200px;
+  height: 200px;
+}
+
+#winner-icon {
+  width: 50px;
+  height: 50px;
+}
+
+#win-content {
+    text-align: center;
+    margin-top: 30px;
+    font-size: 20px;
+}
+
+#button-div {
+    text-align: center;
+    margin-top: 40px;
+    margin-bottom: 20px;
+}
+
+#close-button {
+    width: 120px;
+    height: 50px;
+    font-size: 18px;
+    background-color: var(--main2-color);
+    color: var(--white-color);
+    border: 1px solid var(--main2-color);
+    border-radius: 10px;
+
+    &:hover {
+        background-color: var(--main2-hover-color);
+        border-color: var(--main2-hover-color);
+    }
+}
+
+#popup-area {
+    border: 10px dotted var(--white-color);
+    padding: 5px;
+}
+</style>

src/views/quiz/AddQuiz.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="layout">
+    <div v-if="this.gameEnd" id="back-off" @click="backOff"></div>
+    <GameEnd id="end-popup" v-if="this.gameEnd" @close-popup="backOff"></GameEnd>
     <header>
       <div id="popup" class="popup">
         <div class="popup-content"></div>
@@ -158,10 +160,12 @@
   </div>
 </template>
 <script>
-// import axios from 'axios'
-import {apiClient} from '@/axios-interceptor'
+import axios from 'axios'
+import GameEnd from '../../components/game/GameEnd.vue'
+
 export default {
   name: 'addQuiz',
+  components: {GameEnd},
   data() {
     return {
       title: '',
@@ -174,7 +178,8 @@ export default {
       popup: false,
       inputValueList: [],
       outputValueList: [],
-      testcaseWarning: false
+      testcaseWarning: false,
+      gameEnd: false
     }
   },
   methods: {
@@ -402,53 +407,8 @@ export default {
       this.consoleCode = html
     },
     addQuizBtClick() {
-      let data = {
-        quizTitle: '방금올린걸수정해볼게요',
-        quizContent: '수정테스트랍니당',
-        quizInput: '인풋이랍니당',
-        quizOutput: '아웃풋이다/!?ㅋ',
-        outputType: 'Double',
-        memberNo: 1,
-        testcaseDTOList: [
-          {
-            testcaseOutput: '1임!',
-            testcaseInputDTOList: [
-              {
-                inputVar: 'String[] s1',
-                testcaseInput: '"수정임", "하기싫어", "흑흑", "살려줘", "제발"'
-              },
-              {
-                inputVar: 'Double',
-                testcaseInput: 3.889
-              }
-            ]
-          },
-          {
-            testcaseOutput: '2번째아!',
-            testcaseInputDTOList: [
-              {
-                inputVar: 'String[] s1',
-                testcaseInput: '"수정임", "하기싫어", "흑흑", "살려줘", "제발"'
-              },
-              {
-                inputVar: 'Double',
-                testcaseInput: 3.889
-              }
-            ]
-          }
-        ]
-      }
 
-      apiClient
-        .post('http://192.168.1.67:8080/codesparring/quiz', JSON.stringify(data), {
-          headers: {
-            'Content-Type': 'application/json'
-          }
-        })
-        .then((res) => {
-
-          location.href = '/'
-        })
+      this.gameEnd=true
     },
     onTcHelp() {
       if (this.testcaseWarning) {
@@ -509,7 +469,11 @@ export default {
         return
       }
       this.testcaseWarning = false
-    }
+    },
+    backOff() {
+      this.gameEnd=false
+      document.body.style.overflow = 'auto'
+    },
   }
 }
 </script>
@@ -947,4 +911,31 @@ div.addQuizBox > div.quizInfo > div.addOutput > table.outputTable > tr > td > in
   padding-right: 10px;
   bottom: 5%;
 }
+
+#end-popup {
+  padding: 10px;
+  position: absolute;
+  background-color: var(--main5-color);
+  border: 8px solid var(--main5-color);
+  border-radius: 10px;
+  width: 400px;
+  height: 570px;
+  margin-top: 80px;
+  margin-left: 430px;
+  z-index: 2;
+  overflow: hidden;
+}
+
+#back-off {
+  width: 100%;
+  height: 100%;
+
+  display: fixed;
+  position: fixed;
+  top: 0%;
+  left: 0%;
+  z-index: 1;
+
+  background-color: rgba(0, 0, 0, 0.5);
+}
 </style>