Forem: biwu he

I Built a Cyberpunk Color Memory Game — Here's How It Works

biwu he — Tue, 07 Apr 2026 15:17:46 +0000

I've always been fascinated by how differently people perceive color. So I built DialIn — a cyberpunk-themed color memory game that tests your ability to remember and reproduce colors.

How It Works

The concept is deceptively simple:

See a color flashed on screen
Remember it
Recreate it using a color picker
Get scored on how close your guess is

You play 5 rounds per game. The better you score, the higher your level climbs. Struggle too much? You drop down. It's addictive in that "just one more try" kind of way.

The Scoring System

This is where it gets interesting. I didn't want a simple "close or far" metric. I used CIEDE2000 — the same color difference algorithm used in professional color science.

The scoring formula is an S-curve:

score = 10 / (1 + (deltaE / 25.25) ** 1.55)

Where deltaE is the CIEDE2000 color difference between the original and your guess. This means:

deltaE < 5 → You get 8-10 points (excellent match)
deltaE ~ 25 → You get ~5 points (decent)
deltaE > 50 → You get 1-2 points (way off)

There's also a hue bonus — if your hue is within 30° of the original, you get an extra 0.5 points. This rewards getting the "right color" even if saturation or brightness is off.

Game Modes

🎨 Free Play

Practice anytime, 5 rounds, automatic difficulty scaling through 5 levels. Higher levels introduce distractor colors to mess with your memory.

☀️ Daily Challenge

Everyone gets the same 5 colors each day. Compete on a global leaderboard. Come back daily to build your streak.

⚔️ Color Duel

Challenge a friend! Create a duel, share the link or a 6-character code. Both players face the same colors and compare scores.

Color Personality

After each game, you get assigned a "color personality" based on your bias patterns:

Type	Description
🎯 Precision Eye	Near-perfect color memory
🌈 Color Dreamer	Tends toward more vivid, saturated colors
🌙 Shadow Watcher	Prefers darker shades
☀️ Light Chaser	Draws toward brighter tones
🔥 Warm Soul	Biased toward warm hues
🧊 Cool Mind	Leans toward cool hues
🎲 Free Spirit	No consistent pattern — unpredictable!

It tracks your bias history across games, so your personality evolves as you play.

Tech Stack

I deliberately kept it simple:

Frontend: Vanilla HTML + CSS + JavaScript (no framework)
Styling: CSS custom properties + Tailwind-inspired utility classes
Scoring: CIEDE2000 implemented in pure JS
Backend: Cloudflare Workers (API routes)
Database: Cloudflare D1 (SQLite) for Daily leaderboard
Hosting: Cloudflare Pages
Domain: dialin.cc

The entire frontend is under 50KB (unminified). No build step, no bundler, no node_modules. Just files served directly.

Why No Framework?

For a game like this, the DOM interactions are straightforward — show/hide sections, update scores, render color blocks. A framework would add complexity without clear benefit. The codebase is clean enough that vanilla JS is actually easier to reason about.

Design Choices

Cyberpunk Aesthetic

The dark theme uses CSS custom properties with neon accents (cyan, pink, purple). There's a Matrix-rain background effect and scanline overlay. The light theme is available for those who prefer it.

Mobile-First

The game works equally well on phone and desktop. On mobile, the nav bar collapses to a "⋯" menu. Touch-friendly color picker with large hit targets.

i18n

Full English and Chinese support. Language detection from navigator.language, with manual toggle.

What I Learned

1. `navigator.share` Is Not Mobile-Only

Desktop Chrome now supports the Web Share API. If you're using it to detect mobile, you'll have a bad time. Use userAgent or matchMedia instead.

2. Clipboard API Is Unreliable in Embedded Browsers

WeChat, Feishu, and other embedded browsers don't support navigator.clipboard. The old-school textarea + document.execCommand('copy') is still the most reliable cross-browser copy method.

3. CIEDE2000 Is Worth It

Simple RGB distance produces weird results — colors that look similar to humans score poorly, and vice versa. CIEDE2000 actually matches human perception. The math is complex but there are good JS implementations available.

4. Cloudflare Pages + D1 Is a Sweet Spot

For a small project like this, having a SQLite database at the edge with zero configuration is amazing. The Workers API routes are just JavaScript functions.

What's Next

[ ] More detailed stats and progress tracking
[ ] Duel tournament mode
[ ] Custom color themes
[ ] Accessibility improvements (colorblind mode?)

Try It

dialin.cc — No signup required, works on any device.

I'd love to hear your feedback! What's your color personality? 🎨

Follow me on X/Twitter for updates.

I Built a Free Unicode Font Generator with Zero Server Costs — Here is How

biwu he — Sun, 05 Apr 2026 14:03:41 +0000

Have you ever wanted to generate fancy text for your Instagram bio, Twitter handle, or TikTok username? There are tons of font generator websites out there, but most of them either:

📵 Require signup
💰 Charge for basic features
🐢 Run slow on free hosting
📱 Don't work well on mobile

So I built Font Generator Free — a completely free, no-signup-required Unicode font generator that works seamlessly on all devices.

In this post, I'll walk you through the tech stack, key challenges, and how you can build something similar.

The Problem

I wanted to create stylish text for my social media profiles. Most tools I found had one of these issues:

Limited font styles (maybe 5-10)
Required account creation
Watermarks on exports
Slow or buggy
No batch conversion

I figured: how hard can it be? Let me build one myself.

The Solution

![Font Generator Interface]

Key Features

30+ Font Styles — Bold, Italic, Bubble, Gothic, Cursive, Zalgo, and more
Two Modes — Single text or batch conversion
Multiple Export Formats — TXT, HTML, ZIP, PNG, PDF
Pro Features — Unlimited saved combos, cloud sync, history
Zero Cost — Totally free to run

Tech Stack

Here's what makes this all possible without paying for servers:

Frontend

Pure HTML + JavaScript (no framework overhead)
Tailwind CSS via CDN (fast prototyping)
JSZip for client-side ZIP generation
html-to-image for PNG exports

Backend

Cloudflare Workers — Serverless edge functions
Cloudflare D1 — SQLite database (100MB free)
Cloudflare Pages — Static site hosting (free)

Total monthly cost: $0 ☁️

How It Works

1. Unicode Font Mapping

The core of a font generator is Unicode character mapping. Each "font" is actually a different Unicode block:

Regular:    ABCDEFGHIJKLMNOPQRSTUVWXYZ
Bold:      𝐀𝐁𝐂𝐃𝐄𝐅𝐆𝐇𝐈𝐉𝐊𝐋𝐌𝐍𝐎𝐏𝐐𝐑𝐒𝐓𝐔𝐕𝐖𝐗𝐘𝐙
Bubble:    ⒶⒷⒸⒹⒺⒻⒼⒽⒾⒿⓀⓁⓂⓃⓄⓅⓆⓇⓈⓉⓊⓋⓌⓍⓎⓏ
Gothic:    𝔄𝔅𝔇𝔈𝔉𝔊𝔋𝔌𝔎𝔏𝔐𝔑𝔒𝔓𝔔𝔕𝔖𝔗𝔘𝔙𝔚𝔛𝔜𝔷

Here's a simplified version of how I map characters:

const boldMap = {
  'A': '𝐀', 'B': '𝐁', 'C': '𝐂', // ... all A-Z, a-z, 0-9
};

function convertToBold(text) {
  return text.split('').map(char => boldMap[char] || char).join('');
}

2. Batch Mode with Client-Side Processing

For batch conversion, I process everything in the browser:

function batchConvert(texts, fonts) {
  const results = [];

  for (const text of texts) {
    for (const font of fonts) {
      results.push({
        source: text,
        font: font.name,
        output: font.convert(text)
      });
    }
  }

  return results;
}

This keeps the backend simple — it only needs to handle user authentication and saving combos.

3. Cloudflare Workers API

The backend is a simple Worker handling user authentication and data storage:

export default {
  async fetch(request, env) {
    const url = new URL(request.url);

    if (url.pathname === '/api/combo/save') {
      // Save user's font combo to D1
      const { google_sub, name, fonts } = await request.json();
      await env.DB.prepare(
        `INSERT INTO font_combos (google_sub, name, fonts) VALUES (?, ?, ?)`
      ).bind(google_sub, name, JSON.stringify(fonts)).run();

      return new Response(JSON.stringify({ success: true }));
    }
  }
};

4. PayPal Integration

For Pro subscriptions, I integrated PayPal. The key part is webhook signature verification to prevent fake payments:

