diff --git a/public/images/6589ee5eca1b85adc02a7cc67deb670d.png b/public/images/6589ee5eca1b85adc02a7cc67deb670d.png
new file mode 100644
index 0000000..f9af933
Binary files /dev/null and b/public/images/6589ee5eca1b85adc02a7cc67deb670d.png differ
diff --git a/public/images/banana.webp b/public/images/banana.webp
new file mode 100644
index 0000000..ddc1bc7
Binary files /dev/null and b/public/images/banana.webp differ
diff --git a/public/images/mushroom.png b/public/images/mushroom.png
new file mode 100644
index 0000000..0db3d68
Binary files /dev/null and b/public/images/mushroom.png differ
diff --git a/public/images/scanline.jpg b/public/images/scanline.jpg
new file mode 100644
index 0000000..d3e1d22
Binary files /dev/null and b/public/images/scanline.jpg differ
diff --git a/public/images/shell.webp b/public/images/shell.webp
new file mode 100644
index 0000000..c3e6329
Binary files /dev/null and b/public/images/shell.webp differ
diff --git a/src/HUD.jsx b/src/HUD.jsx
index bf4ca5d..ef2885d 100644
--- a/src/HUD.jsx
+++ b/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 (
-
dadasd
+
+
+
+
+
+ {image &&
}
+
+
+
+
{
actions.useItem();
}
- console.log("coins", coins);
+
});
return (
diff --git a/src/components/models/items/Banana_peel_mario_kart.jsx b/src/components/models/items/Banana_peel_mario_kart.jsx
index 6df9a35..293d633 100644
--- a/src/components/models/items/Banana_peel_mario_kart.jsx
+++ b/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 (
<>
{
if(other.rigidBodyObject.name === "player"){
- console.log("item box hit");
actions.setItem();
setScale(0);
frames.current = 400;
diff --git a/src/components/models/misc/Mario_kart_item_box.jsx b/src/components/models/misc/Mario_kart_item_box.jsx
index c8daf9b..c05ead7 100644
--- a/src/components/models/misc/Mario_kart_item_box.jsx
+++ b/src/components/models/misc/Mario_kart_item_box.jsx
@@ -20,7 +20,6 @@ export function ItemBox(props) {
{
- console.log("item box hit");
actions.setItem();
}}
diff --git a/src/index.css b/src/index.css
index 18e8d52..6db33c0 100644
--- a/src/index.css
+++ b/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);
}
-}
\ No newline at end of file
+}