Anim last frame and a bunch more

assets/anim.scss

@@ -294,20 +294,33 @@ $spritesDir : '../../emotes/emoticons-animated/';
         $sprite-height,
         $animation-length,
         $repeat,
+        $end-on-last-frame: false,
         $file-ext: '.png') {
 
     $path: $spritesDir + $file-name + $file-ext;
+    $frame-width: $sprite-width / $frame-count;
+
+    @if $frame-width != round($frame-width) {
+        @error
+            "$sprite-width should be divisible by $frame-count to prevent blurry rendering
+            Error on sprite-animation \"#{$file-name}\"";
+    }
 
     @keyframes #{$file-name}-anim {
+        0% { background-position: 0; }
         100% { background-position: -#{$sprite-width}; }
     }
 
     .chat-emote-#{$file-name}{
-        width: $sprite-width / $frame-count;
+        width: $frame-width;
         height: $sprite-height;
         margin-top: -$sprite-height;
         background: url($path) left center;
-        animation: #{$file-name}-anim $animation-length steps($frame-count) $repeat;
+        animation: #{$file-name}-anim $animation-length steps($frame-count) $repeat none;
+
+        @if $end-on-last-frame {
+            background-position: #{$sprite-width / $frame-count};
+        };
 
         &:hover {
             animation: #{$file-name}-anim $animation-length steps($frame-count) infinite;
@@ -388,7 +401,8 @@ $spritesDir : '../../emotes/emoticons-animated/';
     $sprite-width: 272px,
     $sprite-height: 32px,
     $animation-length: 4000ms,
-    $repeat: 2
+    $repeat: 2,
+    $end-on-last-frame: true
 );
 
 @include sprite-animation(

assets/chat/css/style.scss

@@ -6,6 +6,16 @@
 @import "generify.scss";
 @import "spooky.css";
 
+::selection {
+    color: white;
+
+    /**
+    * Blink browsers force a transparency on selections, so an opacity value must
+    * be present to be consistent across browsers.
+    */
+    background: rgba($text-color-selected, 0.99);
+}
+
 *, *::before, *::after { box-sizing: inherit; }
 html { box-sizing: border-box; }
 
@@ -88,19 +98,20 @@ label small {
 #chat {
     border-radius: 0;
     min-width: $chat-min-width;
-    display: flex;
-    flex-direction: column;
+    display: grid;
+    grid-template-rows: [output] 1fr [input];
     position: relative;
     width: 100%;
     height: 100%;
     overflow: hidden;
 }
 #chat-output-frame {
-    flex: 1;
+    grid-row: output;
     overflow: hidden;
     width: 100%;
 }
 #chat-input-frame {
+    grid-row: input;
     background: $color-surface-dark2;
     box-shadow: 0px 0px 4px 1px rgba(black, 0.5);
     border-top: 1px solid #191919;
@@ -179,28 +190,46 @@ label small {
     vertical-align: text-bottom;
 }
 
-#chat-input-wrap,
-#chat-input-control {
+#chat-input-wrap {
     position: relative;
+    min-height: 3.7em;
+    max-height: 16em;
+}
+#chat-input-scaler, #chat-input-control {
+    /**
+     * `input-control` and `input-scaler` should have identical properties
+     * which affect scaling, so as containing the same content they result
+     * to the same size.
+     */
+    width: 100%;
+    word-break: break-all;
+    box-sizing: border-box;
+    padding: 5px;
+    border: 1px solid #321a10;
 }
 #chat-input-control {
-    height: 52px;
+    /**
+     * Any styling affecting sizing should go in the
+     * `#chat-input-scaler, #chat-input-control` rule above.
+     */
+    position: absolute;
+    top: 0;
+    height: 100%;
     color: $color-chat-text2;
     background: $color-surface-dark1;
-    border: 1px solid #321a10;
     outline: none;
     resize: none;
     margin: 0;
-    padding: 5px;
-    width: 100%;
     border-radius: 3px;
     box-shadow: -1px 1px 2px rgba( black, 0.7 ) inset;
-    box-sizing: border-box;
     display: block;
 }
 #chat-input-control::placeholder {
     color: $color-chat-place;
 }
