From 7feb9511dbe435ca0ee97c828125b2f0eb3ebc41 Mon Sep 17 00:00:00 2001
From: da-in <da-in@wavve.com>
Date: Wed, 3 Jan 2024 21:48:16 +0900
Subject: [PATCH] create game over

---
 src/pages/play/PlayPage.vue | 61 ++++++++++++++++++-------------------
 src/pages/play/setting.ts   | 24 +++++++--------
 src/style.css               |  9 +++++-
 3 files changed, 49 insertions(+), 45 deletions(-)

diff --git a/src/pages/play/PlayPage.vue b/src/pages/play/PlayPage.vue
index 6ebbd2a..baeadbe 100644
--- a/src/pages/play/PlayPage.vue
+++ b/src/pages/play/PlayPage.vue
@@ -1,23 +1,27 @@
 <template>
   <div class="absolute z-10">
-    <span>score: {{score}}</span>
-    <div class="bg-amber-300">Next</div>
+    <div class="text-4xl ml-4 my-4">score: {{score}}</div>
+    <next-block :next-index="1"/>
   </div>
   <div ref="canvas" class=""></div>
 </template>
 <script setup lang="ts">
 import {Engine, Render, Bodies, Composite, World, Runner, Events} from 'matter-js'
 import {onMounted, ref} from "vue";
-import {blocks} from "./setting.ts";
+import {createBlock} from "../../utils";
+import NextBlock from "./_components/NextBlock.vue";
 
 const score = ref(0)
+const isDropping = ref(false)
 
 const canvas = ref<HTMLElement>()
 const engine = Engine.create({gravity: {x:0, y:1}})
+const runner = Runner.create();
 
 onMounted(()=>{
   const width = window.innerWidth
   const height = window.innerHeight
+  //todo 화면 너비에 다른 블럭 사이즈 조절
   const render = Render.create({
     element: canvas.value,
     engine,
@@ -30,7 +34,7 @@ onMounted(()=>{
     }
   });
 
-  const ground = Bodies.rectangle(width/2, height-60, width, 120, { isStatic: true, render: {fillStyle: '#FFBF36'}});
+  const ground = Bodies.rectangle(width/2, height-60, width, 120, { isStatic: true, render: {fillStyle: '#FCBF31', lineWidth:4, strokeStyle:'#000000'}});
   const left = Bodies.rectangle(0, height/2, 1, height, {
     isStatic: true,
     render: {fillStyle: '#FFFFFF'}
@@ -39,47 +43,38 @@ onMounted(()=>{
     isStatic: true,
     render: {fillStyle: '#FFFFFF'}
   })
-  const line = Bodies.rectangle(width/2, 150, width, 2, {
+  const line = Bodies.rectangle(width/2, 150, width, 2,  {
     isStatic: true,
     isSensor: true,
-    render: {fillStyle: '#FFBF36'}
+    label: 'line',
+    render: {fillStyle: '#000000'}
   })
   Composite.add(engine.world, [line, ground, left, right]);
 
-  // run the renderer
   Render.run(render);
-
-  // create runner
-  const runner = Runner.create();
   Runner.run(runner, engine);
 
   Events.on(engine, 'collisionStart', (event) => {
     event.pairs.forEach((collision) => {
+      if (collision.bodyA.label === 'line' || collision.bodyB.label === 'line'){
+        if(isDropping.value){
+          return
+        }
+        alert('gameover')
+      }
       if (collision.bodyA.label !== collision.bodyB.label) {
         return
       }
       const index = Number(collision.bodyA.label)
-      const nextIndex = String(index + 1)
-
-      score.value = score.value + (index * 10)
+      score.value = score.value + (index * 2)
 
       // todo 최고 단계일 경우 처리
       if (index === 10) {
         return
       }
-
+      const newBlock = createBlock(index+1, collision.collision.supports[0].x, collision.collision.supports[0].y)
       World.remove(engine.world, [collision.bodyA, collision.bodyB])
-
-      const newCircle = Bodies.circle(
-        collision.collision.supports[0].x,
-        collision.collision.supports[0].y,
-        (index + 1) * 20,
-        {
-          label: nextIndex,
-        }
-      )
-
-      World.add(engine.world, newCircle)
+      World.add(engine.world, newBlock)
       }
     )
   })
@@ -90,18 +85,22 @@ const addBlock = (x: number) => {
   if(!index){
     return
   }
-  const block = blocks[index]
-  console.log(index)
-  const circle = Bodies.circle(x, 10, block.size/2, {
-    label: String(index),
-  })
-  World.add(engine.world, circle)
+  isDropping.value = true
+  const block = createBlock(index, x, 10)
+  setTimeout(()=>{isDropping.value=false}, 1000)
+  World.add(engine.world, block)
 }
 
 window.addEventListener('click', (event)=>{
+  if(isDropping.value){
+    return
+  }
   addBlock(event.clientX)
 })
 window.addEventListener('touchstart', (event)=>{
+  if(isDropping.value){
+    return
+  }
   addBlock(event.touches[0].clientX)
 })
 
diff --git a/src/pages/play/setting.ts b/src/pages/play/setting.ts
index d4fa246..1845275 100644
--- a/src/pages/play/setting.ts
+++ b/src/pages/play/setting.ts
@@ -1,18 +1,16 @@
 type Block = {
     size: number;
+    color: string;
 };
-
-// const score = [3, 5, 7, 10, 15, 20, 25, 30, 40, 50, 100]
-
 export const blocks: { [key: number]: Block } = {
-    1: { size: 75 },
-    2: { size: 98 },
-    3: { size: 137 },
-    4: { size: 180 },
-    5: { size: 200 },
-    6: { size: 240 },
-    7: { size: 280 },
-    8: { size: 320 },
-    9: { size: 320 },
-    10: { size: 400 },
+    1: { size: 26, color: '#E573D2' },
+    2: { size: 40, color: '#F69B30' },
+    3: { size: 54, color: '#41B5BD' },
+    4: { size: 90, color: '#6079FF' },
+    5: { size: 100, color: '#FEDC2D' },
+    6: { size: 120, color: '#FD9D0E' },
+    7: { size: 140, color: '#CCF576' },
+    8: { size: 160, color: '#FC6B6B' },
+    9: { size: 160, color: '#BB4BFF' },
+    10: { size: 200, color: '#3BE42D' },
 };
diff --git a/src/style.css b/src/style.css
index b6b313b..ca1febc 100644
--- a/src/style.css
+++ b/src/style.css
@@ -2,8 +2,15 @@
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+  font-family: 'GangwonEduHyeonokT_OTFMediumA';
+  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEduHyeonokT_OTFMediumA.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: GangwonEduHyeonokT_OTFMediumA, Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;