Skip to content

Commit

Permalink
Revert drawer navbar
Browse files Browse the repository at this point in the history 
Will add modify the navbar in another PR
  • Loading branch information
@Comeza
Comeza committed Jun 20, 2024
1 parent 6d09a0f commit ed06848
Show file tree
Hide file tree
Showing 4 changed files with 48 additions and 113 deletions.
Binary file modified liberica/bun.lockb
View file
Binary file not shown.
49 changes: 24 additions & 25 deletions liberica/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,45 +11,44 @@
"preview": "vite preview"
},
"dependencies": {
"axios": "^1.6.2",
"framer-motion": "^11.2.10",
"i18next": "^23.7.11",
"i18next-browser-languagedetector": "^7.2.0",
"axios": "^1.7.2",
"i18next": "^23.11.5",
"i18next-browser-languagedetector": "^7.2.1",
"leaflet": "^1.9.4",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-i18next": "^14.1.1",
"react-i18next": "^14.1.2",
"react-icons": "^5.2.1",
"react-leaflet": "^4.2.1",
"react-router-dom": "^6.23.1",
"runtypes": "^6.7.0",
"use-interval": "^1.4.0"
},
"devDependencies": {
"@eslint/js": "^9.2.0",
"@types/leaflet": "^1.9.8",
"@types/react": "^18.2.37",
"@types/react-dom": "^18.2.15",
"@typescript-eslint/eslint-plugin": "^6.11.0",
"@typescript-eslint/parser": "^6.11.0",
"@vitejs/plugin-react-swc": "^3.5.0",
"autoprefixer": "^10.4.16",
"eslint": "^9.2.0",
"@eslint/js": "^9.5.0",
"@types/leaflet": "^1.9.12",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@typescript-eslint/eslint-plugin": "^6.21.0",
"@typescript-eslint/parser": "^6.21.0",
"@vitejs/plugin-react-swc": "^3.7.0",
"autoprefixer": "^10.4.19",
"eslint": "^9.5.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-i18next": "^6.0.3",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-react": "^7.34.1",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.4",
"globals": "^15.2.0",
"postcss": "^8.4.31",
"prettier": "^3.2.5",
"eslint-plugin-react": "^7.34.3",
"eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-react-refresh": "^0.4.7",
"globals": "^15.6.0",
"postcss": "^8.4.38",
"prettier": "^3.3.2",
"prettier-plugin-tailwindcss": "^0.5.14",
"tailwindcss": "^3.3.3",
"typescript": "^5.2.2",
"typescript-eslint": "^7.9.0",
"vite": "^5.0.10",
"vite-tsconfig-paths": "^4.2.1"
"tailwindcss": "^3.4.4",
"typescript": "^5.5.2",
"typescript-eslint": "^7.13.1",
"vite": "^5.3.1",
"vite-tsconfig-paths": "^4.3.2"
},
"packageManager": "[email protected]"
}
57 changes: 0 additions & 57 deletions liberica/src/components/Navbar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import { motion, useSpring } from "framer-motion";
import React, { useRef } from "react";
import { PropsWithChildren } from "react";

export function Navbar(props: PropsWithChildren) {
Expand All @@ -9,58 +7,3 @@ export function Navbar(props: PropsWithChildren) {
</div>
);
}

export function NavbarHeader(props: PropsWithChildren) {
return <>{props.children}</>;
}

export function NavbarBody(props: PropsWithChildren) {
return <>{props.children}</>;
}

export function NavbarDrawer(props: PropsWithChildren) {
const y = useSpring(0, { bounce: 0, duration: window.innerHeight / 3 }); // 854 / 4 = 285ms
const headerRef = useRef<HTMLDivElement>(null);
const bodyRef = useRef<HTMLDivElement>(null);

const body = React.Children.map(props.children, (child) => {
if (!React.isValidElement(child)) return;
if (child.type !== NavbarBody) return;
return child;
});

const header = React.Children.map(props.children, (child) => {
if (!React.isValidElement(child)) return;
if (child.type !== NavbarHeader) return;
return child;
});

const bodyHeight = bodyRef.current?.getBoundingClientRect().height ?? 0;
const headerHeight = headerRef.current?.getBoundingClientRect().height ?? 0;

return (
<motion.div
drag="y"
style={{ y, maxHeight: headerHeight }}
className={`fixed bottom-0 z-auto flex w-dvw flex-col rounded-t-2xl bg-base`}
onDragEnd={(_, info) => {
y.stop();
if (info.velocity.y < -10) {
y.set(-bodyHeight);
return;
}
y.set(0);
}}
>
<div ref={headerRef}>
<div className="flex justify-center pt-2">
<hr className="center w-20 rounded-full border-2 border-on-base/20" />
</div>
<div className="flex flex-row gap-2 p-2">{header}</div>
</div>
<div className="flex flex-col" ref={bodyRef}>
{body}
</div>
</motion.div>
);
}
55 changes: 24 additions & 31 deletions liberica/src/page/Game.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { GameState, Team, Train } from "lib/bindings";
import { WebSocketApi } from "lib/websockets";
import { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import { NavbarBody, NavbarDrawer, NavbarHeader } from "components/Navbar";
import { Navbar } from "components/Navbar";
import { Button } from "components/lila/button";
import { useTranslation } from "react-i18next";

Expand Down Expand Up @@ -86,36 +86,29 @@ export function Game() {
onTrainClick={embark}
/>

<NavbarDrawer>
<NavbarHeader>
<div className="flex h-full w-full flex-col truncate rounded-xl rounded-xl bg-muted/10 px-4 py-2.5 text-sm text-on-muted">
{embarkedTrain ? (
<span className="truncate">
{embarkedTrain.line_name}{" "}
{embarkedTrain.direction}
</span>
) : (
<span className="truncate italic text-on-muted/50">
{t("EmbarkPlaceholder")}
</span>
)}
</div>

<Button
disabled={!embarkedTrain}
onClick={disembark}
variant={"primary"}
size="lg"
>
{t("Disembark")}
</Button>
</NavbarHeader>
<NavbarBody>
<div className="h-20 bg-red p-2 text-on-primary">
lol
</div>
</NavbarBody>
</NavbarDrawer>
<Navbar>
<div className="flex h-full w-full flex-col truncate rounded-xl rounded-xl bg-muted/10 px-4 py-2.5 text-sm text-on-muted">
{embarkedTrain ? (
<span className="truncate">
{embarkedTrain.line_name}{" "}
{embarkedTrain.direction}
</span>
) : (
<span className="truncate italic text-on-muted/50">
{t("EmbarkPlaceholder")}
</span>
)}
</div>

<Button
disabled={!embarkedTrain}
onClick={disembark}
variant={"primary"}
size="lg"
>
{t("Disembark")}
</Button>
</Navbar>
</GameStateContext.Provider>
</div>
);
Expand Down

0 comments on commit ed06848

Please sign in to comment.