From fdd49f8621fa23eddc11f7c6c1c89e4033bc1600 Mon Sep 17 00:00:00 2001
From: He4eT <He4eT@oddsquat.org>
Date: Wed, 24 May 2023 01:53:38 +0300
Subject: [PATCH] PlayerView: focus as a mode

---
 README.md                           | 12 ++++++------
 src/index.js                        | 12 ++++++------
 src/views/PlayerView/PlayerView.css |  9 +--------
 3 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/README.md b/README.md
index 66a8383..98fd40c 100644
--- a/README.md
+++ b/README.md
@@ -9,16 +9,16 @@ To see a live demo, check out [https://he4et.github.io/elseifplayer/](https://he
 
 You can provide the direct link to your game:
 
-`/#/play/encodedURL/[theme]/[mode]/`
+`/#/mode/encodedURL/[theme]/`
 
+- `mode` — player interface mode:
+  - `play` — default multi-window mode.
+  - `focus` — single window mode without additional windows, such as the status bar.
 - `encodedURL` — storyfile location encoded with `encodeURIComponent`.
 - `theme` — [UI theme](https://github.com/He4eT/elseifplayer/blob/master/src/themes/themes.js), optional.
-- `mode` — player interface mode, optional:
-  - the default mode is used if the option is not set.
-  - `focus` — single window mode without additional windows, such as the status bar.
 
 ### Examples
 - [Play "Lost Pig" with default or last used theme](https://he4et.github.io/elseifplayer/#/play/https%3A%2F%2Fmirror.ifarchive.org%2Fif-archive%2Fgames%2Fzcode%2FLostPig.z8/);
-- [Play "Lost Pig" without statusbar with default or last used theme](https://he4et.github.io/elseifplayer/#/play/https%3A%2F%2Fmirror.ifarchive.org%2Fif-archive%2Fgames%2Fzcode%2FLostPig.z8/focus/);
+- [Play "Lost Pig" without statusbar with default or last used theme](https://he4et.github.io/elseifplayer/#/focus/https%3A%2F%2Fmirror.ifarchive.org%2Fif-archive%2Fgames%2Fzcode%2FLostPig.z8/);
 - [Play "Lost Pig" with Nord theme](https://he4et.github.io/elseifplayer/#/play/https%3A%2F%2Fmirror.ifarchive.org%2Fif-archive%2Fgames%2Fzcode%2FLostPig.z8/nord/);
-- [Play "Lost Pig" without statusbar with Dim theme](https://he4et.github.io/elseifplayer/#/play/https%3A%2F%2Fmirror.ifarchive.org%2Fif-archive%2Fgames%2Fzcode%2FLostPig.z8/dim/focus/);
+- [Play "Lost Pig" without statusbar with Dim theme](https://he4et.github.io/elseifplayer/#/focus/https%3A%2F%2Fmirror.ifarchive.org%2Fif-archive%2Fgames%2Fzcode%2FLostPig.z8/dim/);
diff --git a/src/index.js b/src/index.js
index 58b24c6..a0c0b2a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -50,15 +50,15 @@ function App () {
           <Route path='/play/:encodedUrl'>
             { playerView(themeEngine, false) }
           </Route>
-          <Route path='/play/:encodedUrl/focus'>
-            { playerView(themeEngine, true) }
-          </Route>
-          <Route path='/play/:encodedUrl/:theme/focus'>
-            { playerView(themeEngine, true) }
-          </Route>
           <Route path='/play/:encodedUrl/:theme'>
             { playerView(themeEngine, false) }
           </Route>
+          <Route path='/focus/:encodedUrl'>
+            { playerView(themeEngine, true) }
+          </Route>
+          <Route path='/focus/:encodedUrl/:theme'>
+            { playerView(themeEngine, true) }
+          </Route>
 
           <Route>
             <NotFoundView />
diff --git a/src/views/PlayerView/PlayerView.css b/src/views/PlayerView/PlayerView.css
index 3b2190e..ac2c30b 100644
--- a/src/views/PlayerView/PlayerView.css
+++ b/src/views/PlayerView/PlayerView.css
@@ -1,10 +1,3 @@
-.app.play {
+.app.play, .app.focus {
   height: 100%;
 }
-
-@media (min-width: 800px) {
-  .app.play main {
-    max-height: 90%;
-    margin: auto;
-  }
-}