Merge pull request #1193 from streetmix/louh/revert-supermoon

Fix hanging builds

app/models/street_data.js

@@ -2,7 +2,7 @@ const { getVariantString, getVariantArray } = require('../../lib/variant')
 
 const LATEST_SCHEMA_VERSION = 19
 
-const DEFAULT_ENVIRONS = 'supermoon'
+const DEFAULT_ENVIRONS = 'day'
 const DEFAULT_BUILDING_HEIGHT_LEFT = 4
 const DEFAULT_BUILDING_HEIGHT_RIGHT = 3
 const DEFAULT_BUILDING_VARIANT_LEFT = 'narrow'

assets/scripts/palette/PaletteCommandsLeft.jsx

@@ -3,22 +3,22 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import CloseButton from '../ui/CloseButton'
-import { SUN_ICON, MOON_ICON } from '../ui/icons'
-import { setEnvironment } from '../store/actions/street'
+import { TOOLS_ICON } from '../ui/icons'
+import { toggleToolbox } from '../store/actions/ui'
 import './PaletteCommandsLeft.scss'
 
 class PaletteCommandsLeft extends Component {
   static propTypes = {
-    env: PropTypes.string,
-    setEnvironment: PropTypes.func.isRequired
+    enable: PropTypes.bool,
+    toggleToolbox: PropTypes.func
   }
 
   constructor (props) {
     super(props)
 
     let tooltipDismissed
     try {
-      tooltipDismissed = window.localStorage.getItem('supermoon-tooltip-dismissed')
+      tooltipDismissed = window.localStorage.getItem('new-palette-tooltip-dismissed')
     } catch (e) {
       console.log('Could not access localstorage')
     }
@@ -28,14 +28,9 @@ class PaletteCommandsLeft extends Component {
     }
   }
 
-  setToDay = () => {
+  handleClickTools = () => {
     this.dismissTooltip()
-    this.props.setEnvironment('day')
-  }
-
-  setToMoon = () => {
-    this.dismissTooltip()
-    this.props.setEnvironment('supermoon')
+    this.props.toggleToolbox()
   }
 
   dismissTooltip = () => {
@@ -44,41 +39,29 @@ class PaletteCommandsLeft extends Component {
     })
 
     try {
-      window.localStorage.setItem('supermoon-tooltip-dismissed', 'true')
+      window.localStorage.setItem('new-palette-tooltip-dismissed', 'true')
     } catch (e) {
       console.log('Could not access localstorage')
     }
   }
 
   render () {
-    let Button
-    if (this.props.env === 'supermoon') {
-      Button = (
-        <button
-          onClick={this.setToDay}
-          title={'Toggle supermoon'}
-        >
-          <FontAwesomeIcon icon={SUN_ICON} />
-        </button>
-      )
-    } else {
-      Button = (
-        <button
-          onClick={this.setToMoon}
-          title={'Toggle supermoon'}
-        >
-          <FontAwesomeIcon icon={MOON_ICON} />
-        </button>
+    if (!this.props.enable) return null
 
-      )
-    }
+    const Button = (
+      <button
+        onClick={this.handleClickTools}
+        title={'Toggle tools'}
+      >
+        <FontAwesomeIcon icon={TOOLS_ICON} />
+      </button>
+    )
 
-    let Tooltip = (this.state.tooltip) ? (
+    const Tooltip = (this.state.tooltip) ? (
       <div className="supermoon-tooltip">
         <CloseButton onClick={this.dismissTooltip} />
         <p>
-          <strong><a href="https://www.nationalgeographic.com/science/2019/01/how-to-watch-super-blood-wolf-moon-lunar-eclipse/" target="_blank" rel="noopener noreferrer">The “super blood wolf moon” lunar eclipse</a></strong> (external link) is visible in the Americas,
-          western Europe and in most of Africa from January 20-21, 2019. You can return to daytime sky with this button below.&lrm;
+          <strong>You’ve got some new tools!&lrm;</strong> Click on this button to activate some new abilities.&lrm;
         </p>
         <div className="palette-tooltip-pointer-container">
           <div className="palette-tooltip-pointer" />
@@ -96,11 +79,11 @@ class PaletteCommandsLeft extends Component {
 }
 
 const mapStateToProps = (state) => ({
-  env: state.street.environment
+  enable: state.flags.ENVIRONMENT_EDITOR.value
 })
 
 const mapDispatchToProps = {
-  setEnvironment
+  toggleToolbox
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(PaletteCommandsLeft)

assets/scripts/store/actions/index.js

@@ -131,6 +131,7 @@ export const SET_ACTIVE_SEGMENT = 'SET_ACTIVE_SEGMENT'
 export const UPDATE_DRAGGING_STATE = 'UPDATE_DRAGGING_STATE'
 export const CLEAR_DRAGGING_STATE = 'CLEAR_DRAGGING_STATE'
 export const SET_DRAGGING_TYPE = 'SET_DRAGGING_TYPE'
+export const TOGGLE_TOOLBOX = 'TOGGLE_TOOLBOX'
 
 /* undo */
 export const RESET_UNDO_STACK = 'RESET_UNDO_STACK'

assets/scripts/store/actions/ui.js

@@ -5,7 +5,8 @@ import {
   SET_ACTIVE_SEGMENT,
   UPDATE_DRAGGING_STATE,
   CLEAR_DRAGGING_STATE,
-  SET_DRAGGING_TYPE
+  SET_DRAGGING_TYPE,
+  TOGGLE_TOOLBOX
 } from './index'
 
 export function showStreetNameCanvas () {
@@ -56,3 +57,9 @@ export function setDraggingType (draggingType) {
     draggingType
   }
 }
+
+export function toggleToolbox () {
+  return {
+    type: TOGGLE_TOOLBOX
+  }
+}

assets/scripts/store/reducers/ui.js

@@ -5,12 +5,14 @@ import {
   SET_ACTIVE_SEGMENT,
   UPDATE_DRAGGING_STATE,
   CLEAR_DRAGGING_STATE,
-  SET_DRAGGING_TYPE
+  SET_DRAGGING_TYPE,
+  TOGGLE_TOOLBOX
 } from '../actions'
 import * as constants from '../../users/constants'
 
 const initialState = {
   streetNameCanvasVisible: true,
+  toolboxVisible: false,
   unitSettings: {
     resolution: constants.SEGMENT_WIDTH_RESOLUTION_METRIC,
     draggingResolution: constants.SEGMENT_WIDTH_DRAGGING_RESOLUTION_METRIC,
@@ -67,6 +69,11 @@ const ui = (state = initialState, action) => {
         ...state,
         draggingType: action.draggingType
       }
+    case TOGGLE_TOOLBOX:
+      return {
+        ...state,
+        toolboxVisible: !state.toolboxVisible
+      }
     default:
       return state
   }

assets/scripts/streets/EnvironmentEditor.jsx

@@ -10,13 +10,13 @@ import './EnvironmentEditor.scss'
 
 class EnvironmentEditor extends Component {
   static propTypes = {
-    enable: PropTypes.bool,
+    visible: PropTypes.bool,
     selected: PropTypes.string,
     setEnvironment: PropTypes.func.isRequired
   }
 
   static defaultProps = {
-    enable: false,
+    visible: false,
     selected: DEFAULT_ENVIRONS
   }
 
@@ -31,7 +31,7 @@ class EnvironmentEditor extends Component {
     return (
       <CSSTransition
         appear
-        in={this.props.enable}
+        in={this.props.visible}
         timeout={80}
         classNames="environment-editor-transition"
       >
@@ -71,7 +71,7 @@ class EnvironmentEditor extends Component {
 
 const mapStateToProps = (state) => ({
   selected: state.street.environment,
-  enable: state.flags.ENVIRONMENT_EDITOR.value
+  visible: state.ui.toolboxVisible
 })
 
 const mapDispatchToProps = {

assets/scripts/streets/EnvironmentEditor.scss

@@ -8,15 +8,20 @@
 .environment-editor-container {
   z-index: $z-06-environment-editor;
   position: absolute;
-  top: 60px;
-  left: 30px;
+  bottom: 90px;
+  left: 50px;
   background-color: white;
   border-radius: 6px;
   overflow: hidden;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
   font-size: 0.65rem;
   user-select: none;
 
+  [dir="rtl"] & {
+    left: auto;
+    right: 50px;
+  }
+
   /* Transitions - copied from Dialog! */
   transition: opacity 60ms ease-in-out;
   opacity: 0;

assets/scripts/streets/constants.js

@@ -1 +1 @@
-export const DEFAULT_ENVIRONS = 'supermoon'
+export const DEFAULT_ENVIRONS = 'day'

assets/scripts/streets/environs.js

@@ -54,6 +54,10 @@ function makeCSSBackgroundImageDeclaration (url) {
  */
 function makeReactStyleObject (env) {
   const style = {}
+
+  // If an error causes `env` to be undefined, return an empty object.
+  if (!env) return style
+
   if (env.backgroundColor) {
     style.backgroundColor = env.backgroundColor
   }

assets/scripts/ui/icons.js

@@ -12,17 +12,15 @@ import {
   faUndo,
   faRedo,
   faTrashAlt,
-  faSun,
-  faMoon
+  faTools
 } from '@fortawesome/free-solid-svg-icons'
 import { faTimesCircle } from '@fortawesome/free-regular-svg-icons'
 import { fab } from '@fortawesome/free-brands-svg-icons'
 
 // Alternative icon reference, which can be mocked and tested
 export const UNDO_ICON = faUndo
 export const REDO_ICON = faRedo
-export const SUN_ICON = faSun
-export const MOON_ICON = faMoon
+export const TOOLS_ICON = faTools
 
 // Load Font-Awesome icons
 export function initIcons () {