simple footer

diff --git a/resources/js/components/App.js b/resources/js/components/App.js
index 6d4030357082ad7e4c985c62349ea06b8519f629..bea5c34516858a13a2860b7dc81e0a6e236baf0f 100644 (file)
--- a/resources/js/components/App.js
+++ b/resources/js/components/App.js
@@ -2,6 +2,7 @@ import axios from 'axios';
 import React, { useEffect, useState } from 'react';
 import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 
 import React, { useEffect, useState } from 'react';
 import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 

+import Footer from './common/Footer';

 import Header from './common/Header';
 import AlttpSeed from './pages/AlttpSeed';
 import Front from './pages/Front';
 import Header from './common/Header';
 import AlttpSeed from './pages/AlttpSeed';
 import Front from './pages/Front';


@@ -65,6 +66,7 @@ const App = () => {
                                        <Route path="/" element={<Front />} />
                                        <Route path="*" element={<Navigate to="/" />} />
                                </Routes>
                                        <Route path="/" element={<Front />} />
                                        <Route path="*" element={<Navigate to="/" />} />
                                </Routes>

+                               <Footer />

                        </UserContext.Provider>
                </AlttpBaseRomProvider>
        </BrowserRouter>;
                        </UserContext.Provider>
                </AlttpBaseRomProvider>
        </BrowserRouter>;

diff --git a/resources/js/components/common/Footer.js b/resources/js/components/common/Footer.js
new file mode 100644 (file)
index 0000000..0ded211
--- /dev/null
+++ b/resources/js/components/common/Footer.js
@@ -0,0 +1,110 @@
+import React from 'react';
+import { Col, Nav, Row } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+import { LinkContainer } from 'react-router-bootstrap';
+
+import PrivacyDialog from './PrivacyDialog';
+
+const Footer = () => {
+       const [showDialog, setShowDialog] = React.useState(false);
+
+       const { t } = useTranslation();
+
+       return <footer className="bg-dark mt-5 px-3 py-5">
+               <Row>
+                       <Col md={4}>
+                               <h5>{t('footer.competitions')}</h5>
+                               <Nav as="ul" className="flex-column">
+                                       <Nav.Item as="li">
+                                               <LinkContainer to="/tournaments/6">
+                                                       <Nav.Link className="p-0 text-muted" href="/tournaments/6">
+                                                               Deutsche ALttP Community - Seed der Woche
+                                                       </Nav.Link>
+                                               </LinkContainer>
+                                       </Nav.Item>
+                                       <Nav.Item as="li">
+                                               <LinkContainer to="/tournaments/5">
+                                                       <Nav.Link className="p-0 text-muted" href="/tournaments/5">
+                                                               Wörterbuch - Super Metroid Async
+                                                       </Nav.Link>
+                                               </LinkContainer>
+                                       </Nav.Item>
+                               </Nav>
+                       </Col>
+                       <Col md={4}>
+                               <h5>{t('footer.resources')}</h5>
+                               <Nav as="ul" className="flex-column">
+                                       <Nav.Item as="li">
+                                               <Nav.Link
+                                                       className="p-0 text-muted"
+                                                       href="https://alttp-wiki.net/"
+                                                       target="_blank"
+                                               >
+                                                       {t('footer.alttpwiki')}
+                                               </Nav.Link>
+                                       </Nav.Item>
+                                       <Nav.Item as="li">
+                                               <LinkContainer to="/tech">
+                                                       <Nav.Link className="p-0 text-muted" href="/tech">
+                                                               ALttP Tech Index
+                                                       </Nav.Link>
+                                               </LinkContainer>
+                                       </Nav.Item>
+                                       <Nav.Item as="li">
+                                               <Nav.Link
+                                                       className="p-0 text-muted"
+                                                       href="https://wiki.supermetroid.run/"
+                                                       target="_blank"
+                                               >
+                                                       {t('footer.smwiki')}
+                                               </Nav.Link>
+                                       </Nav.Item>
+                               </Nav>
+                       </Col>
+                       <Col md={4}>
+                               <h5>{t('footer.info')}</h5>
+                               <Nav as="ul" className="flex-column">
+                                       <Nav.Item as="li">
+                                               <Nav.Link
+                                                       className="p-0 text-muted"
+                                                       onClick={() => { setShowDialog(true); }}
+                                               >
+                                                       {t('footer.privacy')}
+                                               </Nav.Link>
+                                       </Nav.Item>
+                                       <Nav.Item as="li">
+                                               <Nav.Link
+                                                       className="p-0 text-muted"
+                                                       href="https://discord.gg/5zuANcS"
+                                                       target="_blank"
+                                               >
+                                                       {t('footer.alttpde')}
+                                               </Nav.Link>
+                                       </Nav.Item>
+                                       <Nav.Item as="li">
+                                               <Nav.Link
+                                                       className="p-0 text-muted"
+                                                       href="https://discord.com/invite/GGdrbnQmVs"
+                                                       target="_blank"
+                                               >
+                                                       {t('footer.smd')}
+                                               </Nav.Link>
+                                       </Nav.Item>
+                                       <Nav.Item as="li">
+                                               <Nav.Link
+                                                       className="p-0 text-muted"
+                                                       href="https://discord.gg/hVw5Zeq"
+                                                       target="_blank"
+                                               >
+                                                       {t('footer.connect')}
+                                               </Nav.Link>
+                                       </Nav.Item>
+                               </Nav>
+                       </Col>
+               </Row>
+               <p className="pt-5 text-center text-muted">{t('footer.contact')}</p>
+               <PrivacyDialog onHide={() => { setShowDialog(false); }} show={showDialog} />
+       </footer>;
+};
+
+export default Footer;

diff --git a/resources/js/components/common/PrivacyDialog.js b/resources/js/components/common/PrivacyDialog.js
new file mode 100644 (file)
index 0000000..9cf96b3
--- /dev/null
+++ b/resources/js/components/common/PrivacyDialog.js
@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button, Modal } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+
+const PrivacyDialog = ({
+       onHide,
+       show,
+}) => {
+       const { t } = useTranslation();
+
+       return <Modal onHide={onHide} show={show}>
+               <Modal.Header closeButton>
+                       <Modal.Title>
+                               {t('privacy.heading')}
+                       </Modal.Title>
+               </Modal.Header>
+               <Modal.Body>
+                       <p>{t('privacy.p1')}</p>
+                       <p>{t('privacy.p2')}</p>
+                       <p>{t('privacy.p3')}</p>
+               </Modal.Body>
+               <Modal.Footer>
+                       <Button onClick={onHide} variant="secondary">
+                               {t('button.close')}
+                       </Button>
+               </Modal.Footer>
+       </Modal>;
+};
+
+PrivacyDialog.propTypes = {
+       onHide: PropTypes.func,
+       show: PropTypes.bool,
+};
+
+export default PrivacyDialog;

