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 = () => {
|
export const HUD = () => {
|
||||||
const wheel = useRef();
|
const wheel = useRef();
|
||||||
|
const [image, setImage] = useState("");
|
||||||
|
const {item} = useStore();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleMouseMove = (e) => {
|
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 (
|
return (
|
||||||
<div className="overlay"> dadasd
|
<div className="overlay">
|
||||||
<div className="logo">
|
<div className="logo">
|
||||||
<img src="./logo.png" alt="logo" />
|
<img src="./logo.png" alt="logo" />
|
||||||
</div>
|
</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">
|
<div className="wheel">
|
||||||
<img
|
<img
|
||||||
ref={wheel}
|
ref={wheel}
|
||||||
|
|
|
@ -463,7 +463,7 @@ export const PlayerController = () => {
|
||||||
actions.useItem();
|
actions.useItem();
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log("coins", coins);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -23,7 +23,6 @@ export function Banana({onCollide, id, ...props}) {
|
||||||
|
|
||||||
const {actions} = useStore();
|
const {actions} = useStore();
|
||||||
|
|
||||||
console.log('banana', id);
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<RigidBody
|
<RigidBody
|
||||||
|
|
|
@ -47,7 +47,6 @@ export function ItemBox(props) {
|
||||||
onIntersectionEnter={({other}) => {
|
onIntersectionEnter={({other}) => {
|
||||||
if(other.rigidBodyObject.name === "player"){
|
if(other.rigidBodyObject.name === "player"){
|
||||||
|
|
||||||
console.log("item box hit");
|
|
||||||
actions.setItem();
|
actions.setItem();
|
||||||
setScale(0);
|
setScale(0);
|
||||||
frames.current = 400;
|
frames.current = 400;
|
||||||
|
|
|
@ -20,7 +20,6 @@ export function ItemBox(props) {
|
||||||
<RigidBody type="fixed" name="itemBox"
|
<RigidBody type="fixed" name="itemBox"
|
||||||
sensor
|
sensor
|
||||||
onIntersectionEnter={() => {
|
onIntersectionEnter={() => {
|
||||||
console.log("item box hit");
|
|
||||||
actions.setItem();
|
actions.setItem();
|
||||||
|
|
||||||
}}
|
}}
|
||||||
|
|
113
src/index.css
113
src/index.css
|
@ -3,61 +3,110 @@
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
*
|
* {
|
||||||
body {
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
* body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
/* cursor:none; */
|
/* cursor:none; */
|
||||||
overflow-y: none;
|
overflow-y: none;
|
||||||
overflow-x: none;
|
overflow-x: none;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body::-webkit-scrollbar {
|
body::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wheel{
|
.wheel {
|
||||||
display: none;
|
display: none;
|
||||||
position:absolute;
|
position: absolute;
|
||||||
top:0;
|
top: 0;
|
||||||
|
|
||||||
opacity: 0.2;
|
opacity: 0.2;
|
||||||
img{
|
img {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overlay{
|
.logo {
|
||||||
position:absolute;
|
|
||||||
top:0;
|
|
||||||
left:0;
|
|
||||||
width:100vw;
|
|
||||||
height:100vh;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo{
|
|
||||||
display: none;
|
display: none;
|
||||||
position:absolute;
|
position: absolute;
|
||||||
top:150px;
|
top: 150px;
|
||||||
left:500px;
|
left: 500px;
|
||||||
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
img{
|
img {
|
||||||
width: 600px;
|
width: 600px;
|
||||||
animation: bounce 0.4s infinite cubic-bezier(.71,1.94,.5,.61)
|
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 {
|
@keyframes bounce {
|
||||||
0%, 100% {
|
0%,
|
||||||
transform: scale(1);
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
transform: scale(1.2);
|
transform: scale(1.2);
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
Reference in New Issue