From 5b283d27890ac1c96500eee21c40a827f2e54218 Mon Sep 17 00:00:00 2001
From: He4eT <He4eTHb1u@gmail.com>
Date: Tue, 2 Mar 2021 04:08:27 +0500
Subject: [PATCH] Add a special class to the app container when the player page
 is active

---
 src/components/player/player.css |  4 ++++
 src/index.js                     | 13 +++++++++++--
 src/style/base.css               | 14 +++++++-------
 src/utils/utils.routing.js       |  5 +++++
 src/views/HomeView.jsx           |  6 +++---
 src/views/PlayerView.jsx         |  2 +-
 6 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/src/components/player/player.css b/src/components/player/player.css
index 29c4110..1877f81 100644
--- a/src/components/player/player.css
+++ b/src/components/player/player.css
@@ -1,3 +1,7 @@
+.app.play {
+  height: 100%;
+}
+
 .ifplayer {
   height: 100%;
   display: flex;
diff --git a/src/index.js b/src/index.js
index ea390b7..84ab0b7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,10 @@
 import { h, render } from 'preact'
 import { Route, Router, Switch } from 'wouter-preact'
 
-import { useHashLocation } from '~/src/utils/utils.routing'
+import {
+  useHashLocation,
+  extractView
+} from '~/src/utils/utils.routing'
 import {
   useThemeEngine
 } from '~/src/themes/themes'
@@ -14,10 +17,15 @@ import '~/src/style/base.css'
 
 function App () {
   const themeEngine = useThemeEngine()
+  const [location] = useHashLocation()
 
   return (
     <Router hook={useHashLocation}>
-      <div className={['app', themeEngine.currentTheme].join(' ')}>
+      <div className={[
+        'app',
+        extractView(location),
+        themeEngine.currentTheme].join(' ')}>
+
         <Switch>
           <Route path='/'>
             <HomeView {...{
@@ -37,6 +45,7 @@ function App () {
             404
           </Route>
         </Switch>
+
       </div>
     </Router>
   )
diff --git a/src/style/base.css b/src/style/base.css
index ed219c4..2bccfa0 100644
--- a/src/style/base.css
+++ b/src/style/base.css
@@ -11,7 +11,7 @@ html, body {
 }
 
 .app {
-  height: 100%;
+  min-height: 100%;
   box-sizing: border-box;
 
   display: flex;
@@ -66,14 +66,14 @@ ul {
 
 /* Home */
 
-.app > main.home {
+.app > .view.home {
   padding: var(--inner-padding);
   max-height: unset;
   height: 200%;
 }
 
-.home input,
-.home select {
+.view.home input,
+.view.view.home select {
   padding: 4px 8px;
   color: var(--main-color);
   background-color: var(--bg-color);
@@ -82,20 +82,20 @@ ul {
   font: inherit;
 }
 
-.home summary {
+.view.home summary {
   display: inline-block;
   padding-right: 4px;
   cursor: pointer;
 }
 
-.home .play label {
+.view.home .play label {
   display: inline-block;
   margin-bottom: 16px;
   width: 100%;
   max-width: 400px;
 }
 
-.home .play input {
+.view.home .play input {
   box-sizing: border-box;
   width: 100%;
 }
diff --git a/src/utils/utils.routing.js b/src/utils/utils.routing.js
index dcd213b..93aa875 100644
--- a/src/utils/utils.routing.js
+++ b/src/utils/utils.routing.js
@@ -22,3 +22,8 @@ export const useHashLocation = () => {
 
 export const buildPlayLinkHref = (url, theme) =>
   `/#/play/${theme}/${encodeURIComponent(url)}`
+
+export const extractView = location => {
+  const currentView = location.split('/').filter(Boolean)[0]
+  return currentView || ''
+}
diff --git a/src/views/HomeView.jsx b/src/views/HomeView.jsx
index 7471b19..73d2249 100644
--- a/src/views/HomeView.jsx
+++ b/src/views/HomeView.jsx
@@ -28,10 +28,10 @@ export default function ({ themeEngine }) {
         <p>
           Interactive Fiction interpreter
           that runs right in your browser.
-          <br/>
+          <br />
           Source code can be found in this <a
-            target="_blank"
-            href="https://github.com/He4eT/ifplayer">
+            target='_blank'
+            href='https://github.com/He4eT/ifplayer'>
             repository
           </a>.
         </p>
diff --git a/src/views/PlayerView.jsx b/src/views/PlayerView.jsx
index 0e263a2..8d9ad3d 100644
--- a/src/views/PlayerView.jsx
+++ b/src/views/PlayerView.jsx
@@ -15,7 +15,7 @@ export default function ({ setTheme, theme, encodedUrl }) {
   }, [encodedUrl])
 
   return (
-    <main className='view playerView'>
+    <main>
       <UrlPlayer url={targetUrl} />
     </main>
   )