From 926d1c93dea6d8b6d2c38e92b276586436561e18 Mon Sep 17 00:00:00 2001
From: s <s.looi2@outlook.com>
Date: Wed, 25 Sep 2024 23:30:10 +0900
Subject: [PATCH] :art: change m4 method names and organized code

---
 src/App.tsx | 22 ++++++++++++----------
 src/m4.ts   |  7 ++++++-
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index fcf2b00..2f1e21c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,7 @@
 import './App.css'
 import { useEffect, useRef, useState } from 'react'
 import { createWebglRenderer } from './webgl'
-
+import { UserInputHandler } from './UserInputHandler'
 
 // const renderer = createWebglRenderer()
 
@@ -14,23 +14,23 @@ function App() {
   const [renderer, setRenderer] = useState<ReturnType<typeof createWebglRenderer> | null>(null)
   const canvasRef = useRef<HTMLCanvasElement>(null)
 
+  const userInputHandler = new UserInputHandler()
+  userInputHandler.on("w", () => { console.log("asdasd") })
   useEffect(() => {
     if (canvasRef.current) {
       const newRenderer = createWebglRenderer(canvasRef.current)
       setTimeout(() => setRenderer(newRenderer), 200)
     }
   }, [])
+
+  const a = async (e: MouseEvent) => await canvasRef.current?.requestPointerLock()
+  const b = (e: MouseEvent) => {
+    console.log("e", e.movementX, e.movementY)
+    setRotation(val => ({ x: val.x - e.movementY, y: val.y - e.movementX, z: val.z }))
+  }
+
   useEffect(() => {
-    const a = async (e: MouseEvent) => {
-      console.log("e", e)
-      await canvasRef.current?.requestPointerLock()
-    };
     canvasRef.current?.addEventListener("click", a);
-
-    const b: (this: Document, ev: MouseEvent) => any = e => {
-      console.log("e", e.movementX, e.movementY)
-      setRotation(val => { return { x: val.x - e.movementY, y: val.y - e.movementX, z: val.z } })
-    }
     document.addEventListener("mousemove", b);
 
     return () => {
@@ -38,6 +38,8 @@ function App() {
       document.removeEventListener("mousemove", b)
     }
   }, [canvasRef])
+
+
   useEffect(() => {
     if (!renderer) return
     console.log("scale, translation, rotation, originTranslation", scale, translation, rotation, originTranslation)
diff --git a/src/m4.ts b/src/m4.ts
index 78dd925..efd6e8d 100644
--- a/src/m4.ts
+++ b/src/m4.ts
@@ -1,6 +1,11 @@
 
 /* HELPER FUNCTIONS */
 const m4 = {
+	scale: (m4x4: Float32Array, sx: number, sy: number, sz: number) => m4x4 = m4.dot(m4.scaling(sx, sy, sz), m4x4),
+	translate: (m4x4: Float32Array, tx: number, ty: number, tz: number) => m4x4 = m4.dot(m4.translation(tx, ty, tz), m4x4),
+	rotateX: (m4x4: Float32Array, degreeX: number) => m4x4 = m4.dot(m4.rotationX(degreeX), m4x4),
+	rotateY: (m4x4: Float32Array, degreeY: number) => m4x4 = m4.dot(m4.rotationY(degreeY), m4x4),
+	rotateZ: (m4x4: Float32Array, degreeZ: number) => m4x4 = m4.dot(m4.rotationZ(degreeZ), m4x4),
 	identity: () => {
 		return new Float32Array([
 			1, 0, 0, 0,
@@ -9,7 +14,7 @@ const m4 = {
 			0, 0, 0, 1
 		])
 	},
-	scale: (scaleX: number, scaleY: number, scaleZ: number) => {
+	scaling: (scaleX: number, scaleY: number, scaleZ: number) => {
 		return new Float32Array([
 			scaleX, 0, 0, 0,
 			0, scaleY, 0, 0,