forked from rDrama/rDrama
Adds the typing modifier (#221)
Little messy, I'll clean this up in a follow-up. The entire modifier code needs a refactor tbh. Just makes the emote typing, nothing too complicated. Added a couple screenshots. Co-authored-by: Chuck <dude@bussy.com> Reviewed-on: rDrama/rDrama#221 Co-authored-by: top <top@noreply.fsdfsd.net> Co-committed-by: top <top@noreply.fsdfsd.net>master
parent
daae1f17d5
commit
ca411eef78
|
@ -5284,7 +5284,7 @@ textarea {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.img, img[alt^="![]("],
|
.img, img[alt^="![]("],
|
||||||
.preview img:not(img[src^="/uid/"], img[src^="/pp/"], img[src$="/pic"], img[src$="/i/hand.webp"], img[src$="/i/talking.webp"], img[src*="/e/"]) {
|
.preview img:not(img[src^="/uid/"], img[src^="/pp/"], img[src$="/pic"], img[src$="/i/hand.webp"], img[src$="/i/talking.webp"], img[src$="/i/typing-hands.webp"], img[src*="/e/"]) {
|
||||||
max-height: 150px !important;
|
max-height: 150px !important;
|
||||||
max-width: 100% !important;
|
max-width: 100% !important;
|
||||||
border-radius: 0.2rem !important;
|
border-radius: 0.2rem !important;
|
||||||
|
@ -5446,6 +5446,12 @@ span > img[src$="/i/talking.webp"] {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 70%;
|
width: 70%;
|
||||||
}
|
}
|
||||||
|
span > img[src$="/i/typing-hands.webp"] {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
span > img[src$="/i/hand.webp"] ~ img {
|
span > img[src$="/i/hand.webp"] ~ img {
|
||||||
animation: pat-pfp-anim 0.3s infinite;
|
animation: pat-pfp-anim 0.3s infinite;
|
||||||
transform-origin: bottom center;
|
transform-origin: bottom center;
|
||||||
|
@ -5489,6 +5495,10 @@ span > img[src$="/i/talking.webp"]+img[src$="/i/hand.webp"]+img {
|
||||||
bottom: calc(2px + 2%) !important;
|
bottom: calc(2px + 2%) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.typing-hands-preview {
|
||||||
|
bottom: calc(2px + 2%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
span > img[src$="/i/love-foreground.webp"]+img[src$="/i/love-background.webp"]+img {
|
span > img[src$="/i/love-foreground.webp"]+img[src$="/i/love-background.webp"]+img {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 50;
|
z-index: 50;
|
||||||
|
@ -5499,6 +5509,26 @@ span > img[src$="/i/love-foreground.webp"]+img[src$="/i/love-background.webp"]+i
|
||||||
transform: scaleX(-1) rotate(-10deg);
|
transform: scaleX(-1) rotate(-10deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
span > img[src$="/i/love-foreground.webp"]+img[src$="/i/love-background.webp"]+img[src$="/i/typing-hands.webp"] {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 51;
|
||||||
|
height: unset;
|
||||||
|
width: 50%;
|
||||||
|
bottom: -2%;
|
||||||
|
left: 33%;
|
||||||
|
transform: rotate(10deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
span > img[src$="/i/love-foreground.webp"]+img[src$="/i/love-background.webp"]+img+img {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 50;
|
||||||
|
height: 60%;
|
||||||
|
width: 60%;
|
||||||
|
bottom: -2%;
|
||||||
|
left: 33%;
|
||||||
|
transform: scaleX(-1) rotate(-10deg);
|
||||||
|
}
|
||||||
|
|
||||||
span > img[src$="/i/love-foreground.webp"] {
|
span > img[src$="/i/love-foreground.webp"] {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 20 KiB |
|
@ -74,6 +74,7 @@ const MODIFIERS = {
|
||||||
REVERSED_MODIFIER: 6,
|
REVERSED_MODIFIER: 6,
|
||||||
GENOCIDE: 7,
|
GENOCIDE: 7,
|
||||||
LOVE: 8,
|
LOVE: 8,
|
||||||
|
TYPING: 9,
|
||||||
};
|
};
|
||||||
|
|
||||||
const findAllEmojiEndings = (word) => {
|
const findAllEmojiEndings = (word) => {
|
||||||
|
@ -121,6 +122,16 @@ const findAllEmojiEndings = (word) => {
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if(currWord.endsWith('typing')) {
|
||||||
|
if(currEndings.indexOf(MODIFIERS.TYPING) !== -1) {
|
||||||
|
hasReachedNonModifer = true;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
currWord = currWord.slice(0, -6);
|
||||||
|
currEndings.push(MODIFIERS.TYPING);
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
hasReachedNonModifer = true;
|
hasReachedNonModifer = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -204,12 +215,13 @@ function markdown(t) {
|
||||||
const imgClass = modifiers.has(MODIFIERS.REVERSED) && modifiers.has(MODIFIERS.REVERSED_MODIFIER) ? mirroredClass : ''
|
const imgClass = modifiers.has(MODIFIERS.REVERSED) && modifiers.has(MODIFIERS.REVERSED_MODIFIER) ? mirroredClass : ''
|
||||||
const lovedClass = modifiers.has(MODIFIERS.LOVE) ? 'love-preview' : '';
|
const lovedClass = modifiers.has(MODIFIERS.LOVE) ? 'love-preview' : '';
|
||||||
|
|
||||||
if ([MODIFIERS.TALKING, MODIFIERS.GENOCIDE, MODIFIERS.PAT, MODIFIERS.LOVE].some((modifer) => modifiers.has(modifer))) {
|
if ([MODIFIERS.TALKING, MODIFIERS.GENOCIDE, MODIFIERS.PAT, MODIFIERS.LOVE, MODIFIERS.TYPING].some((modifer) => modifiers.has(modifer))) {
|
||||||
|
const typingHtml = modifiers.has(MODIFIERS.TYPING) ? `<img loading="lazy" class="typing-hands-preview" src="${SITE_FULL_IMAGES}/i/typing-hands.webp">` : '';
|
||||||
const talkingHtml = modifiers.has(MODIFIERS.TALKING) ? `<img loading="lazy" src="${SITE_FULL_IMAGES}/i/talking.webp">` : '';
|
const talkingHtml = modifiers.has(MODIFIERS.TALKING) ? `<img loading="lazy" src="${SITE_FULL_IMAGES}/i/talking.webp">` : '';
|
||||||
const patHtml = modifiers.has(MODIFIERS.PAT) ? `<img loading="lazy" src="${SITE_FULL_IMAGES}/i/hand.webp">` : '';
|
const patHtml = modifiers.has(MODIFIERS.PAT) ? `<img loading="lazy" src="${SITE_FULL_IMAGES}/i/hand.webp">` : '';
|
||||||
const loveHtml = modifiers.has(MODIFIERS.LOVE) ? `<img loading="lazy" class="${emojiClass}" src="${SITE_FULL_IMAGES}/i/love-foreground.webp"><img loading="lazy" class="${emojiClass}" src="${SITE_FULL_IMAGES}/i/love-background.webp">` : '';
|
const loveHtml = modifiers.has(MODIFIERS.LOVE) ? `<img loading="lazy" class="${emojiClass}" src="${SITE_FULL_IMAGES}/i/love-foreground.webp"><img loading="lazy" class="${emojiClass}" src="${SITE_FULL_IMAGES}/i/love-background.webp">` : '';
|
||||||
const url = modifiers.has(MODIFIERS.USER) ? `/@${emoji}/pic` : `${SITE_FULL_IMAGES}/e/${emoji}.webp`;
|
const url = modifiers.has(MODIFIERS.USER) ? `/@${emoji}/pic` : `${SITE_FULL_IMAGES}/e/${emoji}.webp`;
|
||||||
const modifierHtml = isTalkingFirst ? `${talkingHtml}${patHtml}${loveHtml}` : `${patHtml}${talkingHtml}${loveHtml}`;
|
const modifierHtml = isTalkingFirst ? `${talkingHtml}${patHtml}${loveHtml}${typingHtml}` : `${patHtml}${talkingHtml}${loveHtml}${typingHtml}`;
|
||||||
input = input.replace(old, `<span class="${patClass} ${spanClass} ${genocideClass}" data-bs-toggle="tooltip">${modifierHtml}<img loading="lazy" class="${emojiClass} ${imgClass} ${lovedClass}" src="${url}"></span>`);
|
input = input.replace(old, `<span class="${patClass} ${spanClass} ${genocideClass}" data-bs-toggle="tooltip">${modifierHtml}<img loading="lazy" class="${emojiClass} ${imgClass} ${lovedClass}" src="${url}"></span>`);
|
||||||
} else {
|
} else {
|
||||||
input = input.replace(old, `<img loading="lazy" class="${emojiClass} ${modifiers.has(MODIFIERS.REVERSED) ? mirroredClass : ''}" src="${SITE_FULL_IMAGES}/e/${emoji}.webp">`);
|
input = input.replace(old, `<img loading="lazy" class="${emojiClass} ${modifiers.has(MODIFIERS.REVERSED) ? mirroredClass : ''}" src="${SITE_FULL_IMAGES}/e/${emoji}.webp">`);
|
||||||
|
|
|
@ -210,6 +210,14 @@ def find_all_emoji_endings(emoji):
|
||||||
emoji = emoji[:-4]
|
emoji = emoji[:-4]
|
||||||
continue
|
continue
|
||||||
|
|
||||||
|
if emoji.endswith('typing'):
|
||||||
|
if 'typing' in endings:
|
||||||
|
is_non_ending_found = True
|
||||||
|
continue
|
||||||
|
endings.append('typing')
|
||||||
|
emoji = emoji[:-6]
|
||||||
|
continue
|
||||||
|
|
||||||
is_non_ending_found = True
|
is_non_ending_found = True
|
||||||
|
|
||||||
if emoji.endswith('random'):
|
if emoji.endswith('random'):
|
||||||
|
@ -254,6 +262,7 @@ def render_emoji(html, regexp, golden, emojis_used, b=False, is_title=False):
|
||||||
is_talking_first = ending_modifiers.index('pat') > ending_modifiers.index('talking') if is_talking and is_patted else False
|
is_talking_first = ending_modifiers.index('pat') > ending_modifiers.index('talking') if is_talking and is_patted else False
|
||||||
is_loved = 'love' in ending_modifiers
|
is_loved = 'love' in ending_modifiers
|
||||||
is_genocided = 'genocide' in ending_modifiers
|
is_genocided = 'genocide' in ending_modifiers
|
||||||
|
is_typing = 'typing' in ending_modifiers
|
||||||
is_user = emoji.startswith('@')
|
is_user = emoji.startswith('@')
|
||||||
|
|
||||||
end_modifier_length = 3 if is_patted else 0
|
end_modifier_length = 3 if is_patted else 0
|
||||||
|
@ -261,6 +270,7 @@ def render_emoji(html, regexp, golden, emojis_used, b=False, is_title=False):
|
||||||
|
|
||||||
hand_html = f'<img loading="lazy" src="{SITE_FULL_IMAGES}/i/hand.webp">' if is_patted and emoji != 'marseyunpettable' else ''
|
hand_html = f'<img loading="lazy" src="{SITE_FULL_IMAGES}/i/hand.webp">' if is_patted and emoji != 'marseyunpettable' else ''
|
||||||
talking_html = f'<img loading="lazy" src="{SITE_FULL_IMAGES}/i/talking.webp">' if is_talking else ''
|
talking_html = f'<img loading="lazy" src="{SITE_FULL_IMAGES}/i/talking.webp">' if is_talking else ''
|
||||||
|
typing_html = f'<img loading="lazy" src="{SITE_FULL_IMAGES}/i/typing-hands.webp">' if is_typing else ''
|
||||||
loved_html = f'<img loading="lazy" src="{SITE_FULL_IMAGES}/i/love-foreground.webp" alt=":{old}:" {attrs}><img loading="lazy" alt=":{old}:" src="{SITE_FULL_IMAGES}/i/love-background.webp" {attrs}>'
|
loved_html = f'<img loading="lazy" src="{SITE_FULL_IMAGES}/i/love-foreground.webp" alt=":{old}:" {attrs}><img loading="lazy" alt=":{old}:" src="{SITE_FULL_IMAGES}/i/love-background.webp" {attrs}>'
|
||||||
genocide_attr = ' cide' if is_genocided else ''
|
genocide_attr = ' cide' if is_genocided else ''
|
||||||
|
|
||||||
|
@ -275,7 +285,10 @@ def render_emoji(html, regexp, golden, emojis_used, b=False, is_title=False):
|
||||||
if is_loved:
|
if is_loved:
|
||||||
modifier_html = f'{modifier_html}{loved_html}'
|
modifier_html = f'{modifier_html}{loved_html}'
|
||||||
|
|
||||||
if (is_patted and emoji != 'marseyunpettable') or is_talking or is_genocided or is_loved:
|
if is_typing:
|
||||||
|
modifier_html = f'{modifier_html}{typing_html}'
|
||||||
|
|
||||||
|
if (is_patted and emoji != 'marseyunpettable') or is_talking or is_genocided or is_loved or is_typing:
|
||||||
if path.isfile(f"files/assets/images/emojis/{emoji}.webp"):
|
if path.isfile(f"files/assets/images/emojis/{emoji}.webp"):
|
||||||
emoji_html = f'<span alt=":{old}:" data-bs-toggle="tooltip" title=":{old}:"{genocide_attr}>{modifier_html}{emoji_partial_pat.format(old, f"{SITE_FULL_IMAGES}/e/{emoji}.webp", attrs)}</span>'
|
emoji_html = f'<span alt=":{old}:" data-bs-toggle="tooltip" title=":{old}:"{genocide_attr}>{modifier_html}{emoji_partial_pat.format(old, f"{SITE_FULL_IMAGES}/e/{emoji}.webp", attrs)}</span>'
|
||||||
elif is_user:
|
elif is_user:
|
||||||
|
|
|
@ -152,11 +152,20 @@
|
||||||
<td>Talking Emojis</td>
|
<td>Talking Emojis</td>
|
||||||
<td>:marseygasptalking:</td>
|
<td>:marseygasptalking:</td>
|
||||||
<td>
|
<td>
|
||||||
<span alt=":marseygasppat:" data-bs-toggle="tooltip" title=":marseygasptalking:"><img loading="lazy" src="{{SITE_FULL_IMAGES}}/i/talking.webp">
|
<span alt=":marseygasptalking:" data-bs-toggle="tooltip" title=":marseygasptalking:"><img loading="lazy" src="{{SITE_FULL_IMAGES}}/i/talking.webp">
|
||||||
<img alt=":marseygasptalking:" b loading="lazy" pat src="{{SITE_FULL_IMAGES}}/e/marseygasp.webp">
|
<img alt=":marseygasptalking:" b loading="lazy" pat src="{{SITE_FULL_IMAGES}}/e/marseygasp.webp">
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Typing Emojis</td>
|
||||||
|
<td>:marseygasptyping:</td>
|
||||||
|
<td>
|
||||||
|
<span alt=":marseygasptyping:" data-bs-toggle="tooltip" title=":marseygasptyping:"><img loading="lazy" src="{{SITE_FULL_IMAGES}}/i/typing-hands.webp">
|
||||||
|
<img alt=":marseygasptyping:" b loading="lazy" pat src="{{SITE_FULL_IMAGES}}/e/marseygasp.webp">
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Genocide Emojis</td>
|
<td>Genocide Emojis</td>
|
||||||
<td>:marseygaspgenocide:</td>
|
<td>:marseygaspgenocide:</td>
|
||||||
|
|
|
@ -46,6 +46,10 @@
|
||||||
<input type="checkbox" id="emoji-sel-5" value="love" class="emoji-postfix">
|
<input type="checkbox" id="emoji-sel-5" value="love" class="emoji-postfix">
|
||||||
<label class="emoji-option" for="emoji-sel-5">Love</label>
|
<label class="emoji-option" for="emoji-sel-5">Love</label>
|
||||||
</div>
|
</div>
|
||||||
|
<div style="display: inline" data-bs-toggle="tooltip" data-bs-placement="bottom" title="This emoji is typing this comment">
|
||||||
|
<input type="checkbox" id="emoji-sel-6" value="typing" class="emoji-postfix">
|
||||||
|
<label class="emoji-option" for="emoji-sel-6">Typing</label>
|
||||||
|
</div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue