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

mouse & keyboard +
+ setControlStyle("touch")}> +

Mobile

+ 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;} + } + } + } + } +}