feat(game) : added ui base for steering

AppsByCole · Jan 22, 2024 · 602536b · 602536b
1 parent 4f3e52b
commit 602536b
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>Mario Kart 3.js</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/steering_wheel.png b/public/steering_wheel.png
diff --git a/src/HUD.jsx b/src/HUD.jsx
@@ -0,0 +1,35 @@
+import React, { useEffect, useRef } from "react";
+
+export const HUD = () => {
+  const wheel = useRef();
+
+  useEffect(() => {
+    const handleMouseMove = (e) => {
+      if (wheel.current) {
+        const { clientX, clientY } = e;
+        const screenWidth = window.innerWidth;
+        const rotation = ((clientX - screenWidth / 2) / screenWidth) * 180;
+
+        wheel.current.style.left = `${clientX - 100}px`;
+        wheel.current.style.top = `${clientY - 100}px`;
+        wheel.current.style.transform = `rotate(${rotation}deg)`;
+      }
+    };
+
+    window.addEventListener("mousemove", handleMouseMove);
+
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, []);
+
+  return (
+    <img
+      ref={wheel}
+      src="./steering_wheel.png"
+      alt="steering wheel"
+      className="steering-wheel"
+      style={{ position: 'absolute', pointerEvents: 'none', transformOrigin: 'center' }}
+    />
+  );
+};
diff --git a/src/index.css b/src/index.css
@@ -3,6 +3,23 @@
   height: 100vh;
 }
 
+*
 body {
   margin: 0;
+  cursor:none;
+  overflow-y: none;
+  overflow-x: none;
+
+}
+
+body::-webkit-scrollbar {
+  display: none;
 }
+
+img {
+position:absolute;
+z-index: 100;
+top:0;
+width: 200px;
+opacity: 0.2;
+}
diff --git a/src/main.jsx b/src/main.jsx
@@ -2,9 +2,11 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
 import './index.css'
+import { HUD } from './HUD'
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <App />
+    <HUD />
   </React.StrictMode>,
 )