Turdle: A Wordle Clone With Animated Turtles

Mon, Feb 28, 2022
1mo ago
5m read

	Timeline:	Jan 27-29, 2022
	Languages Used:	TypeScript, React, CSS, HTML
	Role:	Indie Game Dev, UI/UX Designer
	Reason:	To create a unique Wordle variant with mathematical puzzle generation

Visit the Website View Source Code

Overview

Turdle is a Wordle clone I created during the 2022 Global Game Jam weekend, capitalizing on the world’s Wordle obsession at the time. Instead of guessing words, players guess sequences of animated turtles, each with different colors and animation frames. The game features a mathematically generated puzzle system that guarantees unique daily challenges for 42 years.

🕹️ Global Game Jam 39

The Challenge: 42 Years of Unique Puzzles

The most technically challenging aspect of Turdle was creating a system that generates unique daily puzzles without hardcoding a dictionary like the original Wordle. I needed to mathematically generate all possible valid turtle animation sequences and ensure each day had a different puzzle.

The Permutation Algorithm

The core innovation lies in the generateAllValidGuesses() function in src/constants/validGuesses.ts:

 1function generateAllValidGuesses(): string[] {
 2  let guesses: string[] = []
 3  const sequences = generateStartingSequences()
 4  for (let i = sequences.length - 1; i >= 0; i--) {
 5    let sequence = shiftArrayRight(sequences[i])
 6    for (let j = 0; j < NUM_FRAMES; j++) {
 7      const wordGuess = sequence.reduce((prefix, l) => prefix + l)
 8      if (!guesses.includes(wordGuess)) {
 9        guesses.push(wordGuess)
10      }
11      sequence = shiftArrayRight(sequence)
12    }
13  }
14  guesses = shuffle(guesses, xor(1))
15  return guesses
16}

Turtle Animation System

Each turtle has:

5 animation frames (1-5)
5 colors (White, Blue, Purple, Red, Green)
25 possible combinations per position

The system generates all valid 5-turtle sequences where:

Each turtle has a unique frame number
Colors can repeat but frames cannot
Sequences are rotated and shuffled to create variety

This generates exactly 15,625 unique puzzles - enough for 42.8 years of daily games!

Turdle game interface showing gameplay instructions — How to play Turdle

Features

Features tagged with 🖌️ are ones I created beyond the original repository I forked.

Accessibility Features

🖌️ High Contrast Mode: Enhanced visibility for colorblind players
Dark/Light Theme: Automatic system preference detection
Keyboard Navigation: Full keyboard support for accessibility

Fun Extras

🖌️ Meme Mode: Switch from turtles to 💩 emojis for a humorous twist
🖌️ Hard Mode: Prevents selecting previously incorrect turtle combinations
Statistics Tracking: Persistent game statistics with offline storage

PWA Capabilities

🖌️ Offline Play: Full offline functionality via service workers
🖌️ Mobile Installation: Can be installed as a native app on mobile devices
Cross-Device Sync: Statistics can be transferred between devices
🖌️ Background Updates: Automatic updates when online
Archive Access: Play previous daily puzzles through the calendar feature

How I Support Offline Play

The PWA functionality is powered by a comprehensive service worker that handles offline caching, background updates, and app shell routing:

 1// src/service-worker.ts
 2import { clientsClaim } from 'workbox-core'
 3import { ExpirationPlugin } from 'workbox-expiration'
 4import { createHandlerBoundToURL, precacheAndRoute } from 'workbox-precaching'
 5import { registerRoute } from 'workbox-routing'
 6import { StaleWhileRevalidate } from 'workbox-strategies'
 7
 8declare const self: ServiceWorkerGlobalScope
 9
10clientsClaim()
11
12// Precache all assets generated by build process
13precacheAndRoute(self.__WB_MANIFEST)
14
15// App Shell routing for SPA navigation
16const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$')
17registerRoute(
18  ({ request, url }: { request: Request; url: URL }) => {
19    if (request.mode !== 'navigate') return false
20    if (url.pathname.startsWith('/_')) return false
21    if (url.pathname.match(fileExtensionRegexp)) return false
22    return true
23  },
24  createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html')
25)
26
27// Runtime caching for images
28registerRoute(
29  ({ url }) => url.origin === self.location.origin && url.pathname.endsWith('.png'),
30  new StaleWhileRevalidate({
31    cacheName: 'images',
32    plugins: [new ExpirationPlugin({ maxEntries: 50 })],
33  })
34)
35
36// Handle skip waiting for updates
37self.addEventListener('message', (event) => {
38  if (event.data && event.data.type === 'SKIP_WAITING') {
39    self.skipWaiting()
40  }
41})

Technical Implementation

Core Technologies

React 17 with TypeScript
Tailwind CSS for styling
Workbox for service worker management
Date-fns for date calculations
Grapheme Splitter for Unicode support

Key Components

Permutation Generator: Mathematical algorithm for unique puzzles
Animation System: CSS-based turtle animations
State Management: Local storage with encryption
PWA Service Worker: Offline caching and updates
Statistics Engine: Persistent game data

Performance Optimizations

Predictable Shuffling: XOR-based PRNG for consistent daily puzzles
Efficient Caching: Service worker precaching for fast loads
Minimal Bundle: Optimized for mobile performance

Success Metrics

Peak Performance:

9,500 daily active users (April 2022)
1,300 monthly active users (2.5 years post-launch)
Global player base across multiple continents

Analytics trend over 2 years — Active players trend over 2 years showing the Apr ‘22 peak

Players across many countries — Top 10 countries: US, UK, Australia, Canada, New Zealand, Spain, Ireland, Germany, China, France

Technical Achievements:

42+ years of guaranteed unique puzzles
100% offline functionality
Cross-platform PWA support

Lessons Learned

Mathematical Game Design

The permutation generation challenge taught me the importance of mathematical rigor in game design. Creating a system that guarantees uniqueness for decades required deep understanding of combinatorics and algorithm design.

PWA Development

Building a fully offline-capable game showed the power of modern web technologies. Service workers, local storage, and PWA features can create experiences that rival native apps.

Community Engagement

The game’s success demonstrated how timing and community engagement can amplify a project’s impact. Launching during the Wordle craze and starting a Discord server where players are encouraged to share their daily scores helped reach a massive audience.