add plain maps

diff --git a/package-lock.json b/package-lock.json
index f5f22c9936fc59834327d86440333150252279c6..6bc7914d3bc9a75b2944291bf70fbd3f2b52a20a 100644 (file)
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
                 "localforage": "^1.10.0",
                 "moment": "^2.29.1",
                 "numeral": "^2.0.6",
+                "openseadragon": "^4.0.0",
                 "pusher-js": "^7.0.6",
                 "qs": "^6.10.3",
                 "react-bootstrap": "^2.2.0",
@@ -8280,6 +8281,14 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/openseadragon": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/openseadragon/-/openseadragon-4.0.0.tgz",
+            "integrity": "sha512-HsjSgqiiPwLkW5576GxDJ7Rax96iLUET8fnTsJvu7uYYkd+qzen3bflxHyph0OVVgZBKP9SpGH1nPdU4Mz0Z2A==",
+            "funding": {
+                "url": "https://opencollective.com/openseadragon"
+            }
+        },
         "node_modules/optionator": {
             "version": "0.9.1",
             "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
@@ -18393,6 +18402,11 @@
                 "is-wsl": "^2.2.0"
             }
         },
+        "openseadragon": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/openseadragon/-/openseadragon-4.0.0.tgz",
+            "integrity": "sha512-HsjSgqiiPwLkW5576GxDJ7Rax96iLUET8fnTsJvu7uYYkd+qzen3bflxHyph0OVVgZBKP9SpGH1nPdU4Mz0Z2A=="
+        },
         "optionator": {
             "version": "0.9.1",
             "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",

diff --git a/package.json b/package.json
index 144f3dd1c025a89bf87206d9d8bf1da5dc287a60..4f7a3a6c70a58cc21c9be0b29d36e37fae99c986 100644 (file)
--- a/package.json
+++ b/package.json
@@ -85,6 +85,7 @@
         "localforage": "^1.10.0",
         "moment": "^2.29.1",
         "numeral": "^2.0.6",
+        "openseadragon": "^4.0.0",
         "pusher-js": "^7.0.6",
         "qs": "^6.10.3",
         "react-bootstrap": "^2.2.0",

diff --git a/resources/js/components/App.js b/resources/js/components/App.js
index fe8ff25c31860b95b202355967852d3f2f352297..d84474cfc65da9c1a2e628f5513c20d457ece183 100644 (file)
--- a/resources/js/components/App.js
+++ b/resources/js/components/App.js
@@ -6,6 +6,7 @@ import Footer from './common/Footer';
 import Header from './common/Header';
 import AlttpSeed from './pages/AlttpSeed';
 import Front from './pages/Front';
+import Map from './pages/Map';
 import Technique from './pages/Technique';
 import Techniques from './pages/Techniques';
 import Tournament from './pages/Tournament';
@@ -59,6 +60,7 @@ const App = () => {
                                <Header doLogout={doLogout} />
                                <Routes>
                                        <Route path="h/:hash" element={<AlttpSeed />} />
+                                       <Route path="map" element={<Map />} />
                                        <Route
                                                path="modes"
                                                element={<Techniques namespace="modes" type="mode" />}

diff --git a/resources/js/components/map/Buttons.js b/resources/js/components/map/Buttons.js
new file mode 100644 (file)
index 0000000..b43fc0e
--- /dev/null
+++ b/resources/js/components/map/Buttons.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import { Button } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+
+import { useOpenSeadragon } from './OpenSeadragon';
+
+const Buttons = () => {
+       const { viewer } = useOpenSeadragon();
+       const { t } = useTranslation();
+
+       const goToPage = React.useCallback((p) => {
+               if (viewer) viewer.goToPage(p);
+       }, [viewer]);
+
+       return <div className="button-bar">
+               <Button
+                       onClick={() => goToPage(0)}
+                       title={t('map.lwLong')}
+                       variant="outline-secondary"
+               >
+                       {t('map.lwShort')}
+               </Button>
+               <Button
+                       onClick={() => goToPage(1)}
+                       title={t('map.dwLong')}
+                       variant="outline-secondary"
+               >
+                       {t('map.dwShort')}
+               </Button>
+               <Button
+                       onClick={() => goToPage(2)}
+                       title={t('map.spLong')}
+                       variant="outline-secondary"
+               >
+                       {t('map.spShort')}
+               </Button>
+               <Button
+                       onClick={() => goToPage(3)}
+                       title={t('map.uwLong')}
+                       variant="outline-secondary"
+               >
+                       {t('map.uwShort')}
+               </Button>
+       </div>;
+};
+
+export default Buttons;

diff --git a/resources/js/components/map/OpenSeadragon.js b/resources/js/components/map/OpenSeadragon.js
new file mode 100644 (file)
index 0000000..f854318
--- /dev/null
+++ b/resources/js/components/map/OpenSeadragon.js
@@ -0,0 +1,79 @@
+import OpenSeadragon from 'openseadragon';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export const Context = React.createContext({});
+
+export const useOpenSeadragon = () => React.useContext(Context);
+
+export const Provider = React.forwardRef(({ children }, ref) => {
+       const [viewer, setViewer] = React.useState(null);
+
+       React.useEffect(() => {
+               if (!ref.current) return;
+
+               const v = OpenSeadragon({
+                       element: ref.current,
+                       preserveViewport: true,
+                       sequenceMode: true,
+                       showNavigator: true,
+                       showNavigationControl: false,
+                       showSequenceControl: false,
+                       tileSources: [
+                               new OpenSeadragon.DziTileSource({
+                                       width: 8192,
+                                       height: 8192,
+                                       tileSize: 256,
+                                       tileOverlap: 0,
+                                       minLevel: 8,
+                                       maxLevel: 13,
+                                       tilesUrl: '/media/alttp/map/lw_files/',
+                                       fileFormat: 'png',
+                               }), new OpenSeadragon.DziTileSource({
+                                       width: 8192,
+                                       height: 8192,
+                                       tileSize: 256,
+                                       tileOverlap: 0,
+                                       minLevel: 8,
+                                       maxLevel: 13,
+                                       tilesUrl: '/media/alttp/map/dw_files/',
+                                       fileFormat: 'png',
+                               }), new OpenSeadragon.DziTileSource({
+                                       width: 8192,
+                                       height: 4096,
+                                       tileSize: 256,
+                                       tileOverlap: 0,
+                                       minLevel: 8,
+                                       maxLevel: 13,
+                                       tilesUrl: '/media/alttp/map/sp_files/',
+                                       fileFormat: 'png',
+                               }), new OpenSeadragon.DziTileSource({
+                                       width: 16384,
+                                       height: 16384,
+                                       tileSize: 256,
+                                       tileOverlap: 0,
+                                       minLevel: 8,
+                                       maxLevel: 14,
+                                       tilesUrl: '/media/alttp/map/uw_files/',
+                                       fileFormat: 'png',
+                               }),
+                       ],
+               });
+               setViewer(v);
+               return () => {
+                       v.destroy();
+               };
+       }, [ref.current]);
+
+       return <Context.Provider value={{ viewer }}>
+               {children}
+       </Context.Provider>;
+});
+
+Provider.displayName = 'OpenSeadragonProvider';
+
+Provider.propTypes = {
+       children: PropTypes.node,
+};
+
+export default Provider;

diff --git a/resources/js/components/map/Viewer.js b/resources/js/components/map/Viewer.js
new file mode 100644 (file)
index 0000000..473c179
--- /dev/null
+++ b/resources/js/components/map/Viewer.js
@@ -0,0 +1,109 @@
+import OpenSeadragon from 'openseadragon';
+import React from 'react';
+import { Button } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+
+const Viewer = () => {
+       const [viewer, setViewer] = React.useState(null);
+
+       const container = React.useRef();
+       const { t } = useTranslation();
+
+       React.useEffect(() => {
+               if (!container.current) return;
+
+               const v = OpenSeadragon({
+                       element: container.current,
+                       preserveViewport: true,
+                       sequenceMode: true,
+                       showNavigator: true,
+                       showNavigationControl: false,
+                       showSequenceControl: false,
+                       //tileSources: [
+                       //      new OpenSeadragon.DziTileSource({
+                       //              width: 8192,
+                       //              height: 8192,
+                       //              tileSize: 256,
+                       //              tileOverlap: 0,
+                       //              minLevel: 8,
+                       //              maxLevel: 13,
+                       //              tilesUrl: '/media/alttp/map/lw_files/',
+                       //              fileFormat: 'png',
+                       //      }), new OpenSeadragon.DziTileSource({
+                       //              width: 8192,
+                       //              height: 8192,
+                       //              tileSize: 256,
+                       //              tileOverlap: 0,
+                       //              minLevel: 8,
+                       //              maxLevel: 13,
+                       //              tilesUrl: '/media/alttp/map/dw_files/',
+                       //              fileFormat: 'png',
+                       //      }), new OpenSeadragon.DziTileSource({
+                       //              width: 8192,
+                       //              height: 8192,
+                       //              tileSize: 256,
+                       //              tileOverlap: 0,
+                       //              minLevel: 8,
+                       //              maxLevel: 13,
+                       //              tilesUrl: '/media/alttp/map/sp_files/',
+                       //              fileFormat: 'png',
+                       //      }), new OpenSeadragon.DziTileSource({
+                       //              width: 16384,
+                       //              height: 16384,
+                       //              tileSize: 256,
+                       //              tileOverlap: 0,
+                       //              minLevel: 8,
+                       //              maxLevel: 14,
+                       //              tilesUrl: '/media/alttp/map/uw_files/',
+                       //              fileFormat: 'png',
+                       //      }),
+                       //],
+               });
+               setViewer(v);
+               return () => {
+                       v.destroy();
+               };
+       }, [container.current]);
+
+       const goToPage = React.useCallback((p) => {
+               if (viewer) viewer.goToPage(p);
+       }, [viewer]);
+
+       return <>
+               <div className="d-flex align-items-center justify-content-between">
+                       <div className="button-bar">
+                               <Button
+                                       onClick={() => goToPage(0)}
+                                       title={t('map.lwLong')}
+                                       variant="outline-secondary"
+                               >
+                                       {t('map.lwShort')}
+                               </Button>
+                               <Button
+                                       onClick={() => goToPage(1)}
+                                       title={t('map.dwLong')}
+                                       variant="outline-secondary"
+                               >
+                                       {t('map.dwShort')}
+                               </Button>
+                               <Button
+                                       onClick={() => goToPage(2)}
+                                       title={t('map.spLong')}
+                                       variant="outline-secondary"
+                               >
+                                       {t('map.spShort')}
+                               </Button>
+                               <Button
+                                       onClick={() => goToPage(3)}
+                                       title={t('map.uwLong')}
+                                       variant="outline-secondary"
+                               >
+                                       {t('map.uwShort')}
+                               </Button>
+                       </div>
+               </div>
+               <div ref={container} style={{ height: '80vh' }} />
+       </>;
+};
+
+export default Viewer;

diff --git a/resources/js/components/pages/Map.js b/resources/js/components/pages/Map.js
new file mode 100644 (file)
index 0000000..50a28fb
--- /dev/null
+++ b/resources/js/components/pages/Map.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Container } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+
+import Buttons from '../map/Buttons';
+import OpenSeadragon from '../map/OpenSeadragon';
+
+const Map = () => {
+       const container = React.useRef();
+       const { t } = useTranslation();
+
+       return <Container fluid>
+               <OpenSeadragon ref={container}>
+                       <div className="d-flex align-items-center justify-content-between">
+                               <h1>{t('map.heading')}</h1>
+                               <Buttons />
+                       </div>
+                       <div ref={container} style={{ height: '80vh' }} />
+               </OpenSeadragon>
+       </Container>;
+};
+
+export default Map;

diff --git a/resources/js/i18n/de.js b/resources/js/i18n/de.js
index 0812fd486b88d0aad321d5fd7bd13b34fcba25d4..f4b73e5b0e7be479749ebf136af6ad0e0900d052 100644 (file)
--- a/resources/js/i18n/de.js
+++ b/resources/js/i18n/de.js
@@ -374,6 +374,17 @@ export default {
                                somaria: 'Cane of Somaria',
                        },
                },
