Fix emote overlay not being centered in some cases

src/emotes/graphics_protocol.rs

@@ -320,7 +320,7 @@ pub struct Chain {
     parent_id: u32,
     parent_placement_id: u32,
     z: u32,
-    col_offset: i16,
+    col_offset: i32,
     pixel_offset: u16,
 }
 
@@ -330,7 +330,7 @@ impl Chain {
         pid: u32,
         (parent_id, parent_placement_id): (u32, u32),
         z: u32,
-        col_offset: i16,
+        col_offset: i32,
         pixel_offset: u16,
     ) -> Self {
         Self {

src/emotes/mod.rs

@@ -11,7 +11,7 @@ use crate::{
     },
     handlers::config::{CompleteConfig, FrontendConfig},
     twitch::TwitchAction,
-    utils::pathing::cache_path,
+    utils::{emotes::get_emote_offset, pathing::cache_path},
 };
 use color_eyre::Result;
 use tokio::sync::{broadcast::Receiver, mpsc::Sender};
@@ -142,18 +142,24 @@ pub fn display_emote(id: u32, pid: u32, cols: u16) -> Result<()> {
 
 pub fn overlay_emote(
     parent: (u32, u32),
-    emote: &EmoteData,
+    emote: EmoteData,
     layer: u32,
-    root_width: u32,
-    cell_width: f32,
+    cols: u16,
+    root_col_offset: u16,
+    cell_width: u16,
 ) -> Result<()> {
-    // Center the overlay on top of the emote
-    let pixel_offset = (root_width as f32 - emote.width as f32) / 2.0;
-    let (col_offset, pixel_offset) = (
-        (pixel_offset / cell_width) as i16,
-        pixel_offset.rem_euclid(cell_width) as u16,
-    );
-
-    graphics_protocol::Chain::new(emote.id, emote.pid, parent, layer, col_offset, pixel_offset)
-        .apply()
+    // Center the overlay on top of the root emote.
+    let (pixel_offset, col_offset) = get_emote_offset(emote.width as u16, cell_width, cols);
+
+    let relative_col_offset = i32::from(root_col_offset) - i32::from(col_offset);
+
+    graphics_protocol::Chain::new(
+        emote.id,
+        emote.pid,
+        parent,
+        layer,
+        relative_col_offset,
+        pixel_offset,
+    )
+    .apply()
 }

src/handlers/data.rs

@@ -9,14 +9,13 @@ use tui::{
     text::{Line, Span},
 };
 
-use crate::emotes::{display_emote, overlay_emote, EmoteData};
-use crate::handlers::data::Word::{Emote, Text};
 use crate::{
-    emotes::{load_emote, Emotes},
+    emotes::{display_emote, load_emote, overlay_emote, EmoteData, Emotes},
     handlers::config::{FrontendConfig, Palette, Theme},
     ui::statics::NAME_MAX_CHARACTERS,
     utils::{
         colors::hsl_to_rgb,
+        emotes::get_emote_offset,
         styles::{
             DATETIME_DARK, DATETIME_LIGHT, HIGHLIGHT_NAME_DARK, HIGHLIGHT_NAME_LIGHT, SYSTEM_CHAT,
         },
@@ -335,13 +334,13 @@ impl MessageData {
                     Ok(loaded_emote) => {
                         if loaded_emote.overlay {
                             // Check if last word is emote.
-                            if let Some(Emote(v)) = words.last_mut() {
+                            if let Some(Word::Emote(v)) = words.last_mut() {
                                 v.push(loaded_emote.into());
                                 return;
                             }
                         }
 
-                        words.push(Emote(vec![loaded_emote.into()]));
+                        words.push(Word::Emote(vec![loaded_emote.into()]));
                         return;
                     }
                     Err(err) => {
@@ -350,30 +349,42 @@ impl MessageData {
                     }
                 }
             }
-            words.push(Text(word.to_string()));
+            words.push(Word::Text(word.to_string()));
         });
 
         let words = words
             .into_iter()
             .filter_map(|w| match w {
-                Text(s) => Some(s),
-                Emote(v) => {
-                    let max_width = v.iter().max_by_key(|e| e.width)?.width as f32;
-                    let cols = (max_width / emotes.cell_size.0).ceil() as u16;
+                Word::Text(s) => Some(s),
+                Word::Emote(v) => {
+                    let max_width = v.iter().max_by_key(|e| e.width)?.width;
+                    let cols = (max_width as f32 / emotes.cell_size.0).ceil() as u16;
 
                     let &EmoteData { id, pid, width } = v.first()?;
+
+                    let (_, col_offset) =
+                        get_emote_offset(width as u16, emotes.cell_size.0 as u16, cols);
+
                     if let Err(e) = display_emote(id, pid, cols) {
                         warn!("Unable to display emote: {e}");
                         return None;
                     }
 
-                    v.iter().enumerate().skip(1).for_each(|(layer, emote)| {
-                        if let Err(e) =
-                            overlay_emote((id, pid), emote, layer as u32, width, emotes.cell_size.0)
-                        {
-                            warn!("Unable to display overlay: {e}");
-                        }
-                    });
+                    v.into_iter()
+                        .enumerate()
+                        .skip(1)
+                        .for_each(|(layer, emote)| {
+                            if let Err(e) = overlay_emote(
+                                (id, pid),
+                                emote,
+                                layer as u32,
+                                cols,
+                                col_offset,
+                                emotes.cell_size.0 as u16,
+                            ) {
+                                warn!("Unable to display overlay: {e}");
+                            }
+                        });
 
                     let to_rgb = |i: u32| Rgb((i >> 16) as u8, (i >> 8) as u8, i as u8);
 

src/utils/emotes.rs

@@ -0,0 +1,102 @@
+pub const fn get_emote_offset(width: u16, cell_width: u16, cols: u16) -> (u16, u16) {
+    let w = (width + if cols % 2 == 0 { 0 } else { cell_width } + 1) / 2;
+
+    let (pxo, co) = (w % cell_width, w / cell_width);
+
+    let (pxo, co) = if pxo == 0 {
+        (0, co)
+    } else {
+        (cell_width - pxo, co + 1)
+    };
+
+    (pxo, co)
+}
+
+#[cfg(test)]
+mod tests {
+    use crate::utils::emotes::get_emote_offset;
+
+    #[test]
+    fn emote_offset_1_col() {
+        // 1 col, even cell width.
+        assert_eq!(get_emote_offset(2, 10, 1), (4, 1));
+        assert_eq!(get_emote_offset(8, 10, 1), (1, 1));
+        assert_eq!(get_emote_offset(9, 10, 1), (0, 1));
+        assert_eq!(get_emote_offset(10, 10, 1), (0, 1));
+
+        // 1 col, odd cell width.
+        assert_eq!(get_emote_offset(2, 13, 1), (5, 1));
+        assert_eq!(get_emote_offset(8, 13, 1), (2, 1));
+        assert_eq!(get_emote_offset(12, 13, 1), (0, 1));
+        assert_eq!(get_emote_offset(13, 13, 1), (0, 1));
+    }
+
+    #[test]
+    fn emote_offset_2_cols() {
+        // 2 cols, even cell width.
+        assert_eq!(get_emote_offset(2, 10, 2), (9, 1));
+        assert_eq!(get_emote_offset(8, 10, 2), (6, 1));
+        assert_eq!(get_emote_offset(9, 10, 2), (5, 1));
+        assert_eq!(get_emote_offset(10, 10, 2), (5, 1));
+        assert_eq!(get_emote_offset(11, 10, 2), (4, 1));
+        assert_eq!(get_emote_offset(12, 10, 2), (4, 1));
+        assert_eq!(get_emote_offset(20, 10, 2), (0, 1));
+
+        // 2 cols, odd cell width.
+        assert_eq!(get_emote_offset(2, 13, 2), (12, 1));
+        assert_eq!(get_emote_offset(8, 13, 2), (9, 1));
+        assert_eq!(get_emote_offset(12, 13, 2), (7, 1));
+        assert_eq!(get_emote_offset(13, 13, 2), (6, 1));
+        assert_eq!(get_emote_offset(14, 13, 2), (6, 1));
+        assert_eq!(get_emote_offset(26, 13, 2), (0, 1));
+    }
+
+    #[test]
+    fn emote_offset_3_cols() {
+        // 3 cols, even cell width.
+        assert_eq!(get_emote_offset(2, 10, 3), (4, 1));
+        assert_eq!(get_emote_offset(9, 10, 3), (0, 1));
+        assert_eq!(get_emote_offset(10, 10, 3), (0, 1));
+        assert_eq!(get_emote_offset(11, 10, 3), (9, 2));
+        assert_eq!(get_emote_offset(12, 10, 3), (9, 2));
+        assert_eq!(get_emote_offset(14, 10, 3), (8, 2));
+        assert_eq!(get_emote_offset(20, 10, 3), (5, 2));
+        assert_eq!(get_emote_offset(30, 10, 3), (0, 2));
+
+        // 3 cols, odd cell width.
+        assert_eq!(get_emote_offset(2, 13, 3), (5, 1));
+        assert_eq!(get_emote_offset(12, 13, 3), (0, 1));
+        assert_eq!(get_emote_offset(13, 13, 3), (0, 1));
+        assert_eq!(get_emote_offset(14, 13, 3), (12, 2));
+        assert_eq!(get_emote_offset(15, 13, 3), (12, 2));
+        assert_eq!(get_emote_offset(26, 13, 3), (6, 2));
+        assert_eq!(get_emote_offset(29, 13, 3), (5, 2));
+        assert_eq!(get_emote_offset(39, 13, 3), (0, 2));
+    }
+
+    #[test]
+    fn emote_offset_4_cols() {
+        // 4 cols, even cell width.
+        assert_eq!(get_emote_offset(2, 10, 4), (9, 1));
+        assert_eq!(get_emote_offset(8, 10, 4), (6, 1));
+        assert_eq!(get_emote_offset(9, 10, 4), (5, 1));
+        assert_eq!(get_emote_offset(10, 10, 4), (5, 1));
+        assert_eq!(get_emote_offset(11, 10, 4), (4, 1));
+        assert_eq!(get_emote_offset(12, 10, 4), (4, 1));
+        assert_eq!(get_emote_offset(20, 10, 4), (0, 1));
+        assert_eq!(get_emote_offset(25, 10, 4), (7, 2));
+        assert_eq!(get_emote_offset(30, 10, 4), (5, 2));
+        assert_eq!(get_emote_offset(40, 10, 4), (0, 2));
+
+        // 4 cols, odd cell width.
+        assert_eq!(get_emote_offset(2, 13, 4), (12, 1));
+        assert_eq!(get_emote_offset(8, 13, 4), (9, 1));
+        assert_eq!(get_emote_offset(12, 13, 4), (7, 1));
+        assert_eq!(get_emote_offset(13, 13, 4), (6, 1));
+        assert_eq!(get_emote_offset(14, 13, 4), (6, 1));
+        assert_eq!(get_emote_offset(26, 13, 4), (0, 1));
+        assert_eq!(get_emote_offset(31, 13, 4), (10, 2));
+        assert_eq!(get_emote_offset(34, 13, 4), (9, 2));
+        assert_eq!(get_emote_offset(52, 13, 4), (0, 2));
+    }
+}

src/utils/mod.rs

@@ -1,4 +1,5 @@
 pub mod colors;
+pub mod emotes;
 pub mod pathing;
 pub mod styles;
 pub mod text;