made wordle and blackjack ajax

files/assets/js/comments_v.js

@@ -326,52 +326,47 @@ function choice_vote(cid, parentid) {
 	curr.value = cid
 }
 
-function handle_blackjack_action(cid, action) {
+function handle_action(type, cid, thing) {
+
+
+	const btns = document.getElementsByClassName(`action-${cid}`)
+	for (const btn of btns)
+	{
+		btn.disabled = true;
+		btn.classList.add('disabled');
+	}
+
 	const form = new FormData();
 	form.append('formkey', formkey());
 	form.append('comment_id', cid);
-	form.append('action', action);
+	form.append('thing', thing);
 	
 	const xhr = new XMLHttpRequest();
-	xhr.open("post", `/blackjack/${cid}`);
+	xhr.open("post", `/${type}/${cid}`);
 	xhr.setRequestHeader('xhr', 'xhr');
 
-	xhr.onload = function() {
-		if (xhr.status == 200)
-		{
-			location.hash = `comment-${cid}`;
-			location.reload();
-		}
-	}
-	xhr.send(form);
-}
 
-function handle_wordle_action(cid, guess) {
-	const form = new FormData();
-	form.append('formkey', formkey());
-	form.append('comment_id', cid);
-	form.append('guess', guess);
 
-	const xhr = new XMLHttpRequest();
+	xhr.onload=function(){
-	xhr.open("post", `/wordle/${cid}`);
+		let data
-	xhr.setRequestHeader('xhr', 'xhr');
+		try {data = JSON.parse(xhr.response)}
-
+		catch(e) {console.log(e)}
-	xhr.onload = function() {
+		if (data && data["response"]) {
-		if (xhr.status == 200)
+			const element = document.getElementById(`${type}-${cid}`);
-		{
+			element.innerHTML = data["response"]
-			location.hash = `comment-${cid}`;
-			location.reload();
 		}
 		else {
-			document.getElementById('toast-post-error-text').innerText = "Error, please try again later."
+			if (data && data["error"]) document.getElementById('toast-post-error-text').innerText = data["error"];
-			try
+			else document.getElementById('toast-post-error-text').innerText = "Error, please try again later."
-			{
-				data = JSON.parse(xhr.response)
-			 	document.getElementById('toast-post-error-text').innerText = data["error"];
 			bootstrap.Toast.getOrCreateInstance(document.getElementById('toast-post-error')).show();
 		}
-			catch {}
+		setTimeout(() => {
+			for (const btn of btns)
+			{		
+				btn.disabled = false;
+				btn.classList.remove('disabled');
 			}
+		}, 2000);
 	}
-	xhr.send(form);
+	xhr.send(form)
 }

files/classes/comment.py

@@ -437,3 +437,56 @@ class Comment(Base):
 	@property
 	@lazy
 	def active_flags(self): return self.flags.count()
+
+	@lazy
+	def wordle_html(self, v):
+		if not self.wordle_result: return ''
+
+		split_wordle_result = self.wordle_result.split('_')
+		wordle_guesses = split_wordle_result[0]
+		wordle_status = split_wordle_result[1]
+		wordle_answer = split_wordle_result[2]
+
+		body = f"<span id='wordle-{self.id}' class='ml-2'><small>{wordle_guesses}</small>"
+
+		if wordle_status == 'active' and v and v.id == self.author_id:
+			body += f'''<input autocomplete="off" id="guess_box" type="text" name="guess" class="form-control" maxsize="4" style="width: 200px;display: initial"placeholder="5-letter guess"></input><button class="action-{self.id} btn btn-success small" style="text-transform: uppercase; padding: 2px"onclick="handle_action('wordle','{self.id}',document.getElementById('guess_box').value)">Guess</button>'''
+		elif wordle_status == 'won':
+			body += "<strong class='ml-2'>Correct!</strong>"
+		elif wordle_status == 'lost':
+			body += f"<strong class='ml-2'>Lost. The answer was: {wordle_answer}</strong>"
+		
+		body += '</span>'
+		return body
+
+	@lazy
+	def blackjack_html(self, v):
+		if not self.blackjack_result: return ''
+
+		split_result = self.blackjack_result.split('_')
+		blackjack_status = split_result[3]
+		player_hand = split_result[0].replace('X', '10')
+		dealer_hand = split_result[1].split('/')[0] if blackjack_status == 'active' else split_result[1]
+		dealer_hand = dealer_hand.replace('X', '10')
+		wager = split_result[4]
+		kind = split_result[5]
+		currency_kind = "Coins" if kind == "coins" else "Marseybucks"
+
+		body = f"<span id='blackjack-{self.id}' class='ml-2'><em>{player_hand} vs. {dealer_hand}</em>"
+		
+		if blackjack_status == 'active' and v.id == self.author_id:
+			body += f'''<button class="action-{self.id} btn btn-success small" style="text-transform: uppercase; padding: 2px"onclick="handle_action('blackjack','{self.id}','hit')">Hit</button>
+			<button class="action-{self.id} btn btn-danger small" style="text-transform: uppercase; padding: 2px"onclick="handle_action('blackjack','{self.id}','stay')">Stay</button>'''
+		elif blackjack_status == 'push':
+			body += f"<strong class='ml-2'>Pushed. Refunded {wager} {currency_kind}.</strong>"
+		elif blackjack_status == 'bust':
+			body += f"<strong class='ml-2'>Bust. Lost {wager} {currency_kind}.</strong>"
+		elif blackjack_status == 'lost':
+			body += f"<strong class='ml-2'>Lost {wager} {currency_kind}.</strong>"
+		elif blackjack_status == 'won':
+			body += f"<strong class='ml-2'>Won {wager} {currency_kind}.</strong>"
+		elif blackjack_status == 'blackjack':
+			body += f"<strong class='ml-2'>Blackjack! Won {floor(wager_value * 3/2)} {currency_kind}.</strong>"
+
+		body += '</span>'
+		return body

files/routes/comments.py

@@ -1048,7 +1048,8 @@ def unsave_comment(cid, v):
 def handle_blackjack_action(cid, v):
 	comment = get_comment(cid)
 	if 'active' in comment.blackjack_result:
-		action = request.values.get("action", "")
+		try: action = request.values.get("thing").strip().lower()
+		except: abort(400)
 
 		if action == 'hit': player_hit(comment)
 		elif action == 'stay': player_stayed(comment)
@@ -1056,7 +1057,7 @@ def handle_blackjack_action(cid, v):
 		g.db.add(comment)
 		g.db.add(v)
 		g.db.commit()
-	return { "message" : "..." }
+	return {"response" : comment.blackjack_html(v)}
 
 
 def diff_words(answer, guess):
@@ -1078,6 +1079,7 @@ def diff_words(answer, guess):
 			diffs[i] = 0
 	return diffs
 
+
 @app.post("/wordle/<cid>")
 @limiter.limit("1/second;30/minute;200/hour;1000/day")
 @auth_required
@@ -1088,7 +1090,7 @@ def handle_wordle_action(cid, v):
 	guesses, status, answer = comment.wordle_result.split("_")
 	count = len(guesses.split(" -> "))
 
-	try: guess = request.values.get("guess").strip().lower()
+	try: guess = request.values.get("thing").strip().lower()
 	except: abort(400)
 
 	if len(guess) != 5 or not d.check(guess) and guess not in WORDLE_LIST:
@@ -1106,4 +1108,4 @@ def handle_wordle_action(cid, v):
 		g.db.add(comment)
 		g.db.commit()
 	
-	return {"message" : "."}
+	return {"response" : comment.wordle_html(v)}

files/templates/comments.html

@@ -157,23 +157,6 @@
 	{% set isreply = False %}
 {% endif %}
 
-{% if c.blackjack_result %}
-	{% set split_result = c.blackjack_result.split('_') %}
-	{% set blackjack_status = split_result[3] %}
-	{% set player_hand = split_result[0].replace('X', '10') %}
-	{% set dealer_hand = split_result[1].split('/')[0] if blackjack_status == 'active' else split_result[1] %}
-	{% set dealer_hand = dealer_hand.replace('X', '10') %}
-	{% set wager = split_result[4] %}
-	{% set kind = split_result[5] %}
-{% endif %}
-
-{% if c.wordle_result %}
-	{% set split_wordle_result = c.wordle_result.split('_') %}
-	{% set wordle_guesses = split_wordle_result[0] %}
-	{% set wordle_status = split_wordle_result[1] %}
-	{% set wordle_answer = split_wordle_result[2] %}
-{% endif %}
-
 <div id="comment-{{c.id}}" class="anchor {% if c.unread %}unread{% endif %} comment {% if standalone and level==1 %} mt-0{% endif %} {% if c.collapse_for_user(v,request.path) %}collapsed{% endif %}" style="{% if isreply %}padding-left:0!important;{% elif not c.unread %}border-left: 2px solid {% if c.ghost %}var(--primary){% else %}#{{c.author.namecolor}};{% endif %}{% endif %} {% if c.unread %}padding: 10px 10px 10px !important;{% endif %}">
 	{% if not isreply %}
 		<span class="comment-collapse-desktop d-none d-md-block" {% if not c.unread %}style="border-left: 2px solid {% if c.ghost %}var(--primary){% else %}#{{c.author.namecolor}}{% endif %}"{% endif %} onclick="collapse_comment('{{c.id}}')"></span>
@@ -255,35 +238,11 @@
 				{% endif %}
 
 				{% if c.blackjack_result %}
-				{% set currency_kind = "Coins" if kind == "coins" else "Marseybucks" %}
+					{{c.blackjack_html(v) | safe}}
-				<em>{{player_hand}} vs. {{dealer_hand}}</em>
-					{% if blackjack_status == 'active' and v.id == c.author_id %}
-					<button class="btn btn-success small" style="text-transform: uppercase; padding: 2px"onclick="handle_blackjack_action('{{c.id}}', 'hit')">Hit</button>
-					<button class="btn btn-danger small" style="text-transform: uppercase; padding: 2px"onclick="handle_blackjack_action('{{c.id}}', 'stay')">Stay</button>
-					{% elif blackjack_status == 'push' %}
-					<strong>Pushed. Refunded {{wager}} {{currency_kind}}.</strong>
-					{% elif blackjack_status == 'bust' %}
-					<strong>Bust. Lost {{wager}} {{currency_kind}}.</strong>
-					{% elif blackjack_status == 'lost' %}
-					<strong>Lost {{wager}} {{currency_kind}}.</strong>
-					{% elif blackjack_status == 'won' %}
-					<strong>Won {{wager}} {{currency_kind}}.</strong>
-					{% elif blackjack_status == 'blackjack' %}
-					<strong>Blackjack! Won {{(wager|int * 3/2)|round(0, 'floor')|int}} {{currency_kind}}.</strong>
-					{% endif %}
 				{% endif %}
 
 				{% if c.wordle_result %}
-					<small>{{wordle_guesses}}</small>
+					{{c.wordle_html(v) | safe}}
-					{% if wordle_status == 'active' and v.id == c.author_id %}
-					<input autocomplete="off" id="guess_box" type="text" name="guess" class="form-control" maxsize="4" style="width: 200px;
-					display: initial"placeholder="5-letter guess"></input>
-					<button class="btn btn-success small" style="text-transform: uppercase; padding: 2px"onclick="handle_wordle_action('{{c.id}}', document.getElementById('guess_box').value)">Guess</button>
-					{% elif wordle_status == 'won' %}
-					<strong>Correct!</strong>
-					{% elif wordle_status == 'lost' %}
-					<strong>Lost. The answer was: {{wordle_answer}}</strong>
-					{% endif %}
 				{% endif %}
 			</div>
 			{% if c.active_flags %}
@@ -874,7 +833,7 @@
 
 	{% if v %}
 		<script src="/static/assets/js/marked.js?v=248"></script>
-		<script src="/static/assets/js/comments_v.js?v=261"></script>
+		<script src="/static/assets/js/comments_v.js?v=262"></script>
 	{% endif %}
 
 	<script src="/static/assets/js/clipboard.js?v=250"></script>