game over modal

src/pages/play/PlayPage.vue

@@ -4,16 +4,19 @@
     <next-block :next-index="nextBlockRef"/>
   </div>
   <div ref="canvas" class=""></div>
+  <game-over v-if="gameOverRef" :score="scoreRef" @replay="onReplay"/>
 </template>
 <script setup lang="ts">
 import {Engine, Render, Bodies, Composite, World, Runner, Events} from 'matter-js'
 import {onMounted, ref} from "vue";
 import {createBlock} from "../../utils";
 import NextBlock from "./_components/NextBlock.vue";
+import GameOver from "./_components/GameOver.vue";
 
 const scoreRef = ref(0)
 const isDroppingRef = ref(false)
 const nextBlockRef = ref(0)
+const gameOverRef = ref(false)
 
 const canvas = ref<HTMLElement>()
 const engine = Engine.create({gravity: {x:0, y:1}})
@@ -38,7 +41,7 @@ onMounted(()=>{
     }
   });
 
-  const ground = Bodies.rectangle(width/2, height-60, width, 120, { isStatic: true, render: {fillStyle: '#FCBF31', lineWidth:4, strokeStyle:'#000000'}});
+  const ground = Bodies.rectangle(width/2, height-48, width, 96, { isStatic: true, render: {fillStyle: '#FCBF31', lineWidth:4, strokeStyle:'#000000'}});
   const left = Bodies.rectangle(0, height/2, 1, height, {
     isStatic: true,
     render: {fillStyle: '#FFFFFF'}
@@ -64,7 +67,7 @@ onMounted(()=>{
         if(isDroppingRef.value){
           return
         }
-        alert('gameover')
+        gameOverRef.value=true
       }
       if (collision.bodyA.label !== collision.bodyB.label) {
         return
@@ -85,7 +88,6 @@ onMounted(()=>{
 })
 
 const addBlock = (x: number) => {
-  console.log(nextBlockRef.value)
   if(!nextBlockRef.value){
     return
   }
@@ -100,6 +102,11 @@ const setNextBlock = () => {
   nextBlockRef.value = Math.floor(Math.random() * 5) + 1 // 1 ~ 5
 }
 
+const onReplay = () => {
+  // todo : 새로고침 성능 확인
+  location.reload()
+}
+
 window.addEventListener('click', (event)=>{
   if(isDroppingRef.value){
     return

src/pages/play/_components/GameOver.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="fixed inset-0 flex items-center justify-center z-50">
+    <div class="flex flex-col gap-10 w-[300px] h-[675px] justify-center items-center bg-white text-4xl rounded-3xl border-2 border-black">
+      <img :src="endText" alt="끗" width="75"/>
+      <img :src="endImage" alt="덕 같이 멸망" width="253"/>
+      <span>score: {{ score }}</span>
+      <button @click="$emit('replay')" class="bg-[#FCBF31] rounded-full border-2 border-black px-6">또 해야되네</button>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import endImage from '../../../assets/end-image.png'
+import endText from '../../../assets/end-text.png'
+
+defineProps({
+  score: {
+    type: Number,
+    default: 0
+  }
+})
+</script>

src/pages/play/_components/NextBlock.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center bg-[#FCBF31] rounded-full w-36 pl-10 -ml-6 border-2 border-black">
+  <div class="flex justify-center items-center bg-[#FCBF31] rounded-r-full w-28 border-2 border-l-0 border-black">
       <span class="text-4xl mr-3" >Next</span>
       <div :style="{background: block?.color}" class="w-[26px] h-[26px] rounded-full border-2 border-black"></div>
   </div>