Introduce a bit of luck into the elefriend selection. #294.

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

@@ -74,9 +74,8 @@ class Drawer extends React.Component {
       submitted,
     } = this.props;
 
-    let elefriendAttrs = {
+    let innerDrawerAttrs = {
-      className: classNames('mastodon', 'mbstobon-' + elefriend),
+      className: classNames('drawer--inner', 'mbstobon-' + elefriend),
-      onClick: onClickElefriend,
     };
 
     //  The result.
@@ -100,9 +99,9 @@ class Drawer extends React.Component {
         />
         <div className='contents'>
           <DrawerAccount account={account} />
-          <div className='drawer__inner'>
+          <div {...innerDrawerAttrs}>
             <Composer />
-            {multiColumn && <div {...elefriendAttrs} />}
+            {multiColumn && <div className='mastodon' onClick={onClickElefriend} role='button' />}
           </div>
           <DrawerResults
             results={results}

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

@@ -38,6 +38,10 @@ import { overwrite } from 'flavours/glitch/util/js_helpers';
 
 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: false,
   advanced_options: ImmutableMap({
@@ -45,7 +49,7 @@ const initialState = ImmutableMap({
     threaded_mode: false,
   }),
   sensitive: false,
-  elefriend: Math.floor(Math.random() * totalElefriends),
+  elefriend: Math.random() < glitchProbability ? Math.floor(Math.random() * totalElefriends) : totalElefriends,
   spoiler: false,
   spoiler_text: '',
   privacy: null,

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

@@ -50,9 +50,8 @@
     contain: strict;
   }
 
-  .drawer__inner {
+  .drawer--inner {
     position: absolute;
-    background: lighten($ui-base-color, 13%) url('~flavours/glitch/images/wave-drawer.png') no-repeat bottom / 100% auto;
     top: 0;
     left: 0;
     box-sizing: border-box;
@@ -66,11 +65,22 @@
 
     .mastodon {
       flex: 1;
+    }
+  }
 
-      @for $i from 0 through 2 {
+  @for $i from 0 through 3 {
-        &.mbstobon-#{$i} {
+    .drawer--inner.mbstobon-#{$i} {
-          background: url("~flavours/glitch/images/mbstobon-ui-#{$i}.png") no-repeat left bottom / contain;
+      @if $i == 3 {
-          filter: saturate(80%) contrast(50%) brightness(50%);
+        background: lighten($ui-base-color, 13%) url('~flavours/glitch/images/wave-drawer.png') no-repeat bottom / 100% auto;
+      } @else {
+        background: lighten($ui-base-color, 13%) url('~flavours/glitch/images/wave-drawer-glitched.png') no-repeat bottom / 100% auto;
+      }
+
+      .mastodon {
+        background: url("~flavours/glitch/images/mbstobon-ui-#{$i}.png") no-repeat left bottom / contain;
+
+        @if $i != 3 {
+          filter: contrast(50%) brightness(50%);
         }
       }
     }