feat(game) : added ui base for steering
parent
4f3e52b9d7
commit
602536bc23
|
@ -2,9 +2,9 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<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" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Vite + React</title>
|
<title>Mario Kart 3.js</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
After Width: | Height: | Size: 9.2 KiB |
|
@ -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' }}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
|
@ -3,6 +3,23 @@
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
*
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
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;
|
||||||
}
|
}
|
|
@ -2,9 +2,11 @@ import React from 'react'
|
||||||
import ReactDOM from 'react-dom/client'
|
import ReactDOM from 'react-dom/client'
|
||||||
import App from './App'
|
import App from './App'
|
||||||
import './index.css'
|
import './index.css'
|
||||||
|
import { HUD } from './HUD'
|
||||||
|
|
||||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
<App />
|
<App />
|
||||||
|
<HUD />
|
||||||
</React.StrictMode>,
|
</React.StrictMode>,
|
||||||
)
|
)
|
||||||
|
|
Loading…
Reference in New Issue