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