Player: add the singleWindow option

src/components/Player/Player.jsx

@@ -37,7 +37,9 @@ const Handlers = ({
   setInputType,
   setInbox
 }) => ({
-  onInit: _ => setStatus({ stage: 'ready' }),
+  onInit: _ => {
+    setStatus({ stage: 'ready' })
+  },
   /* */
   onUpdateWindows: windows => {
     setWindows(windows)
@@ -49,8 +51,12 @@ const Handlers = ({
     setCurrentWindowId(id)
     setInputType(type)
   },
-  onUpdateContent: setInbox,
-  onDisable: _ => setInputType(null),
+  onUpdateContent: inbox => {
+    setInbox(inbox)
+  },
+  onDisable: _ => {
+    setInputType(null)
+  },
   /* */
   onFileNameRequest: (tosave, usage, _, setFileName) => {
     setFileName({
@@ -66,10 +72,14 @@ const Handlers = ({
     localStorage.setItem(`fake-fs/${filename}`, encode(content))
   },
   /* */
-  onExit: _ => setInputType(null)
+  onExit: _ => {
+    setInputType(null)
+  }
 })
 
-export default function ({ vmParts: { file, engine } }) {
+export default function ({
+  vmParts: { file, engine }, singleWindow
+}) {
   const [status, setStatus] = useState(INITIAL_STATUS)
 
   const [windows, setWindows] = useState([])
@@ -123,7 +133,9 @@ export default function ({ vmParts: { file, engine } }) {
         <section className='output'>{
           windows
             .sort(byTop)
-            // .filter(({id}) => id === currentWindowId)
+            .filter(singleWindow
+              ? ({id}) => id === currentWindowId
+              : _ => true)
             .map(textWindow(inbox))}
         </section>
         <InputBox {...{

src/components/Player/UrlPlayer.jsx

@@ -35,7 +35,7 @@ const prepareVM = ({ url, setStatus, setParts }) => {
     })
 }
 
-export default function ({ url }) {
+export default function ({ url, singleWindow }) {
   const [status, setStatus] = useState(INITIAL_STATUS)
   const [vmParts, setParts] = useState(null)
 
@@ -47,6 +47,9 @@ export default function ({ url }) {
   }, [url])
 
   return vmParts
-    ? (<Player vmParts={vmParts} />)
+    ? (<Player {...{
+        vmParts,
+        singleWindow
+      }}/>)
     : (<Status {...status} />)
 }

src/index.js

@@ -21,6 +21,12 @@ function App () {
   const themeEngine = useThemeEngine()
   const [location] = useHashLocation()
 
+  const playerView = (themeEngine, singleWindow) => params =>
+    (<PlayerView {...{
+      ...themeEngine,
+      ...params,
+      singleWindow}}/>)
+
   return (
     <Router hook={useHashLocation}>
       <div className={[
@@ -37,18 +43,20 @@ function App () {
           <Route path='/games/'>
             <GamesView />
           </Route>
+
           <Route path='/play/:encodedUrl'>
-            {params => <PlayerView {...{
-              ...themeEngine,
-              ...params
-            }} />}
+            { 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'>
-            {params => <PlayerView {...{
-              ...themeEngine,
-              ...params
-            }} />}
+            { playerView(themeEngine, false) }
           </Route>
+
           <Route>
             <NotFoundView />
           </Route>

src/views/PlayerView/PlayerView.jsx

@@ -7,7 +7,9 @@ import './PlayerView.css'
 
 const decode = encodedUrl => decodeURIComponent(encodedUrl)
 
-export default function ({ setTheme, theme, encodedUrl }) {
+export default function ({
+  setTheme, theme, encodedUrl, singleWindow
+}) {
   useEffect(() => setTheme(theme), [theme])
 
   const [targetUrl, setTargetUrl] = useState(decode(encodedUrl))
@@ -18,7 +20,9 @@ export default function ({ setTheme, theme, encodedUrl }) {
 
   return (
     <main>
-      <UrlPlayer url={targetUrl} />
+      <UrlPlayer {...{
+        url: targetUrl,
+        singleWindow}}/>
     </main>
   )
 }