Move attribution from end to start screen

michaelspiss · Mar 26, 2023 · 0a4a530 · 0a4a530
1 parent 6278430
commit 0a4a530
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 72 deletions.
diff --git a/src/Attribution.tsx b/src/Attribution.tsx
@@ -0,0 +1,16 @@
+import {Center, Text} from "@mantine/core";
+
+export default function Attribution() {
+    return <Center sx={{flexWrap: "nowrap", flexDirection: "column"}}>
+        <svg width="120" height="63" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73 38">
+            <path d="M28 0v31h8V0h37v38h-7V7h-8v31h-7V7h-8v31H21V7h-7v31H7V7H0V0h28z" fill="rgb(48, 112, 179)"></path>
+        </svg>
+        <Text size={14} align={"center"}>
+            Technical University of Munich<br/>
+            <br/>
+            Bachelor's Thesis in Informatics for the course Compiler Construction at the chair I2<br/>
+            <br/>
+            By Michael Spiss, advised by Dr. Michael Petter
+        </Text>
+    </Center>
+}
diff --git a/src/features/analyze_regex/presentation/screens/RegexInputScreen.tsx b/src/features/analyze_regex/presentation/screens/RegexInputScreen.tsx
@@ -1,4 +1,4 @@
-import {Button, Center, Group, Paper, Text, Title, useMantineTheme} from "@mantine/core";
+import {ActionIcon, Button, Center, Group, Modal, Paper, Text, Title, useMantineTheme} from "@mantine/core";
 import LectureConventions from "@/layout/presentation/LectureConventions";
 import {useEventListener} from "@mantine/hooks";
 import {useState} from "react";
@@ -7,6 +7,8 @@ import RegexError from "@/analyze_regex/domain/models/regexError";
 import useAppStateStore from "@/layout/stores/appStateStore";
 import RegexInput from "@/analyze_regex/presentation/RegexInput";
 import DefaultError from "@/layout/presentation/DefaultError";
