feat:(game) added HUD for items

src/HUD.jsx

@@ -1,7 +1,10 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
+import { useStore } from "./components/store";
 
 export const HUD = () => {
   const wheel = useRef();
+  const [image, setImage] = useState("");
+  const {item} = useStore();
 
   useEffect(() => {
     const handleMouseMove = (e) => {
@@ -23,11 +26,37 @@ export const HUD = () => {
     };
   }, []);
 
+  useEffect(() => {
+    switch (item) {
+      case "banana":
+        setImage("./images/banana.webp");
+        break;
+      case "mushroom":
+        setImage("./images/mushroom.png");
+        break;
+      case "shell":
+        setImage("./images/shell.webp");
+        break;
+      default:
+        setImage("");
+    }
+    console.log(item);
+  }, [item]);
+
   return (
-    <div className="overlay"> dadasd
+    <div className="overlay">
       <div className="logo">
         <img src="./logo.png" alt="logo" />
       </div>
+      <div className="item">
+        <div className="borderOut">
+          <div className="borderIn">
+            <div className="background">
+              {image && <img src={image} alt="item" width={90} />}
+            </div>
+          </div>
+        </div>
+      </div>
       <div className="wheel">
         <img
           ref={wheel}

src/components/PlayerController.jsx

@@ -463,7 +463,7 @@ export const PlayerController = () => {
       actions.useItem();
     }
 
-    console.log("coins", coins);
+
   });
 
   return (

src/components/models/items/Banana_peel_mario_kart.jsx

@@ -23,7 +23,6 @@ export function Banana({onCollide, id, ...props}) {
 
   const {actions} = useStore();
 
-  console.log('banana', id);
    return (
     <>
             <RigidBody

src/components/models/misc/Gift.jsx

@@ -47,7 +47,6 @@ export function ItemBox(props) {
       onIntersectionEnter={({other}) => {
         if(other.rigidBodyObject.name === "player"){
 
-        console.log("item box hit");
         actions.setItem();
         setScale(0);
         frames.current = 400;

src/components/models/misc/Mario_kart_item_box.jsx

@@ -20,7 +20,6 @@ export function ItemBox(props) {
         <RigidBody type="fixed" name="itemBox"
       sensor
       onIntersectionEnter={() => {
-        console.log("item box hit");
         actions.setItem();
         
       }}

src/index.css

@@ -3,61 +3,110 @@
   height: 100vh;
 }
 
-*
-body {
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+* body {
   margin: 0;
   /* cursor:none; */
   overflow-y: none;
   overflow-x: none;
-
 }
 
 body::-webkit-scrollbar {
   display: none;
 }
 
-.wheel{
+.wheel {
   display: none;
-position:absolute;
-top:0;
+  position: absolute;
+  top: 0;
 
-opacity: 0.2;
-img{
-  width: 200px;
+  opacity: 0.2;
+  img {
+    width: 200px;
+  }
 }
 
-
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
 }
 
-.overlay{
-  position:absolute;
-top:0;
-left:0;
-width:100vw;
-height:100vh;
-pointer-events: none;
-}
-
-.logo{
+.logo {
   display: none;
-  position:absolute;
-top:150px;
-left:500px;
+  position: absolute;
+  top: 150px;
+  left: 500px;
 
-opacity: 1;
-img{
-  width: 600px;
-  animation: bounce 0.4s infinite cubic-bezier(.71,1.94,.5,.61)
-
-}
+  opacity: 1;
+  img {
+    width: 600px;
+    animation: bounce 0.4s infinite cubic-bezier(0.71, 1.94, 0.5, 0.61);
+  }
 }
 
+.item {
+  width: 152px;
+  height: 152px;
+  position: absolute;
+  top: 75px;
+  left: 75px;
+  background: linear-gradient(white, rgb(48, 48, 48)) padding-box,
+    linear-gradient(to bottom, rgb(255, 255, 255), rgb(48, 48, 48)) border-box;
+  border-radius: 50em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .borderOut {
+    width: 150px;
+    height: 150px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: linear-gradient(white, white) padding-box,
+      linear-gradient(to bottom, rgb(110, 110, 110), rgb(48, 48, 48)) border-box;
+    border-radius: 50em;
+    border: 10px solid transparent;
+    .borderIn {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: linear-gradient(white, white) padding-box,
+        linear-gradient(to bottom, rgb(110, 110, 110), rgb(255, 255, 255))
+          border-box;
+      border: 2px solid transparent;
+      border-radius: 50em;
+    .background{
+      background-image: url('./images/scanline.jpg');
+      background-position: center;
+      background-size: cover;
+      width: 100%;
+      height: 100%;
+      border-radius: 50em;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+    }
+  }
+  }
+}
 
 @keyframes bounce {
-  0%, 100% {
-      transform: scale(1);
+  0%,
+  100% {
+    transform: scale(1);
   }
   50% {
-      transform: scale(1.2);
+    transform: scale(1.2);
   }
-}
+}