]> git.localhorst.tv Git - alttp.git/commitdiff
front page stuff
authorDaniel Karbach <daniel.karbach@localhorst.tv>
Wed, 21 May 2025 10:47:35 +0000 (12:47 +0200)
committerDaniel Karbach <daniel.karbach@localhorst.tv>
Wed, 21 May 2025 10:47:35 +0000 (12:47 +0200)
resources/js/app/Footer.js
resources/js/i18n/de.js
resources/js/i18n/en.js
resources/js/pages/Front.js
resources/sass/front.scss

index 91b097383beb511a03dd499799b5043f49d3fabd..e3e58bd18c6a9fcce009a756536ebeac1073af29 100644 (file)
@@ -18,7 +18,14 @@ const Footer = () => {
                                        <Nav.Item as="li">
                                                <LinkContainer to="/tournaments/6">
                                                        <Nav.Link className="p-0 text-muted" href="/tournaments/6">
-                                                               Deutsche ALttP Community - Seed der Woche
+                                                               {t('footer.sdw')}
+                                                       </Nav.Link>
+                                               </LinkContainer>
+                                       </Nav.Item>
+                                       <Nav.Item as="li">
+                                               <LinkContainer to="/tournaments/7">
+                                                       <Nav.Link className="p-0 text-muted" href="/tournaments/7">
+                                                               {t('footer.circus')}
                                                        </Nav.Link>
                                                </LinkContainer>
                                        </Nav.Item>
@@ -36,6 +43,24 @@ const Footer = () => {
                                                        </Nav.Link>
                                                </LinkContainer>
                                        </Nav.Item>
+                                       <Nav.Item as="li">
+                                               <Nav.Link
+                                                       className="p-0 text-muted"
+                                                       href="https://alttprasyncs.com/"
+                                                       target="_blank"
+                                               >
+                                                       {t('footer.alttprasyncs')}
+                                               </Nav.Link>
+                                       </Nav.Item>
+                                       <Nav.Item as="li">
+                                               <Nav.Link
+                                                       className="p-0 text-muted"
+                                                       href="https://smz3asyncs.com/"
+                                                       target="_blank"
+                                               >
+                                                       {t('footer.smz3asyncs')}
+                                               </Nav.Link>
+                                       </Nav.Item>
                                </Nav>
                        </Col>
                        <Col md={4}>
@@ -116,10 +141,10 @@ const Footer = () => {
                                        <Nav.Item as="li">
                                                <Nav.Link
                                                        className="p-0 text-muted"
-                                                       href="https://discord.gg/hVw5Zeq"
+                                                       href="https://discord.gg/yVdTkEZhk6"
                                                        target="_blank"
                                                >
-                                                       {t('footer.connect')}
+                                                       {t('footer.stepladder')}
                                                </Nav.Link>
                                        </Nav.Item>
                                        <Nav.Item as="li">
index 643714cbca51e02b1fa1b1c956e32d99a2391c86..2ce6d9ffccaaaa4097d27404ac42bf891b966eab 100644 (file)
@@ -194,9 +194,23 @@ export default {
                        start: 'Start',
                        upcomingEpisodes: 'Anstehende Rennen',
                },
+               front: {
+                       circus: 'Mystery Zirkus',
+                       eventlist: 'Liste der Veranstaltungen',
+                       events: 'Veranstaltungen und Restreams',
+                       map: 'ALttP Karte',
+                       resources: 'Lernmaterial',
+                       schedule: 'Race und Restream Terminplan',
+                       sdw: 'Seed der Woche',
+                       tech: 'Tricks und Tutorials',
+                       title: 'Gemischter Link to the Past und Super Metroid Krams',
+                       tournaments: 'Laufende Wettbewerbe',
+               },
                footer: {
                        alttpde: 'Deutscher ALttP Discord',
+                       alttprasyncs: 'ALttPR Asyncs',
                        alttpwiki: 'ALttP Speedrunning Wiki',
+                       circus: 'Lost Woods Community - Mystery Zirkus',
                        competitions: 'Wettbewerbe',
                        connect: 'Connect Spedruns Discord',
                        contact: 'Wenn du gerne ein Turnier auf dieser Seite organisieren möchtest, wende dich bitte an holysmoke86 im Discord.',
@@ -208,8 +222,11 @@ export default {
                        resources: 'Ressourcen',
                        restreamCentral: 'Restream Central Discord',
                        schedule: 'Terminplan',
+                       sdw: 'Deutsche ALttP Community - Seed der Woche',
                        smd: 'Deutscher Super Metroid Discord',
                        smwiki: 'Super Metroid Speedrunning Wiki',
+                       smz3asyncs: 'SMZ3 Asyncs',
+                       stepladder: 'ALttPR Step Ladder',
                        tech: 'ALttP Techniken',
                },
                general: {
@@ -397,7 +414,7 @@ export default {
                privacy: {
                        heading: 'Datenschutz',
                        p1: 'Wir benutzen Cookies und den Browserspeicher, um deine Anmeldung und die ausgewählte Sprache zu speichern, sowie XSRF zu verhinden.',
-                       p2: 'Wenn du auf den Login Button klickst, wirst du auf eine Anmeldeseite von Discord weitergeleitet. Sofern du dich anmeldest, überträgt Discord und deinen Benutzernamen, Discriminator und ID.',
+                       p2: 'Wenn du auf den Login Button klickst, wirst du auf eine Anmeldeseite von Discord weitergeleitet. Sofern du dich anmeldest, überträgt Discord uns deinen Benutzernamen, Discriminator und ID.',
                        p3: 'Deine Eingaben bei Turnieren werden als Teil des Ergebnisses auf dieser Seite veröffenlicht und ggf. auf dem Discord-Server der entsprechenden Community geteilt.',
                },
                protocol: {
index 06ff191475e3ca203f0e0404562835f7ae9d5b99..d579008800f774ba661dc646809bdd5e589c8653 100644 (file)
@@ -194,9 +194,23 @@ export default {
                        start: 'Start',
                        upcomingEpisodes: 'Upcoming races',
                },
+               front: {
+                       circus: 'Mystery Circus',
+                       eventlist: 'List of Events',
+                       events: 'Events and Restreams',
+                       map: 'ALttP Map',
+                       resources: 'Learning Resources',
+                       schedule: 'Schedule of Races and Restreams',
+                       sdw: 'Seed of the Week',
+                       tech: 'Tech and Tutorials',
+                       title: 'Various Link to the Past and Super Metroid Stuff',
+                       tournaments: 'Active Competitions',
+               },
                footer: {
                        alttpde: 'German ALttP Discord',
+                       alttprasyncs: 'ALttPR Asyncs',
                        alttpwiki: 'ALttP Speedrunning Wiki',
+                       circus: 'Lost Woods Community - Mystery Circus',
                        competitions: 'Competitions',
                        connect: 'Connect Spedruns Discord',
                        contact: 'If you would like to organize a Tournament on this site, please contact holysmoke86 on Discord.',
@@ -208,8 +222,11 @@ export default {
                        resources: 'Resources',
                        restreamCentral: 'Restream Central Discord',
                        schedule: 'Schedule',
+                       sdw: 'German ALttP Community - Seed of the Week',
                        smd: 'German Super Metroid Discord',
                        smwiki: 'Super Metroid Speedrunning Wiki',
+                       smz3asyncs: 'SMZ3 Asyncs',
+                       stepladder: 'ALttPR Step Ladder',
                        tech: 'ALttP Tech',
                },
                general: {
index 91ada1f376fb9b224f35be7f386908ae6718acdf..f0485ed1f078a12ee4de64abf8f30de2b083fca4 100644 (file)
@@ -1,11 +1,13 @@
 import React from 'react';
 import { Button, Col, Container, Image, Row } from 'react-bootstrap';
-import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Link, useNavigate } from 'react-router-dom';
 
 import CanonicalLinks from '../components/common/CanonicalLinks';
 
 const Front = () => {
        const navigate = useNavigate();
+       const { t } = useTranslation();
 
        React.useEffect(() => {
                const returnPath = localStorage.getItem('returnPath');
@@ -15,20 +17,64 @@ const Front = () => {
                }
        }, []);
 
-       return <Container className="mt-5">
+       return <Container className="front-page">
                <CanonicalLinks base="/" />
+               <h1>{t('front.title')}</h1>
+               <h2>{t('front.tournaments')}</h2>
                <Row>
-                       <Col md={{ offset: 3, span: 6 }}>
-                               <Button
-                                       className="front-panel"
-                                       onClick={() => navigate('/tournaments/6')}
-                                       variant="outline-secondary"
-                               >
+                       <Col sm={6}>
+                               <Link className="front-panel" to="/tournaments/6">
                                        <Image alt="" className="image" src="/media/alttp/front.png" />
                                        <div className="title">
-                                               ALttPR Weekly
+                                               {t('front.sdw')}
                                        </div>
-                               </Button>
+                               </Link>
+                       </Col>
+                       <Col sm={6}>
+                               <Link className="front-panel" to="/tournaments/6">
+                                       <Image alt="" className="image" src="/media/alttp/front.png" />
+                                       <div className="title">
+                                               {t('front.circus')}
+                                       </div>
+                               </Link>
+                       </Col>
+               </Row>
+               <h2>{t('front.events')}</h2>
+               <Row>
+                       <Col sm={6}>
+                               <Link className="front-panel" to="/events">
+                                       <Image alt="" className="image" src="/media/alttp/front.png" />
+                                       <div className="title">
+                                               {t('front.eventlist')}
+                                       </div>
+                               </Link>
+                       </Col>
+                       <Col sm={6}>
+                               <Link className="front-panel" to="/schedule">
+                                       <Image alt="" className="image" src="/media/alttp/front.png" />
+                                       <div className="title">
+                                               {t('front.schedule')}
+                                       </div>
+                               </Link>
+                       </Col>
+               </Row>
+               <h2>{t('front.resources')}</h2>
+               <Row>
+                       <Col sm={6}>
+                               <Link className="front-panel" to="/tech">
+                                       <Image alt="" className="image" src="/media/alttp/front.png" />
+                                       <div className="title">
+                                               {t('front.tech')}
+                                       </div>
+                               </Link>
+                       </Col>
+                       <Col sm={6}>
+                               <Link className="front-panel" to="/map/lw">
+                                       <Image alt="" className="image" src="/media/alttp/front.png" />
+                                       <div className="title">
+                                               {t('front.map')}
+                                       </div>
+                               </Link>
                        </Col>
                </Row>
        </Container>;
index fc96e5d93b54dfa2c33ebcca4f75d8d6c5e12a50..1005c7241f9e58c673067b1202b90368b9e6b4ae 100644 (file)
@@ -1,13 +1,35 @@
+.front-page {
+       h1 {
+               margin-top: 2em;
+               margin-bottom: 2em;
+       }
+       h2 {
+               margin-top: 3em;
+               margin-bottom: 2em;
+       }
+}
 .front-panel {
        display: block;
+       color: inherit;
        font-size: 200%;
        font-weight: bold;
-       margin: 3em 0;
+       text-align: center;
+       text-decoration: none;
        width: 100%;
 
        .image {
                border-radius: 2em;
-               width: 100%;
+               width: 75%;
                height: auto;
        }
+       .title {
+       }
+
+       &:focus, &:hover, &:active {
+               text-decoration: underline;
+               .image {
+                       border: medium solid $light;
+                       box-shadow: 0 0 1em $light;
+               }
+       }
 }