diff --git a/files/assets/css/main.css b/files/assets/css/main.css index 473dc04b7..d5bb7f4b1 100644 --- a/files/assets/css/main.css +++ b/files/assets/css/main.css @@ -5451,7 +5451,42 @@ video { .text-removed { color: #ffabab !important; } -.mirrored, img[alt^=":"][alt*="!"], span[alt^=":"][alt*="!"] { +.mirrored { + transform: scaleX(-1); + -webkit-transform: scaleX(-1); +} + +span[alt^=":"][alt*="!"] { + transform: scaleX(-1); + -webkit-transform: scaleX(-1); +} + +span[alt^=":"][alt*="!!"] { + transform: scaleX(1); + -webkit-transform: scaleX(1); +} + +span[alt^=":"][alt*="!!"][alt*="pat"] { + transform: scaleX(-1); + -webkit-transform: scaleX(-1); +} + +img[alt^=":"][alt*="!!"] { + transform: scaleX(-1); + -webkit-transform: scaleX(-1); +} + +img[alt^=":"][alt*="!"] { + transform: scaleX(-1); + -webkit-transform: scaleX(-1); +} + +span[alt^=":"][alt*="!"] > img[alt^=":"][alt*="!"] { + transform: scaleX(1); + -webkit-transform: scaleX(1); +} + +span[alt^=":"][alt*="!!"] > img[alt^=":"][alt*="!"] { transform: scaleX(-1); -webkit-transform: scaleX(-1); } @@ -5543,6 +5578,9 @@ img[src$="/i/hand.webp"]+img[src$="/i/talking.webp"]+img { img[src$="/i/talking.webp"]+img { margin-top: 22%; } +img[src$="/i/talking.webp"]+img[src$="/i/hand.webp"] { + margin-top: 5%; +} img[src$="/i/talking.webp"]+img[src$="/i/hand.webp"]+img { margin-top: 20%; } diff --git a/files/assets/js/markdown.js b/files/assets/js/markdown.js index c98eab4e0..8bb783637 100644 --- a/files/assets/js/markdown.js +++ b/files/assets/js/markdown.js @@ -71,7 +71,8 @@ const MODIFIERS = { TALKING: 2, LARGE: 3, REVERSED: 4, - USER: 5 + USER: 5, + REVERSED_MODIFIER: 6, }; function markdown(t) { @@ -107,21 +108,9 @@ function markdown(t) { let emoji = old.replace(/[:]/g,'').toLowerCase(); const modifiers = new Set(); - const isTalkingFirst = !(emoji.endsWith('pat') && emoji.slice(0, -3).endsWith('talking')); - if(emoji.endsWith('talking') || (emoji.endsWith('pat') && emoji.slice(0, -3).endsWith('talking'))) { - modifiers.add(MODIFIERS.TALKING); - emoji = emoji.endsWith('pat') ? [emoji.slice(0, -10), emoji.slice(-3)].join('') : emoji.slice(0, -7); - } - if(emoji.endsWith('pat')) { - modifiers.add(MODIFIERS.PAT); - emoji = emoji.slice(0, -3); - } + let length = emoji.length - emoji = emoji.startsWith('@', '') ? emoji.slice(1): emoji; - if(length !== emoji.length) { - modifiers.add(MODIFIERS.USER); - length = emoji.length - } + if(emoji.includes('!!')) modifiers.add(MODIFIERS.REVERSED_MODIFIER); emoji = emoji.replaceAll('!', ''); if(length !== emoji.length) { modifiers.add(MODIFIERS.REVERSED); @@ -131,6 +120,21 @@ function markdown(t) { if(length !== emoji.length) { modifiers.add(MODIFIERS.LARGE); } + const isTalkingFirst = !(emoji.endsWith('pat') && emoji.slice(0, -3).endsWith('talking')); + if(emoji.endsWith('talking') || (emoji.endsWith('pat') && emoji.slice(0, -3).endsWith('talking'))) { + modifiers.add(MODIFIERS.TALKING); + emoji = emoji.endsWith('pat') ? [emoji.slice(0, -10), emoji.slice(-3)].join('') : emoji.slice(0, -7); + } + if(emoji.endsWith('pat')) { + modifiers.add(MODIFIERS.PAT); + emoji = emoji.slice(0, -3); + } + + if(emoji.startsWith('@')) { + emoji = emoji.slice(1); + modifiers.add(MODIFIERS.USER); + } + if(emoji === 'marseyunpettable') { modifiers.delete(MODIFIERS.PAT); @@ -139,17 +143,21 @@ function markdown(t) { } } - const mirroredClass = modifiers.has(MODIFIERS.REVERSED) ? 'mirrored' : ''; + const mirroredClass = 'mirrored'; const emojiClass = modifiers.has(MODIFIERS.LARGE) ? 'emoji-lg' : 'emoji'; + + // patted emotes cannot be flipped back easily so they don't support double flipping + const spanClass = modifiers.has(MODIFIERS.REVERSED) && (modifiers.has(MODIFIERS.PAT) || !modifiers.has(MODIFIERS.REVERSED_MODIFIER)) ? mirroredClass : ''; + const imgClass = modifiers.has(MODIFIERS.REVERSED) && modifiers.has(MODIFIERS.REVERSED_MODIFIER) ? mirroredClass : '' if (modifiers.has(MODIFIERS.PAT) || modifiers.has(MODIFIERS.TALKING)) { const talkingHtml = modifiers.has(MODIFIERS.TALKING) ? `` : ''; const patHtml = modifiers.has(MODIFIERS.PAT) ? `` : ''; const url = modifiers.has(MODIFIERS.USER) ? `/@${emoji}/pic` : `${SITE_FULL_IMAGES}/e/${emoji}.webp`; const modifierHtml = isTalkingFirst ? `${talkingHtml}${patHtml}` : `${patHtml}${talkingHtml}`; - input = input.replace(old, `${modifierHtml}`); + input = input.replace(old, `${modifierHtml}`); } else { - input = input.replace(old, ``); + input = input.replace(old, ``); } } } diff --git a/files/helpers/sanitize.py b/files/helpers/sanitize.py index c097858af..9567ffb81 100644 --- a/files/helpers/sanitize.py +++ b/files/helpers/sanitize.py @@ -247,16 +247,15 @@ def render_emoji(html, regexp, golden, emojis_used, b=False, is_title=False): is_talking = emoji.endswith('talking') or (emoji[:-3].endswith('talking') and emoji.endswith('pat')) is_talking_first = emoji.endswith('talking') - emoji = emoji.replace('talking', '') if is_talking else emoji + emoji = emoji[:-7] if emoji.endswith('talking') else emoji + emoji = f'{emoji[:-10]}pat' if emoji[:-3].endswith('talking') and emoji.endswith('pat') else emoji is_patted = emoji.endswith('pat') - emoji = emoji.replace('pat', '') + emoji = emoji[:-3] if is_patted else emoji is_user = emoji.startswith('@') end_modifier_length = 3 if is_patted else 0 end_modifier_length = end_modifier_length + 7 if is_talking else end_modifier_length - print(emoji, flush=True) - hand_html = f'' if is_patted and emoji != 'marseyunpettable' else '' talking_html = f'' if is_talking else ''