IAmChrisAMA
/
Mario-Kart-3.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(game) : added ui base for steering

skidmarks
Alex 2024-01-22 18:39:20 +01:00
parent 4f3e52b9d7
commit 602536bc23
6 changed files with 56 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -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>

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
public/steering_wheel.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.2 KiB

35
src/HUD.jsx Normal file
View File

@ -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' }}
/>
);
};

17
src/index.css
View File

@ -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
src/main.jsx
View File

@ -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>,
) )