add layout

src/App.vue

@@ -1,9 +1,10 @@
 <template>
-  <router-view />
+    <router-view />
 </template>
 <script setup lang="ts">
 import {RouterView} from 'vue-router'
-import {onMounted} from "vue";
+import {onMounted} from 'vue'
+
 onMounted(()=>{
   window.scrollTo(0, 1)
 })

src/components/Layout.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="my-0 mx-auto w-full min-[500px]:w-[500px] " >
+    <slot/>
+  </div>
+</template>

src/pages/play/PlayPage.vue

@@ -1,27 +1,32 @@
 <template>
-  <div class="absolute z-10">
-    <div class="text-4xl ml-4 my-4">timer: {{count}}</div>
-    <div class="text-4xl ml-4 my-4">score: {{scoreRef}}</div>
-    <next-block :next-index="nextBlockRef"/>
-  </div>
-  <img class="absolute top-0 left-0 w-full h-auto -z-10" :src="grassPattern" alt="grass" />
-  <canvas ref="canvas" />
-  <ground :height="groundHeight"/>
-  <game-over v-if="gameOverRef" :score="scoreRef" @replay="onReplay"/>
+  <layout ref="layoutRef">
+    <div class="absolute mt-7 w-full z-10 px-4 flex justify-between">
+      <!-- <div class="text-4xl ml-4 my-4">timer: {{count}}</div>-->
+      <next-block :next-index="nextBlockRef"/>
+      <score :score="scoreRef"/>
+    </div>
+    <img class="absolute top-0 left-0 w-full h-auto -z-10" :src="grassPattern" alt="grass" />
+    <canvas ref="canvas" class="border-x-2 border-[#489B6D]" />
+    <ground :height="groundHeight"/>
+    <game-over v-if="gameOverRef" :score="scoreRef" @replay="onReplay"/>
+  </layout>
 </template>
 <script setup lang="ts">
   import {Engine, Render, World, Runner, Events, Body} from 'matter-js'
-  import {computed, onMounted, ref, watch} from "vue";
+  import {ComponentPublicInstance, computed, onMounted, ref, watch} from "vue";
   import {createBlock} from "../../utils";
   import NextBlock from "./_components/NextBlock.vue";
   import GameOver from "./_components/GameOver.vue";
   import Ground from "./_components/Ground.vue";
-  import {getDynamicCanvasSize} from "../../utils/get-dynamic-canvas-size.ts";
+  import {getDynamicCanvasHeight} from "../../utils/get-dynamic-canvas-size.ts";
   import ground from "./_components/Ground.vue";
   import grassPattern from '../../assets/grass-pattern.svg'
   import {useTimer} from "../../hooks/use-timer.ts";
   import {setField} from "../../utils/set-field.ts";
+  import Layout from "../../components/Layout.vue";
+  import Score from "./_components/Score.vue";
 
+  const layoutRef = ref<ComponentPublicInstance>()
   const scoreRef = ref(0)
   const isDroppingRef = ref(false)
   const nextBlockRef = ref(0)
@@ -52,7 +57,8 @@
   // todo matter.js 하위 브라우저 대응 없을 시 canvas.getContext 함수 유무로 처리
 
   onMounted(()=>{
-    const {width, height} = getDynamicCanvasSize()
+    const width = layoutRef.value?.$el.clientWidth
+    const height = getDynamicCanvasHeight(width)
     widthRef.value = width
     heightRef.value = height
 
@@ -75,6 +81,22 @@
     setField(engine.world, width, height)
     Render.run(render);
     Runner.run(runner, engine);
+
+    layoutRef.value?.$el.addEventListener('mousemove', (event: MouseEvent)=>{
+      onDrag(event.offsetX)
+    })
+
+    layoutRef.value?.$el.addEventListener('mouseup', ()=>{
+      dropBlock()
+    })
+
+    layoutRef.value?.$el.addEventListener('touchmove', (event: TouchEvent)=>{
+      onDrag(event.touches[0].clientX)
+    })
+
+    layoutRef.value?.$el.addEventListener('touchend', ()=>{
+      dropBlock()
+    })
   })
 
   Events.on(engine, 'collisionStart', (event) => {
@@ -110,56 +132,43 @@
     })
   })
 
