Set glitchy elephant friend variant in initial state. #294.

Also lay some groundwork needed to interactively change the
glitchfriend.

The codebase uses "elefriend" because it's shorter and didn't require me
to realign the actions in actions/compose.js.  Same idea, though.

app/javascript/flavours/glitch/actions/compose.js

@@ -12,6 +12,7 @@ import {
 } from './timelines';
 
 export const COMPOSE_CHANGE          = 'COMPOSE_CHANGE';
+export const COMPOSE_CYCLE_ELEFRIEND = 'COMPOSE_CYCLE_ELEFRIEND';
 export const COMPOSE_SUBMIT_REQUEST  = 'COMPOSE_SUBMIT_REQUEST';
 export const COMPOSE_SUBMIT_SUCCESS  = 'COMPOSE_SUBMIT_SUCCESS';
 export const COMPOSE_SUBMIT_FAIL     = 'COMPOSE_SUBMIT_FAIL';
@@ -54,6 +55,12 @@ export function changeCompose(text) {
   };
 };
 
+export function cycleElefriendCompose() {
+  return {
+    type: COMPOSE_CYCLE_ELEFRIEND,
+  };
+};
+
 export function replyCompose(status, router) {
   return (dispatch, getState) => {
     dispatch({

app/javascript/flavours/glitch/features/drawer/index.js

@@ -28,6 +28,7 @@ import { wrap } from 'flavours/glitch/util/redux_helpers';
 const mapStateToProps = state => ({
   account: state.getIn(['accounts', me]),
   columns: state.getIn(['settings', 'columns']),
+  elefriend: state.getIn(['compose', 'elefriend']),
   results: state.getIn(['search', 'results']),
   searchHidden: state.getIn(['search', 'hidden']),
   searchValue: state.getIn(['search', 'value']),
@@ -56,6 +57,7 @@ class Drawer extends React.Component {
     const {
       account,
       columns,
+      elefriend,
       intl,
       multiColumn,
       onChange,
@@ -69,10 +71,8 @@ class Drawer extends React.Component {
       submitted,
     } = this.props;
 
-    let choices = ['mbstobon-bg-1', 'mbstobon-bg-2', 'mbstobon-bg-3'];
-    let glitchyFriendDecision = choices[Math.floor(Math.random() * choices.length)];
-    let drawerAttrs = {
-      className: classNames('contents', glitchyFriendDecision)
+    let elefriendAttrs = {
+      className: classNames('mastodon', 'mbstobon-' + elefriend),
     };
 
     //  The result.
@@ -98,7 +98,7 @@ class Drawer extends React.Component {
           <DrawerAccount account={account} />
           <div className='drawer__inner'>
             <Composer />
-            {multiColumn && <div className="mastodon mbstobon-bg-1" />}
+            {multiColumn && <div {...elefriendAttrs} />}
           </div>
           <DrawerResults
             results={results}
@@ -120,6 +120,7 @@ Drawer.propTypes = {
   account: ImmutablePropTypes.map,
   columns: ImmutablePropTypes.list,
   results: ImmutablePropTypes.map,
+  elefriend: PropTypes.number,
   searchHidden: PropTypes.bool,
   searchValue: PropTypes.string,
   submitted: PropTypes.bool,

app/javascript/flavours/glitch/reducers/compose.js

@@ -2,6 +2,7 @@ import {
   COMPOSE_MOUNT,
   COMPOSE_UNMOUNT,
   COMPOSE_CHANGE,
+  COMPOSE_CYCLE_ELEFRIEND,
   COMPOSE_REPLY,
   COMPOSE_REPLY_CANCEL,
   COMPOSE_MENTION,
@@ -35,6 +36,8 @@ import uuid from 'flavours/glitch/util/uuid';
 import { me } from 'flavours/glitch/util/initial_state';
 import { overwrite } from 'flavours/glitch/util/js_helpers';
 
+const totalElefriends = 3;
+
 const initialState = ImmutableMap({
   mounted: false,
   advanced_options: ImmutableMap({
@@ -42,6 +45,7 @@ const initialState = ImmutableMap({
     threaded_mode: false,
   }),
   sensitive: false,
+  elefriend: Math.floor(Math.random() * totalElefriends),
   spoiler: false,
   spoiler_text: '',
   privacy: null,
@@ -259,6 +263,9 @@ export default function compose(state = initialState, action) {
     return state
       .set('text', action.text)
       .set('idempotencyKey', uuid());
+  case COMPOSE_CYCLE_ELEFRIEND:
+    return state
+      .set('elefriend', (state.get('elefriend') + 1) % totalElefriends);
   case COMPOSE_REPLY:
     return state.withMutations(map => {
       map.set('in_reply_to', action.status.get('id'));

app/javascript/flavours/glitch/styles/components/drawer.scss

@@ -66,8 +66,8 @@
     .mastodon {
       flex: 1;
 
-      @for $i from 1 through 3 {
-        &.mbstobon-bg-#{$i} {
+      @for $i from 0 through 2 {
+        &.mbstobon-#{$i} {
           background: url("~flavours/glitch/images/mbstobon-ui-#{$i}.png") no-repeat left bottom / contain;
         }
       }