add block image

package.json

@@ -16,6 +16,7 @@
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
+    "@types/node": "^20.11.5",
     "@typescript-eslint/eslint-plugin": "^6.15.0",
     "@typescript-eslint/parser": "^6.15.0",
     "@vitejs/plugin-vue": "^4.5.2",

src/pages/play/_components/NextBlock.vue

@@ -5,17 +5,17 @@
   </div>
 </template>
 <script setup lang="ts">
-import {computed} from "vue";
-import n1 from '/src/assets/next/n1.png'
-import n2 from '/src/assets/next/n2.png'
-import n3 from '/src/assets/next/n3.png'
-import n4 from '/src/assets/next/n4.png'
-import n5 from '/src/assets/next/n5.png'
-import n6 from '/src/assets/next/n6.png'
-import n7 from '/src/assets/next/n7.png'
-import n8 from '/src/assets/next/n8.png'
-import n9 from '/src/assets/next/n9.png'
-import n10 from '/src/assets/next/n10.png'
+import {computed} from "vue"
+import n1 from '@/assets/next/n1.png'
+import n2 from '@/assets/next/n2.png'
+import n3 from '@/assets/next/n3.png'
+import n4 from '@/assets/next/n4.png'
+import n5 from '@/assets/next/n5.png'
+import n6 from '@/assets/next/n6.png'
+import n7 from '@/assets/next/n7.png'
+import n8 from '@/assets/next/n8.png'
+import n9 from '@/assets/next/n9.png'
+import n10 from '@/assets/next/n10.png'
 
 const props = defineProps({
   nextIndex: {

src/pages/play/setting.ts

@@ -1,3 +1,14 @@
+import b1 from '../../assets/block/1.png'
+import b2 from '../../assets/block/2.png'
+import b3 from '../../assets/block/3.png'
+import b4 from '../../assets/block/4.png'
+import b5 from '../../assets/block/5.png'
+import b6 from '../../assets/block/6.png'
+import b7 from '../../assets/block/7.png'
+import b8 from '../../assets/block/8.png'
+import b9 from '../../assets/block/9.png'
+import b10 from '../../assets/block/10.png'
+
 type Block = {
     size: number;
     color: string;
@@ -19,3 +30,16 @@ const blocks: { [key: number]: Block } = {
 };
 
 export {lineColor, blocks}
+
+export const Background: {[key: number]: any} = {
+    1: b1,
+    2: b2,
+    3: b3,
+    4: b4,
+    5: b5,
+    6: b6,
+    7: b7,
+    8: b8,
+    9: b9,
+    10: b10
+}

src/types/images.d.ts

@@ -0,0 +1,4 @@
+declare module '*.png' {
+    const value: any;
+    export default value;
+}

src/utils/create-block.ts

@@ -1,15 +1,21 @@
-import {Bodies} from "matter-js";
-import {blocks, lineColor} from "../pages/play/setting.ts";
+import {Bodies} from "matter-js"
+import {Background, blocks, lineColor} from "../pages/play/setting.ts"
 
 export const createBlock = (index: number, x:number, y:number, isStatic:boolean=false) => {
     const block = blocks[index]
+    const background = Background[index]
     const circle = Bodies.circle(x, y, block.size/2, {
         isStatic,
         label: String(index),
         render: {
             fillStyle: block.color,
             lineWidth: 2.5,
             strokeStyle: lineColor,
+            sprite: {
+                texture: background,
+                xScale: 1/3,
+                yScale: 1/3,
+            }
         }
     })
     return circle

tsconfig.json

@@ -18,7 +18,8 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "typeRoots": ["/src/types/images.d.ts"],
   },
   "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
   "references": [{ "path": "./tsconfig.node.json" }]

vite.config.ts

@@ -1,8 +1,12 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
   base: '/watermelon',
+  resolve: {
+    alias: [{ find: "@", replacement: resolve(__dirname, "./src") }]
+  }
 })