-const addBlock = () => {
-  currentBlockRef.value = createBlock(nextBlockRef.value, widthRef.value/2, 80, true)
-  World.add(engine.world, currentBlockRef.value)
-  setNextBlock()
-}
 
-const dropBlock = () => {
-  if(!currentBlockRef.value || isDroppingRef.value){
-    return
+  const addBlock = () => {
+    currentBlockRef.value = createBlock(nextBlockRef.value, widthRef.value/2, 80, true)
+    World.add(engine.world, currentBlockRef.value)
+    setNextBlock()
   }
-  Body.setStatic(currentBlockRef.value, false)
-  setTimeout(()=>{
-    addBlock()
-  }, 1000)
-}
-
-const setNextBlock = () => {
-  nextBlockRef.value = Math.floor(Math.random() * 5) + 1 // 1 ~ 5
-}
 
-const onDrag = (x: number) => {
-  if(isDroppingRef.value || !currentBlockRef.value){
-    return
+  const dropBlock = () => {
+    if(!currentBlockRef.value || isDroppingRef.value){
+      return
+    }
+    Body.setStatic(currentBlockRef.value, false)
+    setTimeout(()=>{
+      addBlock()
+    }, 1000)
   }
-  Body.setPosition(currentBlockRef.value, { x, y: 80 })
-}
 
-const onReplay = () => {
-  // todo : 새로고침 성능 확인
-  location.reload()
-}
+  const setNextBlock = () => {
+    nextBlockRef.value = Math.floor(Math.random() * 5) + 1 // 1 ~ 5
+  }
 
-const endGame = () => {
-  gameOverRef.value=true
-}
+  const onDrag = (x: number) => {
+    if(isDroppingRef.value || !currentBlockRef.value){
+      return
+    }
+    Body.setPosition(currentBlockRef.value, { x, y: 80 })
+  }
 
-window.addEventListener('mousemove', (event)=>{
-  onDrag(event.clientX)
-})
+  const onReplay = () => {
+    // todo : 새로고침 성능 확인
+    location.reload()
+  }
 
-window.addEventListener('mouseup', ()=>{
-  dropBlock()
-})
+  const endGame = () => {
+    gameOverRef.value=true
+  }
 
-window.addEventListener('touchmove', (event)=>{
-  onDrag(event.touches[0].clientX)
-})
 
-window.addEventListener('touchend', ()=>{
-  dropBlock()
-})
 
 </script>

src/pages/play/_components/NextBlock.vue

@@ -1,6 +1,6 @@
 <template>
-  <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 class="flex justify-center items-center bg-[#FCBF31] rounded-[10px] w-28 border-2 border-black">
+      <span class="text-[18px] mr-3 font-bold" >NEXT</span>
       <div :style="{background: block?.color}" class="w-[26px] h-[26px] rounded-full border-2 border-black"></div>
   </div>
 </template>

src/pages/play/_components/Score.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="text-[30px] font-black text-[#FEBE31] text-shadow">{{score}}</div>
+</template>
+<script setup lang="ts">
+defineProps({
+  score: {
+    type:Number,
+    default: 0
+  }
+})
+</script>
+<style scoped>
+.text-shadow {
+  text-shadow: 2px 0 #1E1E1E, -2px 0 #1E1E1E, 0 2px #1E1E1E, 0 -2px #1E1E1E, 1px 1px #1E1E1E, -1px -1px #1E1E1E, 1px -1px #1E1E1E, -1px 1px #1E1E1E;
+}
+</style>

src/style.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -10,7 +12,7 @@
 }
 
 :root {
-  font-family: GangwonEduHyeonokT_OTFMediumA, Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: 'Noto Sans KR', Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;

src/utils/get-dynamic-canvas-size.ts

@@ -1,7 +1,5 @@
 const RATIO = 584/360
 
-export const getDynamicCanvasSize = () => {
-    const width = window.innerWidth
-    const height = width * RATIO
-    return {width, height}
+export const getDynamicCanvasHeight = (width: number) => {
+    return width * RATIO
 }