From daebec4920fd3eb1633060bd23f6c22f8a31a3c9 Mon Sep 17 00:00:00 2001
From: JoannesJ <JoannesJ@protonmail.com>
Date: Fri, 8 Feb 2019 00:16:09 +0100
Subject: [PATCH 1/9] Add parameter `end-on-last-frame` to the
 `sprite-animation` scss mixin

---
 assets/anim.scss | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/assets/anim.scss b/assets/anim.scss
index 6eef588b..0a061816 100644
--- a/assets/anim.scss
+++ b/assets/anim.scss
@@ -294,11 +294,13 @@ $spritesDir : '../../emotes/emoticons-animated/';
         $sprite-height,
         $animation-length,
         $repeat,
+        $end-on-last-frame: false,
         $file-ext: '.png') {
 
     $path: $spritesDir + $file-name + $file-ext;
 
     @keyframes #{$file-name}-anim {
+        0% { background-position: 0; }
         100% { background-position: -#{$sprite-width}; }
     }
 
@@ -307,7 +309,11 @@ $spritesDir : '../../emotes/emoticons-animated/';
         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;

From daea3d1109d6df71b9e054a292d74b4a24a5f24c Mon Sep 17 00:00:00 2001
From: JoannesJ <JoannesJ@protonmail.com>
Date: Fri, 8 Feb 2019 00:20:52 +0100
Subject: [PATCH 2/9] Configure `LAG` emote with `end-on-last-frame`

---
 assets/anim.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/assets/anim.scss b/assets/anim.scss
index 0a061816..b7740af5 100644
--- a/assets/anim.scss
+++ b/assets/anim.scss
@@ -394,7 +394,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(

From 04bf50f534fcc0e86e5cf73f42b0878b732c1cae Mon Sep 17 00:00:00 2001
From: JoannesJ <JoannesJ@protonmail.com>
Date: Fri, 8 Feb 2019 00:59:19 +0100
Subject: [PATCH 3/9] Improve clickablity of links in messages

My greatest contribution yet
---
 assets/chat/css/style.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/assets/chat/css/style.scss b/assets/chat/css/style.scss
index 94a935c1..8eabb862 100644
--- a/assets/chat/css/style.scss
+++ b/assets/chat/css/style.scss
@@ -283,6 +283,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;

From 9629fb11f7918236d6452f1aaf15709eb81b5644 Mon Sep 17 00:00:00 2001
From: JoannesJ <JoannesJ@protonmail.com>
Date: Fri, 8 Feb 2019 01:45:49 +0100
Subject: [PATCH 4/9] Fix 1 pixel gap on the "More messages below" button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

There was a tiny non-clickable gap on the "More messages below" button.
It's only present in the live embedded chat in Firefox though ¯\_(ツ)_/¯
---
 assets/chat/css/style.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/assets/chat/css/style.scss b/assets/chat/css/style.scss
index 8eabb862..bdfc088e 100644
--- a/assets/chat/css/style.scss
+++ b/assets/chat/css/style.scss
@@ -862,9 +862,10 @@ a.flair12:hover {
     &::after {
         content: '';
         display: block;
-        height: 7px;
+        height: 8px;
         position: absolute;
         width: 100%;
+        margin-top: -1px;
     }
 }
 .chat-scroll-notify:hover {

From d4258ebb2fdd59dc328f76aa3160af5f8c2d3d2b Mon Sep 17 00:00:00 2001
From: JoannesJ <JoannesJ@protonmail.com>
Date: Fri, 8 Feb 2019 02:21:36 +0100
Subject: [PATCH 5/9] Change native selection color

---
 assets/chat/css/style.scss | 10 ++++++++++
 assets/common.scss         |  1 +
 2 files changed, 11 insertions(+)

diff --git a/assets/chat/css/style.scss b/assets/chat/css/style.scss
index bdfc088e..b7b4ca06 100644
--- a/assets/chat/css/style.scss
+++ b/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; }
 
diff --git a/assets/common.scss b/assets/common.scss
index e71516b4..ecd7a974 100644
--- a/assets/common.scss
+++ b/assets/common.scss
@@ -8,6 +8,7 @@ $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;

From a2091807d7bf11d90f8d04916dd4791942be7ea6 Mon Sep 17 00:00:00 2001
From: JoannesJ <JoannesJ@protonmail.com>
Date: Fri, 8 Feb 2019 16:02:46 +0100
Subject: [PATCH 6/9] Make user focus trigger exclusively to left clicks

---
 assets/chat/js/focus.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/assets/chat/js/focus.ts b/assets/chat/js/focus.ts
index 8318f033..17e55f0b 100644
--- a/assets/chat/js/focus.ts
+++ b/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) {

From 4f8b895e23bdf3633f48e615187ce84ce45d394c Mon Sep 17 00:00:00 2001
From: JoannesJ <JoannesJ@protonmail.com>
Date: Fri, 8 Feb 2019 18:21:29 +0100
Subject: [PATCH 7/9] Make chat input scale with its text content

---
 assets/chat/css/style.scss     | 42 +++++++++++++++++++++++++---------
 assets/chat/js/autocomplete.js |  2 +-
 assets/chat/js/chat.js         | 13 ++++++++++-
 assets/chat/js/menus.js        |  5 +++-
 assets/index.html              |  1 +
 5 files changed, 49 insertions(+), 14 deletions(-)

diff --git a/assets/chat/css/style.scss b/assets/chat/css/style.scss
index b7b4ca06..eb421279 100644
--- a/assets/chat/css/style.scss
+++ b/assets/chat/css/style.scss
@@ -98,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;
@@ -189,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%;
@@ -952,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;
diff --git a/assets/chat/js/autocomplete.js b/assets/chat/js/autocomplete.js
index f54e72d9..614c7f21 100644
--- a/assets/chat/js/autocomplete.js
+++ b/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;
diff --git a/assets/chat/js/chat.js b/assets/chat/js/chat.js
index 4ff097be..018094bf 100644
--- a/assets/chat/js/chat.js
+++ b/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; });
diff --git a/assets/chat/js/menus.js b/assets/chat/js/menus.js
index de3214d0..5e767532 100644
--- a/assets/chat/js/menus.js
+++ b/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');
     }
 
 }
