Implement basic functionality

Author: haykam821

.gitignore

@@ -128,3 +128,5 @@ dist
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
+
+output/

package.json

@@ -0,0 +1,47 @@
+{
+	"name": "@snakeroom/field-screenshot",
+	"version": "1.0.0",
+	"private": true,
+	"description": "Captures images of r/Field.",
+	"main": "./src/index.js",
+	"type": "module",
+	"scripts": {
+		"dev": "node --watch .",
+		"lint": "eslint \"./**/*.js\" --ignore-path .gitignore",
+		"start": "node ."
+	},
+	"keywords": [
+		"field",
+		"reddit",
+		"image",
+		"canvas"
+	],
+	"author": "haykam821",
+	"license": "MIT",
+	"dependencies": {
+		"@devvit/protos": "^0.11.11",
+		"canvas": "^3.1.0",
+		"debug": "^4.4.0",
+		"supports-color": "^10.0.0"
+	},
+	"devDependencies": {
+		"@types/debug": "^4.1.12",
+		"@types/node": "^22.13.17",
+		"eslint": "^8.57.1",
+		"eslint-config-haykam": "^1.24.0"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/Snakeroom/Field-Capture.git"
+	},
+	"bugs": {
+		"url": "https://github.com/Snakeroom/Field-Capture/issues"
+	},
+	"homepage": "https://github.com/Snakeroom/Field-Capture#readme",
+	"eslintConfig": {
+		"extends": "eslint-config-haykam",
+		"parserOptions": {
+			"sourceType": "module"
+		}
+	}
+}

src/config.js

@@ -0,0 +1,64 @@
+import { decodeGrpc, encodeGrpc } from "./utils/grpc.js";
+
+import { CustomPostDefinition } from "@devvit/protos";
+import { USER_AGENT } from "./utils/constants.js";
+import { log } from "./utils/log.js";
+
+const RENDER_POST_CONTENT_URL = "https://devvit-gateway.reddit.com/devvit.reddit.custom_post.v1alpha.CustomPost/RenderPostContent";
+const GRPC_CONTENT_TYPE = "application/grpc-web+proto";
+
+const GRPC_MESSAGE_HEADER = "grpc-message";
+
+export async function getFieldConfig(installation, postId, cookie) {
+	log("fetching post data for installation %s", installation);
+
+	const body = encodeGrpc(CustomPostDefinition.methods.renderPostContent.requestType, {
+		events: [],
+		props: {
+			postId,
+		},
+	});
+
+	const response = await fetch(RENDER_POST_CONTENT_URL, {
+		body,
+		headers: {
+			"content-type": GRPC_CONTENT_TYPE,
+			cookie,
+			"devvit-installation": installation,
+			"user-agent": USER_AGENT,
+		},
+		method: "post",
+	});
+
+	if (!response.ok) {
+		throw new Error("Failed to fetch post data: " + response.statusText);
+	}
+
+	const data = await response.arrayBuffer();
+
+	if (data.byteLength === 0) {
+		if (response.headers.has(GRPC_MESSAGE_HEADER)) {
+			throw new Error("Failed to fetch post data: " + response.headers.get(GRPC_MESSAGE_HEADER));
+		} else {
+			throw new Error("No post data found");
+		}
+	}
+
+	log("fetched post data");
+
+	const buffer = Buffer.from(data);
+	const post = decodeGrpc(CustomPostDefinition.methods.renderPostContent.responseType, buffer);
+
+	const state = Object.values(post.state).find(statex => {
+		return statex?.value?.appConfig !== undefined;
+	});
+
+	const config = state?.value;
+
+	if (!config) {
+		throw new Error("No config found in post data");
+	}
+
+	log("decoded config");
+	return state?.value;
+}

src/index.js

@@ -0,0 +1,33 @@
+import { FIELDS, OUTPUT_DIR } from "./utils/constants.js";
+
+import { createWriteStream } from "node:fs";
+import { getFieldConfig } from "./config.js";
+import { log } from "./utils/log.js";
+import { mkdir } from "node:fs/promises";
+import { renderPartition } from "./render.js";
+
+await mkdir(OUTPUT_DIR, {
+	recursive: true,
+});
+
+for (const { cookie, id, installation, overrideConfig, post } of FIELDS) {
+	try {
+		const config = overrideConfig ?? await getFieldConfig(installation, post, cookie);
+
+		const subreddit = config.level.subredditId;
+		const name = config.level.title;
+
+		const challenge = config.challengeNumber;
+		const sequence = config.initialMapKey.sequenceNumber;
+
+		const totalSize = config.challengeConfig.size;
+		const partitionSize = config.challengeConfig.partitionSize;
+
+		const canvas = await renderPartition(totalSize, partitionSize, subreddit, challenge, sequence, name);
+
+		const writeStream = createWriteStream(`${OUTPUT_DIR}/${id}.png`);
+		canvas.createPNGStream().pipe(writeStream);
+	} catch (error) {
+		log("failed to capture screenshot for %s", installation, error);
+	}
+}

src/partition.js

