Adds marseylove (marseyheart so it doesn't interfere with marseylove) (#184)

This was the emoji modifier I wanted to add all along, seems to work well with all of the other modifiers.

Made the modifer :-heart: so that it doesn't interfere with all of the current love emotes that everyone put so much work into.

Check out the screenshot for how it looks locally.

Co-authored-by: Chuck <dude@bussy.com>
Reviewed-on: rDrama/rDrama#184
Co-authored-by: top <top@noreply.fsdfsd.net>
Co-committed-by: top <top@noreply.fsdfsd.net>

files/assets/css/main.css

@@ -5551,13 +5551,13 @@ img[src$="/i/hand.webp"] {
 	width: 90%;
 	height: 90%;
 	margin-top: -10%;
-	z-index: 1;
+	z-index: 101;
 }
 img[src$="/i/talking.webp"] {
 	position: absolute;
 	width: 70%;
 }
-img[src$="/i/hand.webp"]+img {
+img[src$="/i/hand.webp"]~img {
 	animation: pat-pfp-anim 0.3s infinite;
 	transform-origin: bottom center;
 	margin-top: 10%;
@@ -5568,14 +5568,17 @@ img[src$="/i/hand.webp"]+img[src$="/i/talking.webp"] {
 	padding-top: 20%;
 	padding-right: 5%;
 }
-img[src$="/i/hand.webp"]+img[src$="/i/talking.webp"]+img {
+img[src$="/i/hand.webp"]+img[src$="/i/talking.webp"]~img {
 	animation: pat-pfp-anim 0.3s infinite;
 	transform-origin: bottom center;
 	margin-top: 20%;
 	text-align: center;
 	object-fit: contain;
 }
-img[src$="/i/talking.webp"]+img {
+img[src$="/i/talking.webp"]~img {
+	margin-top: 22%;
+}
+img[src$="/i/talking.webp"]+img+img[src$="/i/love-background.webp"] {
 	margin-top: 22%;
 }
 img[src$="/i/talking.webp"]+img[src$="/i/hand.webp"] {
@@ -5588,6 +5591,31 @@ img[src$="/i/hand.webp"]+img[src^="/pp/"], img[src$="/i/hand.webp"]+img[src$="/p
 	border-radius: 50%;
 	object-fit: cover;
 }
+
+.love-preview {
+	bottom: calc(2px + 2%) !important;
+}
+
+img[src$="/i/love-foreground.webp"]+img[src$="/i/love-background.webp"]+img {
+	position: absolute;
+	z-index: 50;
+	height: 40%;
+	width: 40%;
+	bottom: -2%;
+	left: 40%;
+}
+
+img[src$="/i/love-foreground.webp"] {
+	position: absolute;
+	z-index: 100;
+}
+img[src$="/i/love-background.webp"] {
+	position: relative;
+	z-index: 1;
+}
+
+
+
 @keyframes pat-pfp-anim {
 	0% { transform: scale(1, 0.8) }
 	50% { transform: scale(0.8, 1) }

files/assets/js/markdown.js

@@ -73,6 +73,7 @@ const MODIFIERS = {
 	USER: 5,
 	REVERSED_MODIFIER: 6,
 	GENOCIDE: 7,
+	LOVE: 8,
 };
 
 const findAllEmoteEndings = (word) => {
@@ -110,6 +111,16 @@ const findAllEmoteEndings = (word) => {
 			continue;
 		}
 
+		if(currWord.endsWith('heart')) {
+			if(currEndings.indexOf(MODIFIERS.LOVE) !== -1) {
+				hasReachedNonModifer = true;
+				continue;
+			}
+			currWord = currWord.slice(0, -5);
+			currEndings.push(MODIFIERS.LOVE);
+			continue;
+		}
+
 		hasReachedNonModifer = true;
 	}
 	
@@ -186,17 +197,20 @@ function markdown(t) {
 			const mirroredClass = 'mirrored';
 			const genocideClass = modifiers.has(MODIFIERS.GENOCIDE) ? 'cide' : '';
 			const emojiClass = modifiers.has(MODIFIERS.LARGE) ? 'emoji-lg' : 'emoji';
+			const patClass = modifiers.has(MODIFIERS.PAT) ? 'pat-preview' : '';
 
 			// 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 : ''
-			
+			const lovedClass = modifiers.has(MODIFIERS.LOVE) ? 'love-preview' : '';
-			if (modifiers.has(MODIFIERS.PAT) || modifiers.has(MODIFIERS.TALKING) || modifiers.has(MODIFIERS.GENOCIDE)) {
+
+			if ([MODIFIERS.TALKING, MODIFIERS.GENOCIDE, MODIFIERS.PAT, MODIFIERS.LOVE].some((modifer) =>  modifiers.has(modifer))) {
 				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 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 modifierHtml = isTalkingFirst ? `${talkingHtml}${patHtml}` : `${patHtml}${talkingHtml}`;
+				const modifierHtml = isTalkingFirst ? `${talkingHtml}${patHtml}${loveHtml}` : `${patHtml}${talkingHtml}${loveHtml}`;
-				input = input.replace(old, `<span class="pat-preview ${spanClass} ${genocideClass}" data-bs-toggle="tooltip">${modifierHtml}<img loading="lazy" class="${emojiClass} ${imgClass} " 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 {
 				input = input.replace(old, `<img loading="lazy" class="${emojiClass} ${modifiers.has(MODIFIERS.REVERSED) ? mirroredClass : ''}" src="${SITE_FULL_IMAGES}/e/${emoji}.webp">`);
 			}

files/helpers/sanitize.py

@@ -243,6 +243,14 @@ def find_all_emote_endings(word):
 			curr_word = curr_word[:-8]
 			continue
 		
+		if curr_word.endswith('heart'):
+			if 'heart' in endings:
+				is_non_ending_found = True
+				continue
+			endings.append('heart')
+			curr_word = curr_word[:-5]
+			continue
+
 		is_non_ending_found = True
 	
 	return endings, curr_word
@@ -286,7 +294,7 @@ def render_emoji(html, regexp, golden, emojis_used, b=False, is_title=False):
 		is_talking = 'talking' in ending_modifiers
 		is_patted = 'pat' in ending_modifiers
 		is_talking_first = ending_modifiers.index('pat') > ending_modifiers.index('talking') if is_talking and is_patted else False
-
+		is_loved = 'heart' in ending_modifiers
 		is_genocided = 'genocide' in ending_modifiers
 		is_user = emoji.startswith('@')
 
@@ -295,6 +303,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 ''
 		talking_html = f'<img loading="lazy" src="{SITE_FULL_IMAGES}/i/talking.webp">' if is_talking 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}>'		
 		genocide_attr = ' cide' if is_genocided else ''
 		
 		modifier_html = ''
@@ -304,8 +313,11 @@ def render_emoji(html, regexp, golden, emojis_used, b=False, is_title=False):
 			modifier_html = hand_html
 		elif (is_talking):
 			modifier_html = talking_html
+		
+		if(is_loved):
+			modifier_html = f'{modifier_html}{loved_html}'
 
-		if (is_patted and emoji != 'marseyunpettable') or is_talking or is_genocided:
+		if (is_patted and emoji != 'marseyunpettable') or is_talking or is_genocided or is_loved:
 			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>'
 			elif is_user:

files/templates/formatting.html

@@ -107,6 +107,11 @@ Text 2
 			<td>:marseylovetalking:</td>
 			<td><span alt=":marseylovepat:" data-bs-toggle="tooltip" title=":marseylovetalking:"><img loading="lazy" src="{{SITE_FULL_IMAGES}}/i/talking.webp"><img alt=":marseylovetalking:" b loading="lazy" pat src="{{SITE_FULL_IMAGES}}/e/marseylove.webp"></span></td>
 		</tr>
+		<tr>
+			<td>Love Emojis</td>
+			<td>:marseylovetalking:</td>
+			<td><span alt=":marseyloveheart:" data-bs-toggle="tooltip" title="" data-bs-original-title=":marseyloveheart:" aria-label=":marseyloveheart:"><img alt=":marseyloveheart:" b="" loading="lazy" src="http://localhost/i/love-foreground.webp"><img alt=":marseyloveheart:" b="" loading="lazy" src="http://localhost/i/love-background.webp"><img alt=":marseyloveheart:" b="" loading="lazy" src="http://localhost/e/marseylove.webp"></span></td>
+		</tr>
 		<tr>
 			<td>Pat User</td>
 			<td>:@snappypat:</td>
@@ -117,6 +122,11 @@ Text 2
 			<td>:@snappytalking:</td>
 			<td><span alt=":@snappypat:" data-bs-toggle="tooltip" title=":@snappytalking:"><img loading="lazy" src="{{SITE_FULL_IMAGES}}/i/talking.webp"><img alt=":@snappytalking:" b loading="lazy" pat src="/pp/3"></span></td>
 		</tr>
+		<tr>
+			<td>Heart User</td>
+			<td>:@snappyheart:</td>
+			<td><span alt=":@snappyheart:" data-bs-toggle="tooltip" title="" data-bs-original-title=":@topheart:" aria-label=":@snappyheart:"><img alt=":@snappyheart:" b="" loading="lazy" src="http://localhost/i/love-foreground.webp"><img alt=":@snappyheart:" b="" loading="lazy" src="http://localhost/i/love-background.webp"><img alt=":@snappyheart:" b="" loading="lazy" src="/pp/3"></span></td>
+		</tr>
 		{% if FEATURES['MARKUP_COMMANDS'] -%}
 		<tr>
 			<td>Play slots using coins<br>

files/templates/modals/emoji.html

@@ -42,6 +42,10 @@
 						<input type="checkbox" id="emoji-sel-4" value="genocide" class="emoji-postfix">
 						<label class="emoji-option" for="emoji-sel-4">Genocide</label>
 					</div>
+					<div style="display: inline" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Makes Marsey love this emoji!">
+						<input type="checkbox" id="emoji-sel-5" value="heart" class="emoji-postfix">
+						<label class="emoji-option" for="emoji-sel-5">Love</label>
+					</div>
 				</fieldset>
 			</div>