diff --git a/package-lock.json b/package-lock.json
index 9f7e3c5..9aa720b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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"
diff --git a/package.json b/package.json
index ff89a00..bae5452 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/public/images/mobile.png b/public/images/mobile.png
new file mode 100644
index 0000000..d32b92f
Binary files /dev/null and b/public/images/mobile.png differ
diff --git a/src/HUD.jsx b/src/HUD.jsx
index 6737d59..88d10aa 100644
--- a/src/HUD.jsx
+++ b/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,7 +64,9 @@ export const HUD = () => {
-
+ {controls === "touch" && (
+ <>
+
{
onMouseUp={(e) => {
actions.setDriftButton(false);
}}
+ onTouchStart={(e) => {
+ e.preventDefault();
+ actions.setDriftButton(true);
+ }}
+ onTouchEnd={(e) => {
+ e.preventDefault();
+ actions.setDriftButton(false);
+ }}
>
drift
@@ -93,9 +103,20 @@ export const HUD = () => {
onMouseUp={(e) => {
actions.setItemButton(false);
}}
+ onTouchStart={(e) => {
+ e.preventDefault();
+ actions.setItemButton(true);
+ }}
+ onTouchEnd={(e) => {
+ e.preventDefault();
+ actions.setItemButton(false);
+ }}
+
>
item
+ >
+ )}
>
)}
diff --git a/src/Landing.jsx b/src/Landing.jsx
index f4b6ae8..628f830 100644
--- a/src/Landing.jsx
+++ b/src/Landing.jsx
@@ -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 = () => {
Mouse & Keybaord
+
+ setControlStyle("touch")}>
+
Mobile
+
+
+
diff --git a/src/components/store.jsx b/src/components/store.jsx
index 3c9549e..b9ef1d9 100644
--- a/src/components/store.jsx
+++ b/src/components/store.jsx
@@ -14,7 +14,7 @@ export const items = [
export const useStore = create((set, get) => ({
gameStarted: false,
- controls: "touch",
+ controls: "",
particles1: [],
particles2: [],
bodyPosition: [0, 0, 0],
diff --git a/src/index.css b/src/index.css
index feed5ed..1a70928 100644
--- a/src/index.css
+++ b/src/index.css
@@ -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{
-
- right: 250px;
+@keyframes froze {
+ 0% {
+ backdrop-filter: blur(0px);
+ webkit-backdrop-filter: blur(0px);
+ }
+ 100% {
+ backdrop-filter: blur(15px);
+ webkit-backdrop-filter: blur(15px);
+
+ }
+}
+.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;}
+ }
+ }
+ }
+ }
+}