From d792b500708dae1176e993509e8af6cc5911df23 Mon Sep 17 00:00:00 2001
From: cha0s <git@cha0s.io>
Date: Mon, 12 Jul 2021 14:05:09 -0500
Subject: [PATCH] refactor: ui

---
 TODO.md                                       |   3 +
 .../src/components/project/index.module.scss  |  24 +++++
 .../project/{sidebar/img => }/map.png         | Bin
 .../{sidebar => organization}/actions.jsx     |  12 +--
 .../img/collapse-all.svg                      |   0
 .../{sidebar => organization}/img/image.png   | Bin
 .../img/joystick.png                          | Bin
 .../project/organization/img/map.png          | Bin 0 -> 5617 bytes
 .../{sidebar => organization}/img/music.png   | Bin
 .../img/new-file.svg                          |   0
 .../img/new-folder.svg                        |   0
 .../{sidebar => organization}/img/note.png    | Bin
 .../img/question.png                          | Bin
 .../{sidebar => organization}/img/script.png  | Bin
 .../{sidebar => organization}/img/sound.png   | Bin
 .../{sidebar => organization}/index.jsx       |  16 ++--
 .../project/organization/index.scss           |  88 ++++++++++++++++++
 17 files changed, 129 insertions(+), 14 deletions(-)
 create mode 100644 packages/core/src/components/project/index.module.scss
 rename packages/core/src/components/project/{sidebar/img => }/map.png (100%)
 rename packages/core/src/components/project/{sidebar => organization}/actions.jsx (69%)
 rename packages/core/src/components/project/{sidebar => organization}/img/collapse-all.svg (100%)
 rename packages/core/src/components/project/{sidebar => organization}/img/image.png (100%)
 rename packages/core/src/components/project/{sidebar => organization}/img/joystick.png (100%)
 create mode 100644 packages/core/src/components/project/organization/img/map.png
 rename packages/core/src/components/project/{sidebar => organization}/img/music.png (100%)
 rename packages/core/src/components/project/{sidebar => organization}/img/new-file.svg (100%)
 rename packages/core/src/components/project/{sidebar => organization}/img/new-folder.svg (100%)
 rename packages/core/src/components/project/{sidebar => organization}/img/note.png (100%)
 rename packages/core/src/components/project/{sidebar => organization}/img/question.png (100%)
 rename packages/core/src/components/project/{sidebar => organization}/img/script.png (100%)
 rename packages/core/src/components/project/{sidebar => organization}/img/sound.png (100%)
 rename packages/core/src/components/project/{sidebar => organization}/index.jsx (92%)
 create mode 100644 packages/core/src/components/project/organization/index.scss

diff --git a/TODO.md b/TODO.md
index 73286e8..9c19266 100644
--- a/TODO.md
+++ b/TODO.md
@@ -8,3 +8,6 @@
 - Layer flood fill
 - Layer mute/solo
 - Tile stamp creation/application
