refactor: ui

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

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');
+}

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;

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;

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');
+    }
+  }
+}