+#chat-input-scaler {
+    opacity: 0;
+}
 
 .chat-output {
     width: 100%;
@@ -283,6 +312,9 @@ label small {
         border-style: solid;
         border-color: transparent;
         border-width: 1px 0 1px 0;
+
+        // padding to improve clickability
+        padding: 3px 0;
     }
     .externallink {
         color: $color-link;
@@ -859,9 +891,10 @@ a.flair12:hover {
     &::after {
         content: '';
         display: block;
-        height: 7px;
+        height: 8px;
         position: absolute;
         width: 100%;
+        margin-top: -1px;
     }
 }
 .chat-scroll-notify:hover {
@@ -938,11 +971,12 @@ a.flair12:hover {
 
 /* Chat menus */
 .chat-menu {
+    grid-row: output;
     position: absolute;
     z-index: 220;
     height: auto;
     width: 100%;
-    bottom: $menu-bottom-max;
+    bottom: 0;
     max-width: $menu-width-max;
     right: 0;
     top: 0;
@@ -1274,6 +1308,7 @@ a.flair12:hover {
     left:0;
     right:0;
     bottom:0;
+    z-index: 230;
     h2 {
         font-size: 28px;
         font-weight: normal;
@@ -1398,9 +1433,9 @@ button.btn {
     border-radius: 4px;
 }
 .btn-primary {
-    color: $text-color;
-    background-color: $color-accent;
-    border-color: $color-accent;
+    color: white;
+    background-color: $color-btn-confirm;
+    border-color: $color-btn-confirm;
 }
 .btn-default {
     color: $text-color3;

assets/chat/js/autocomplete.js

@@ -301,7 +301,7 @@ class ChatAutoComplete {
         if (post[0] !== ' ' || post.length === 0) {
             post = ' ' + post;
         }
-        this.input.focus().val(pre + result.data + post);
+        this.input.focus().val(pre + result.data + post).trigger('input');
 
         // Move the caret to the end of the replacement string + 1 for the space
         const s = pre.length + result.data.length + 1;

assets/chat/js/chat.js

@@ -309,12 +309,23 @@ class Chat {
                     this.loginscrn.show();
                 } else {
                     this.control.emit('SEND', this.input.val().toString().trim());
-                    this.input.val('');
+                    this.input.val('').trigger('input');
                 }
                 this.input.focus();
             }
         });
 
+        /**
+         * Syncing the text content of the scaler with the input, so that
+         * the scaler grows the containing element to the exact size to
+         * contain the text entered.
+         */
+        const inputScaler = this.ui.find('#chat-input-scaler');
+
+        this.input.on('input keydown', () => {
+            inputScaler.text(this.input.val());
+        });
+
         // Chat focus / menu close when clicking on some areas
         let downinoutput = false;
         this.output.on('mousedown', () => { downinoutput = true; });

assets/chat/js/focus.ts

@@ -15,7 +15,11 @@ class ChatUserFocus {
         this.chat = chat;
         this.css = css;
         this.focused = [];
-        this.chat.output.on('mousedown', e => this.toggleElement(e.target));
+        this.chat.output.on('mousedown', e => {
+            if(e.button === 0) {
+                this.toggleElement(e.target);
+            }
+        });
     }
 
     toggleElement<TElement = HTMLElement>(target: TElement) {

assets/chat/js/menus.js

@@ -356,7 +356,10 @@ class ChatEmoteMenu extends ChatMenu {
 
     selectEmote(emote){
         let value = this.chat.input.val().toString().trim();
-        this.chat.input.val(value + (value === '' ? '':' ') + emote + ' ').focus();
+        this.chat.input
+            .val(value + (value === '' ? '':' ') + emote + ' ')
+            .focus()
+            .trigger('input');
     }
 
 }

assets/common.scss

@@ -3,11 +3,14 @@ $color-dark:            #201F1E;
 $color-accent:          #4A8ECC;
 $color-accent-light:    #4FB1F4;
 $color-accent-alt:      #A66BE5;
+$color-accent-alt:      #A66BE5;
+$color-btn-confirm:     #E1670E;
 $text-color:            #DEDEDE;
 $text-color1:           #999999;
 $text-color2:           #666666;
 $text-color3:           #333333;
 $text-color-disabled:   #494949;
+$text-color-selected:   #c65f00;
 
 $color-surface-light1:  #FFFFFF;
 $color-surface-light2:  #666666;

assets/index.html

@@ -19,6 +19,7 @@
 
         <div id="chat-input-frame">
             <div id="chat-input-wrap">
+                <div id="chat-input-scaler"></div>
                 <textarea id="chat-input-control" placeholder="Getting things ready ..." autocomplete="off" tabindex="1" autofocus spellcheck></textarea>
             </div>
             <div id="chat-tools-wrap">