Skip to content

Commit 85b4afc

Browse files
ErikvvErikvv
committed
Add video tutorial page
1 parent 3f235e3 commit 85b4afc

File tree

24 files changed

+240
-149
lines changed

24 files changed

+240
-149
lines changed

‎webtool/frontend/src/App.tsx‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import {FunctionComponent} from "react"
2+
import {Theme} from "@radix-ui/themes"
3+
import {css} from "@emotion/react"
4+
import {DevModeContext, useDevMode} from "./shared-components/devmode/DevMode.ts"
5+
import {Router} from "./Router.tsx"
6+
import React from "react"
7+
8+
export const App: FunctionComponent = () => {
9+
const devModeControl = useDevMode()
10+
return (
11+
<React.StrictMode>
12+
<Theme
13+
css={css`
14+
display: flex;
15+
flex-direction: column;
16+
align-items: center;
17+
justify-content: center;
18+
19+
/* set variables for Radix UI */
20+
--cursor-button: pointer;
21+
--cursor-checkbox: pointer;
22+
--cursor-disabled: default;
23+
--cursor-link: pointer;
24+
--cursor-menu-item: pointer;
25+
--cursor-radio: pointer;
26+
--cursor-slider-thumb: grab;
27+
--cursor-slider-thumb-active: grabbing;
28+
--cursor-switch: pointer;
29+
30+
/* fonts copied from local4local.nu */
31+
@font-face {
32+
font-family: 'rubik-regular';
33+
src: url('/rubik-regular.woff2') format('woff2');
34+
font-weight: normal;
35+
font-style: normal;
36+
font-display: swap;
37+
}
38+
39+
@font-face {
40+
font-family: 'rubik-light';
41+
src: url('/rubik-light.woff2') format('woff2');
42+
font-style: normal;
43+
font-display: swap;
44+
}
45+
46+
--default-font-family: 'rubik-light';
47+
--heading-font-family: 'rubik-regular';
48+
--strong-font-family: 'rubik-regular';
49+
50+
h1, h2, h3, h4, h5, h6 {
51+
font-family: var(--heading-font-family), sans-serif;
52+
}
53+
54+
strong, b {
55+
font-family: var(--strong-font-family), sans-serif;
56+
}
57+
58+
button {
59+
font-family: var(--strong-font-family), sans-serif;
60+
}
61+
`}
62+
>
63+
<DevModeContext value={devModeControl}>
64+
<Router />
65+
</DevModeContext>
66+
</Theme>
67+
</React.StrictMode>
68+
)
69+
}

‎webtool/frontend/src/Router.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
RouterProvider,
77
} from "react-router";
88
import {pilotFromJson} from "local4local"
9+
import {VideoTutorialPage} from "./pages/video-tutorial/VideoTutorialPage.tsx"
910

1011
const router = createBrowserRouter([
1112
{
@@ -32,7 +33,11 @@ const router = createBrowserRouter([
3233
}
3334
return result
3435
}
35-
}
36+
},
37+
{
38+
path: "/video-tutorial",
39+
Component: VideoTutorialPage,
40+
},
3641
]);
3742