diff --git a/resources/js/i18n/de.js b/resources/js/i18n/de.js
index c8be7aed4cebac29fc7e4e7b3eead7dff716d5eb..c28c1b29a8a112f9b53a2132d0551481c0c5a9d2 100644 (file)
--- a/resources/js/i18n/de.js
+++ b/resources/js/i18n/de.js
@@ -276,6 +276,18 @@ export default {
                                heading: 'Serverfehler',
                        },
                },
                                heading: 'Serverfehler',
                        },
                },

+               footer: {
+                       alttpde: 'Deutscher ALttP Discord',
+                       alttpwiki: 'ALttP Speedrunning Wiki',
+                       competitions: 'Wettbewerbe',
+                       connect: 'Connect Spedruns Discord',
+                       contact: 'Wenn du gerne ein Turnier auf dieser Seite organisieren möchtest, wende dich bitte an HolySmoke#5229 im Discord.',
+                       info: 'Infos',
+                       privacy: 'Datenschutz',
+                       resources: 'Ressourcen',
+                       smd: 'Deutscher Super Metroid Discord',
+                       smwiki: 'Super Metroid Speedrunning Wiki',
+               },

                general: {
                        anonymous: 'Anonym',
                        appName: 'ALttP',
                general: {
                        anonymous: 'Anonym',
                        appName: 'ALttP',


@@ -376,6 +388,12 @@ export default {
                        score: 'Punktzahl',
                        scoreShort: 'Punkte',
                },
                        score: 'Punktzahl',
                        scoreShort: 'Punkte',
                },

+               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.',
+                       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: {
                        description: {
                                application: {
                protocol: {
                        description: {
                                application: {

diff --git a/resources/js/i18n/en.js b/resources/js/i18n/en.js
index 62e486b8d49500e108da695c7acd3fadd3b03ee2..dfff38bcde155456ef09aae498364d1e43b10dbc 100644 (file)
--- a/resources/js/i18n/en.js
+++ b/resources/js/i18n/en.js
@@ -276,6 +276,18 @@ export default {
                                heading: 'Server error',
                        },
                },
                                heading: 'Server error',
                        },
                },

+               footer: {
+                       alttpde: 'German ALttP Discord',
+                       alttpwiki: 'ALttP Speedrunning Wiki',
+                       competitions: 'Competitions',
+                       connect: 'Connect Spedruns Discord',
+                       contact: 'If you would like to organize a Tournament on this site, please contact HolySmoke#5229 on Discord.',
+                       info: 'Infos',
+                       privacy: 'Privacy',
+                       resources: 'Resources',
+                       smd: 'German Super Metroid Discord',
+                       smwiki: 'Super Metroid Speedrunning Wiki',
+               },

                general: {
                        anonymous: 'Anonym',
                        appName: 'ALttP',
                general: {
                        anonymous: 'Anonym',
                        appName: 'ALttP',


@@ -376,6 +388,12 @@ export default {
                        score: 'Score',
                        scoreShort: 'Score',
                },
                        score: 'Score',
                        scoreShort: 'Score',
                },

+               privacy: {
+                       heading: 'Privacy',
+                       p1: 'We\'re utilizing cokes and your browser\'s storage to remember your login and preferred language as well as protect against XSRF.',
+                       p2: 'If you click on Login, you wil be redirected to a discord portal. Once signed in, Discord will provide us with your username, discriminator and ID.',
+                       p3: 'Any results you submit will be published on this site and may be shared with the Discord server of the respective community.',
+               },

                protocol: {
                        description: {
                                application: {
                protocol: {
                        description: {
                                application: {