+- Void 'holes' in generated sed worlds
+    - Fall in to 'deeper' void
+    - Basically endgame
\ No newline at end of file
diff --git a/packages/core/src/components/project/index.module.scss b/packages/core/src/components/project/index.module.scss
new file mode 100644
index 0000000..5b1e7ae
--- /dev/null
+++ b/packages/core/src/components/project/index.module.scss
@@ -0,0 +1,24 @@
+.project {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+
+.floater {
+  flex-grow: 1;
+  position: relative;
+}
+
+.resource {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 100%;
+  transform: scale(2, 2);
+  width: 100%;
+}
+
+.room {
+  background-image: url('./map.png');
+}
diff --git a/packages/core/src/components/project/sidebar/img/map.png b/packages/core/src/components/project/map.png
similarity index 100%
rename from packages/core/src/components/project/sidebar/img/map.png
rename to packages/core/src/components/project/map.png
diff --git a/packages/core/src/components/project/sidebar/actions.jsx b/packages/core/src/components/project/organization/actions.jsx
similarity index 69%
rename from packages/core/src/components/project/sidebar/actions.jsx
rename to packages/core/src/components/project/organization/actions.jsx
index 0c7e284..5bff1d8 100644
--- a/packages/core/src/components/project/sidebar/actions.jsx
+++ b/packages/core/src/components/project/organization/actions.jsx
@@ -1,9 +1,9 @@
 import {PropTypes, React} from '@latus/react';
 
-const SidebarActions = ({
+const OrganizationActions = ({
   collapseAll,
 }) => (
-  <div className="sidebar-actions">
+  <div className="organization-actions">
     <button
       className="button new-file"
       label="New resource"
@@ -26,12 +26,12 @@ const SidebarActions = ({
   </div>
 );
 
-SidebarActions.defaultProps = {};
+OrganizationActions.defaultProps = {};
 
-SidebarActions.propTypes = {
+OrganizationActions.propTypes = {
   collapseAll: PropTypes.func.isRequired,
 };
 
-SidebarActions.displayName = 'SidebarActions';
+OrganizationActions.displayName = 'OrganizationActions';
 
-export default SidebarActions;
+export default OrganizationActions;
diff --git a/packages/core/src/components/project/sidebar/img/collapse-all.svg b/packages/core/src/components/project/organization/img/collapse-all.svg
similarity index 100%
rename from packages/core/src/components/project/sidebar/img/collapse-all.svg
rename to packages/core/src/components/project/organization/img/collapse-all.svg
diff --git a/packages/core/src/components/project/sidebar/img/image.png b/packages/core/src/components/project/organization/img/image.png
similarity index 100%
rename from packages/core/src/components/project/sidebar/img/image.png
rename to packages/core/src/components/project/organization/img/image.png
diff --git a/packages/core/src/components/project/sidebar/img/joystick.png b/packages/core/src/components/project/organization/img/joystick.png
similarity index 100%
rename from packages/core/src/components/project/sidebar/img/joystick.png
rename to packages/core/src/components/project/organization/img/joystick.png
diff --git a/packages/core/src/components/project/organization/img/map.png b/packages/core/src/components/project/organization/img/map.png
new file mode 100644
index 0000000000000000000000000000000000000000..1f2d25343497ca491c41b457a7a291edb46a82d1
GIT binary patch
literal 5617
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
LNkvXXu0mjf8bdP=

literal 0
HcmV?d00001

diff --git a/packages/core/src/components/project/sidebar/img/music.png b/packages/core/src/components/project/organization/img/music.png
similarity index 100%
rename from packages/core/src/components/project/sidebar/img/music.png
rename to packages/core/src/components/project/organization/img/music.png
diff --git a/packages/core/src/components/project/sidebar/img/new-file.svg b/packages/core/src/components/project/organization/img/new-file.svg
similarity index 100%
rename from packages/core/src/components/project/sidebar/img/new-file.svg
rename to packages/core/src/components/project/organization/img/new-file.svg
diff --git a/packages/core/src/components/project/sidebar/img/new-folder.svg b/packages/core/src/components/project/organization/img/new-folder.svg
similarity index 100%
rename from packages/core/src/components/project/sidebar/img/new-folder.svg
rename to packages/core/src/components/project/organization/img/new-folder.svg
diff --git a/packages/core/src/components/project/sidebar/img/note.png b/packages/core/src/components/project/organization/img/note.png
similarity index 100%
rename from packages/core/src/components/project/sidebar/img/note.png
rename to packages/core/src/components/project/organization/img/note.png
diff --git a/packages/core/src/components/project/sidebar/img/question.png b/packages/core/src/components/project/organization/img/question.png
similarity index 100%
rename from packages/core/src/components/project/sidebar/img/question.png
rename to packages/core/src/components/project/organization/img/question.png
diff --git a/packages/core/src/components/project/sidebar/img/script.png b/packages/core/src/components/project/organization/img/script.png
similarity index 100%
rename from packages/core/src/components/project/sidebar/img/script.png
rename to packages/core/src/components/project/organization/img/script.png
diff --git a/packages/core/src/components/project/sidebar/img/sound.png b/packages/core/src/components/project/organization/img/sound.png
similarity index 100%
rename from packages/core/src/components/project/sidebar/img/sound.png
rename to packages/core/src/components/project/organization/img/sound.png
diff --git a/packages/core/src/components/project/sidebar/index.jsx b/packages/core/src/components/project/organization/index.jsx
similarity index 92%
rename from packages/core/src/components/project/sidebar/index.jsx
rename to packages/core/src/components/project/organization/index.jsx
index 9f057f6..11a3d24 100644
--- a/packages/core/src/components/project/sidebar/index.jsx
+++ b/packages/core/src/components/project/organization/index.jsx
@@ -13,10 +13,10 @@ import {
 import {createNextState} from '@latus/redux';
 import 'swipe-touch-events';
 
-import SidebarActions from './actions';
+import OrganizationActions from './actions';
 import './index.scss';
 
-const Sidebar = ({
+const Organization = ({
   className,
   label,
   resourcePaths,
@@ -60,7 +60,7 @@ const Sidebar = ({
   };
   const path = join('/project', uuid);
   return (
-    <div className={classnames('sidebar', className)}>
+    <div className={classnames('organization', className)}>
       <Tree
         // active={({value}) => location.pathname === join('/project', value)}
         activate={({value, nodes}) => {
@@ -99,7 +99,7 @@ const Sidebar = ({
               {!nodes && <div className={`icon ${displayName}`} />}
               <span className="text">{label}</span>
               {value === uuid && (
-                <SidebarActions
+                <OrganizationActions
                   collapseAll={(event) => {
                     event.stopPropagation();
                     setCollapsed({});
@@ -115,17 +115,17 @@ const Sidebar = ({
   );
 };
 
-Sidebar.defaultProps = {
+Organization.defaultProps = {
   className: '',
 };
 
-Sidebar.propTypes = {
+Organization.propTypes = {
   className: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   resourcePaths: PropTypes.arrayOf(PropTypes.any).isRequired,
   uuid: PropTypes.string.isRequired,
 };
 
-Sidebar.displayName = 'Sidebar';
+Organization.displayName = 'Organization';
 
-export default Sidebar;
+export default Organization;
diff --git a/packages/core/src/components/project/organization/index.scss b/packages/core/src/components/project/organization/index.scss
new file mode 100644
index 0000000..e8cbd90
--- /dev/null
+++ b/packages/core/src/components/project/organization/index.scss
@@ -0,0 +1,88 @@
+.organization {
+  background-color: #222;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  transition: 0.2s left;
+  width: 100%;
+  > .tree > .node > .item .label > .text {
+    flex-grow: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .label.inline {
+    justify-content: flex-start;
+    > div:first-child.icon {
+      background-size: cover;
+      flex-grow: unset;
+      margin-right: 0.125em;
+      width: 1em;
+      height: 1em;
+      &.AudioComponent {
+        background-image: url('./img/sound.png');
+      }
+      &.Binary {
+        background-image: url('./img/question.png');
+      }
+      &.EntityComponent {
+        background-image: url('./img/joystick.png');
+      }
+      &.ImageComponent {
+        background-image: url('./img/image.png');
+      }
+      &.RoomComponent {
+        background-image: url('./img/map.png');
+      }
+      &.ScriptComponent {
+        background-image: url('./img/script.png');
+      }
+      &.SoundComponent {
+        background-image: url('./img/music.png');
+      }
+      &.TextComponent {
+        background-image: url('./img/note.png');
+      }
+    }
+  }
+  .node {
+    &.parent > .item .label:before {
+      color: #999;
+      content: "\25BE";
+      margin-right: 0.25em;
+    }
+    &.collapsed {
+      &.parent > .item .label:before {
+        color: #999;
+        content: "\25B8";
+      }
+    }
+  }
+}
+
+.organization-actions {
+  display: none;
+  line-height: 0;
+  min-width: 4em;
+  .organization:hover & {
+    display: block;
+  }
+  button {
+    background-color: transparent;
+    background-size: cover;
+    background-repeat: no-repeat;
+    border: none;
+    margin: 0;
+    margin-right: 0.25em;
+    width: 1em;
+    height: 1em;
+    &.collapse-all {
+      background-image: url('./img/collapse-all.svg');
+    }
+    &.new-file {
+      background-image: url('./img/new-file.svg');
+    }
+    &.new-folder {
+      background-image: url('./img/new-folder.svg');
+    }
+  }
+}