From ee76ad1498b4c5a8a2edc2ec3383bb7d4da52559 Mon Sep 17 00:00:00 2001
From: cha0s <git@cha0s.io>
Date: Wed, 6 Apr 2022 14:05:12 -0500
Subject: [PATCH] flow: ui

---
 .../persea/controllers/room/component.module.scss |  9 +++++++--
 .../src/persea/room-sides/entities-side/index.jsx |  1 -
 .../src/persea/room-sides/tiles-side/index.jsx    | 15 ++++++++++++++-
 .../room-sides/tiles-side/index.module.scss       |  7 ++-----
 4 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/packages/topdown/src/persea/controllers/room/component.module.scss b/packages/topdown/src/persea/controllers/room/component.module.scss
index 6855095..a092a6a 100644
--- a/packages/topdown/src/persea/controllers/room/component.module.scss
+++ b/packages/topdown/src/persea/controllers/room/component.module.scss
@@ -21,9 +21,14 @@
   }
   @media (min-width: 60rem) {
     display: flex;
-    .side, .stage {
+    .stage {
+      margin: 1rem 0 1rem 1rem;
       height: calc(100% - 2rem);
-      width: calc(50% - 2rem);
+      width: calc(50% - 1rem);
+    }
+    .side {
+      height: calc(100% - 2rem);
+      width: 50%;
     }
   }
 }
diff --git a/packages/topdown/src/persea/room-sides/entities-side/index.jsx b/packages/topdown/src/persea/room-sides/entities-side/index.jsx
index 637ad4e..20e4d54 100644
--- a/packages/topdown/src/persea/room-sides/entities-side/index.jsx
+++ b/packages/topdown/src/persea/room-sides/entities-side/index.jsx
@@ -141,7 +141,6 @@ function EntitiesPage({
   return (
     <div className={locals['entities-page']}>
       <div className={classnames('label', locals.label)}>
-        <div>Entities</div>
         <div className={locals.list}>{names}</div>
       </div>
       <EntityController.Component
diff --git a/packages/topdown/src/persea/room-sides/tiles-side/index.jsx b/packages/topdown/src/persea/room-sides/tiles-side/index.jsx
index a1f5282..fcef091 100644
--- a/packages/topdown/src/persea/room-sides/tiles-side/index.jsx
+++ b/packages/topdown/src/persea/room-sides/tiles-side/index.jsx
@@ -219,7 +219,6 @@ function TilesPage({
   return (
     <div className={classnames(styles.tilesPage, {[styles.holding]: isHolding})}>
       <div className={classnames('label', styles.label)}>
-        <div>Tiles</div>
         <ul>
           {
             resource.tiles.map((tiles, i) => (
@@ -294,6 +293,20 @@ function TilesPage({
                 </select>
               </label>
             </div>
+            {2 === tilesetMode && (
+              <div className={styles.fillType}>
+                <label>
+                  <span>Fill type</span>
+                  <div>
+                    <select>
+                      <option>Tiling</option>
+                      <option>Random</option>
+                    </select>
+                  </div>
+                </label>
+              </div>
+            )}
+            <div className={styles.grower} />
             <div className={styles.scale}>
               <label>
                 <span>Scale</span>
diff --git a/packages/topdown/src/persea/room-sides/tiles-side/index.module.scss b/packages/topdown/src/persea/room-sides/tiles-side/index.module.scss
index c18fc08..113558f 100644
--- a/packages/topdown/src/persea/room-sides/tiles-side/index.module.scss
+++ b/packages/topdown/src/persea/room-sides/tiles-side/index.module.scss
@@ -16,11 +16,7 @@
     font-size: 0.6em;
     font-weight: bold;
     margin-bottom: 1em;
-    // text-align: center;
-    // text-orientation: mixed;
     text-transform: uppercase;
-    // writing-mode: vertical-rl;
-    // width: 1rem;
   }
 }
 
@@ -57,9 +53,10 @@
 
 .header {
   display: flex;
+  flex-wrap: wrap;
 }
 
-.brushes {
+.grower {
   flex-grow: 100;
 }