Reimplement glitchy elephant friend

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

@@ -21,7 +21,6 @@ let fetchComposeSuggestionsAccountsController;
 let fetchComposeSuggestionsTagsController;
 
 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';
@@ -117,12 +116,6 @@ export function changeCompose(text) {
   };
 }
 
-export function cycleElefriendCompose() {
-  return {
-    type: COMPOSE_CYCLE_ELEFRIEND,
-  };
-}
-
 export function replyCompose(status, routerHistory) {
   return (dispatch, getState) => {
     const prependCWRe = getState().getIn(['local_settings', 'prepend_cw_re']);

app/javascript/flavours/glitch/features/compose/index.jsx

@@ -21,6 +21,9 @@ import PublicIcon from '@/material-icons/400-24px/public.svg?react';
 import { openModal } from 'flavours/glitch/actions/modal';
 import Column from 'flavours/glitch/components/column';
 import { Icon }  from 'flavours/glitch/components/icon';
+import glitchedElephant1 from 'flavours/glitch/images/mbstobon-ui-0.png';
+import glitchedElephant2 from 'flavours/glitch/images/mbstobon-ui-1.png';
+import glitchedElephant3 from 'flavours/glitch/images/mbstobon-ui-2.png';
 import { logOut } from 'flavours/glitch/utils/log_out';
 
 import elephantUIPlane from '../../../../images/elephant_ui_plane.svg';
@@ -51,6 +54,11 @@ const mapStateToProps = (state, ownProps) => ({
   showSearch: ownProps.multiColumn ? state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']) : false,
 });
 
+// ~4% chance you'll end up with an unexpected friend
+// glitch-soc/mastodon repo created_at date: 2017-04-20T21:55:28Z
+const glitchProbability = 1 - 0.0420215528;
+const totalElefriends = 3;
+
 class Compose extends PureComponent {
 
   static propTypes = {
@@ -61,6 +69,10 @@ class Compose extends PureComponent {
     intl: PropTypes.object.isRequired,
   };
 
+  state = {
+    elefriend: Math.random() < glitchProbability ? Math.floor(Math.random() * totalElefriends) : totalElefriends,
+  };
+
   componentDidMount () {
     const { dispatch } = this.props;
     dispatch(mountCompose());
@@ -107,9 +119,15 @@ class Compose extends PureComponent {
     this.props.dispatch(changeComposing(false));
   };
 
+  cycleElefriend = () => {
+    this.setState((state) => ({ elefriend: (state.elefriend + 1) % totalElefriends }));
+  };
+
   render () {
     const { multiColumn, showSearch, intl } = this.props;
 
+    const elefriend = [glitchedElephant1, glitchedElephant2, glitchedElephant3, elephantUIPlane][this.state.elefriend];
+
     if (multiColumn) {
       const { columns } = this.props;
 
@@ -147,8 +165,9 @@ class Compose extends PureComponent {
             <div className='drawer__inner' onFocus={this.onFocus}>
               <ComposeFormContainer autoFocus={!isMobile(window.innerWidth)} />
 
-              <div className='drawer__inner__mastodon'>
-                <img alt='' draggable='false' src={mascot || elephantUIPlane} />
+              {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- this is not a feature but a visual easter egg */}
+              <div className='drawer__inner__mastodon' onClick={this.cycleElefriend}>
+                <img alt='' draggable='false' src={mascot || elefriend} />
               </div>
             </div>
 

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

@@ -4,7 +4,6 @@ import {
   COMPOSE_MOUNT,
   COMPOSE_UNMOUNT,
   COMPOSE_CHANGE,
-  COMPOSE_CYCLE_ELEFRIEND,
   COMPOSE_REPLY,
   COMPOSE_REPLY_CANCEL,
   COMPOSE_DIRECT,
@@ -62,12 +61,6 @@ import { overwrite } from '../utils/js_helpers';
 import { privacyPreference } from '../utils/privacy_preference';
 import { uuid } from '../uuid';
 
-const totalElefriends = 3;
-
-// ~4% chance you'll end up with an unexpected friend
-// glitch-soc/mastodon repo created_at date: 2017-04-20T21:55:28Z
-const glitchProbability = 1 - 0.0420215528;
-
 const initialState = ImmutableMap({
   mounted: 0,
   advanced_options: ImmutableMap({
@@ -75,7 +68,6 @@ const initialState = ImmutableMap({
     threaded_mode: false,
   }),
   sensitive: false,
-  elefriend: Math.random() < glitchProbability ? Math.floor(Math.random() * totalElefriends) : totalElefriends,
   spoiler: false,
   spoiler_text: '',
   privacy: null,
@@ -425,9 +417,6 @@ export default function compose(state = initialState, action) {
       .set('idempotencyKey', uuid());
   case COMPOSE_COMPOSING_CHANGE:
     return state.set('is_composing', action.value);
-  case COMPOSE_CYCLE_ELEFRIEND:
-    return state
-      .set('elefriend', (state.get('elefriend') + 1) % totalElefriends);
   case COMPOSE_REPLY:
     return state.withMutations(map => {
       map.set('id', null);

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

@@ -3430,14 +3430,6 @@ $ui-header-height: 55px;
     user-select: none;
   }
 
-  > .mastodon {
-    display: block;
-    width: 100%;
-    height: 100%;
-    border: 0;
-    cursor: inherit;
-  }
-
   @media screen and (height >= 640px) {
     display: block;
   }
@@ -3460,40 +3452,6 @@ $ui-header-height: 55px;
   }
 }
 
-@for $i from 0 through 3 {
-  .mbstobon-#{$i} .drawer__inner__mastodon {
-    @if $i == 3 {
-      background:
-        url('~flavours/glitch/images/wave-drawer.png')
-          no-repeat
-          bottom /
-          100%
-          auto,
-        $ui-base-color;
-    } @else {
-      background:
-        url('~flavours/glitch/images/wave-drawer-glitched.png')
-          no-repeat
-          bottom /
-          100%
-          auto,
-        $ui-base-color;
-    }
-
-    & > .mastodon {
-      background: url('~flavours/glitch/images/mbstobon-ui-#{$i}.png')
-        no-repeat
-        left
-        bottom /
-        contain;
-
-      @if $i != 3 {
-        filter: contrast(50%) brightness(50%);
-      }
-    }
-  }
-}
-
 .scrollable {
   overflow-y: scroll;
   overflow-x: hidden;