async function verifyWebhookSignature(request, env) {
  // Extract PayPal headers
  const transmissionId = request.headers.get('PAYPAL-TRANSMISSION-ID');
  const certUrl = request.headers.get('PAYPAL-CERT-URL');
  const signature = request.headers.get('PAYPAL-TRANSMISSION-SIG');

  // Verify certificate comes from PayPal
  if (!certUrl.endsWith('.paypal.com')) {
    return { valid: false };
  }

  // Download cert and verify RSA signature
  // ... signature verification logic

  return { valid: true };
}

Challenges & Solutions

Challenge 1: Unicode Ranges

Some Unicode blocks aren't continuous! For example, Mathematical Bold Italic:

// Wrong: Assumes continuous range
const start = 0x1D400;
const boldItalic = {};
for (let i = 0; i < 26; i++) {
  boldItalic[base[i]] = String.fromCodePoint(start + i); // ❌ Wrong codes!
}

Solution: Manually verify each character's code point. I had to fix several fonts that were using incorrect ranges.

Challenge 2: Composite Characters

Fonts like "Dot" use combining characters (like i + combining dot):

// Wrong: Array.from splits the composite character
Array.from('ȧḃċḋ'); // ['a', '̇', 'b', '̇', ...] ❌

// Correct: Build manually
const dotMap = {};
for (const char of 'abcdefghijklmnopqrstuvwxyz') {
  dotMap[char] = char + '\u0307'; // Add combining dot
}

Challenge 3: Monthly Renewal Logic

When a user renews their monthly subscription, I needed to extend from their current expiry date (not reset to 30 days):

async function calculateExpiry(env, googleId, planType, now) {
  if (planType === 'lifetime') return null; // Never expires

  const user = await env.DB.prepare(
    'SELECT subscription_expires_at FROM users WHERE google_id = ?'
  ).bind(googleId).first();

  if (user?.subscription_expires_at > now) {
    // Extend from current expiry (don't lose remaining days)
    return user.subscription_expires_at + 30 * 24 * 3600;
  }

  // Start fresh
  return now + 30 * 24 * 3600;
}

Deployment

The deployment is surprisingly simple:

Cloudflare Pages — Connects to GitHub, auto-deploys on push
Cloudflare Workers — wrangler deploy pushes the API
Cloudflare D1 — Creates database with one command

# Deploy worker
CLOUDFLARE_API_TOKEN=xxx npx wrangler deploy

# Create database
npx wrangler d1 create font-generator-db

Results

After launching:

📈 ~500 daily visitors in first week
🔒 0 security incidents
💰 $0 hosting costs
😊 Users love the simplicity

What's Next

Potential improvements:

Add more Unicode blocks (Emoji, symbols)
Multi-language support
User-generated font presets
Social sharing features

Conclusion

You don't need expensive servers to build useful web tools. Modern edge platforms like Cloudflare Workers can handle quite a bit of traffic for free. The key is:

Keep the frontend static and client-side
Use edge functions for API logic
Choose the right database for your use case

If you're building something similar, I'd love to hear about it. Feel free to ask questions in the comments!

Links:

🌐 Live site: https://fontgeneratorfree.online
💻 GitHub: https://github.com/hebiwu007/font-generator-free

Forem: biwu he

I Built a Cyberpunk Color Memory Game — Here's How It Works

How It Works

The Scoring System

Game Modes

🎨 Free Play

☀️ Daily Challenge

⚔️ Color Duel

Color Personality

Tech Stack

Why No Framework?

Design Choices

Cyberpunk Aesthetic

Mobile-First

i18n

What I Learned

1. navigator.share Is Not Mobile-Only

2. Clipboard API Is Unreliable in Embedded Browsers

3. CIEDE2000 Is Worth It

4. Cloudflare Pages + D1 Is a Sweet Spot

What's Next

Try It

I Built a Free Unicode Font Generator with Zero Server Costs — Here is How

The Problem

The Solution

Key Features

Tech Stack

Frontend

Backend

How It Works

1. Unicode Font Mapping

2. Batch Mode with Client-Side Processing

3. Cloudflare Workers API

4. PayPal Integration

Challenges & Solutions

Challenge 1: Unicode Ranges

Challenge 2: Composite Characters

Challenge 3: Monthly Renewal Logic

Deployment

Results

What's Next

Conclusion

1. `navigator.share` Is Not Mobile-Only