+import Attribution from "../../../../Attribution";
+import {IconInfoCircle} from "@tabler/icons";
 
 const RegexExample = (props: { regex: string }) => {
     return <Text color={"blue"}
@@ -26,6 +28,7 @@ const RegexExample = (props: { regex: string }) => {
 export default function RegexInputScreen() {
     const theme = useMantineTheme();
     const [isLoading, setIsLoading] = useState(false);
+    const [showAttribution, setShowAttribution] = useState(false);
     const [error, setError] = useState<RegexError | null>(null);
 
     const formRef = useEventListener('submit', (event) => {
@@ -60,43 +63,51 @@ export default function RegexInputScreen() {
         }
     });
 
-    return <Center style={{height: "100%"}}>
-        <Paper p={"xl"}
-               shadow={"lg"}
-               withBorder={true}
-               style={{width: theme.spacing.xl * 40}}
-               mb={theme.other.headerHeight}>
-            <form ref={formRef}>
-                <Title order={6}>Input regular expression</Title>
-                <Group grow style={{alignItems: "stretch"}}>
-                    <RegexInput errorPosition={!error ? undefined : error.position}
-                                resetErrorPos={() => {
-                                    if (error !== null && error?.position !== -1) {
-                                        setError(new RegexError(error!.title, error!.message, -1))
-                                    }
-                                }}
-                                onEnter={() => {
-                                    formRef.current.dispatchEvent(new Event("submit", {cancelable: true}));
-                                }}/>
-                    <Button style={{flexGrow: 0}} variant={"outline"} onClick={() => {
-                        const input = document.getElementById("regexInput")! as HTMLInputElement;
-                        console.log(input.selectionStart)
-                        const pos = input.selectionStart ?? input.value.length - 1;
-                        const value = input.value;
-                        useAppStateStore.setState({regex: value.substring(0, pos) + "ε" + value.substring(pos)});
-                        setTimeout(() => {
-                            input.focus();
-                            input.setSelectionRange(pos + 1, pos + 1);
-                        }, 50)
-                    }}>ε</Button>
-                    <Button style={{flexGrow: 0}} type={"submit"} loading={isLoading}>Start</Button>
+    return <>
+        <Center style={{height: "100%"}}>
+            <Paper p={"xl"}
+                   pt={"lg"}
+                   shadow={"lg"}
+                   withBorder={true}
+                   style={{width: theme.spacing.xl * 40}}
+                   mb={theme.other.headerHeight}>
+                <Group pb={"xs"} position={"right"}>
+                    <ActionIcon variant={"outline"} onClick={() => setShowAttribution(true)}><IconInfoCircle size={16}/></ActionIcon>
                 </Group>
-                <Text size={"sm"} pb={"md"}>Or try one of the lecture examples: <RegexExample
-                    regex={"(a|b)*db|c*"}/>, <RegexExample regex={"a(ab*)*|b|a*"}/>, <RegexExample regex={"ε|(ba)c(a|b)*"}/>, <RegexExample
-                    regex={"(ab|ε)*"}/>, <RegexExample regex={"(a|b)*aa|b"}/></Text>
-            </form>
-            {!error ? null : <DefaultError title={error.title} message={error.message}/>}
-            <LectureConventions/>
-        </Paper>
-    </Center>
+                <form ref={formRef}>
+                    <Title order={6}>Input regular expression</Title>
+                    <Group grow style={{alignItems: "stretch"}}>
+                        <RegexInput errorPosition={!error ? undefined : error.position}
+                                    resetErrorPos={() => {
+                                        if (error !== null && error?.position !== -1) {
+                                            setError(new RegexError(error!.title, error!.message, -1))
+                                        }
+                                    }}
+                                    onEnter={() => {
+                                        formRef.current.dispatchEvent(new Event("submit", {cancelable: true}));
+                                    }}/>
+                        <Button style={{flexGrow: 0}} variant={"outline"} onClick={() => {
+                            const input = document.getElementById("regexInput")! as HTMLInputElement;
+                            console.log(input.selectionStart)
+                            const pos = input.selectionStart ?? input.value.length - 1;
+                            const value = input.value;
+                            useAppStateStore.setState({regex: value.substring(0, pos) + "ε" + value.substring(pos)});
+                            setTimeout(() => {
+                                input.focus();
+                                input.setSelectionRange(pos + 1, pos + 1);
+                            }, 50)
+                        }}>ε</Button>
+                        <Button style={{flexGrow: 0}} type={"submit"} loading={isLoading}>Start</Button>
+                    </Group>
+                    <Text size={"sm"} pb={"md"}>Or try one of the lecture examples: <RegexExample
+                        regex={"(a|b)*db|c*"}/>, <RegexExample regex={"a(ab*)*|b|a*"}/>, <RegexExample
+                        regex={"ε|(ba)c(a|b)*"}/>, <RegexExample
+                        regex={"(ab|ε)*"}/>, <RegexExample regex={"(a|b)*aa|b"}/></Text>
+                </form>
+                {!error ? null : <DefaultError title={error.title} message={error.message}/>}
+                <LectureConventions/>
+            </Paper>
+        </Center>
+        <Modal centered opened={showAttribution} onClose={() => setShowAttribution(false)}><Attribution/></Modal>
+    </>
 }
diff --git a/src/features/tree_builder/presentation/CompletionModal.tsx b/src/features/tree_builder/presentation/CompletionModal.tsx
@@ -1,17 +1,15 @@
-import {ActionIcon, Box, Button, Divider, Flex, Group, Modal, Text, useMantineTheme} from "@mantine/core";
+import {Box, Button, Flex, Group, Modal, useMantineTheme} from "@mantine/core";
 import useAppStateStore from "@/layout/stores/appStateStore";
 import backToHome from "../../../backToHome";
 import AutomatonPreview from "@/automaton_builder/presentation/AutomatonPreview";
 import InteractiveTreeBuilder from "@/tree_builder/presentation/InteractiveTreeBuilder";
 import RegexHighlighter from "@/analyze_regex/presentation/RegexHighlighter";
-import {IconCircleCheck, IconInfoCircle} from "@tabler/icons";
-import {useState} from "react";
+import {IconCircleCheck} from "@tabler/icons";
 
 export default function CompletionModal() {
     const isOpen = useAppStateStore(state => state.isDone);
     const regex = useAppStateStore(state => state.regex);
     const theme = useMantineTheme();
-    const [displayCredits, setDisplayCredits] = useState(false);
 
     return <Modal opened={isOpen}
                   onClose={() => useAppStateStore.setState({isDone: false})}
@@ -21,48 +19,33 @@ export default function CompletionModal() {
                   overlayBlur={5}
                   overlayColor={theme.colors.gray[5]}
                   overlayOpacity={.5}
-                  size={displayCredits ? "75%" : "50%"}
-                  styles={{modal: {
-                      minWidth: 450
-                      }}}
+                  size={"50%"}
+                  styles={{
+                      modal: {
+                          minWidth: 450
+                      }
+                  }}
     >
         <Group noWrap>
-            <Box w={displayCredits ? "66.666%" : "100%"}>
+            <Box w={"100%"}>
                 <Flex align={"center"} pb={theme.spacing.md}>
                     <IconCircleCheck color={theme.colors.green[8]} size={56}/>
                     <Box pl={theme.spacing.md}>
-                        Well done! You completed the Berry-Sethi construction for the regular expression <RegexHighlighter regex={regex} inline/>
+                        Well done! You completed the Berry-Sethi construction for the regular
+                        expression <RegexHighlighter regex={regex} inline/>
                     </Box>
                 </Flex>
 
                 <div style={{height: "65vh", minHeight: 400, width: "100%", display: "flex", flexDirection: "column"}}>
                     <InteractiveTreeBuilder/>
-                    <AutomatonPreview />
+                    <AutomatonPreview/>
                 </div>
             </Box>
-            {displayCredits ? <Divider orientation="vertical" variant="dashed" /> : null}
-            {displayCredits ? <Box w={"33.333%"}>
-                <svg width="120" height="63" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73 38">
-                    <path d="M28 0v31h8V0h37v38h-7V7h-8v31h-7V7h-8v31H21V7h-7v31H7V7H0V0h28z" fill="rgb(48, 112, 179)"></path>
-                </svg>
-                <Text size={14}>
-                    Technical University of Munich<br/>
-                    <br/>
-                    Bachelor's Thesis in Informatics<br/>
-                    For the Course Compiler Construction<br/>
-                    At the chair I2<br/>
-                    <br/>
-                    By Michael Spiss<br/>
-                    Advised by Dr. Michael Petter
-                </Text>
-            </Box> : null}
         </Group>
-        <Group pt={theme.spacing.md} position={"apart"}>
-            <Group>
-                <Button onClick={() => useAppStateStore.setState({isDone: false})} variant={"outline"} color={"blue"}>Back to last step</Button>
-                <Button onClick={backToHome} variant={"filled"}>Attempt another regular expression</Button>
-            </Group>
-            <ActionIcon color={"gray"} size={36} variant={"outline"} onClick={() => setDisplayCredits(!displayCredits)}><IconInfoCircle /></ActionIcon>
+        <Group pt={theme.spacing.md}>
+            <Button onClick={() => useAppStateStore.setState({isDone: false})} variant={"outline"} color={"blue"}>Back
+                to last step</Button>
+            <Button onClick={backToHome} variant={"filled"}>Attempt another regular expression</Button>
         </Group>
     </Modal>
 }