+               map: {
+                       dwLong: 'Dark World',
+                       dwShort: 'DW',
+                       heading: 'Karte',
+                       lwLong: 'Light World',
+                       lwShort: 'LW',
+                       spLong: 'Spezielle Gebiete',
+                       spShort: 'SP',
+                       uwLong: 'Underworld',
+                       uwShort: 'UW',
+               },
                modes: {
                        heading: 'Modi',
                },

diff --git a/resources/js/i18n/en.js b/resources/js/i18n/en.js
index 030b023766103f0e8756817baeec399b10d16a9d..6498b85927eb3bce4864fa996568d9c46bbd8c3a 100644 (file)
--- a/resources/js/i18n/en.js
+++ b/resources/js/i18n/en.js
@@ -374,6 +374,17 @@ export default {
                                somaria: 'Cane of Somaria',
                        },
                },
+               map: {
+                       dwLong: 'Dark World',
+                       dwShort: 'DW',
+                       heading: 'Map',
+                       lwLong: 'Light World',
+                       lwShort: 'LW',
+                       spLong: 'Special Areas',
+                       spShort: 'SP',
+                       uwLong: 'Underworld',
+                       uwShort: 'UW',
+               },
                modes: {
                        heading: 'Modes',
                },

diff --git a/webpack.mix.js b/webpack.mix.js
index 0e8f447ff04a7872590bca3cdcbdf9c5a236490f..714cba7ecf343cd0741bc3e4a77202910c425d7f 100644 (file)
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -67,6 +67,7 @@ mix.js('resources/js/app.js', 'public/js')
                'nanoclone',
                'object-assign',
                'object-inspect',
+               'openseadragon',
                'performance-now',
                'process',
                'prop-types',