feat:(game) added HUD for items
parent
db52f49e09
commit
bfd691e7ab
Binary file not shown.
After Width: | Height: | Size: 932 KiB |
Binary file not shown.
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
After Width: | Height: | Size: 450 KiB |
Binary file not shown.
After Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
After Width: | Height: | Size: 641 KiB |
33
src/HUD.jsx
33
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}
|
||||
|
|
|
@ -463,7 +463,7 @@ export const PlayerController = () => {
|
|||
actions.useItem();
|
||||
}
|
||||
|
||||
console.log("coins", coins);
|
||||
|
||||
});
|
||||
|
||||
return (
|
||||
|
|
|
@ -23,7 +23,6 @@ export function Banana({onCollide, id, ...props}) {
|
|||
|
||||
const {actions} = useStore();
|
||||
|
||||
console.log('banana', id);
|
||||
return (
|
||||
<>
|
||||
<RigidBody
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -20,7 +20,6 @@ export function ItemBox(props) {
|
|||
<RigidBody type="fixed" name="itemBox"
|
||||
sensor
|
||||
onIntersectionEnter={() => {
|
||||
console.log("item box hit");
|
||||
actions.setItem();
|
||||
|
||||
}}
|
||||
|
|
115
src/index.css
115
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue