coppersalts HTML5b level editor darkmode

2/7/2026, 3:03:36 PM

スクリプトをインストールするには、Tampermonkey, GreasemonkeyViolentmonkey のような拡張機能のインストールが必要です。

You will need to install an extension such as Tampermonkey to install this script.

スクリプトをインストールするには、TampermonkeyViolentmonkey のような拡張機能のインストールが必要です。

スクリプトをインストールするには、TampermonkeyUserscripts のような拡張機能のインストールが必要です。

このスクリプトをインストールするには、Tampermonkeyなどの拡張機能をインストールする必要があります。

このスクリプトをインストールするには、ユーザースクリプト管理ツールの拡張機能をインストールする必要があります。

(ユーザースクリプト管理ツールは設定済みなのでインストール!)

このスタイルをインストールするには、Stylusなどの拡張機能をインストールする必要があります。

このスタイルをインストールするには、Stylus などの拡張機能をインストールする必要があります。

このスタイルをインストールするには、Stylus tなどの拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

(ユーザースタイル管理ツールは設定済みなのでインストール!)

このスクリプトの質問や評価の投稿はこちら通報はこちらへお寄せください
// ==UserScript==
// @name        coppersalts HTML5b level editor darkmode
// @version     1
// @run-at      document-start
// @author      rssaromeo
// @match       *://coppersalts.github.io/HTML5b/*
// @match       *://127.0.0.1:8086/*HTML5b/index.html*
// @exclude     *://challenges.cloudflare.com/*
// @grant       none
// @license     GPLv3
// @icon        data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMzBweCIgaGVpZ2h0PSIzMHB4IiB2aWV3Qm94PSIwIDAgMzAgMzAiPjxwYXRoIGZpbGw9IiNEODFDMTIiIHN0cm9rZT0ibm9uZSIgZD0iTSAwIDBMIDAgMzAgMzAgMzAgMzAgMCBaIi8+PHBhdGggZmlsbD0iIzkyMTMwQyIgc3Ryb2tlPSJub25lIiBkPSJNIDI1IDMwTCAzMCAyNSAzMCAyMCAyMCAzMCAyNSAzME0gMjAgMEwgMCAyMCAwIDI1IDI1IDAgMjAgME0gMTAgMEwgMCAxMCAwIDE1IDE1IDAgMTAgME0gMCA1TCA1IDAgMCAwIDAgNU0gMzAgMTVMIDMwIDEwIDEwIDMwIDE1IDMwIDMwIDE1TSAzMCA1TCAzMCAwIDAgMzAgNSAzMCAzMCA1IFoiLz48L3N2Zz4=
// @description 2/7/2026, 3:03:36 PM
// @namespace https://greasyfork.org/users/1184528
// ==/UserScript==

const origFillRect = CanvasRenderingContext2D.prototype.fillRect

const LEVELS = ["#999", "#777", "#555", "#444", "#222", "#000"]

const THRESHOLDS = [100, 1_000, 10_000, 50_000, 200_000]

function getLevel(area) {
  for (let i = 0; i < THRESHOLDS.length; i++) {
    if (area < THRESHOLDS[i]) return i
  }
  return 5
}

const maxLevel = 5

CanvasRenderingContext2D.prototype.fillRect = function (x, y, w, h) {
  const area = Math.abs(w * h)
  const canvasArea = this.canvas.width * this.canvas.height

  const ratio = area / canvasArea
  const level = Math.min(maxLevel, Math.floor(ratio * (maxLevel + 1)))

  const prev = this.fillStyle
  this.fillStyle = LEVELS[level]

  const r = origFillRect.call(this, x, y, w, h)
  this.fillStyle = prev
  return r
}