feat:(game) added mobile controls
parent
6ed6c0ff27
commit
1504f44959
|
@ -14,7 +14,7 @@
|
|||
"@react-three/rapier": "^1.2.1",
|
||||
"gsap": "^3.12.5",
|
||||
"leva": "^0.9.35",
|
||||
"playroomkit": "^0.0.61",
|
||||
"playroomkit": "^0.0.66",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-gamepad": "^1.0.3",
|
||||
|
@ -2426,9 +2426,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"node_modules/playroomkit": {
|
||||
"version": "0.0.61",
|
||||
"resolved": "https://registry.npmjs.org/playroomkit/-/playroomkit-0.0.61.tgz",
|
||||
"integrity": "sha512-BUjGkZZcV5OQ29sTmjjI3Ad0SZLRvuBYWAdu4MqhnCjiaHTDJp4KvacVx6rJEJe9jdamtCimkZ/5XXuGm9h2AQ==",
|
||||
"version": "0.0.66",
|
||||
"resolved": "https://registry.npmjs.org/playroomkit/-/playroomkit-0.0.66.tgz",
|
||||
"integrity": "sha512-lBYSLR/0AebQhWteMgkXiMXyMPxMqGz2uptA3QrBig4NCn5r3ViIXWIFmsdbLSG9spKrFPVTaYRClUq3fSCxDw==",
|
||||
"peerDependencies": {
|
||||
"react": ">=17.0.2 <= 18",
|
||||
"react-dom": ">=17.0.2 <= 18"
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"dev": "vite --host",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
|
@ -15,7 +15,7 @@
|
|||
"@react-three/rapier": "^1.2.1",
|
||||
"gsap": "^3.12.5",
|
||||
"leva": "^0.9.35",
|
||||
"playroomkit": "^0.0.61",
|
||||
"playroomkit": "^0.0.66",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-gamepad": "^1.0.3",
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 130 KiB |
23
src/HUD.jsx
23
src/HUD.jsx
|
@ -5,7 +5,7 @@ import { Joystick } from "react-joystick-component";
|
|||
export const HUD = () => {
|
||||
const wheel = useRef();
|
||||
const [image, setImage] = useState("");
|
||||
const { item, gameStarted, actions } = useStore();
|
||||
const { item, gameStarted, actions, controls } = useStore();
|
||||
|
||||
useEffect(() => {
|
||||
const handleMouseMove = (e) => {
|
||||
|
@ -64,6 +64,8 @@ export const HUD = () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{controls === "touch" && (
|
||||
<>
|
||||
<div className="controls joystick">
|
||||
<Joystick
|
||||
size={100}
|
||||
|
@ -82,6 +84,14 @@ export const HUD = () => {
|
|||
onMouseUp={(e) => {
|
||||
actions.setDriftButton(false);
|
||||
}}
|
||||
onTouchStart={(e) => {
|
||||
e.preventDefault();
|
||||
actions.setDriftButton(true);
|
||||
}}
|
||||
onTouchEnd={(e) => {
|
||||
e.preventDefault();
|
||||
actions.setDriftButton(false);
|
||||
}}
|
||||
>
|
||||
drift
|
||||
</div>
|
||||
|
@ -93,11 +103,22 @@ export const HUD = () => {
|
|||
onMouseUp={(e) => {
|
||||
actions.setItemButton(false);
|
||||
}}
|
||||
onTouchStart={(e) => {
|
||||
e.preventDefault();
|
||||
actions.setItemButton(true);
|
||||
}}
|
||||
onTouchEnd={(e) => {
|
||||
e.preventDefault();
|
||||
actions.setItemButton(false);
|
||||
}}
|
||||
|
||||
>
|
||||
item
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -9,7 +9,7 @@ export const Landing = () => {
|
|||
const startButton = useRef();
|
||||
const homeRef = useRef();
|
||||
const [setupStatus, setSetupStatus] = useState(0);
|
||||
const [controlStyle, setControlStyle] = useState("touch");
|
||||
const [controlStyle, setControlStyle] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
const tl = gsap.timeline();
|
||||
|
@ -76,6 +76,12 @@ export const Landing = () => {
|
|||
<h2>Mouse & Keybaord</h2>
|
||||
<img src="./images/mousekeyboard.png" alt="mouse & keyboard" />
|
||||
</div>
|
||||
<div className={controlStyle === "touch" ? "article mobile selected" : "article mobile"} onClick={() =>
|
||||
setControlStyle("touch")}>
|
||||
<h2>Mobile</h2>
|
||||
<img src="./images/mobile.png" alt="mobile" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className={controlStyle != "" ? "submit" : "submit disabled"}>
|
||||
|
|
|
@ -14,7 +14,7 @@ export const items = [
|
|||
|
||||
export const useStore = create((set, get) => ({
|
||||
gameStarted: false,
|
||||
controls: "touch",
|
||||
controls: "",
|
||||
particles1: [],
|
||||
particles2: [],
|
||||
bodyPosition: [0, 0, 0],
|
||||
|
|
|
@ -104,15 +104,15 @@ body::-webkit-scrollbar {
|
|||
|
||||
.controls {
|
||||
position: absolute;
|
||||
bottom: 150px;
|
||||
bottom: 60px;
|
||||
}
|
||||
|
||||
.joystick {
|
||||
left: 150px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
.drift {
|
||||
right: 150px;
|
||||
right: 50px;
|
||||
font-family: "Hanken Grotesk";
|
||||
border-radius: 100px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
|
@ -127,7 +127,6 @@ body::-webkit-scrollbar {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
@keyframes bounce {
|
||||
0%,
|
||||
100% {
|
||||
|
@ -171,8 +170,8 @@ body::-webkit-scrollbar {
|
|||
height: 720px;
|
||||
background: rgba(95, 95, 95, 0.25);
|
||||
/* box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); */
|
||||
backdrop-filter: blur(15px);
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
backdrop-filter: blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
color: white;
|
||||
|
@ -182,6 +181,8 @@ body::-webkit-scrollbar {
|
|||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding: 40px;
|
||||
transition: all 0.5s ease 0s;
|
||||
animation : froze 2s ease 1s both;
|
||||
.articles {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
@ -191,7 +192,7 @@ body::-webkit-scrollbar {
|
|||
gap: 40px;
|
||||
.article {
|
||||
background: rgba(216, 216, 216, 0.25);
|
||||
width: 300px;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
|
@ -213,6 +214,12 @@ body::-webkit-scrollbar {
|
|||
background: rgba(216, 216, 216, 0.7);
|
||||
box-shadow: 0 0 20px 0 rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
.article.mobile {
|
||||
img {
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.submit {
|
||||
font-weight: 900;
|
||||
|
@ -289,9 +296,19 @@ body::-webkit-scrollbar {
|
|||
}
|
||||
}
|
||||
|
||||
.controls.itemButton{
|
||||
@keyframes froze {
|
||||
0% {
|
||||
backdrop-filter: blur(0px);
|
||||
webkit-backdrop-filter: blur(0px);
|
||||
}
|
||||
100% {
|
||||
backdrop-filter: blur(15px);
|
||||
webkit-backdrop-filter: blur(15px);
|
||||
|
||||
right: 250px;
|
||||
}
|
||||
}
|
||||
.controls.itemButton {
|
||||
right: 150px;
|
||||
font-family: "Hanken Grotesk";
|
||||
border-radius: 100px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
|
@ -305,3 +322,37 @@ body::-webkit-scrollbar {
|
|||
place-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
.home {
|
||||
gap: 50px;
|
||||
.logo {
|
||||
img {
|
||||
width: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
.start{
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.glassy{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
.articles{
|
||||
gap:5px;
|
||||
padding: 0;
|
||||
.article{
|
||||
height: 200px;
|
||||
padding: 10px;
|
||||
img{
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
.article.mobile{
|
||||
img{width:50px;}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue