☰

Replay recorder - Bonk.io

Adds a button to record replays from the main menu

当前为 2021-11-24 提交的版本，查看 最新版本。

// ==UserScript==
// @name         Replay recorder - Bonk.io
// @description  Adds a button to record replays from the main menu
// @author       Excigma
// @namespace    https://greasyfork.org/users/416480
// @license      GPL-3.0
// @version      0.0.1
// @match        https://bonk.io/gameframe-release.html
// @require      https://cdn.jsdelivr.net/gh/SMUsamaShah/CanvasRecorder@d4f97159ca53294cc27606144f09a88caaa59065/CanvasRecorder.js
// @grant        GM_addStyle
// @grant        unsafeWindow
// @run-at       document-idle
// ==/UserScript==

// Uses https://github.com/SMUsamaShah/CanvasRecorder

(async () => {
	while (!document.querySelector("#bgreplay canvas")) await new Promise(r => setTimeout(r, 250));
	
	console.log("[Replay Recorder] Found replay canvas");

	const pretty_top_bar = document.getElementById("pretty_top_bar");
	const pretty_top_replay_text = document.getElementById("pretty_top_replay_text");
	const pretty_top_replay_back = document.getElementById("pretty_top_replay_back");
	const pretty_top_replay_next = document.getElementById("pretty_top_replay_next");
	const pretty_top_replay = document.getElementById("pretty_top_replay");
	const pretty_top_replay_record = document.createElement("div");
	const classic_mid = document.getElementById("classic_mid");
	const replay_canvas = document.querySelector("#bgreplay canvas");
	const roomListContainer = document.getElementById("roomListContainer");
	
	// eslint-disable-next-line no-undef
	const recorder = new CanvasRecorder(replay_canvas, 5000000);

	let recording = false;

	pretty_top_replay.appendChild(pretty_top_replay_record);

	pretty_top_replay_record.style.visibility = "hidden";
	pretty_top_replay_record.id = "pretty_top_replay_record";
	pretty_top_replay_record.classList
		.add("pretty_top_button", "niceborderleft", "niceborderright", "niceborderbottom");

	pretty_top_replay_record.addEventListener("click", () => {
		if (roomListContainer.style.visibility === "inherit") return;
		if (recording) return;

		recording = true;
		
		pretty_top_replay_next.click();
		pretty_top_replay_back.click();

		console.log("[Replay Recorder] Started recording");

		classic_mid.style.visibility = "hidden";
		pretty_top_bar.style.visibility = "hidden";

		recorder.start();
	});


	unsafeWindow.anime = new Proxy(unsafeWindow.anime, {
		apply(target, thisArg, args) {
			if (args[0] && recording) {
				if (args[0].alpha === 1 &&
					args[0].autoplay === true &&
					args[0].delay === 0 &&
					args[0].duration === 200 &&
					args[0].easing === "linear") {
						
					if (recording) {
						try {
							console.log("[Replay Recorder] Ending recording");

							recorder.stop();
							recorder.save(`replay-${new Date().toLocaleString().replace(/\\| |:|,/g, "_")}.webm`);

							classic_mid.style.visibility = "inherit";
							pretty_top_bar.style.visibility = "";

							recording = false;
						} catch (er) {
							console.log("[Replay Recorder] An error occurred whilst trying to stop recording:");
							console.error(er);

							classic_mid.style.visibility = "inherit";
							pretty_top_bar.style.visibility = "";
							
							recorder.stop();
							
							recording = false;
							
							alert("Replay Recorder encountered an error, it is recommend that you reload");
						}
					}
				}
			}
			return target.apply(thisArg, args);
		}
	});
	

	new MutationObserver(mutationsList => {
		for (const mutation of mutationsList) {
			if (mutation.target.style.visibility === "hidden") pretty_top_replay_record.style.visibility = "hidden";
			else if (roomListContainer.style.visibility !== "inherit") pretty_top_replay_record.style.visibility = "inherit";
			break;
		}
	}).observe(pretty_top_replay_text, {
		attributes: true,
		attributeFilter: ["style"]
	});

	// eslint-disable-next-line no-undef
	GM_addStyle(`
	#pretty_top_replay_record {
		width: 57px;
		height: 34px;
		background-image: url(../graphics/video-wireless-4.png);
		background-repeat: no-repeat;
		background-position: center;
		position: absolute;
		top: 35px;
		right: -116px;
		background-color: #273749c7;
		visibility: inherit;
	}`);
})();