PairMatchingGame initial commit

src/components/InteractiveObjects/InteractiveObject.js

@@ -12,6 +12,7 @@ import { PuzzleGame2 } from "./PuzzleGame2";
 // import { Game3 } from "./games/Game3";
 import { PuzzleGame4 } from "./PuzzleGame4";
 import { ClassicPuzzle } from "./ClassicPuzzle";
+import { PairMatchingGame } from "./PairMatchingGame";
 // import { Game5 } from "./games/Game5";
 // import { Game6 } from "./games/Game6";
 import { MazeQuizGame } from "./MazeQuizGame/MazeQuizGame";
@@ -22,7 +23,7 @@ import { GameEngine  } from "@/lib/GameEngine";
 
 const InteractiveObjectsImports = { 
     GenericObject, CharacterObject, TextObject, ImageObject, GltfObject, VideoPlayer, Particles, SceneSwitcher,
-    PuzzleGame1, PuzzleGame2, PuzzleGame4, MazeQuizGame, ClassicPuzzle
+    PuzzleGame1, PuzzleGame2, PuzzleGame4, MazeQuizGame, ClassicPuzzle, PairMatchingGame
 };
 
 class InteractiveObject extends EventManager{
@@ -50,6 +51,7 @@ class InteractiveObject extends EventManager{
                 case 'PuzzleGame2':
                 case 'MazeQuizGame':
                 case 'ClassicPuzzle':
+                case 'PairMatchingGame':
                 case 'Particles':
                 case 'SceneSwitcher':
                     this.io = await new InteractiveObjectsImports[obj.type](engine, obj);
@@ -161,6 +163,8 @@ const InteractiveObjectTypes = [
         id: 'MazeQuizGame', name: 'Maze Quiz Game'
     },{
         id: 'ClassicPuzzle', name: 'Classic Puzzle Game'
+    },{
+        id: 'PairMatchingGame', name: 'Pair Matching Game'
     },{
         id: 'VideoPlayer', name: 'Video Player'
     },{

src/components/InteractiveObjects/PairMatchingGame.js

@@ -0,0 +1,75 @@
+import { BoxGeometry, Mesh, MeshStandardMaterial, Group } from 'three';
+import { centerOrigin } from '@/lib/MeshUtils';
+import { EventManager } from '@/lib/EventManager';
+import Utils from '@/lib/Utils';
+
+class PairMatchingGame extends EventManager {
+    emits = ['finish']
+    constructor(engine, data) {
+        super();
+        return new Promise(async (resolve, reject)=>{
+            let container = new Group();
+            let c = data.c, orderArray = Array.from({length:c}, (_, i)=>i);
+            let o = [ Utils.shuffleArray(orderArray), Utils.shuffleArray(orderArray) ]
+            const aq = engine.motionQueue;
+            let dx = 3, dy = 1.2;
+
+            let bm = new BoxGeometry(1, 1, 1);
+
+            let material = new MeshStandardMaterial({
+                map: await engine.loadTexture(data.$go.asset.name),
+                // roughness:1, metalness:0,
+                // normalMap: await engine.loadTexture('NormalMap.png', '/static/textures/'),
+            });
+            //material.map.encoding = sRGBEncoding;
+
+            for (let i = 0; i < c; i++) {
+                let b = [], uv = [], p = [];
+                for (let xi = 0; xi < 2; xi++){
+                    b[xi] = bm.clone();
+                    uv[xi] = b[xi].getAttribute('uv');
+                    let s = [xi/2, i / c];
+                    for (let i = 0; i < 6; i++) {
+                        //top left
+                        uv[xi].array[8 * i] = s[0];
+                        uv[xi].array[8 * i + 1] = s[1] + 1 / c;
+                        //top right
+                        uv[xi].array[8 * i + 2] = s[0] + 1 / 2;
+                        uv[xi].array[8 * i + 3] = s[1] + 1 / c;
+                        //bottom left
+                        uv[xi].array[8 * i + 4] = s[0];
+                        uv[xi].array[8 * i + 5] = s[1];
+                        //bottom right
+                        uv[xi].array[8 * i + 6] = s[0] + 1 / 2;
+                        uv[xi].array[8 * i + 7] = s[1];
+                    }
+                    let mesh = new Mesh(b[xi], material);
+                    mesh.position.set(xi * dx, o[xi][i] * dy, 0);
+                    container.add(mesh);
+                }
+            }
+
+            var check = () => {
+                
+            };
+
+            let clickFn = (i) => {
+                
+            };
+
+            container.children.forEach(c => {
+                engine.clickable.add(c, clickFn);
+            });
+
+            this.update = () => {
+                
+            };
+
+            this.object = centerOrigin(container);
+
+            resolve(this);
+        })
+    }
+}
+
+export { PairMatchingGame }

src/components/InteractiveObjects/PairMatchingGame.vue

@@ -0,0 +1,36 @@
+<template>
+    <div v-if="modelValue.go">
+        <v-number-input density="compact" label="Number of elements" v-model="modelValue.c"></v-number-input>
+        <v-img :src="`/asset/thumb/${modelValue.go}.webp`" />
+        <div class="text-caption text-center">{{ modelValue.title }}</div>
+    </div>
+    <asset-selector @select="assignTexture" :type="['Texture']">
+        <template v-slot:activator="props">
+            <v-btn v-bind="props" prepend-icon="mdi-video-box" color="deep-orange-darken-4" block>Choose image object</v-btn>
+        </template>
+    </asset-selector>
+</template>
+
+<script>
+
+export default {
+    data(){
+        return {
+            active: false
+        }
+    },
+    mounted(){
+        this.active = true;
+    },
+    props:{
+        modelValue: Object
+    },
+    methods:{
+        assignTexture(e){
+            this.modelValue.go = e.id;
+            this.modelValue.title = e.name
+            this.modelValue.c = 4;
+        }
+    }
+}
+</script>

src/components/SceneDesigner/GameObject.vue

@@ -51,6 +51,7 @@ import PuzzleGame1 from '../InteractiveObjects/PuzzleGame1.vue';
 import PuzzleGame2 from '../InteractiveObjects/PuzzleGame2.vue';
 import MazeQuizGame from '../InteractiveObjects/MazeQuizGame/MazeQuizGame.vue';
 import ClassicPuzzle from '../InteractiveObjects/ClassicPuzzle.vue';
+import PairMatchingGame from '../InteractiveObjects/PairMatchingGame.vue';
 import Particles from '../InteractiveObjects/Particles.vue';
 import GenericObject from '../InteractiveObjects/GenericObject.vue';
 import CharacterObject from '../InteractiveObjects/CharacterObject.vue';
@@ -61,7 +62,7 @@ import { InteractiveObjectTypes } from '../InteractiveObjects/InteractiveObject'
 
 const components = { 
     SvgIcon, OffsetLine, GenericObject, CharacterObject, VideoPlayer, SceneSwitcher,
-    PuzzleGame1, PuzzleGame2, MazeQuizGame, Particles, ClassicPuzzle
+    PuzzleGame1, PuzzleGame2, MazeQuizGame, Particles, ClassicPuzzle, PairMatchingGame
 };
 
 export default {