Add Point Blank theme: a terminal-style contribution wallpaper (#25)

Point Blank (pointblank.club) is a student-run competitive-programming and
FOSS community. Their mark is `<.` ... a blank ... `>` in emerald on black,
the empty space puns on the name.

The theme renders the calendar as one terminal screen (src/lib/pbScene.ts):
the `<. >` mark is the hero above the grid, drawn to the official logo's
measured proportions (open chevrons, a low baseline dot hard after `<`, then
the wide blank to `>`). The contribution grid is the glowing emerald output,
kept at the exact standard tile size and position of every other theme, only
the background and cell style change. Faint CRT scanlines and a centre
vignette give it depth; the two-tone "Point Blank" wordmark sits below.

It is a single full-scene theme (style: "pointblank", no variants), grouped
under Special in the picker with the shape selector hidden. Bundles JetBrains
Mono (OFL) for the terminal wordmark.

Signed-off-by: Govind Pandey <govindup63@gmail.com>
Co-authored-by: Shivansh Pandey <shivanshp987@gmail.com>

Author: govindup63

fonts/JetBrainsMono-Bold.ttf

@@ -14,11 +14,13 @@ const MINECRAFT_DEFAULT = "minecraft-slime";
 const ONEPIECE_DEFAULT = "onepiece-jollyroger";
 const AOT_DEFAULT = "aot-wingsoffreedom";
 const GOT_DEFAULT = "got-targaryen";
+const POINTBLANK_ID = "pointblank";
 const POKEMON_DEFAULT = "pokemon-pikachu";
 const isMinecraftId = (id: string) => id.startsWith("minecraft-");
 const isOnePieceId = (id: string) => id.startsWith("onepiece-");
 const isAotId = (id: string) => id.startsWith("aot-");
 const isGotId = (id: string) => id.startsWith("got-");
+const isPointBlankId = (id: string) => id === POINTBLANK_ID;
 const isPokemonId = (id: string) => id.startsWith("pokemon-");
 
 type Theme = { id: string; name: string; colors: string[]; background: string };
@@ -362,7 +364,7 @@ export default function Home() {
   // single picker tiles that expand to show their variants; everything else stays
   // in the flat theme grid.
   const gridThemes = themes.filter(
-    (t) => !isMinecraftId(t.id) && !isOnePieceId(t.id) && !isAotId(t.id) && !isGotId(t.id) && !isPokemonId(t.id)
+    (t) => !isMinecraftId(t.id) && !isOnePieceId(t.id) && !isAotId(t.id) && !isGotId(t.id) && !isPointBlankId(t.id) && !isPokemonId(t.id)
   );
   const minecraftThemes = themes.filter((t) => isMinecraftId(t.id));
   const onepieceThemes = themes.filter((t) => isOnePieceId(t.id));
@@ -372,10 +374,12 @@ export default function Home() {
   const onepieceSelected = isOnePieceId(selectedTheme);
   const aotSelected = isAotId(selectedTheme);
   const gotSelected = isGotId(selectedTheme);
+  const pointblankSelected = isPointBlankId(selectedTheme);
   const aotGroup = aotThemes.find((t) => t.id === AOT_DEFAULT) ?? aotThemes[0];
   const minecraftGroup = minecraftThemes.find((t) => t.id === MINECRAFT_DEFAULT) ?? minecraftThemes[0];
   const onepieceGroup = onepieceThemes.find((t) => t.id === ONEPIECE_DEFAULT) ?? onepieceThemes[0];
   const gotGroup = gotThemes.find((t) => t.id === GOT_DEFAULT) ?? gotThemes[0];
+  const pointblankTheme = themes.find((t) => isPointBlankId(t.id));
   const pokemonThemes = themes.filter((t) => isPokemonId(t.id));
   const pokemonSelected = isPokemonId(selectedTheme);
   const pokemonGroup = pokemonThemes.find((t) => t.id === POKEMON_DEFAULT) ?? pokemonThemes[0];
@@ -677,7 +681,7 @@ export default function Home() {
 
                 {/* Shape lives with General — it only changes how these solid cells
                     are drawn (box vs circle); pixel-art/full-scene themes ignore it. */}
-                {!minecraftSelected && !onepieceSelected && !aotSelected && !gotSelected && !pokemonSelected && (
+                {!minecraftSelected && !onepieceSelected && !aotSelected && !gotSelected && !pointblankSelected && !pokemonSelected && (
                   <div className="mt-3 flex items-center gap-2.5">
                     <span className="text-[11px] font-medium text-white/30">Shape</span>
                     <div className="inline-flex gap-1 p-1 bg-white/[0.04] border border-white/[0.08] rounded-lg">
@@ -805,6 +809,30 @@ export default function Home() {
                     </button>
                   )}
 
+                  {/* Point Blank — a single full-scene theme (no variants) */}
+                  {pointblankTheme && (
+                    <button
+                      onClick={() => setSelectedTheme(POINTBLANK_ID)}
+                      aria-pressed={pointblankSelected}
+                      aria-label="Point Blank theme"
+                      className={`px-3.5 py-2.5 rounded-lg border transition-all cursor-pointer ${
+                        pointblankSelected
+                          ? "border-white/50 ring-1 ring-white/10"
+                          : "border-white/[0.07] hover:border-white/20"
+                      }`}
+                      style={{ background: pointblankTheme.background }}
+                    >
+                      <div className="flex gap-1 justify-center mb-1.5">
+                        {pointblankTheme.colors.map((c, i) => (
+                          <span key={i} className="w-2 h-2 rounded-full" style={{ background: c }} />
+                        ))}
+                      </div>
+                      <span className="text-[10px] font-semibold uppercase tracking-wider block text-center text-white/60">
+                        Point Blank
+                      </span>
+                    </button>
+                  )}
+
                   {/* Pokémon group */}
                   {pokemonGroup && (
                     <button

fonts/JetBrainsMono-Regular.ttf

@@ -0,0 +1,188 @@
+import { type CanvasRenderingContext2D } from "canvas";
+
+// Full-canvas Point Blank wallpaper, kept minimal. Point Blank (pointblank.club)
+// is a competitive-programming / FOSS community whose mark is `<.` ... a blank ...
+// `>` in emerald on black — the dot is a low period hard after the opening
+// bracket, then a wide blank, then the closing bracket. The mark sits as the hero
+// above the contribution grid, which keeps the standard tile size/position of
+// every other theme; only the background and cell style change.
+
+export interface PbSceneArgs {
+  width: number;
+  height: number;
+  gridLeft: number;
+  gridTop: number;
+  numCols: number;
+  numRows: number;
+  cellSize: number;
+  cellStep: number;
+  cornerRadius: number;
+  levels: number[];
+}
+
+// Brand emerald (#00c853) on near-black, high-contrast dim→bright ramp so busy
+// days read as sharp points of light. The mark is brighter than any tile.
+const BG = "#050807";
+const EMPTY = "rgba(18,34,24,0.6)"; // a day with no commits
+const RAMP = ["#0c4a2a", "#0e8a44", "#00c853", "#5dff9e"]; // levels 0..3
+const RAMP_RGB = [
+  [12, 74, 42],
+  [14, 138, 68],
+  [0, 200, 83],
+  [93, 255, 158],
+];
+const MARK = "#1bff8c";
+const MARK_GLOW = "rgba(40,255,150,0.55)";
+
+function roundRectPath(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  r: number
+) {
+  ctx.beginPath();
+  ctx.roundRect(x, y, w, h, r);
+}
+
+// The `<. >` mark, drawn to the official logo's proportions (measured from the
+// brand asset): chevron width ≈ 0.78× its height; the dot is ≈0.5 a chevron wide,
+// a low baseline period just right of `<`; then a wide blank (~1.9 chevrons) to
+// `>`. Total width ≈ 4.96 chevrons. Soft glow pass then a crisp pass.
+function drawMark(ctx: CanvasRenderingContext2D, cx: number, cy: number, targetW: number) {
+  const cw = targetW / 4.96;        // chevron width
+  const gh = cw / 0.776;            // chevron glyph height
+  const armH = gh / 2;
+  const dotR = cw * 0.25;
+  const gap1 = cw * 0.58;           // `<` to `.`
+  const gap2 = cw * 1.88;           // `.` to `>` — the blank
+  const dotCy = cy + gh * 0.30;     // low, like a period on the baseline
+
+  let x = cx - targetW / 2;
+  const lVertX = x;
+  const lArmX = x + cw;
+  x += cw + gap1;
+  const dotCx = x + dotR;
+  x += dotR * 2 + gap2;
+  const rArmX = x;
+  const rVertX = x + cw;
+
+  const paint = (lineWidth: number, color: string, blur: number) => {
+    ctx.save();
+    if (blur > 0) {
+      ctx.shadowColor = MARK_GLOW;
+      ctx.shadowBlur = blur;
+    }
+    ctx.lineWidth = lineWidth;
+    ctx.lineJoin = "round";
+    ctx.lineCap = "round";
+    ctx.strokeStyle = color;
+    ctx.fillStyle = color;
+    ctx.beginPath(); // `<`
+    ctx.moveTo(lArmX, cy - armH);
+    ctx.lineTo(lVertX, cy);
+    ctx.lineTo(lArmX, cy + armH);
+    ctx.stroke();
+    ctx.beginPath(); // `.`
+    ctx.arc(dotCx, dotCy, dotR, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.beginPath(); // `>`
+    ctx.moveTo(rArmX, cy - armH);
+    ctx.lineTo(rVertX, cy);
+    ctx.lineTo(rArmX, cy + armH);
+    ctx.stroke();
+    ctx.restore();
+  };
+
+  ctx.save();
+  ctx.globalCompositeOperation = "lighter";
+  paint(gh * 0.30, "rgba(27,255,140,0.16)", 0); // soft halo
+  ctx.restore();
+  paint(gh * 0.17, MARK, 20); // crisp
+}
+
+export function renderPbScene(ctx: CanvasRenderingContext2D, a: PbSceneArgs): void {
+  const { width, height, gridLeft, gridTop, numCols, numRows, cellSize, cellStep, cornerRadius, levels } = a;
+  const scale = width / 393;
+
+  // Standard grid geometry — identical to every other theme. Never resized.
+  const gridW = numCols * cellStep - (cellStep - cellSize);
+  const gridH = numRows * cellStep - (cellStep - cellSize);
+  const midY = gridTop + gridH / 2;
+
+  // 1) Terminal black background.
+  ctx.fillStyle = BG;
+  ctx.fillRect(0, 0, width, height);
+
+  // 2) Ambient screen glow pooling behind the grid.
+  ctx.save();
+  ctx.globalCompositeOperation = "lighter";
+  const ambient = ctx.createRadialGradient(width / 2, midY, 0, width / 2, midY, gridW * 0.8);
+  ambient.addColorStop(0, "rgba(0,200,83,0.10)");
+  ambient.addColorStop(0.6, "rgba(0,160,70,0.04)");
+  ambient.addColorStop(1, "rgba(0,0,0,0)");
+  ctx.fillStyle = ambient;
+  ctx.fillRect(0, gridTop - gridH * 0.4, width, gridH * 1.8);
+  ctx.restore();
+
+  // 3) CRT scanlines, very faint, additive emerald.
+  ctx.save();
+  ctx.globalCompositeOperation = "lighter";
+  ctx.fillStyle = "rgba(0,200,83,0.022)";
+  const lineGap = Math.max(3, Math.round(4 * scale));
+  for (let y = 0; y < height; y += lineGap) {
+    ctx.fillRect(0, y, width, Math.max(1, Math.round(scale)));
+  }
+  ctx.restore();
+
+  // 4) The hero mark, centred above the grid, clear of the lock-screen clock.
+  drawMark(ctx, width / 2, height * 0.25, width * 0.46);
+
+  // 5) The grid — your year, the glowing output. Standard size.
+  for (let i = 0; i < levels.length; i++) {
+    const col = i % numCols;
+    const row = Math.floor(i / numCols);
+    const x = gridLeft + col * cellStep;
+    const y = gridTop + row * cellStep;
+    const lv = levels[i];
+
+    if (lv < 0) {
+      roundRectPath(ctx, x, y, cellSize, cellSize, cornerRadius);
+      ctx.fillStyle = EMPTY;
+      ctx.fill();
+      continue;
+    }
+
+    ctx.save();
+    ctx.shadowColor = `rgba(${RAMP_RGB[lv][0]},${RAMP_RGB[lv][1]},${RAMP_RGB[lv][2]},${0.4 + lv * 0.12})`;
+    ctx.shadowBlur = (2 + lv * 2) * scale;
+    roundRectPath(ctx, x, y, cellSize, cellSize, cornerRadius);
+    ctx.fillStyle = RAMP[lv];
+    ctx.fill();
+    ctx.restore();
+
+    if (lv >= 2) {
+      ctx.save();
+      ctx.globalCompositeOperation = "lighter";
+      ctx.globalAlpha = 0.16 * (lv - 1);
+      roundRectPath(ctx, x, y, cellSize, cellSize * 0.42, cornerRadius);
+      ctx.fillStyle = "#cfffe4";
+      ctx.fill();
+      ctx.restore();
+    }
+  }
+
+  // 6) Vignette — center-weighted, so the screen glows from the middle.
+  ctx.save();
+  ctx.globalCompositeOperation = "multiply";
+  const vig = ctx.createRadialGradient(
+    width / 2, height * 0.42, gridW * 0.55,
+    width / 2, height * 0.42, Math.max(width, height) * 0.72
+  );
+  vig.addColorStop(0, "rgba(255,255,255,1)");
+  vig.addColorStop(1, "rgba(10,18,12,1)");
+  ctx.fillStyle = vig;
+  ctx.fillRect(0, 0, width, height);
+  ctx.restore();
+}

src/app/page.tsx

@@ -10,6 +10,7 @@ import type { AttackOnTitanVariant } from "./lib/attackontitan";
 import { renderAotScene } from "./lib/aotScene";
 import { renderGotScene } from "./lib/gotScene";
 import { GAMEOFTHRONES_WORDS, type GameOfThronesVariant } from "./lib/gameofthrones";
+import { renderPbScene } from "./lib/pbScene";
 import { renderPokemonScene } from "./lib/pokemonScene";
 import { type PokemonVariant } from "./lib/pokemon";
 import type { ContributionCalendar } from "./github";
@@ -23,6 +24,9 @@ registerFont(path.join(fontsDir, "Inter-Bold.ttf"), { family: "Inter", weight: "
 // plain `Cinzel` request both resolve to this TTF.
 registerFont(path.join(fontsDir, "Cinzel.ttf"), { family: "Cinzel", weight: "bold" });
 registerFont(path.join(fontsDir, "Cinzel.ttf"), { family: "Cinzel" });
+// JetBrains Mono: the terminal typeface for the Point Blank theme's shell prompt.
+registerFont(path.join(fontsDir, "JetBrainsMono-Regular.ttf"), { family: "JetBrains Mono" });
+registerFont(path.join(fontsDir, "JetBrainsMono-Bold.ttf"), { family: "JetBrains Mono", weight: "bold" });
 
 // The product's own domain, baked into every wallpaper as a watermark.
 export const WATERMARK = "gitwall.space";
@@ -118,6 +122,7 @@ export function renderWallpaper(
   // block edges stay crisp — it's restored before the text below.
   const isAttackOnTitan = theme.style === "attackontitan";
   const isGot = theme.style === "gameofthrones";
+  const isPointBlank = theme.style === "pointblank";
   const isPokemon = theme.style === "pokemon";
 
   if (isAttackOnTitan) {
@@ -135,6 +140,12 @@ export function renderWallpaper(
       width, height, gridLeft, gridTop, numCols, numRows, cellSize, cellStep,
       cornerRadius, levels, variant: theme.variant as GameOfThronesVariant,
     });
+  } else if (isPointBlank) {
+    const levels = recentDays.map((d) => getContributionLevel(d.contributionCount));
+    renderPbScene(ctx, {
+      width, height, gridLeft, gridTop, numCols, numRows, cellSize, cellStep,
+      cornerRadius, levels,
+    });
   } else if (isPokemon) {
     const levels = recentDays.map((d) => getContributionLevel(d.contributionCount));
     renderPokemonScene(ctx, {
@@ -194,6 +205,26 @@ export function renderWallpaper(
     }
   }
 
+  // Point Blank's wordmark, two-toned like the official lockup — "Point" in the
+  // brand emerald, "Blank" muted, in the terminal typeface.
+  if (isPointBlank) {
+    ctx.save();
+    ctx.font = `bold ${Math.round(16 * scale)}px "JetBrains Mono"`;
+    ctx.textAlign = "left";
+    const p1 = "Point ";
+    const p2 = "Blank";
+    const w1 = ctx.measureText(p1).width;
+    const w2 = ctx.measureText(p2).width;
+    const startX = width / 2 - (w1 + w2) / 2;
+    const wy = bottomMid - Math.round(40 * scale);
+    ctx.fillStyle = theme.levels[2];
+    ctx.fillText(p1, startX, wy);
+    ctx.fillStyle = "#7f8f84";
+    ctx.fillText(p2, startX + w1, wy);
+    ctx.restore();
+    ctx.textAlign = "center";
+  }
+
   if (user) {
     ctx.fillStyle = theme.text;
     ctx.font = `bold ${Math.round(13 * scale)}px Inter`;

src/lib/pbScene.ts

@@ -14,7 +14,7 @@ export interface Theme {
   // When set, cells are drawn as pixel-art icons instead of plain boxes/circles,
   // or (attackontitan/gameofthrones) the whole calendar is rendered as one scene.
   // `empty`/`levels` only feed the theme-picker swatch in these modes.
-  style?: "minecraft" | "onepiece" | "attackontitan" | "gameofthrones" | "pokemon";
+  style?: "minecraft" | "onepiece" | "attackontitan" | "gameofthrones" | "pokemon" | "pointblank";
   variant?: MinecraftVariant | OnePieceVariant | AttackOnTitanVariant | GameOfThronesVariant | PokemonVariant;
 }
 
@@ -258,6 +258,20 @@ export const THEMES: Record<string, Theme> = {
     subtext: "#88a4c0",
   },
 
+  // ── Point Blank ───────────────────────────────────────────────────────────
+  // The whole calendar renders as one terminal screen (see src/lib/pbScene.ts):
+  // your year is the code, clasped by the giant `<.>` brackets of the logo, with
+  // a cursor block on today. `empty`/`levels` only feed the theme-picker swatch.
+  pointblank: {
+    name: "Point Blank",
+    style: "pointblank",
+    background: "#04070a",
+    empty: "#1a3022",
+    levels: ["#0d5230", "#10914c", "#00c853", "#5dffa0"],
+    text: "#d6ffe6",
+    subtext: "#6fbf90",
+  },
+
   // Pokémon: a retro Pokédex handheld with a Game Boy-style screen (see
   // src/lib/pokemonScene.ts). `background` is the device colour and `levels`
   // the screen palette — these only feed the picker swatch; the scene renderer