diff --git a/assets/index.html b/assets/index.html
index 188180f3..eb3f7ad4 100644
--- a/assets/index.html
+++ b/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">

From 39ff63ee25f5450c9b54debb2aadf01d99fa531c Mon Sep 17 00:00:00 2001
From: JoannesJ <JoannesJ@protonmail.com>
Date: Fri, 8 Feb 2019 18:25:32 +0100
Subject: [PATCH 8/9] Fix z-index on login screen and update login-button color

---
 assets/chat/css/style.scss | 7 ++++---
 assets/common.scss         | 2 ++
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/assets/chat/css/style.scss b/assets/chat/css/style.scss
index eb421279..b7488934 100644
--- a/assets/chat/css/style.scss
+++ b/assets/chat/css/style.scss
@@ -1308,6 +1308,7 @@ a.flair12:hover {
     left:0;
     right:0;
     bottom:0;
+    z-index: 230;
     h2 {
         font-size: 28px;
         font-weight: normal;
@@ -1432,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;
diff --git a/assets/common.scss b/assets/common.scss
index ecd7a974..a037bdc8 100644
--- a/assets/common.scss
+++ b/assets/common.scss
@@ -3,6 +3,8 @@ $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;

From 892707560d00f8c6af134ef3577f5b61e0c5b034 Mon Sep 17 00:00:00 2001
From: JoannesJ <JoannesJ@protonmail.com>
Date: Mon, 11 Feb 2019 18:41:29 +0100
Subject: [PATCH 9/9] Add error to prevent blurry sprite animations

---
 assets/anim.scss | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/assets/anim.scss b/assets/anim.scss
index b7740af5..098e623b 100644
--- a/assets/anim.scss
+++ b/assets/anim.scss
@@ -298,6 +298,13 @@ $spritesDir : '../../emotes/emoticons-animated/';
         $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; }
@@ -305,7 +312,7 @@ $spritesDir : '../../emotes/emoticons-animated/';
     }
 
     .chat-emote-#{$file-name}{
-        width: $sprite-width / $frame-count;
+        width: $frame-width;
         height: $sprite-height;
         margin-top: -$sprite-height;
         background: url($path) left center;