pair matching game with straight line connections

src/components/InteractiveObjects/PairMatchingGame.js

@@ -1,4 +1,7 @@
-import { BoxGeometry, Mesh, MeshStandardMaterial, Group } from 'three';
+import { BoxGeometry, Mesh, MeshStandardMaterial, Group, Vector3 } from 'three';
+import { LineGeometry } from 'three/examples/jsm/Addons.js';
+import { LineMaterial } from 'three/examples/jsm/Addons.js';
+import { Line2 } from 'three/examples/jsm/Addons.js';
 import { centerOrigin } from '@/lib/MeshUtils';
 import { EventManager } from '@/lib/EventManager';
 import Utils from '@/lib/Utils';
@@ -18,6 +21,7 @@ class PairMatchingGame extends EventManager {
 
             let material = new MeshStandardMaterial({
                 map: await engine.loadTexture(data.$go.asset.name),
+                alphaTest: 0.5,
                 // roughness:1, metalness:0,
                 // normalMap: await engine.loadTexture('NormalMap.png', '/static/textures/'),
             });
@@ -45,16 +49,48 @@ class PairMatchingGame extends EventManager {
                     }
                     let mesh = new Mesh(b[xi], material);
                     mesh.position.set(xi * dx, o[xi][i] * dy, 0);
+                    mesh.userData.gd = {
+                        pair: xi,
+                        id: i
+                    }
                     container.add(mesh);
                 }
             }
 
-            var check = () => {
+            let clicked, done = [];
 
-            };
+            let connect = (a, b)=>{
+                let g = new LineGeometry();
+                g.setFromPoints([
+                    a.position,
+                    new Vector3().copy(a.position).lerpVectors(a.position, b.position, 0.5).multiplyScalar(1.1),
+                    b.position
+                ]);
+                let m = new Line2(g, new LineMaterial( {
+					color: 0x00FF00,
+					linewidth: 5, // in world units with size attenuation, pixels otherwise
+					dashed: false,
+					alphaToCoverage: true,
+				} ));
+                container.add(m)
+            }
 
             let clickFn = (i) => {
-                
+                let oc = clicked;
+                clicked = i.object;
+                if (done.includes(clicked.userData.gd.id)) return;
+                if (oc && oc.userData.gd.pair != clicked.userData.gd.pair){
+                    oc.scale.setScalar(1);
+                    clicked.scale.setScalar(1);
+                    if (oc.userData.gd.id === clicked.userData.gd.id){
+                        connect(oc, clicked);
+                        done.push(oc.userData.gd.id)
+                    }else{
+                        clicked = null;
+                    }
+                }else{
+                    clicked.scale.setScalar(1.2);
+                }
             };
 
             container.children.forEach(c => {