3843
export const Router: FunctionComponent = () => {

‎webtool/frontend/src/layout/Layout.tsx‎

Lines changed: 9 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,13 @@
11
import { Header } from "./header.tsx";
2-
import { Router } from "../Router.tsx";
32
import { Footer } from "./footer/Footer.tsx";
43
import '@radix-ui/themes/styles.css';
54
import "./style.css"
6-
import { Theme } from "@radix-ui/themes";
7-
import { css } from "@emotion/react";
8-
import {IsDevModeContext, useDevMode} from "../shared-components/devmode/DevMode.ts"
9-
10-
export function Layout() {
11-
const devModeControl = useDevMode()
12-
return (
13-
<Theme
14-
css={css`
15-
display: flex;
16-
flex-direction: column;
17-
align-items: center;
18-
justify-content: center;
19-
20-
/* set variables for Radix UI */
21-
--cursor-button: pointer;
22-
--cursor-checkbox: pointer;
23-
--cursor-disabled: default;
24-
--cursor-link: pointer;
25-
--cursor-menu-item: pointer;
26-
--cursor-radio: pointer;
27-
--cursor-slider-thumb: grab;
28-
--cursor-slider-thumb-active: grabbing;
29-
--cursor-switch: pointer;
30-
31-
/* fonts copied from local4local.nu */
32-
@font-face {
33-
font-family: 'rubik-regular';
34-
src: url('/rubik-regular.woff2') format('woff2');
35-
font-weight: normal;
36-
font-style: normal;
37-
font-display: swap;
38-
}
39-
40-
@font-face {
41-
font-family: 'rubik-light';
42-
src: url('/rubik-light.woff2') format('woff2');
43-
font-weight: light;
44-
font-style: normal;
45-
font-display: swap;
46-
}
47-
48-
--default-font-family: 'rubik-light';
49-
--heading-font-family: 'rubik-regular';
50-
--strong-font-family: 'rubik-regular';
51-
52-
h1, h2, h3, h4, h5, h6 {
53-
font-family: var(--heading-font-family), sans-serif;
54-
}
55-
56-
strong, b {
57-
font-family: var(--strong-font-family), sans-serif;
58-
}
59-
60-
button {
61-
font-family: var(--strong-font-family), sans-serif;
62-
}
63-
`}
64-
>
65-
<Header style={{marginTop: "auto"}}/>
66-
<IsDevModeContext value={devModeControl.isDevMode}>
67-
<Router />
68-
</IsDevModeContext>
69-
<Footer style={{marginTop: "auto"}} devModeControl={devModeControl} />
70-
</Theme>
71-
);
72-
}
5+
import {FunctionComponent, PropsWithChildren} from "react"
6+
7+
export const Layout: FunctionComponent<PropsWithChildren> = ({children}) => (
8+
<>
9+
<Header style={{marginTop: "auto"}}/>
10+
{children}
11+
<Footer style={{marginTop: "auto"}} />
12+
</>
13+
)

‎webtool/frontend/src/layout/footer/Footer.tsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,16 @@ import {ComponentProps, FunctionComponent} from "react"
33
import {GitLink} from "./GitLink.tsx"
44
import {DevModeButton} from "../../shared-components/devmode/DevModeButton.tsx"
55
import {ZenmoAttribution} from "./ZenmoAttribution.tsx"
6-
import {DevModeControl} from "../../shared-components/devmode/DevMode.ts"
76

8-
type FooterProps = {
9-
devModeControl: DevModeControl,
10-
} & ComponentProps<"div">
11-
12-
export const Footer: FunctionComponent<FooterProps> = ({devModeControl, ...props}) => (
7+
export const Footer: FunctionComponent<ComponentProps<"div">> = ({...props}) => (
138
<div css={css`
149
padding: .5rem 1rem;
1510
display: flex;
1611
justify-content: end;
1712
align-items: center;
1813
gap: 1.5rem;
1914
`} {...props}>
20-
<DevModeButton devModeControl={devModeControl} />
15+
<DevModeButton />
2116
<GitLink />
2217
<ZenmoAttribution />
2318
</div>

‎webtool/frontend/src/main.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
1-
import React from 'react'
21
import ReactDOM from 'react-dom/client'
3-
import {Layout} from './layout/Layout.tsx'
2+
import {App} from "./App.tsx"
43

54
ReactDOM.createRoot(document.getElementById("app")!).render(
6-
<React.StrictMode>
7-
<Layout />
8-
</React.StrictMode>,
5+
<App />,
96
)

‎webtool/frontend/src/pages/intro/IntroPage.tsx‎

Lines changed: 28 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,40 @@
1-
import {ComponentProps, FunctionComponent} from "react"
1+
import {FunctionComponent} from "react"
22
import {IntroText} from "./components/IntroText.tsx"
33
import {UnderDevelopmentNotice} from "./components/UnderDevelopmentNotice.tsx"
4-
import {StartButton} from "./components/StartButton.tsx"
4+
import {StartButton} from "../../shared-components/buttons/StartButton.tsx"
5+
import { Layout } from "../../layout/Layout.tsx"
6+
import {VideoTutorialButton} from "./components/VideoTutorialButton.tsx"
57

6-
export const IntroPage: FunctionComponent<ComponentProps<"div">> = (props) => {
8+
export const IntroPage: FunctionComponent = () => {
79
// Deeplinks used to refer to the main page.
810
// This redirects them to the appropriate page.
911
if (window.location.search.includes("pilot")) {
1012
window.location.pathname = "/rekentool"
1113
}
1214

1315
return (
14-
<div style={{
15-
// properties as child
16-
margin: "1rem",
17-
marginBottom: "2rem",
18-
// properties as parent
19-
display: "flex",
20-
flexDirection: "column",
21-
alignItems: "center",
22-
gap: "1rem",
23-
}} {...props}>
24-
<IntroText/>
25-
<UnderDevelopmentNotice/>
26-
<StartButton/>
27-
</div>
16+
<Layout>
17+
<div style={{
18+
// properties as child
19+
margin: "1rem",
20+
marginBottom: "2rem",
21+
// properties as parent
22+
display: "flex",
23+
flexDirection: "column",
24+
alignItems: "center",
25+
gap: "1rem",
26+
}}>
27+
<IntroText/>
28+
<UnderDevelopmentNotice/>
29+
<div style={{
30+
display: "flex",
31+
justifyContent: "center",
32+
gap: "2rem",
33+
}}>
34+
<VideoTutorialButton />
35+
<StartButton/>
36+
</div>
37+
</div>
38+
</Layout>
2839
)
2940
}

‎webtool/frontend/src/pages/intro/components/LoadExampleCaseButton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {FunctionComponent} from "react";
22
import {Pilot} from "local4local"
33
import {local4localDarkOrange} from "../../../colors.ts";
4-
import {Local4LocalButton} from "../../../shared-components/Local4LocalButton.tsx";
4+
import {Local4LocalButton} from "../../../shared-components/buttons/Local4LocalButton.tsx";
55
import {NavLink} from "react-router";
66
import {FaArrowRight} from "react-icons/fa6"
77

‎webtool/frontend/src/pages/intro/components/StartButton.tsx‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎webtool/frontend/src/pages/intro/components/VideoTutorialButton.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import {ComponentProps, FunctionComponent} from "react"
2+
import {NavLink} from "react-router"
3+
import {VideoIcon} from "@radix-ui/react-icons"
4+
import {BigButton} from "../../../shared-components/buttons/BigButton.tsx"
5+
6+
export const VideoTutorialButton: FunctionComponent<ComponentProps<typeof BigButton>> = ({...props}) => (
7+
<BigButton
8+
asChild
9+
{...props}
10+
>
11+
<NavLink to="/video-tutorial">
12+
<VideoIcon width="2rem" height="2rem" />
13+
Videotutorial
14+
</NavLink>
15+
</BigButton>
16+
)

‎webtool/frontend/src/pages/rekentool/RekentoolPage.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,18 @@ import {usePromiseValue} from "./services/use-promise-value.ts"
1010
import {usePilot} from "./services/use-pilot.ts"
1111
import {useOnce} from "./services/use-once.ts";
1212
import {useLoaderData} from "react-router";
13+
import { Layout } from "../../layout/Layout.tsx"
1314

1415
export const anylogicElementId = "anylogic"
1516

1617
export const RekentoolPage: FunctionComponent = () => {
1718
const {pilot} = useLoaderData()
1819

19-
return <ConfigureAndSimulate initialPilot={pilot} />
20+
return (
21+
<Layout>
22+
<ConfigureAndSimulate initialPilot={pilot} />
23+
</Layout>
24+
)
2025
}
2126

2227
type ConfigAndSimulateProps = {

0 commit comments

Comments
 (0)