@@ -0,0 +1,31 @@
+import { USER_AGENT } from "./utils/constants.js";
+import { log } from "./utils/log.js";
+
+function getPartitionName(partitionX, partitionY, subreddit, challenge, sequence) {
+	return `[${subreddit} / challenge ${challenge} / (${partitionX}, ${partitionY}) @ ${sequence}]`;
+}
+
+function getPartitionUrl(partitionX, partitionY, subreddit, challenge, sequence) {
+	return `https://webview.devvit.net/a1/field-app/px_${partitionX}__py_${partitionY}/${subreddit}/p/${challenge}/${sequence}`;
+}
+
+export async function fetchPartition(partitionX, partitionY, subreddit, challenge, sequence) {
+	const name = getPartitionName(partitionX, partitionY, subreddit, challenge, sequence);
+	const url = getPartitionUrl(partitionX, partitionY, subreddit, challenge, sequence);
+
+	const response = await fetch(url, {
+		headers: {
+			"user-agent": USER_AGENT,
+		},
+	});
+
+	if (!response.ok) {
+		log("partition %s is blank", name);
+		return null;
+	}
+
+	log("fetched partition %s", name);
+
+	const blob = await response.blob();
+	return blob.bytes();
+}

src/render.js

@@ -0,0 +1,54 @@
+import { log, statsLog } from "./utils/log.js";
+
+import { createCanvas } from "canvas";
+import { decodePartition } from "./utils/decode.js";
+import { fetchPartition } from "./partition.js";
+import { getCellColor } from "./utils/color.js";
+
+export async function renderPartition(totalSize, partitionSize, subreddit, challenge, sequence, name) {
+	log("capturing screenshot for %s", name);
+
+	const partitionCount = Math.floor(totalSize / partitionSize);
+
+	const canvas = createCanvas(totalSize, totalSize);
+	const context = canvas.getContext("2d");
+
+	const imageData = context.createImageData(partitionSize, partitionSize);
+
+	let total = 0;
+	let bans = 0;
+
+	for (let partitionX = 0; partitionX < partitionCount; partitionX += 1) {
+		for (let partitionY = 0; partitionY < partitionCount; partitionY += 1) {
+			const partition = await fetchPartition(partitionX, partitionY, subreddit, challenge, sequence);
+
+			if (partition !== null) {
+				const cells = decodePartition(partition);
+
+				let index = 0;
+
+				for (const cell of cells) {
+					const color = getCellColor(cell);
+
+					imageData.data[index * 4] = (color >> 16) & 0xFF;
+					imageData.data[index * 4 + 1] = (color >> 8) & 0xFF;
+					imageData.data[index * 4 + 2] = color & 0xFF;
+					imageData.data[index * 4 + 3] = 255;
+
+					index += 1;
+					total += 1;
+
+					if (cell?.ban) {
+						bans += 1;
+					}
+				}
+
+				context.putImageData(imageData, partitionX * partitionSize, partitionY * partitionSize);
+			}
+		}
+	}
+
+	statsLog("%s% of claimed cells on %s are bans", (bans / Math.max(total, 1) * 100).toFixed(2), name);
+
+	return canvas;
+}

src/utils/color.js

@@ -0,0 +1,26 @@
+const TEAM_COLORS = [
+	/* eslint-disable no-inline-comments */
+	0xCC3A83, // Flamingo
+	0x6B92F2, // Juicebox
+	0xEA6126, // Lasagna
+	0xEDA635, // Sunshine
+	/* eslint-enable no-inline-comments */
+];
+
+const BAN_COLOR = 0x7DFF00;
+const UNCLAIMED_COLOR = 0x000000;
+
+/**
+ * Gets an RGB color representing a given cell.
+ * @param {import("./decode").Cell | null} cell the cell to get the color for
+ * @returns {number} the color
+ */
+export function getCellColor(cell) {
+	if (cell?.ban) {
+		return BAN_COLOR;
+	} else if (cell?.team !== undefined) {
+		return TEAM_COLORS[cell.team];
+	}
+
+	return UNCLAIMED_COLOR;
+}

src/utils/constants.js

@@ -0,0 +1,37 @@
+export const OUTPUT_DIR = "./output";
+
+export const USER_AGENT = "Field Screenshot v1.0.0";
+
+/**
+ * @typedef {Object} FieldSource
+ * @property {string?} cookie the cookies to fetch the post with
+ * @property {string} id the id to write the image to
+ * @property {string} installation the Devvit installation ID
+ * @property {unknown} overrideConfig the config to override the fetched config with
+ * @property {string} post the post ID
+ */
+
+/**
+ * @type {FieldSource[]}
+ */
+export const FIELDS = [{
+	cookie: process.env.FIELD_COOKIE,
+	id: "field",
+	installation: "d705e66b-39d3-4568-b08b-b11655c064c3",
+	post: "t3_1jkhl1m",
+}, {
+	cookie: process.env.BANNED_FIELD_COOKIE,
+	id: "bannedfield",
+	installation: "076afb2c-8aa3-4bd8-8d68-973c0169974a",
+	post: "t3_1jkhly8",
+}, {
+	cookie: process.env.BANANA_FIELD_COOKIE,
+	id: "bananafield",
+	installation: "233820d3-60e3-48de-94ee-8853227c003c",
+	post: "t3_1jkhmx9",
+}, {
+	cookie: process.env.WHAT_IS_FIELD_COOKIE,
+	id: "whatisfield",
+	installation: "8b81865e-e76b-4d51-b1d9-30e4043e0a38",
+	post: "t3_1jmw52r",
+}];