From 8f255e644fc0a7039e29c82bd186f68623ebfd4a Mon Sep 17 00:00:00 2001 From: Alexander Mangel Date: Wed, 25 Oct 2023 09:09:42 -0500 Subject: [PATCH 1/2] feat: tweaks, mobile fixes --- .../loadingScreen/loadingScreen.tsx | 1 - .../client/src/components/ui/colorWheel.tsx | 15 +++++--- packages/client/src/components/ui/gameUI.css | 2 +- .../client/src/components/ui/inventory.css | 6 ++-- .../client/src/components/ui/inventory.tsx | 28 ++++++++++----- .../src/components/ui/resourcePanel.css | 2 +- .../src/components/ui/tutorialModal.tsx | 6 ++-- packages/client/src/game/data/entities.ts | 2 +- packages/client/src/game/data/tutorial.ts | 36 +++++++++---------- packages/client/src/game/systems/gameLoop.tsx | 6 ---- packages/client/src/mud/wallet.ts | 1 + packages/client/src/mudExample.tsx | 4 +-- packages/client/src/styles/index.css | 11 +++++- 13 files changed, 72 insertions(+), 48 deletions(-) diff --git a/packages/client/src/components/loadingScreen/loadingScreen.tsx b/packages/client/src/components/loadingScreen/loadingScreen.tsx index 64433ba..6388206 100644 --- a/packages/client/src/components/loadingScreen/loadingScreen.tsx +++ b/packages/client/src/components/loadingScreen/loadingScreen.tsx @@ -26,7 +26,6 @@ function LoadingScreen() { }); useEffect(() => { - console.log(syncProgress.percentage); setProgress(syncProgress.percentage); if (syncProgress.percentage >= 100) { setHide(true); diff --git a/packages/client/src/components/ui/colorWheel.tsx b/packages/client/src/components/ui/colorWheel.tsx index 74e86df..15fc9c2 100644 --- a/packages/client/src/components/ui/colorWheel.tsx +++ b/packages/client/src/components/ui/colorWheel.tsx @@ -4,10 +4,17 @@ import { ColorResult, hexToHsva } from "@uiw/color-convert"; import { getState } from "@/game/store"; import { getRandom } from "@/lib/utils"; import { palette } from "@/game/utils/palette"; +import { animated, type SpringValue } from "@react-spring/web"; const randomColor = getRandom(palette.buildingSecondary); -function ColorWheel() { +function ColorWheel(props: { + style: { + opacity: SpringValue; + transform: SpringValue; + }; +}) { + const { style } = props; const [hsva, setHsva] = useState(hexToHsva(randomColor)); const [hex, setHex] = useState(randomColor); @@ -18,8 +25,8 @@ function ColorWheel() { }; return ( -
-
+ +
-
+ ); } diff --git a/packages/client/src/components/ui/gameUI.css b/packages/client/src/components/ui/gameUI.css index 43e6f06..06f2105 100644 --- a/packages/client/src/components/ui/gameUI.css +++ b/packages/client/src/components/ui/gameUI.css @@ -1,3 +1,3 @@ .interface { - @apply w-full h-full; + @apply w-full h-full fixed top-0 pointer-events-none overflow-hidden; } diff --git a/packages/client/src/components/ui/inventory.css b/packages/client/src/components/ui/inventory.css index afe5610..f50672b 100644 --- a/packages/client/src/components/ui/inventory.css +++ b/packages/client/src/components/ui/inventory.css @@ -1,9 +1,11 @@ .inventory-wrapper { - @apply absolute bottom-3 w-full items-center justify-center flex-col flex overflow-y-visible; + @apply absolute bottom-0 flex-col flex overflow-y-visible w-screen pointer-events-auto; } .inventory-bar { - @apply flex-row flex items-center justify-center w-full h-44 overflow-visible overflow-x-scroll overflow-y-visible z-50; + @apply flex-row flex justify-start w-full h-44 overflow-x-scroll overflow-y-visible z-50 max-w-full; + scroll-snap-type: x mandatory; /* Enable vertical snap scrolling */ + scrollbar-width: none; } .card { diff --git a/packages/client/src/components/ui/inventory.tsx b/packages/client/src/components/ui/inventory.tsx index 8ce8f08..0b2de27 100644 --- a/packages/client/src/components/ui/inventory.tsx +++ b/packages/client/src/components/ui/inventory.tsx @@ -14,6 +14,7 @@ import { useOnce } from "@/lib/useOnce"; import { canAffordBuilding } from "@/game/systems/constructionSystem"; import ColorWheel from "./colorWheel"; import { RotateUI } from "./rotateUI"; +import { getActiveTutorial } from "@/game/data/tutorial"; function Inventory() { const { @@ -38,17 +39,21 @@ function Inventory() { }); useEffect(() => { - // TODO: Remove hack to only show gravityhill at startup if (!loaded) return; if (cardsLoaded) return; + const activeTutorial = getActiveTutorial(getState().player.playerData); const f = Object.entries(EntityData.facilities) .map(([, entityData]) => entityData) - .filter((entityData) => !facilities.includes(entityData)); + .filter((entityData) => + activeTutorial + ? activeTutorial.inventory && !facilities.includes(entityData) + : !facilities.includes(entityData) + ); setFacilities([...facilities, ...f]); setcardsLoaded(true); }, [cardsLoaded, entities, facilities, loaded]); - const listTransitions = useTransition(facilities, { + const listTransitions = useTransition(["colorWheel", ...facilities], { config: config.gentle, from: { opacity: 1, transform: "translateX(250px) translateY(-5px)" }, enter: () => [ @@ -58,18 +63,25 @@ function Inventory() { }, ], leave: { opacity: 0, height: 0, transform: "translateX(-250px)" }, - keys: facilities.map((_, index) => index), + keys: ["colorWheel", ...facilities].map((_, index) => index), }); return (
{building && }
- {loaded && - listTransitions((styles, entityData) => ( - - ))} + listTransitions((styles, entityData) => { + if (entityData === "colorWheel") + return ; + else + return ( + + ); + })}
); diff --git a/packages/client/src/components/ui/resourcePanel.css b/packages/client/src/components/ui/resourcePanel.css index 1a9e359..38a6972 100644 --- a/packages/client/src/components/ui/resourcePanel.css +++ b/packages/client/src/components/ui/resourcePanel.css @@ -1,5 +1,5 @@ .resource-panel { - @apply fixed left-5 top-5 flex flex-col text-xs select-none; + @apply fixed left-5 top-5 flex flex-col text-xs select-none pointer-events-auto; } .resource-item-wrapper { diff --git a/packages/client/src/components/ui/tutorialModal.tsx b/packages/client/src/components/ui/tutorialModal.tsx index 7d08a69..72daacb 100644 --- a/packages/client/src/components/ui/tutorialModal.tsx +++ b/packages/client/src/components/ui/tutorialModal.tsx @@ -34,12 +34,12 @@ function TutorialModal({ }, }); return ( -
+
-
+

{step.screens[screenIndex].name}

diff --git a/packages/client/src/game/data/entities.ts b/packages/client/src/game/data/entities.ts index 70f8775..1a13065 100644 --- a/packages/client/src/game/data/entities.ts +++ b/packages/client/src/game/data/entities.ts @@ -51,7 +51,7 @@ const EntityData = { }, dynamo: { entityTypeId: 102, - name: "Whirly Dynamo", + name: "Dynamo", blurb: "Generates power", description: "The Whirly Dynamo is an awe-inspiring, spiraled contraption, eternally spinning, twirling, and cascading in the breezy stratosphere. It contains an enormous, spiraled windmill, capturing the gentlest of breezes and the mightiest of gales.", diff --git a/packages/client/src/game/data/tutorial.ts b/packages/client/src/game/data/tutorial.ts index 79ab8a6..6090dd5 100644 --- a/packages/client/src/game/data/tutorial.ts +++ b/packages/client/src/game/data/tutorial.ts @@ -87,6 +87,13 @@ export const completeTutorial = async (tutorialName: string) => { }); }; +export const defaultInventory = [ + EntityData.facilities.gravityhill, + EntityData.facilities.dynamo, + EntityData.facilities.residence, + EntityData.facilities.scaffold, +]; + export const tutorialSteps = [ { name: "intro", @@ -150,12 +157,7 @@ export const tutorialSteps = [ { name: "living", text: "Make it a life worth living", - inventory: [ - EntityData.facilities.gravityhill, - EntityData.facilities.dynamo, - EntityData.facilities.residence, - EntityData.facilities.scaffold, - ], + inventory: defaultInventory, completedCondition: (player: PlayerData) => { return hasFacility(player, EntityData.facilities.residence.entityTypeId); }, @@ -175,12 +177,7 @@ export const tutorialSteps = [ { name: "making money", text: "Make it a life worth living", - inventory: [ - EntityData.facilities.gravityhill, - EntityData.facilities.dynamo, - EntityData.facilities.residence, - EntityData.facilities.scaffold, - ], + inventory: defaultInventory, completedCondition: () => { return hasWallet(); }, @@ -215,12 +212,7 @@ export const tutorialSteps = [ { name: "keepitsafe", text: "Make it a life worth living", - inventory: [ - EntityData.facilities.gravityhill, - EntityData.facilities.dynamo, - EntityData.facilities.residence, - EntityData.facilities.scaffold, - ], + inventory: defaultInventory, completedCondition: () => { return tutorialFlags.hasHadWalletExplainer; }, @@ -241,6 +233,14 @@ export const tutorialSteps = [ }, ] as TutorialStep[]; +export const getTutorialByName = (name: string) => { + return tutorialSteps.find((t) => t.name === name); +}; + +export const getActiveTutorial = (playerData: PlayerData) => { + return tutorialSteps.find((t) => t.name === playerData.activeTutorials[0]); +}; + const hasWallet = () => { const comethWallet = window.localStorage.getItem("comethWalletAddress"); return comethWallet && comethWallet !== ""; diff --git a/packages/client/src/game/systems/gameLoop.tsx b/packages/client/src/game/systems/gameLoop.tsx index d0bfe2f..366ac2d 100644 --- a/packages/client/src/game/systems/gameLoop.tsx +++ b/packages/client/src/game/systems/gameLoop.tsx @@ -162,12 +162,6 @@ function GameLoop() { }); useMemo(() => { - // Debug for hiding the loading screen on new world - // const event = new Event("gameLoaded"); - // document.dispatchEvent(event); - - // we're going to check which entities don't exist yet and build new ones: - // TODO: GameLoaded logic breaks when the map has zero entities [bug] for (const facility of facilities) { const { entity, typeId, position, yaw, color, variant, owner } = facility; if (!getState().world.getEntityByPosition(position)) { diff --git a/packages/client/src/mud/wallet.ts b/packages/client/src/mud/wallet.ts index cb4b110..01d43af 100644 --- a/packages/client/src/mud/wallet.ts +++ b/packages/client/src/mud/wallet.ts @@ -102,6 +102,7 @@ export async function createComethWallet() { const walletAdaptor = new ConnectAdaptor({ chainId: SupportedNetworks.MUMBAI, apiKey, + userName: "LAPUTA Vault", }); const instance = new ComethWallet({ authAdapter: walletAdaptor, diff --git a/packages/client/src/mudExample.tsx b/packages/client/src/mudExample.tsx index a524ba7..995213d 100644 --- a/packages/client/src/mudExample.tsx +++ b/packages/client/src/mudExample.tsx @@ -7,7 +7,7 @@ import { getState } from "./game/store"; import { useState, useEffect } from "react"; import { getTimestamp } from "./lib/utils"; -export const MudExample = () => { +export const MudExample = (display: boolean = false) => { const { components: { Counter, GameSetting }, systemCalls: { @@ -118,7 +118,7 @@ export const MudExample = () => { const delay = async (ms) => { return new Promise((resolve) => setTimeout(resolve, ms)); }; - + if (!display) return null; return (
diff --git a/packages/client/src/styles/index.css b/packages/client/src/styles/index.css index 0195199..3da3720 100644 --- a/packages/client/src/styles/index.css +++ b/packages/client/src/styles/index.css @@ -4,7 +4,7 @@ html, body { - @apply bg-[#76ADAB] text-black; + @apply bg-[#76ADAB] text-black h-screen max-h-screen; } #mud-dev-tools button.peer::before { @@ -35,3 +35,12 @@ img { -o-user-select: none; user-select: none; } + +::-webkit-scrollbar { + width: 0; +} + +/* Hide horizontal scrollbar */ +::-webkit-scrollbar-thumb { + background: transparent; +} From 7a2e92b13da2a97f5a782261b4e1e433deb67b8f Mon Sep 17 00:00:00 2001 From: Alexander Mangel Date: Wed, 25 Oct 2023 12:02:53 -0500 Subject: [PATCH 2/2] style: mobile tweaks --- packages/client/src/App.tsx | 2 +- packages/client/src/components/ui/inventory.css | 2 +- packages/client/src/components/ui/tutorialModal.tsx | 2 +- packages/client/src/mudExample.tsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/client/src/App.tsx b/packages/client/src/App.tsx index e9ca755..830d841 100644 --- a/packages/client/src/App.tsx +++ b/packages/client/src/App.tsx @@ -12,7 +12,7 @@ export const App = () => { return ( - + ); diff --git a/packages/client/src/components/ui/inventory.css b/packages/client/src/components/ui/inventory.css index f50672b..6ed9c51 100644 --- a/packages/client/src/components/ui/inventory.css +++ b/packages/client/src/components/ui/inventory.css @@ -3,7 +3,7 @@ } .inventory-bar { - @apply flex-row flex justify-start w-full h-44 overflow-x-scroll overflow-y-visible z-50 max-w-full; + @apply flex-row flex justify-start sm:justify-center w-full h-44 overflow-x-scroll overflow-y-clip z-50 max-w-full px-3; scroll-snap-type: x mandatory; /* Enable vertical snap scrolling */ scrollbar-width: none; } diff --git a/packages/client/src/components/ui/tutorialModal.tsx b/packages/client/src/components/ui/tutorialModal.tsx index 72daacb..2cca6c5 100644 --- a/packages/client/src/components/ui/tutorialModal.tsx +++ b/packages/client/src/components/ui/tutorialModal.tsx @@ -76,7 +76,7 @@ function TutorialModal({ {!step.screens[screenIndex].hideNext && ( diff --git a/packages/client/src/mudExample.tsx b/packages/client/src/mudExample.tsx index 995213d..aaf403d 100644 --- a/packages/client/src/mudExample.tsx +++ b/packages/client/src/mudExample.tsx @@ -7,7 +7,7 @@ import { getState } from "./game/store"; import { useState, useEffect } from "react"; import { getTimestamp } from "./lib/utils"; -export const MudExample = (display: boolean = false) => { +export const MudExample = ({ display = false }: { display: boolean }) => { const { components: { Counter, GameSetting }, systemCalls: {