From fae4b0948319a85c1800546bea657f6b282d4e6d Mon Sep 17 00:00:00 2001
From: He4eT <He4eTHb1u@gmail.com>
Date: Mon, 19 Jul 2021 16:25:36 +0500
Subject: [PATCH] Player: group all output windows

---
 src/components/Player/Player.jsx | 15 ++++++++++++---
 src/components/Player/player.css | 14 +++++++++++---
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/components/Player/Player.jsx b/src/components/Player/Player.jsx
index e72695d..b209374 100644
--- a/src/components/Player/Player.jsx
+++ b/src/components/Player/Player.jsx
@@ -42,7 +42,10 @@ const Handlers = ({
   onUpdateWindows: windows => {
     setWindows(windows)
   },
-  onUpdateInputs: ([{type, id}]) => {
+  onUpdateInputs: data => {
+    if (data.length === 0) return void null
+
+    const {type, id} = data[0]
     setCurrentWindowId(id)
     setInputType(type)
   },
@@ -111,12 +114,18 @@ export default function ({ vmParts: { file, engine } }) {
     })[currentWindow.type]
   }
 
+  const byTop = (a, b) =>
+    a.top - b.top
+
   return status.stage !== 'ready'
     ? (<Status {...status} />)
     : (<section className='ifplayer'>
-        { windows
+        <section className='output'>{
+          windows
+            .sort(byTop)
             // .filter(({id}) => id === currentWindowId)
-            .map(textWindow(inbox)) }
+            .map(textWindow(inbox))}
+        </section>
         <InputBox {...{
           inputType,
           windows,
diff --git a/src/components/Player/player.css b/src/components/Player/player.css
index b9f892d..32879de 100644
--- a/src/components/Player/player.css
+++ b/src/components/Player/player.css
@@ -35,11 +35,19 @@
   display: none;
 }
 
+.ifplayer .output {
+  display: flex;
+  flex-grow: 2;
+  flex-direction: column;
+  overflow-y: hidden;
+
+  border: var(--border-width) solid var(--main-color);
+}
+
 .ifplayer .buffer {
   overflow-y: scroll;
   box-sizing: border-box;
 
-  border: var(--border-width) solid var(--main-color);
   padding: var(--inner-padding);
 
   scrollbar-color: var(--main-color) var(--bg-color);
@@ -58,11 +66,11 @@
 
 .ifplayer .gridBuffer {
   flex-shrink: 0;
-  border-bottom: 0;
+  border-bottom: var(--border-width) solid var(--main-color);
 }
 
 .ifplayer .textBuffer {
-  flex: 2 1 auto;
+  flex: 2 1;
 }
 
 .ifplayer .textBuffer > br:first-child,