V2 (#2)

* Add default language while app is loading

* Global refactoring; Add router support

* Add hook for places-and-views; hook for panel-scroll; hook for sound

* Update version & firebase config

* Add useViewScroll hook for view component

* Add dialog modal basics

* Update screenshots; Create help dialog; Add new places and views;

.env

@@ -0,0 +1,2 @@
+REACT_APP_VERSION=$npm_package_version
+REACT_APP_NAME=$npm_package_name

.gitignore

@@ -4,3 +4,4 @@ build
 .idea
 .firebase
 yarn.lock
+yarn-error.log

.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+    semi: true,
+    trailingComma: "all",
+    singleQuote: true,
+    printWidth: 100,
+    tabWidth: 4
+};

README.md

@@ -10,8 +10,8 @@ This app tries to parody the interface of the game World of Warcraft. You can ch
 ### Screenshots
 
 * Views
-![Screenshot 1](screenshots/screenshot-1.jpg)
+![Screenshot 1](screenshots/screenshot-1.png)
 * Places
-![Screenshot 2](screenshots/screenshot-2.jpg)
+![Screenshot 2](screenshots/screenshot-2.png)
 * Settings
-![Screenshot 3](screenshots/screenshot-3.jpg)
+![Screenshot 3](screenshots/screenshot-3.png)

firebase.json

@@ -1,6 +1,12 @@
 {
   "hosting": {
     "public": "build",
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ],
     "ignore": [
       "firebase.json",
       "**/.*",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "wow-best-places",
   "description": "This app is supposed to make you feel nostalgic",
-  "version": "1.3.1",
+  "version": "2.1.0",
   "license": "MIT",
   "author": {
     "name": "obergodmar",
@@ -9,12 +9,14 @@
     "url": "https://github.com/obergodmar"
   },
   "engines": {
-    "node": "10.18.1"
+    "node": "10.22.0"
   },
   "dependencies": {
     "classnames": "^2.2.6",
+    "core-js": "^3.6.5",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
     "serve": "^11.3.2"
   },
@@ -23,6 +25,7 @@
     "@types/classnames": "^2.2.10",
     "@types/react": "^16.9.41",
     "@types/react-dom": "^16.9.8",
+    "@types/react-router-dom": "^5.1.5",
     "@typescript-eslint/eslint-plugin": "^3.9.1",
     "@typescript-eslint/parser": "^3.9.1",
     "enzyme": "^3.11.0",
@@ -45,8 +48,7 @@
     "stylelint-config-recommended-scss": "^4.2.0",
     "stylelint-config-standard": "^20.0.0",
     "stylelint-scss": "^3.18.0",
-    "typescript": "^3.9.5",
+    "typescript": "^3.9.5"
-    "yarn": "^1.22.4"
   },
   "scripts": {
     "start": "serve ./build",
@@ -67,10 +69,10 @@
   },
   "browserslist": {
     "production": [
-      "since 2010"
+      "defaults"
     ],
     "development": [
-      "since 2010"
+      "defaults"
     ]
   }
 }

src/app/index.tsx

