Merge pull request #4 from mdguo/main

public/templates/vc_popup.html

@@ -53,6 +53,7 @@
 		</div>
 
 		<div id="me_vc_results" class="me_hidden">
+			<div class="me_exit_button_wrapper"><span id="me_exit_vc_popup">❌</span></div>
 			<p>To redo this form, refresh the page.</p>
 			<textarea></textarea>
 		</div>

src/background/requests/getPageData.ts

@@ -6,42 +6,49 @@ export async function getPageData(url: string) {
 	if (response.status !== 200) return null;
 	const html = await response.text();
 
+	const qs = new URLSearchParams(url);
+	const start = parseInt(qs.get('start') ?? '0');
+
 	const $ = load(html);
 	const title = $('h2').first().text();
-	const pagination = $('.pagination:first > ul > li');
+
+	// what pagination looks like in view=print mode
+	// 'Page 7 of 9'
+	const pagination = $('.page-number:first > strong');
 
 	// Check page numbers
-	let largestPageNumber: number | undefined;
-	let activePageNumber: number | undefined;
+	let largestPageNumber: number = 1;
+	let activePageNumber: number = 1;
 
-	// currently threads with only 1 page is not handled
 	pagination.each((_index, element) => {
 		const text = $(element).text();
-		const active = $(element).hasClass('active');
 		const num = parseInt(text);
+		const active = _index === 0;
 		if (isNaN(num)) return;
 		if (num.toString() !== text) return;
-		if (!largestPageNumber || num > largestPageNumber) largestPageNumber = num;
-		if (active) activePageNumber = num;
+		if (active) {
+			activePageNumber = num;
+		} else {
+			largestPageNumber = num;
+		}
 	});
 
 	const votes: Vote[] = [];
 
 	$('.post').each((_index, element) => {
-		// This is a pretty dodgy selector but works for now
-		// Demonstrating how you can check through each post
-		const post = $(element).find('.inner > .postprofile > dt:nth-child(2) > a').text();
+		const author = $(element).find('.author > strong').text();
 
-		const postNumberRaw = $(element).find('.author > a > .post-number-bolded').text().slice(1);
-		const postNumber = parseInt(postNumberRaw);
+		// post number is not returned in the html response anymore
+		// can be inferred from offset + index
+		const postNumber = start + _index;
 		const posts = new Map<number, Vote[]>();
 
 		$(element)
-			.find('.inner > .postbody > div > .content > .bbvote')
+			.find('.content > .bbvote')
 			.each((_index, element) => {
 				const array = posts.get(postNumber) ?? [];
 				array.push({
-					author: post,
+					author,
 					post: postNumber,
 					index: array.length,
 					vote: $(element).text(),
@@ -57,8 +64,8 @@ export async function getPageData(url: string) {
 
 	return {
 		title,
-		lastPage: largestPageNumber || 1,
-		currentPage: activePageNumber || 1,
+		lastPage: largestPageNumber,
+		currentPage: activePageNumber,
 		votes,
 	};
 }

src/content/components/modal.ts

@@ -111,7 +111,7 @@ function addFileUploadLogic(page: JQuery<HTMLElement>) {
 				const json = convertYamlToJson(yaml);
 				if (!isGameDefinition(json)) return console.error('Invalid game definition.');
 
-				const startPost = json.startAt ?? 0;
+				const startPost = (json.startAt || json.startFrom) ?? 0;
 				const endPost = json.endAt ?? undefined;
 
 				$('#me_start').val(startPost);

src/content/thread.ts

@@ -10,14 +10,16 @@ export type PageQuery = {
 export const BASE_THREAD_URL = 'https://forum.mafiascum.net/viewtopic.php?';
 
 export async function getPageData(query: PageQuery) {
-	const params = new Map<string, string>();
+	const params = new URLSearchParams();
 	params.set('t', query.threadId);
 	params.set('ppp', query.take.toString());
 	params.set('start', query.skip.toString());
+	// reduces response payload size by over 90%!
+	// simplifies the html DOM tree
+	// removes scripts and css which we don't care about
+	params.set('view', 'print');	
 
-	let url = BASE_THREAD_URL;
-	for (const [key, value] of params) url += `${key}=${value}&`;
-	if (url[url.length - 1] === '&') url = url.slice(0, -1);
+	const url = BASE_THREAD_URL + params.toString();
 
 	try {
 		const pageData = await sendBackgroundRequest({ action: 'getPageData', url: url });
@@ -29,7 +31,7 @@ export async function getPageData(query: PageQuery) {
 	}
 }
 
-export async function getThreadData(threadId: string) {
+export async function getThreadData(threadId: string, startFrom: number) {
 	const throwErr = (...values: string[]) => {
 		console.error(...values);
 		return null;
@@ -44,7 +46,8 @@ export async function getThreadData(threadId: string) {
 		const pageData = await getPageData({
 			threadId,
 			take: 200,
-			skip: loopIndex * 200,
+			// skips fetching posts we don't need to parse
+			skip: loopIndex * 200 + startFrom,
 		});
 
 		if (!pageData) return throwErr('Could not fetch page data.');

src/content/votecount.ts

@@ -54,14 +54,14 @@ export async function startVoteCount(gameDefinition: GameDefinition | null) {
 	const threadId = params.get('t');
 	if (!threadId) return error('Could not get thread id.');
 
-	const threadData = await getThreadData(threadId);
+	const startFrom = gameDefinition?.startAt ?? 0;
+	const endAt = gameDefinition?.endAt;
+
+	const threadData = await getThreadData(threadId, startFrom);
 	if (!threadData) return error('Could not fetch page data.');
 
 	const fetchTime = Date.now();
 
-	const startFrom = gameDefinition?.startAt ?? 0;
-	const endAt = gameDefinition?.endAt;
-
 	const currentVotes = threadData.votes
 		.filter((vote) => {
 			if (vote.post === undefined) return false;
@@ -146,7 +146,13 @@ export async function startVoteCount(gameDefinition: GameDefinition | null) {
 	const errors: number[] = [];
 
 	for (const vote of currentVotes) {
-		const { author, post, target, type, validity } = vote;
+		const { author, post, type, validity } = vote;
+		let { target } = vote;
+
+		// Check if target has been replaced
+		if(target && gameDefinition.replacements?.[target]) {
+			target = gameDefinition.replacements?.[target][0];
+		}
 
 		// Check if one of the wagons has reached a majority
 		let isMajorityReached: boolean | undefined;

src/styles/votecounter_modal.scss

@@ -162,6 +162,10 @@
 		border-radius: 0.5rem;
 		width: auto;
 	}
+
+	.me_exit_button_wrapper {
+		text-align: right;
+	}
 }
 
 .me_hidden {