const { t } = useTranslation();
 
-       return <footer className="bg-dark mt-5 px-3 py-5">
+       return <div className="bg-dark mt-5 px-3 py-5">
                <Row>
                        <Col md={4}>
                                <h5>{t('footer.competitions')}</h5>
                </Row>
                <p className="pt-5 text-center text-muted">{t('footer.contact')}</p>
                <PrivacyDialog onHide={() => { setShowDialog(false); }} show={showDialog} />
-       </footer>;
+       </div>;
 };
 
 export default Footer;
 
 import Header from './Header';
 
 const FullLayout = () => <>
-       <Header />
-       <Outlet />
-       <Footer />
+       <header>
+               <Header />
+       </header>
+       <main>
+               <Outlet />
+       </main>
+       <footer>
+               <Footer />
+       </footer>
 </>;
 
 export default FullLayout;
 
                                                />
                                        </p>
                                : null}
-                               {tournament.type === 'open-async' && round.results && round.results.length ?
-                                       <p>{t('rounds.numberOfResults', { count: round.results.length })}</p>
-                               : null}
-                               <div className="button-bar">
-                                       <LockButton round={round} tournament={tournament} />
-                                       {mayEditRound(user, tournament, round) ?
-                                               <EditButton round={round} tournament={tournament} />
-                                       : null}
-                                       {mayViewProtocol(user, tournament, round) ?
-                                               <RoundProtocol roundId={round.id} tournamentId={tournament.id} />
-                                       : null}
-                                       {mayDeleteRound(user, tournament, round) ?
-                                               <DeleteButton round={round} tournament={tournament} />
+                               <div className="bottom-half">
+                                       {tournament.type === 'open-async' && round.results && round.results.length ?
+                                               <p>{t('rounds.numberOfResults', { count: round.results.length })}</p>
                                        : null}
+                                       <div className="button-bar">
+                                               <LockButton round={round} tournament={tournament} />
+                                               {mayEditRound(user, tournament, round) ?
+                                                       <EditButton round={round} tournament={tournament} />
+                                               : null}
+                                               {mayViewProtocol(user, tournament, round) ?
+                                                       <RoundProtocol roundId={round.id} tournamentId={tournament.id} />
+                                               : null}
+                                               {mayDeleteRound(user, tournament, round) ?
+                                                       <DeleteButton round={round} tournament={tournament} />
+                                               : null}
+                                       </div>
                                </div>
                        </div>
                        <List round={round} tournament={tournament} />
 
                return options;
        }, []);
 
-       const warpTargets = React.useMemo(() => {
-               const targets = [];
-               return targets;
-       }, []);
-
        const context = React.useMemo(() => ({
-               connections, entrances, setConnection, warpTargets,
-       }), [connections, entrances, setConnection, warpTargets]);
+               connections, entrances, setConnection,
+       }), [connections, entrances, setConnection]);
 
        const superGroups = React.useMemo(() => {
                const sg = [
        }, []);
 
        const connectors = React.useMemo(() => {
-               return [connections, maps];
-       }, []);
+               const cs = [];
+               Object.entries(connections).forEach(([from, to]) => {
+               });
+               return cs;
+       }, [connections, maps]);
 
        return <CONTEXT.Provider value={context}>
                <div className="mixed-pools-tracker">
 
                                box-shadow: none;
                                top: 0.5ex;
                        }
+                       &:focus {
+                               outline: medium dashed $light;
+                       }
 
                        .time {
                                min-width: 9ex;
 
                }
 
                .info {
+                       display: flex;
+                       flex-direction: column;
                        padding-right: 1rem;
                        min-width: 13em;
 
                                }
                        }
 
+                       .bottom-half {
+                               margin-top: auto;
+                       }
+
                        .seed-code, .btn, .rolled-by {
                                margin-bottom: 1ex;
                        }