@@ -1,264 +0,0 @@
-import * as React from "react";
-import {
-  KeyboardEvent,
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-
-import {
-  MainMenuComponent,
-  MenuItemComponent,
-  MusicComponent,
-  PanelComponent,
-  PreviewComponent,
-  SettingsComponent,
-  ViewComponent,
-} from "../components";
-import places from "../assets";
-import { delay, soundLoad, UI_SOUND_VOLUME } from "../utils";
-import { useSettings } from "../hooks";
-
-import PanelOpenAudio from "../assets/audio/panel-open.ogg";
-import PanelCloseAudio from "../assets/audio/panel-close.ogg";
-
-import SettingsOpenAudio from "../assets/audio/menu-open.ogg";
-import SettingsCloseAudio from "../assets/audio/menu-close.ogg";
-
-import CheckBoxOnAudio from "../assets/audio/check-box-on.ogg";
-import CheckBoxOffAudio from "../assets/audio/check-box-off.ogg";
-
-import Sound from "../modules/sound";
-
-import "./style.scss";
-
-export default function App(): JSX.Element {
-  const {
-    settings: { uiSound, musicVolume, language },
-  } = useSettings();
-  const [isSettingsShown, setSettingsShown] = useState(false);
-  const [isLoading, setLoading] = useState(false);
-  const [isPlaying, setPlaying] = useState(false);
-  const [isLeftPanelShown, setLeftPanelShown] = useState(false);
-  const [isBottomPanelShown, setBottomPanelShown] = useState(false);
-  const [activePlace, setActivePlace] = useState(0);
-  const [activeView, setActiveView] = useState(0);
-
-  const panelOpenSound = useMemo(
-    () => soundLoad(PanelOpenAudio, UI_SOUND_VOLUME),
-    []
-  );
-  const panelCloseSound = useMemo(
-    () => soundLoad(PanelCloseAudio, UI_SOUND_VOLUME),
-    []
-  );
-  const settingsOpenSound = useMemo(
-    () => soundLoad(SettingsOpenAudio, UI_SOUND_VOLUME),
-    []
-  );
-  const settingsCloseSound = useMemo(
-    () => soundLoad(SettingsCloseAudio, UI_SOUND_VOLUME),
-    []
-  );
-  const checkboxOnSound = useMemo(
-    () => soundLoad(CheckBoxOnAudio, UI_SOUND_VOLUME),
-    []
-  );
-  const checkboxOffSound = useMemo(
-    () => soundLoad(CheckBoxOffAudio, UI_SOUND_VOLUME),
-    []
-  );
-
-  const [currentPlaying, setCurrentPlaying] = useState<Sound>();
-
-  const app = useRef<HTMLDivElement>(null);
-
-  const handleHideLeftPanel = useCallback(() => {
-    setBottomPanelShown(false);
-    setLeftPanelShown(!isLeftPanelShown);
-  }, [isLeftPanelShown]);
-
-  const handleHideBottomPanel = useCallback(() => {
-    setLeftPanelShown(false);
-    setBottomPanelShown(!isBottomPanelShown);
-  }, [isBottomPanelShown]);
-
-  const delayedChange = useCallback(
-    (fn: (value: number) => void, value: number) => {
-      if (isLoading) {
-        return;
-      }
-      fn(value);
-      setLoading(true);
-      delay().then(() => {
-        setLoading(false);
-      });
-    },
-    [isLoading]
-  );
-
-  const handleLeftPreviewClick = useCallback(
-    (value: number) => {
-      delayedChange(setActivePlace, value);
-      setActiveView(0);
-    },
-    [delayedChange]
-  );
-
-  const handleBottomPreviewClick = useCallback(
-    (value: number) => {
-      delayedChange(setActiveView, value);
-    },
-    [delayedChange]
-  );
-
-  useEffect(() => {
-    if (app && app.current) {
-      app.current.focus();
-    }
-  }, [app]);
-
-  useLayoutEffect(() => {
-    document.title =
-      language[`place.${places[activePlace].name}` as keyof typeof language];
-  }, [activePlace, language]);
-
-  useEffect(() => {
-    if (!currentPlaying) {
-      return;
-    }
-    currentPlaying.setVolume(musicVolume);
-    currentPlaying.playMusic();
-  }, [currentPlaying, musicVolume]);
-
-  const appClick = useCallback(
-    () => currentPlaying && currentPlaying.playMusic(),
-    [currentPlaying]
-  );
-
-  const openCloseSettings = useCallback(() => {
-    setSettingsShown(!isSettingsShown);
-    if (app && app.current) {
-      app.current.focus();
-    }
-    if (!uiSound) {
-      return;
-    }
-    if (isSettingsShown) {
-      settingsCloseSound.playSound();
-    } else {
-      settingsOpenSound.playSound();
-    }
-  }, [app, isSettingsShown, uiSound, settingsCloseSound, settingsOpenSound]);
-
-  const handleOpenSettings = useCallback(
-    (e: KeyboardEvent) => {
-      switch (e.keyCode) {
-        case 27:
-          if (isLeftPanelShown || isBottomPanelShown) {
-            setLeftPanelShown(false);
-            setBottomPanelShown(false);
-            break;
-          }
-          openCloseSettings();
-          break;
-        case 32:
-          if (!currentPlaying) {
-            return;
-          }
-          if (isPlaying) {
-            currentPlaying.pause();
-            setPlaying(false);
-          } else {
-            currentPlaying.playMusic();
-          }
-          break;
-        default:
-          break;
-      }
-    },
-    [
-      isLeftPanelShown,
-      isBottomPanelShown,
-      isPlaying,
-      currentPlaying,
-      openCloseSettings,
-    ]
-  );
-
-  return (
-    <div
-      ref={app}
-      onClick={appClick}
-      onKeyDown={handleOpenSettings}
-      tabIndex={0}
-      className="main"
-    >
-      <ViewComponent src={places[activePlace].view[activeView]} />
-      <MainMenuComponent>
-        <div className="author">
-          <a href="https://github.com/obergodmar">obergodmar</a>
-          <span>v1.3.1</span>
-        </div>
-        <MenuItemComponent
-          isActive={isSettingsShown}
-          handleClick={openCloseSettings}
-        />
-      </MainMenuComponent>
-      <PanelComponent
-        openSoundPlay={panelOpenSound.playSound}
-        closeSoundPlay={panelCloseSound.playSound}
-        itemsCount={places.length || 0}
-        orientation="left"
-        isShown={isLeftPanelShown}
-        setShown={handleHideLeftPanel}
-      >
-        {places.map((place, index) => (
-          <PreviewComponent
-            name={`place.${place.name}`}
-            isLoading={isLoading}
-            key={index}
-            value={index}
-            handleChange={handleLeftPreviewClick}
-            src={place.preview[0]}
-          />
-        ))}
-      </PanelComponent>
-      <PanelComponent
-        openSoundPlay={panelOpenSound.playSound}
-        closeSoundPlay={panelCloseSound.playSound}
-        itemsCount={places[activePlace].preview.length || 0}
-        orientation="bottom"
-        isShown={isBottomPanelShown}
-        setShown={handleHideBottomPanel}
-      >
-        {places[activePlace].preview.map((preview, index) => (
-          <PreviewComponent
-            isLoading={isLoading}
-            key={index}
-            value={index}
-            handleChange={handleBottomPreviewClick}
-            src={preview}
-          />
-        ))}
-      </PanelComponent>
-      {isSettingsShown && (
-        <SettingsComponent
-          closeSettings={openCloseSettings}
-          checkboxOnSoundPlay={checkboxOnSound.playSound}
-          checkboxOffSoundPlay={checkboxOffSound.playSound}
-        />
-      )}
-      <MusicComponent
-        music={places[activePlace].music}
-        setPlaying={setPlaying}
-        setCurrentPlaying={setCurrentPlaying}
-      />
-    </div>
-  );
-}
-
-App.displayName = "App";

src/assets/boralus/index.ts

@@ -0,0 +1,10 @@
+import preview from './preview';
+import view from './view';
+import music from './music';
+
+export default {
+    name: 'boralus',
+    music,
+    view,
+    preview,
+};

src/assets/boralus/music/index.ts

@@ -0,0 +1,23 @@
+import Boralus1 from './boralus-1.ogg';
+import Boralus2 from './boralus-2.ogg';
+import Boralus3 from './boralus-3.ogg';
+import Boralus4 from './boralus-4.ogg';
+import Boralus5 from './boralus-5.ogg';
+import Boralus6 from './boralus-6.ogg';
+import Boralus7 from './boralus-7.ogg';
+import Boralus8 from './boralus-8.ogg';
+import Boralus9 from './boralus-9.ogg';
+import Boralus10 from './boralus-10.ogg';
+
+export default [
+    Boralus1,
+    Boralus2,
+    Boralus3,
+    Boralus4,
+    Boralus5,
+    Boralus6,
+    Boralus7,
+    Boralus8,
+    Boralus9,
+    Boralus10,
+];

src/assets/boralus/preview/index.ts

@@ -0,0 +1,6 @@
+import Boralus1 from './boralus-1.jpg';
+import Boralus2 from './boralus-2.jpg';
+import Boralus3 from './boralus-3.jpg';
+import Boralus4 from './boralus-4.jpg';
+
+export default [Boralus1, Boralus2, Boralus3, Boralus4];

src/assets/boralus/view/index.ts

@@ -0,0 +1,6 @@
+import Boralus1 from './boralus-1.jpg';
+import Boralus2 from './boralus-2.jpg';
+import Boralus3 from './boralus-3.jpg';
+import Boralus4 from './boralus-4.jpg';
+
+export default [Boralus1, Boralus2, Boralus3, Boralus4];

src/assets/crystalsong-forest/index.ts

@@ -1,9 +1,9 @@
-import preview from "./preview";
+import preview from './preview';
-import view from "./view";
+import view from './view';
-import music from "./music";
+import music from './music';
 
 export default {
-  name: "crystalsong-forest",
+    name: 'crystalsong-forest',
     music,
     view,
     preview,

src/assets/crystalsong-forest/music/index.ts

@@ -1,11 +1,6 @@
-import CrystalsongForest1 from "./crystalsong-forest-music-1.ogg";
+import CrystalsongForest1 from './crystalsong-forest-music-1.ogg';
-import CrystalsongForest2 from "./crystalsong-forest-music-2.ogg";
+import CrystalsongForest2 from './crystalsong-forest-music-2.ogg';
-import CrystalsongForest3 from "./crystalsong-forest-music-3.ogg";
+import CrystalsongForest3 from './crystalsong-forest-music-3.ogg';
-import CrystalsongForest4 from "./crystalsong-forest-music-4.ogg";
+import CrystalsongForest4 from './crystalsong-forest-music-4.ogg';
 
-export default [
+export default [CrystalsongForest1, CrystalsongForest2, CrystalsongForest3, CrystalsongForest4];
-  CrystalsongForest1,
-  CrystalsongForest2,
-  CrystalsongForest3,
-  CrystalsongForest4,
-];

src/assets/crystalsong-forest/preview/index.ts

@@ -1,8 +1,8 @@
-import CrystalsongForest1 from "./crystalsong-forest-1.jpg";
+import CrystalsongForest1 from './crystalsong-forest-1.jpg';
-import CrystalsongForest2 from "./crystalsong-forest-2.jpg";
+import CrystalsongForest2 from './crystalsong-forest-2.jpg';
-import CrystalsongForest3 from "./crystalsong-forest-3.jpg";
+import CrystalsongForest3 from './crystalsong-forest-3.jpg';
-import CrystalsongForest4 from "./crystalsong-forest-4.jpg";
+import CrystalsongForest4 from './crystalsong-forest-4.jpg';
-import CrystalsongForest5 from "./crystalsong-forest-5.jpg";
+import CrystalsongForest5 from './crystalsong-forest-5.jpg';
 
 export default [
     CrystalsongForest1,

src/assets/crystalsong-forest/view/index.ts

@@ -1,8 +1,8 @@
-import CrystalsongForest1 from "./crystalsong-forest-1.jpg";
+import CrystalsongForest1 from './crystalsong-forest-1.jpg';
-import CrystalsongForest2 from "./crystalsong-forest-2.jpg";
+import CrystalsongForest2 from './crystalsong-forest-2.jpg';
-import CrystalsongForest3 from "./crystalsong-forest-3.jpg";
+import CrystalsongForest3 from './crystalsong-forest-3.jpg';
-import CrystalsongForest4 from "./crystalsong-forest-4.jpg";
+import CrystalsongForest4 from './crystalsong-forest-4.jpg';
-import CrystalsongForest5 from "./crystalsong-forest-5.jpg";
+import CrystalsongForest5 from './crystalsong-forest-5.jpg';
 
 export default [
     CrystalsongForest1,

src/assets/dalaran/index.ts

@@ -1,9 +1,9 @@
-import preview from "./preview";
+import preview from './preview';
-import view from "./view";
+import view from './view';
-import music from "./music";
+import music from './music';
 
 export default {
-  name: "dalaran",
+    name: 'dalaran',
     music,
     view,
     preview,

src/assets/dalaran/music/index.ts

@@ -1,13 +1,7 @@
-import DalaranMusic1 from "./dalaran-music-1.ogg";
+import DalaranMusic1 from './dalaran-music-1.ogg';
-import DalaranMusic2 from "./dalaran-music-2.ogg";
+import DalaranMusic2 from './dalaran-music-2.ogg';
-import DalaranMusic3 from "./dalaran-music-3.ogg";
+import DalaranMusic3 from './dalaran-music-3.ogg';
-import DalaranMusic4 from "./dalaran-music-4.ogg";
+import DalaranMusic4 from './dalaran-music-4.ogg';
-import DalaranMusic5 from "./dalaran-music-5.ogg";
+import DalaranMusic5 from './dalaran-music-5.ogg';
 
-export default [
+export default [DalaranMusic1, DalaranMusic2, DalaranMusic3, DalaranMusic4, DalaranMusic5];
-  DalaranMusic1,
-  DalaranMusic2,
-  DalaranMusic3,
-  DalaranMusic4,
-  DalaranMusic5,
-];

src/assets/dalaran/preview/index.ts

@@ -1,7 +1,7 @@
-import Dalaran1 from "./dalaran-1.jpg";
+import Dalaran1 from './dalaran-1.jpg';
-import Dalaran2 from "./dalaran-2.jpg";
+import Dalaran2 from './dalaran-2.jpg';
-import Dalaran3 from "./dalaran-3.jpg";
+import Dalaran3 from './dalaran-3.jpg';
-import Dalaran4 from "./dalaran-4.jpg";
+import Dalaran4 from './dalaran-4.jpg';
-import Dalaran5 from "./dalaran-5.jpg";
+import Dalaran5 from './dalaran-5.jpg';
 
 export default [Dalaran1, Dalaran2, Dalaran3, Dalaran4, Dalaran5];

src/assets/dalaran/view/index.ts

@@ -1,7 +1,7 @@
-import Dalaran1 from "./dalaran-1.jpg";
+import Dalaran1 from './dalaran-1.jpg';
-import Dalaran2 from "./dalaran-2.jpg";
+import Dalaran2 from './dalaran-2.jpg';
-import Dalaran3 from "./dalaran-3.jpg";
+import Dalaran3 from './dalaran-3.jpg';
-import Dalaran4 from "./dalaran-4.jpg";
+import Dalaran4 from './dalaran-4.jpg';
-import Dalaran5 from "./dalaran-5.jpg";
+import Dalaran5 from './dalaran-5.jpg';
 
 export default [Dalaran1, Dalaran2, Dalaran3, Dalaran4, Dalaran5];

src/assets/grizzly-hills/index.ts

@@ -0,0 +1,10 @@
+import preview from './preview';
+import view from './view';
+import music from './music';
+
+export default {
+    name: 'grizzly-hills',
+    music,
+    view,
+    preview,
+};

src/assets/grizzly-hills/music/index.ts

@@ -0,0 +1,4 @@
+import GrizzlyHillsMusic1 from './grizzly-hills-1.ogg';
+import GrizzlyHillsMusic2 from './grizzly-hills-2.ogg';
+
+export default [GrizzlyHillsMusic1, GrizzlyHillsMusic2];

src/assets/grizzly-hills/preview/index.ts

@@ -0,0 +1,27 @@
+import GrizzlyHills1 from './grizzly-hills-1.jpg';
+import GrizzlyHills2 from './grizzly-hills-2.jpg';
+import GrizzlyHills3 from './grizzly-hills-3.jpg';
+import GrizzlyHills4 from './grizzly-hills-4.jpg';
+import GrizzlyHills5 from './grizzly-hills-5.jpg';
+import GrizzlyHills6 from './grizzly-hills-6.jpg';
+import GrizzlyHills7 from './grizzly-hills-7.jpg';
+import GrizzlyHills8 from './grizzly-hills-8.jpg';
+import GrizzlyHills9 from './grizzly-hills-9.jpg';
+import GrizzlyHills10 from './grizzly-hills-10.jpg';
+import GrizzlyHills11 from './grizzly-hills-11.jpg';
+import GrizzlyHills12 from './grizzly-hills-12.jpg';
+
+export default [
+    GrizzlyHills1,
+    GrizzlyHills2,
+    GrizzlyHills3,
+    GrizzlyHills4,
+    GrizzlyHills5,
+    GrizzlyHills6,
+    GrizzlyHills7,
+    GrizzlyHills8,
+    GrizzlyHills9,
+    GrizzlyHills10,
+    GrizzlyHills11,
+    GrizzlyHills12,
+];

src/assets/grizzly-hills/view/index.ts

@@ -0,0 +1,27 @@
+import GrizzlyHills1 from './grizzly-hills-1.jpg';
+import GrizzlyHills2 from './grizzly-hills-2.jpg';
+import GrizzlyHills3 from './grizzly-hills-3.jpg';
+import GrizzlyHills4 from './grizzly-hills-4.jpg';
+import GrizzlyHills5 from './grizzly-hills-5.jpg';
+import GrizzlyHills6 from './grizzly-hills-6.jpg';
+import GrizzlyHills7 from './grizzly-hills-7.jpg';
+import GrizzlyHills8 from './grizzly-hills-8.jpg';
+import GrizzlyHills9 from './grizzly-hills-9.jpg';
+import GrizzlyHills10 from './grizzly-hills-10.jpg';
+import GrizzlyHills11 from './grizzly-hills-11.jpg';
+import GrizzlyHills12 from './grizzly-hills-12.jpg';
+
+export default [
+    GrizzlyHills1,
+    GrizzlyHills2,
+    GrizzlyHills3,
+    GrizzlyHills4,
+    GrizzlyHills5,
+    GrizzlyHills6,
+    GrizzlyHills7,
+    GrizzlyHills8,
+    GrizzlyHills9,
+    GrizzlyHills10,
+    GrizzlyHills11,
+    GrizzlyHills12,
+];

src/assets/halls-of-valor/index.ts

@@ -1,9 +1,9 @@
-import preview from "./preview";
+import preview from './preview';
-import view from "./view";
+import view from './view';
-import music from "./music";
+import music from './music';
 
 export default {
-  name: "halls-of-valor",
+    name: 'halls-of-valor',
     music,
     view,
     preview,

src/assets/halls-of-valor/music/index.ts

@@ -1,3 +1,3 @@
-import HallsOfValorMusic1 from "./halls-of-valor-music-1.mp3";
+import HallsOfValorMusic1 from './halls-of-valor-music-1.mp3';
 
 export default [HallsOfValorMusic1];

src/assets/halls-of-valor/preview/index.ts

@@ -1,6 +1,6 @@
-import HallsOfValor1 from "./halls-of-valor-1.jpg";
+import HallsOfValor1 from './halls-of-valor-1.jpg';
-import HallsOfValor2 from "./halls-of-valor-2.jpg";
+import HallsOfValor2 from './halls-of-valor-2.jpg';
-import HallsOfValor3 from "./halls-of-valor-3.jpg";
+import HallsOfValor3 from './halls-of-valor-3.jpg';
-import HallsOfValor4 from "./halls-of-valor-4.jpg";
+import HallsOfValor4 from './halls-of-valor-4.jpg';
 
 export default [HallsOfValor1, HallsOfValor2, HallsOfValor3, HallsOfValor4];

src/assets/halls-of-valor/view/index.ts

@@ -1,6 +1,6 @@
-import HallsOfValor1 from "./halls-of-valor-1.jpg";
+import HallsOfValor1 from './halls-of-valor-1.jpg';
-import HallsOfValor2 from "./halls-of-valor-2.jpg";
+import HallsOfValor2 from './halls-of-valor-2.jpg';
-import HallsOfValor3 from "./halls-of-valor-3.jpg";
+import HallsOfValor3 from './halls-of-valor-3.jpg';
-import HallsOfValor4 from "./halls-of-valor-4.jpg";
+import HallsOfValor4 from './halls-of-valor-4.jpg';
 
 export default [HallsOfValor1, HallsOfValor2, HallsOfValor3, HallsOfValor4];

src/assets/nagrand/index.ts

@@ -1,9 +1,9 @@
-import preview from "./preview";
+import preview from './preview';
-import view from "./view";
+import view from './view';
-import music from "./music";
+import music from './music';
 
 export default {
-  name: "nagrand",
+    name: 'nagrand',
     music,
     view,
     preview,

src/assets/nagrand/music/index.ts

@@ -1,6 +1,6 @@
-import NagrandMusic1 from "./nagrand-music-1.ogg";
+import NagrandMusic1 from './nagrand-music-1.ogg';
-import NagrandMusic2 from "./nagrand-music-2.ogg";
+import NagrandMusic2 from './nagrand-music-2.ogg';
-import NagrandMusic3 from "./nagrand-music-3.ogg";
+import NagrandMusic3 from './nagrand-music-3.ogg';
-import NagrandMusic4 from "./nagrand-music-4.ogg";
+import NagrandMusic4 from './nagrand-music-4.ogg';
 
 export default [NagrandMusic1, NagrandMusic2, NagrandMusic3, NagrandMusic4];

src/assets/nagrand/preview/index.ts

@@ -1,7 +1,7 @@
-import Nagrand1 from "./nagrand-1.jpg";
+import Nagrand1 from './nagrand-1.jpg';
-import Nagrand2 from "./nagrand-2.jpg";
+import Nagrand2 from './nagrand-2.jpg';
-import Nagrand3 from "./nagrand-3.jpg";
+import Nagrand3 from './nagrand-3.jpg';
-import Nagrand4 from "./nagrand-4.jpg";
+import Nagrand4 from './nagrand-4.jpg';
-import Nagrand5 from "./nagrand-5.jpg";
+import Nagrand5 from './nagrand-5.jpg';
 
 export default [Nagrand1, Nagrand2, Nagrand3, Nagrand4, Nagrand5];

src/assets/nagrand/view/index.ts

@@ -1,7 +1,7 @@
-import Nagrand1 from "./nagrand-1.jpg";
+import Nagrand1 from './nagrand-1.jpg';
-import Nagrand2 from "./nagrand-2.jpg";
+import Nagrand2 from './nagrand-2.jpg';
-import Nagrand3 from "./nagrand-3.jpg";
+import Nagrand3 from './nagrand-3.jpg';
-import Nagrand4 from "./nagrand-4.jpg";
+import Nagrand4 from './nagrand-4.jpg';
-import Nagrand5 from "./nagrand-5.jpg";
+import Nagrand5 from './nagrand-5.jpg';
 
 export default [Nagrand1, Nagrand2, Nagrand3, Nagrand4, Nagrand5];

src/assets/pandaria/index.ts

@@ -1,9 +1,9 @@
-import preview from "./preview";
+import preview from './preview';
-import view from "./view";
+import view from './view';
-import music from "./music";
+import music from './music';
 
 export default {
-  name: "pandaria",
+    name: 'pandaria',
     music,
     view,
     preview,

src/assets/pandaria/music/index.ts

@@ -1,6 +1,6 @@
-import Pandaria1 from "./pandaria-music-1.mp3";
+import Pandaria1 from './pandaria-music-1.mp3';
-import Pandaria2 from "./pandaria-music-2.mp3";
+import Pandaria2 from './pandaria-music-2.mp3';
-import Pandaria3 from "./pandaria-music-3.mp3";
+import Pandaria3 from './pandaria-music-3.mp3';
-import Pandaria4 from "./pandaria-music-4.mp3";
+import Pandaria4 from './pandaria-music-4.mp3';
 
 export default [Pandaria1, Pandaria2, Pandaria3, Pandaria4];

src/assets/pandaria/preview/index.ts

@@ -1,15 +1,8 @@
-import Pandaria1 from "./pandaria-1.jpg";
+import Pandaria1 from './pandaria-1.jpg';
-import Pandaria2 from "./pandaria-2.jpg";
+import Pandaria2 from './pandaria-2.jpg';
-import Pandaria3 from "./pandaria-3.jpg";
+import Pandaria3 from './pandaria-3.jpg';
-import Pandaria4 from "./pandaria-4.jpg";
+import Pandaria4 from './pandaria-4.jpg';
-import Pandaria5 from "./pandaria-5.jpg";
+import Pandaria5 from './pandaria-5.jpg';
-import Pandaria6 from "./pandaria-6.jpg";
+import Pandaria6 from './pandaria-6.jpg';
 
-export default [
+export default [Pandaria1, Pandaria2, Pandaria3, Pandaria4, Pandaria5, Pandaria6];
-  Pandaria1,
-  Pandaria2,
-  Pandaria3,
-  Pandaria4,
-  Pandaria5,
-  Pandaria6,
-];

src/assets/pandaria/view/index.ts

@@ -1,15 +1,8 @@
-import Pandaria1 from "./pandaria-1.jpg";
+import Pandaria1 from './pandaria-1.jpg';
-import Pandaria2 from "./pandaria-2.jpg";
+import Pandaria2 from './pandaria-2.jpg';
-import Pandaria3 from "./pandaria-3.jpg";
+import Pandaria3 from './pandaria-3.jpg';
-import Pandaria4 from "./pandaria-4.jpg";
+import Pandaria4 from './pandaria-4.jpg';
-import Pandaria5 from "./pandaria-5.jpg";
+import Pandaria5 from './pandaria-5.jpg';
-import Pandaria6 from "./pandaria-6.jpg";
+import Pandaria6 from './pandaria-6.jpg';
 
-export default [
+export default [Pandaria1, Pandaria2, Pandaria3, Pandaria4, Pandaria5, Pandaria6];
-  Pandaria1,
-  Pandaria2,
-  Pandaria3,
-  Pandaria4,
-  Pandaria5,
-  Pandaria6,
-];

src/assets/stormwind-park/index.ts

@@ -1,9 +1,9 @@
-import preview from "./preview";
+import preview from './preview';
-import view from "./view";
+import view from './view';
-import music from "./music";
+import music from './music';
 
 export default {
-  name: "stormwind-park",
+    name: 'stormwind-park',
     music,
     view,
     preview,

src/assets/stormwind-park/music/index.ts

@@ -1,4 +1,4 @@
-import StormwindMusic1 from "./stormwind-park-music-1.mp3";
+import StormwindMusic1 from './stormwind-park-music-1.mp3';
-import StormwindMusic2 from "./stormwind-park-music-2.mp3";
+import StormwindMusic2 from './stormwind-park-music-2.mp3';
 
 export default [StormwindMusic1, StormwindMusic2];

src/assets/stormwind-park/preview/index.ts

@@ -1,12 +1,12 @@
-import StormwindPark1 from "./stormwind-park-1.jpg";
+import StormwindPark1 from './stormwind-park-1.jpg';
-import StormwindPark2 from "./stormwind-park-2.jpg";
+import StormwindPark2 from './stormwind-park-2.jpg';
-import StormwindPark3 from "./stormwind-park-3.jpg";
+import StormwindPark3 from './stormwind-park-3.jpg';
-import StormwindPark4 from "./stormwind-park-4.jpg";
+import StormwindPark4 from './stormwind-park-4.jpg';
-import StormwindPark5 from "./stormwind-park-5.jpg";
+import StormwindPark5 from './stormwind-park-5.jpg';
-import StormwindPark6 from "./stormwind-park-6.jpg";
+import StormwindPark6 from './stormwind-park-6.jpg';
-import StormwindPark7 from "./stormwind-park-7.jpg";
+import StormwindPark7 from './stormwind-park-7.jpg';
-import StormwindPark8 from "./stormwind-park-8.jpg";
+import StormwindPark8 from './stormwind-park-8.jpg';
-import StormwindPark9 from "./stormwind-park-9.jpg";
+import StormwindPark9 from './stormwind-park-9.jpg';
 
 export default [
     StormwindPark1,

src/assets/stormwind-park/view/index.ts

@@ -1,12 +1,12 @@
-import StormwindPark1 from "./stormwind-park-1.jpg";
+import StormwindPark1 from './stormwind-park-1.jpg';
-import StormwindPark2 from "./stormwind-park-2.jpg";
+import StormwindPark2 from './stormwind-park-2.jpg';
-import StormwindPark3 from "./stormwind-park-3.jpg";
+import StormwindPark3 from './stormwind-park-3.jpg';
-import StormwindPark4 from "./stormwind-park-4.jpg";
+import StormwindPark4 from './stormwind-park-4.jpg';
-import StormwindPark5 from "./stormwind-park-5.jpg";
+import StormwindPark5 from './stormwind-park-5.jpg';
-import StormwindPark6 from "./stormwind-park-6.jpg";
+import StormwindPark6 from './stormwind-park-6.jpg';
-import StormwindPark7 from "./stormwind-park-7.jpg";
+import StormwindPark7 from './stormwind-park-7.jpg';
-import StormwindPark8 from "./stormwind-park-8.jpg";
+import StormwindPark8 from './stormwind-park-8.jpg';
-import StormwindPark9 from "./stormwind-park-9.jpg";
+import StormwindPark9 from './stormwind-park-9.jpg';
 
 export default [
     StormwindPark1,

src/components/bordered-header/bordered-header.scss

@@ -1,4 +1,4 @@
-@import "../../app/style";
+@import "../../pages/app/style";
 
 $borderWidth: 12px;
 $borderOutset: 8px;

src/components/bordered-header/bordered-header.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
+import * as React from 'react';
 
-import "./bordered-header.scss";
+import './bordered-header.scss';
 
 interface Props {
     children: React.ReactNode;
@@ -10,4 +10,4 @@ export const BorderedHeader: React.FC<Props> = ({ children }: Props) => (
     <div className="header">{children}</div>
 );
 
-BorderedHeader.displayName = "BorderedHeader";
+BorderedHeader.displayName = 'BorderedHeader';

src/components/bordered-header/index.ts

@@ -0,0 +1 @@
+export { BorderedHeader } from './bordered-header';

src/components/checkbox-component/checkbox-component.scss

@@ -1,4 +1,4 @@
-@import "../../app/style";
+@import "../../pages/app/style";
 
 .checkbox {
     width: 32px;

src/components/checkbox-component/checkbox-component.tsx

@@ -1,40 +1,36 @@
-import * as React from "react";
+import * as React from 'react';
-import { KeyboardEvent, useCallback } from "react";
+import { KeyboardEvent, useCallback } from 'react';
-import cn from "classnames";
+import cn from 'classnames';
 
-import { Settings } from "../../settings-context";
+import { Settings } from '../../settings-context';
 
-import "./checkbox-component.scss";
+import './checkbox-component.scss';
 
 interface Props {
-  handleClick: (option: keyof Settings) => void;
+    handleClick: (option: keyof Settings) => () => void;
     optionName: keyof Settings;
     value: boolean;
 }
 
-export const CheckBoxComponent: React.FC<Props> = ({
+export const CheckboxComponent: React.FC<Props> = ({ handleClick, optionName, value }: Props) => {
-  handleClick,
-  optionName,
-  value,
-}: Props) => {
     const handleKeyDown = useCallback(
-    (e: KeyboardEvent, option: keyof Settings) => {
+        (option: keyof Settings) => (e: KeyboardEvent) => {
             if (e.keyCode !== 13 && e.keyCode !== 32) {
                 return;
             }
-      handleClick(option);
+            handleClick(option)();
         },
-    [handleClick]
+        [handleClick],
     );
 
     return (
         <div
             tabIndex={0}
-      onClick={() => handleClick(optionName)}
+            onClick={handleClick(optionName)}
-      onKeyDown={(e) => handleKeyDown(e, optionName)}
+            onKeyDown={handleKeyDown(optionName)}
-      className={cn("checkbox", { "checkbox--checked": value })}
+            className={cn('checkbox', { 'checkbox--checked': value })}
         />
     );
 };
 
-CheckBoxComponent.displayName = "CheckBoxComponent";
+CheckboxComponent.displayName = 'CheckboxComponent';

src/components/checkbox-component/index.ts

@@ -0,0 +1 @@
+export { CheckboxComponent } from './checkbox-component';