Mouse Partially Implemented

OttCS · OttCS · commit e52ae541d4ad · 2022-05-25T01:07:55.000-04:00
diff --git a/dev/_misc/style.css b/dev/_misc/style.css
@@ -0,0 +1,30 @@
+* {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    caret-color: transparent;
+    image-rendering: crisp-edges;
+}
+
+html {
+    background-color: #000000;
+}
+
+body {
+    overflow: hidden;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-content: space-around;
+    align-items: center;
+}
+
+#PIXI {
+    display: block;
+    margin: 0 auto;
+    width: 100vw;
+    height: calc(100vw * 9 / 16);
+    max-height: 100vh;
+    max-width: calc(100vh * 16 / 9);
+}
diff --git a/dev/flappy-clone/index.html b/dev/flappy-clone/index.html
@@ -3,34 +3,7 @@
 
 <head>
     <title>Flappy Sprint</title>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            overflow: hidden;
-            caret-color: transparent;
-            image-rendering: crisp-edges;
-        }
-
-        html {
-            background-color: "#000";
-        }
-
-        body {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
-
-        #PIXI {
-            display: block;
-            margin: 0 auto;
-            width: 100vw;
-            height: calc(100vw * 9 / 16);
-            max-height: 100vh;
-            max-width: calc(100vh * 16 / 9);
-        }
-    </style>
+    <link rel="stylesheet" type="text/css" href="../_misc/style.css">
     <script src="https://pixijs.download/release/pixi.js"></script> <!-- This'll let me keep Zephyr VERY up to date -->
     <script src="../zepyhr.js"></script>
 </head>
diff --git a/dev/mouse-tracking/app.js b/dev/mouse-tracking/app.js
@@ -0,0 +1,25 @@
+const app = new PIXI.Application({ width: 480, height: 270, backgroundColor: 0xffffff, antialias: false});
+app.view.id = "PIXI";
+document.body.appendChild(app.view);
+
+const sleepTex = PIXI.Texture.from('assets/sleepy.png');
+const rageTex = PIXI.Texture.from('assets/rage.png');
+
+const scene = new PIXI.Container();
+app.stage.addChild(scene);
+
+const cursor = new PIXI.Sprite.from(sleepTex);
+cursor.x = 0;
+cursor.y = 0;
+cursor.anchor = {x: 0.5, y: 0.5};
+scene.addChild(cursor);
+
+app.ticker.add((deltaTime) => {
+    cursor.x = (PIXI.input.getMouseX() * app.view.width + 0.5) ^ 0;
+    cursor.y = (PIXI.input.getMouseY() * app.view.height + 0.5) ^ 0;
+    if (PIXI.input.getMouseDown(0)) {
+        cursor.texture = rageTex;
+    } else {
+        cursor.texture = sleepTex;
+    }
+});
diff --git a/dev/mouse-tracking/assets/rage.png b/dev/mouse-tracking/assets/rage.png
diff --git a/dev/mouse-tracking/assets/sleepy.png b/dev/mouse-tracking/assets/sleepy.png
diff --git a/dev/mouse-tracking/index.html b/dev/mouse-tracking/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Mouse Tracking</title>
+    <link rel="stylesheet" type="text/css" href="../_misc/style.css">
+    <script src="https://pixijs.download/release/pixi.js"></script> <!-- This'll let me keep Zephyr VERY up to date -->
+    <script src="../zepyhr.js"></script>
+</head>
+
+<body>
+    <script src="app.js"></script> <!-- Testing -->
+</body>
+
+</html>
diff --git a/dev/zepyhr.js b/dev/zepyhr.js
@@ -4,18 +4,32 @@ PIXI.zephyr = "ZephyrJS version 22.5.23";
 
 PIXI.input = {
     keyMap: new Map(),
-
     // getKeyFired returns true the first time it is called for a key while the key is down
     getKeyFired: (keyStr) => {
         let r = PIXI.input.keyMap.get(keyStr);
         PIXI.input.keyMap.set(keyStr, false);
         return r;
     },
-
     // getKeyDown returns true always if the key is down
     getKeyDown: (keyStr) => {
         return PIXI.input.keyMap.has(keyStr);
     },
+
+    mouseMap: new Map(),
+    getMouseFired: (btnStr) => {
+        let r = PIXI.input.mouseMap.get(btnStr);
+        PIXI.input.keyMap.set(btnStr, false);
+        return r;
+    },
+    getMouseDown: (btnStr) => {
+        return PIXI.input.mouseMap.has(btnStr);
+    },
+    getMouseX: () => {
+        return PIXI.input.mouseMap.get('x');
+    },
+    getMouseY: () => {
+        return PIXI.input.mouseMap.get('y');
+    },
 }
 
 PIXI.collision = {
@@ -30,22 +44,38 @@ PIXI.collision = {
 }
 
 // https://www.w3schools.com/jsref/met_element_requestfullscreen.asp
-PIXI.utils.openFullScreen = (view) => { // w3schools <3
-    if (view.requestFullscreen) {
-        view.requestFullscreen();
-    } else if (view.webkitRequestFullscreen) { /* Safari */
-        view.webkitRequestFullscreen();
-    } else if (view.msRequestFullscreen) { /* IE11 */
-        view.msRequestFullscreen();
-    }
+PIXI.utils.openFullScreen = (view) => {
+    if (view.requestFullscreen)
+        view.requestFullscreen(); // Standard
+    else if (view.webkitRequestFullscreen)
+        view.webkitRequestFullscreen(); // Safari
+    else if (view.msRequestFullscreen)
+        view.msRequestFullscreen(); // IE11
 }
 
 // Keyboard
 window.addEventListener('keydown', (e) => {
-    PIXI.input.keyMap.set(e.key.toUpperCase(), true);
+    PIXI.input.keyMap.set(e.key.toLowerCase(), true);
 });
 window.addEventListener('keyup', (e) => {
-    PIXI.input.keyMap.delete(e.key.toUpperCase())
+    PIXI.input.keyMap.delete(e.key.toLowerCase());
+});
+
+// Mouse
+window.addEventListener('mousemove', (e) => {
+    PIXI.input.mouseMap.set('x', e.x / window.innerWidth);
+    PIXI.input.mouseMap.set('y', e.y / window.innerHeight);
 });
+window.addEventListener('mousedown', (e) => {
+    PIXI.input.mouseMap.set(e.button, true);
+});
+window.addEventListener('mouseup', (e) => {
+    PIXI.input.mouseMap.delete(e.button);
+});
+
+// Catches/Blocks right click
+window.addEventListener('contextmenu', (e) => {
+    e.preventDefault();
+})
 
 console.log(PIXI.zephyr + " is extending Pixi!");
diff --git a/index.html b/index.html
@@ -37,6 +37,7 @@
     <h1>ZephyrJS</h1>
     <p class="b">Built to extend upon PixiJS!</p>
     <p>Links: <a href="dev/flappy-clone/index.html">Flappy Clone</a></p>
+    <p>Links: <a href="dev/mouse-tracking/index.html">Mouse Testing</a></p>
 </body>
 
 </html>
