Releases: CyberSphinxxx/Techdle
Release list
Release Notes: v1.9.0
feat: implement dedicated changelog, GitHub release integration, and streamline profile UX
- Remove redundant
/loginroute; integrate anonymous authentication flow directly into/profileto eliminate confusing redirects. - Add GitHub API integration (
src/lib/github.ts) to fetch releases. - Implement
/api/releasesroute handler with Edge caching (revalidate = 1800) for zero-cost server fetching. - Create a dedicated
/changelogpage displaying an accordion of full release notes. - Build
WhatsNewModalandChangelogUI components with custom Markdown parser. - Wrap application with
WhatsNewProviderfor global release alerts. - Update
SettingsPageto surface only the latest release snippet. - Resolve hydration mismatch in
RootLayoutby explicitly identifying the inline theme script. - Update
Footerandsitemap.tsto reflect route structure changes.
Full Changelog: v1.8.1...v1.9.0
Release Notes - v1.8.1
Architecture & Routing
- Landing Page Separation (
src/app/page.tsx,src/components/LandingPage.tsx): Completely decoupled the main Daily Game from the root landing page. The root route (/) now acts strictly as a lightweight, fast-loading marketing page. Obsolete state management (mode,setMode) was stripped out. - Dedicated Daily Game Route (
src/app/modes/[mode]/page.tsx,src/components/Game.tsx): Migrated the core daily game into the existing dynamic modes router. The daily game now securely lives at/modes/daily. Added seamless Next.js<Link>prefetching from the landing page's "Play" button for instant client-side transitions. - Tutorial Migration: Successfully preserved the "How to Play" modal logic, migrating it into the dynamic mode router to ensure first-time users receive instructions upon their first puzzle interaction, regardless of the entry point.
Gameplay & Logic Optimization
- Leaderboard Timer Accuracy (
src/hooks/useDailyGame.ts,src/components/GuessInput.tsx,src/components/DailyGame.tsx): Fixed an issue where the gameplay timer would silently start as soon as the component mounted, resulting in bloated leaderboard times if a tab was left open. - Implemented a lazy-start mechanism: the timer state (
startedAt) now strictly initializes as undefined. - Bound a new
startTimercallback to theonTypeevent within theGuessInputcomponent, ensuring the internal clock accurately begins on the player's first keystroke. Built-in fallbacks ensure the timer gracefully recovers if a guess is pasted or autofilled.
UI / UX Refinements
- Settings Page Hierarchy (
src/app/settings/page.tsx): Adjusted the visual hierarchy within the "Danger Zone". The "Sign Out" button was re-styled to utilize the application's orange design tokens, visually distinguishing a safe session exit from the highly destructive, red "Clear Local Data" action. - Share Component Contrast (
src/components/ShareButton.tsx): Toned down the background and shadow brightness of the "Share Result" button to match the standard primary button aesthetic, removing the overpowering high-contrast hover state.
Full Changelog: v1.8.0...v1.8.1
Release Notes - v1.8.0
Overview
This release introduces a major overhaul to the user profile, settings, and theming systems, along with codebase-wide optimizations for type safety, performance, and user experience. A total of 41 files were modified to modularize components, enhance the UI, and harden the application's stability.
Features & Enhancements
1. Unified Profile System
- Profile Page (
/profile): Replaced the fragmented stats and archive pages with a single, cohesive user profile dashboard. - Component Modularization: Abstracted the complex profile logic into distinct
StatsViewandArchiveViewcomponents, significantly reducing boilerplate and improving code maintainability. - Header Update: Replaced the generic settings icon with a
UserCircleicon pointing to/profile, clarifying the navigation hierarchy.
2. Dedicated Settings & Preferences
- Settings Page (
/settings): Created a centralized hub for account management and preferences. - Safe Data Management: Migrated the "Danger Zone" (Sign Out and Clear Local Data) out of the Profile page and into Settings, complete with protective confirmation modals to prevent accidental data loss.
- Account Details: Added read-only display of the authenticated user's email address.
3. Advanced Theme Store
- Expanded Theme Engine: Defined an extensible
themes.tsmetadata file containing 10 distinct, highly-curated themes (e.g., Cyberpunk, Synthwave, Nord, Dracula, Ocean). - Theme Store UI (
/settings/themes): Built a dedicated marketplace-style page allowing users to browse and preview themes. The UI features dynamic CSS gradients, backdrop blurs, and hover animations, built entirely with strict design tokens (zero hardcoded Tailwind arbitrary values). - Favorites System: Upgraded
ThemeProviderto sync a user's favorite themes withlocalStorage. - Quick Switch: Replaced the old Light/Dark header toggle with a "Quick Favorites" switcher directly embedded inside the Settings page for rapid personalization.
4. Codebase Hardening & Optimizations
- Strict Type Safety: Conducted a repository-wide TypeScript audit. Eliminated dangerous
anycast operations infirebase.tsandstorage.tsby augmenting the globalWindowinterface and correctly typing catch-block errors. The build now passestsc --noEmitwith zero errors. - Firebase Initialization Fix: Resolved a critical Fast Refresh bug causing
ReCaptchaEnterpriseProviderto crash during local development by attaching a singleton initialization flag directly to the window object. - Sitemap Updates: Updated
public/sitemap.xmlto correctly index all new public routes including/settings,/profile,/leaderboard, and/faq. - Database Optimizations: Audited Firestore queries to ensure that reads are strictly limited (e.g., 100 documents max on Leaderboard) and properly cached globally using Next.js Incremental Static Regeneration (ISR) with a 300-second revalidation window to minimize API costs.
Full Changelog: v1.7.1...v1.8.0
Release Notes: v1.7.1
AdSense Compliance and Edge Case Fixes
This release addresses critical edge cases and bugs surrounding the Google AdSense integration to ensure the site maintains 100% compliance with Google Publisher Policies.
Files Changed (8)
-
src/hooks/useMediaQuery.ts [NEW]
- Created a custom React hook to reliably track screen breakpoints and window resize events on the client side without triggering React hydration mismatches.
-
src/components/AdBanner.tsx [MODIFIED]
- Fixed a bug where React 18 Strict Mode would execute
useEffecttwice, causing the AdSense script to crash or throw console errors by attempting to fill the same ad slot multiple times. - Introduced a
useRefflag to guarantee thatadsbygoogle.push({})is strictly executed only once per mount.
- Fixed a bug where React 18 Strict Mode would execute
-
src/app/layout.tsx [MODIFIED]
- Swapped the Next.js
<Script>component with a raw HTML<script>tag to resolve the harmless but annoyingdata-nscriptconsole warning that AdSense bots throw when scanning Next.js projects.
- Swapped the Next.js
-
src/app/login/page.tsx [MODIFIED]
- Completely removed the side-gutter AdBanners from the Account Settings page.
- This resolves a critical "No Content" policy violation risk, as AdSense forbids ad placement on login, logout, and settings pages that lack substantial editorial content.
-
src/components/DailyGame.tsx [MODIFIED]
- Implemented the
useMediaQueryhook. - AdBanners are now conditionally unmounted from the DOM entirely on screens smaller than 1280px (
xl), preventing the generation of hidden ad impressions that could result in an AdSense account suspension.
- Implemented the
-
src/app/archive/page.tsx [MODIFIED]
- Integrated the
useMediaQueryhook to properly unmount the side-gutter ads on mobile screens.
- Integrated the
-
src/app/dictionary/page.tsx [MODIFIED]
- Integrated the
useMediaQueryhook to properly unmount the side-gutter ads on mobile screens.
- Integrated the
-
src/app/stats/page.tsx [MODIFIED]
- Integrated the
useMediaQueryhook to properly unmount the side-gutter ads on mobile screens.
- Integrated the
Full Changelog: v1.7.0...v1.7.1
Release Notes: v1.7.0
Monetization and AdSense Integration
This release introduces Google AdSense support across the application. The integration was designed to maximize viewability and profitability while ensuring the core gameplay experience remains completely uninterrupted.
Files Changed (9)
-
src/components/AdBanner.tsx [NEW]
- Created a reusable, configurable wrapper component for the
<ins className="adsbygoogle">tag. - Implemented logic to support both vertical and horizontal orientations.
- Designed the component to remain completely invisible (no layout shift, no background colors, no borders) if an ad blocker is detected or if AdSense fails to load an ad.
- Created a reusable, configurable wrapper component for the
-
src/app/layout.tsx [MODIFIED]
- Injected the Next.js
<Script>component into the<head>to asynchronously load the Google AdSense library (adsbygoogle.js) globally. - Configured with the publisher client ID (
ca-pub-4116593263812421).
- Injected the Next.js
-
src/components/DailyGame.tsx [MODIFIED]
- Implemented vertical sticky ad placements in the left and right margins of the desktop layout.
- These ad units are hidden on mobile devices to preserve screen real estate.
-
src/components/ResolutionTicket.tsx [MODIFIED]
- Injected a horizontal ad banner inside the end-of-game resolution ticket modal.
- Placed strategically above the Standard Operating Procedure section to capture post-game engagement without interfering with the active puzzle session.
-
src/components/Footer.tsx [MODIFIED]
- Added a persistent horizontal ad banner above the footer links.
- Introduced a humble disclaimer message explaining that ads are used to cover server costs and that the use of ad blockers is respected by the developer.
-
src/app/archive/page.tsx [MODIFIED]
- Added a horizontal ad banner placed below the page title and above the heatmap graph.
-
src/app/dictionary/page.tsx [MODIFIED]
- Added a horizontal ad banner below the header description and above the dictionary completion progress bar.
-
src/app/stats/page.tsx [MODIFIED]
- Added a horizontal ad banner below the "Your Stats" header section.
-
src/app/login/page.tsx [MODIFIED]
- Added a horizontal ad banner at the top of the account settings page content.
Full Changelog: v1.6.0...v1.7.0
Release Notes - v1.6.0
Architectural Refactoring
- Hook Modularization: Completely removed the monolithic
src/hooks/useGame.tsand replaced it with specialized, purpose-built hooks for each individual mode (useDailyGame.ts,useArchiveGame.ts,useCategoryGame.ts,useEndlessGame.ts,useP1OutageGame.ts,useSLATimeAttack.ts). - Storage and API Optimization: Disconnected all alternative game modes from mutating the global
UserStatsobject. Eliminated secondary Firestore API sync requests from modes like Endless and P1 Outage, streamlining the application strictly around Daily and Archive metrics.
Bug Fixes & Stability
- Firebase App Check Crash: Resolved a critical Turbopack runtime error where the application would crash during component evaluation if Firebase App Check was not initialized properly.
- Archive Dropdown Fix: Addressed a bug in
src/app/archive/[date]/page.tsxandsrc/hooks/useArchiveGame.tswhere playing historical puzzles resulted in an unresponsive search dropdown. The system now correctly fetches and hydrates the global answer dictionary aliases payload for the archive GameBoard. - P1 Outage Stats Contamination: Fixed a critical logic flaw where failing tickets in the 3-guess "P1 Outage" mode inadvertently recorded global daily losses.
- Global Stats Auto-Repair: Implemented a self-healing algorithm inside
src/lib/storage.tsthat automatically cross-references a user'stotalPlayedwith their strict Archive history array upon load, purging any phantom stats injected by previous P1 Outage play sessions.
UI/UX Improvements
- Landing Page Simplification: Refactored
src/components/LandingPage.tsxto conditionally hide the "Log In" button and "Log Out" options if the user is already authenticated, streamlining the path to "Play" and avoiding logout confusion. - Gamemode Modals: Introduced a dynamic, theme-matched "How to Play" slide-in modal ecosystem in
src/app/modes/page.tsx. Each card features custom hover styling and isolated info cards detailing the rules for SLA, P1 Outage, Endless, and Category Drill. - Expanded Terminology: Fully spelled out "Service Level Agreement (SLA) Time Attack" on the modes page for improved accessibility and clarity for new users.
- Resolution Ticket Clarity: Updated
src/components/ResolutionTicket.tsxto automatically iterate through and display all acceptedaliasesbelow the primary Root Cause, reducing ambiguity for players who used alternative terminology. - Pure Stats UI: Replaced the non-standard "Endless Best" stat metric on the
src/app/stats/page.tsxtracker with a "Total Wins" counter to reinforce the separation of Daily metrics from alternate game modes. Added a newnot-found.tsxcustom 404 page for broken routes.
Full Changelog: v1.5.0...v1.6.0
Release Notes - v1.5.0
Authentication & Security
- Google-Only Authentication: Completely removed the legacy Email/Password sign-in flow. Google Sign-in is now the exclusive authentication method, reducing credential errors and speeding up onboarding.
- Modernized Login UI: Replaced the plain
AuthModalwith the premiumSignupPromptModal, complete with a visual preview of the activity heatmap. This modal is now consistently used across the settings menu and login gates.
User Interface & Experience
- Archive Page Refinements:
- Removed redundant legend labels from the bottom of the archive page since they are already present in the primary heatmap.
- Overhauled loading logic: Removed staggered slide-in entrance animations to make the page load feel instantaneous and highly responsive.
- Preserved the dynamic
CountUpprogressing numbers for the "Played" and "Win Rate" metrics. - Added a satisfying interactive "squeeze" effect (scale down) to calendar day boxes when clicked or tapped.
- Stats Page Fixes:
- Fixed an alignment bug in the Guess Distribution chart where the "Loss" label would overlap with its corresponding progress bar by increasing the label container width and applying right-alignment.
- Mobile Experience:
- Introduced a mobile-responsive Hamburger menu to keep the header clean and navigation accessible on smaller screens.
Developer & Anti-Cheat Features
- Anti-Snoop Easter Eggs: Added a suite of hidden traps for players attempting to cheat via developer tools.
- Added an HTML comment honeypot warning users attempting to inspect elements.
- Added a colorful console log warning and fake hint.
- Created global variable traps (
window.answer,window.solution, etc.) that trigger a fake cyber police alert and return Rick Astley lyrics. - Included a fake Base64
developer_backdoorkey inside the puzzle JSON metadata. - Implemented a Konami Code listener (
Up Up Down Down Left Right Left Right B A) that flips the game board upside down into "Australian Mode".
Full Changelog: v1.4.0...v1.5.0
Release Notes v1.4.0
Mobile Experience & UI Enhancements
The mobile layout and navigation have been significantly improved to reduce clutter and optimize spacing on smaller devices.
- Mobile Navigation Menu (Header.tsx): Implemented a responsive hamburger menu that consolidates secondary navigation links (How To Play, Answer Dictionary, Archive, Stats, Account Settings) into a clean, collapsible dropdown, decluttering the header on mobile devices.
- Landing Page Refactoring (LandingPage.tsx): Fixed mobile layout issues with the call-to-action buttons. The "Log In" and "Play" buttons are now properly centered and utilize proportional maximum widths on mobile screens, rather than breaking formatting due to fixed sizing constraints.
Authentication Flow Improvements
- Account Security & Intent (login/page.tsx): Replaced instantaneous logouts with a dedicated, themed Logout Confirmation modal. This modal utilizes existing design system variables to ensure proper styling across light and dark modes, preventing accidental sign-outs.
P1 Outage Overhaul
The P1 Outage mode has been heavily modified to ensure a playable, infinitely replayable experience for advanced diagnostics.
- Data Pipeline Fix (generate-static-data.mjs): Fixed an issue where P1 Outage would crash or show no data because the game engine specifically queried for "Hard" puzzles. The build script now automatically detects if a puzzle contains
rawLogsand tags its metadata difficulty as "Hard" during static generation. - Autocomplete Integration (P1Game.tsx, GuessInput.tsx): Resolved a game-breaking bug where the P1 Outage guess input lacked autocomplete suggestions. The component now correctly ingests the global dictionary aliases, allowing players to actually submit complex root cause diagnoses.
- Unlimited Play Refactoring (useP1OutageGame.ts, puzzles.ts): Transitioned P1 Outage from a single daily puzzle constraint into an endless game loop. The state machine now tracks solved incidents in memory (
seenIds) to dynamically load random "Hard" puzzles without repetition. - Continuous Action Buttons (P1Game.tsx): Added "Next Incident" and "Try Another Incident" buttons to the resolution ticket screen, allowing players to immediately jump into the next P1 crisis upon success or failure.
Zero-Cost Infrastructure & Optimizations
- 100% Vercel API Elimination: Completely removed all serverless API routes (
/api/guess,/api/dictionary). Guesses are now securely evaluated natively in the browser against base64 decoded static payloads. The Dictionary page now statically fetches its data, entirely removing API invocations. - O(1) Firestore Writes & Lazy Sync: Migrated user game history to a highly-optimized
historyMaparchitecture in Firestore using dot notation, effectively reducing Firestore document rewrites to 0 reads. Implemented a 5-minute lazy sync cache algorithm to prevent unnecessary database queries on rapid page reloads. - Data Management: Added a "Clear Local Data / Reset Stats" button to the Settings page with a dedicated safety confirmation screen to allow users to wipe local player history without contacting the cloud.
Full Changelog: v1.3.0...v1.4.0
Release Notes v1.3.0
Gamemode Expansion & Refactoring
The monolithic game logic has been completely decoupled into distinct, specialized gamemodes. This major architectural shift introduces several new ways to play Techdle and lays the groundwork for future content scalability.
- Daily Game (
DailyGame.tsx,useDailyGame.ts): The classic Techdle experience isolated into its own dedicated component. - Endless Ticket Queue (
EndlessGame.tsx,useEndlessGame.ts): A new mode featuring unlimited continuous play and streak tracking. - SLA Time Attack (
SLAGame.tsx,useSLATimeAttack.ts): A high-pressure mode featuring a 60-second countdown clock where correct guesses add time and incorrect guesses penalize time. - P1 Outage Mode (
P1Game.tsx,useP1OutageGame.ts,RawLogViewer.tsx): A hardcore diagnostic mode where players must parse raw, progressively-unredacting server logs instead of human-readable tickets. - Category Drill (
CategoryGame.tsx,useCategoryGame.ts): Allows players to specifically target and practice Hardware, Network, Security, or Software tickets. - Gamemodes Directory (
src/app/modes): Added a dedicated routing structure and UI for selecting alternative game modes.
Archive & Heatmap Implementation
The archive system has been significantly upgraded to improve player retention and accurately reflect historical performance.
- Performance Heatmap (
HeatmapGraph.tsx): Added a 52-week performance heatmap to the Archive page. Color intensity correctly corresponds to the number of guesses taken (fewer guesses yield darker colors). - Live vs Archive Tracking: The data model (
types/game.ts) and storage handlers (storage.ts) have been updated to tracksolvedOnTime. The heatmap now visually distinguishes puzzles solved on their release day from those solved via the archive (solid color vs hollow border). - Automated Scroll Alignment: The heatmap scroll container natively snaps to the latest timeline edge on mount via a custom React hook integration.
Post-Game Experience & Quality of Life
- Cross-mode Navigation (
TryOtherModesLink.tsx): Injected a call-to-action on the post-game resolution screens (Daily, Archive, Category) that seamlessly directs players to the gamemodes menu to encourage replayability. - Thematic Scrollbars (
globals.css): Implemented custom scrollbar styling that strictly adheres to the dynamic CSS variables, replacing the jarring default white scrollbars on darker themes. - Header & UI Cleanup (
Header.tsx,page.tsx): Re-positioned navigation elements to minimize icon collision and removed deprecated monetization/pro tags to clear the UI while payment architecture is planned.
Full Changelog: v1.2.1...v1.3.0
Techdle v1.2.1 Release Notes
Overview
Version 1.2.1 focuses on major foundational improvements, transitioning the app from a development state to a fully optimized, production-ready Progressive Web App (PWA). This release includes comprehensive mobile responsiveness fixes, massive SEO upgrades, and significant documentation enhancements.
Features & Enhancements
Progressive Web App (PWA) Integration
- Implemented full native PWA support.
- Added a custom Service Worker (
sw.js) with network-first caching strategies for offline resilience. - Integrated a Next.js
PWAProviderand updatedlayout.tsxmetadata to support device installations.
Native Sharing Capabilities
- Upgraded the "Share Result" button to utilize the native Web Share API (
navigator.share) on supported devices, providing a seamless sharing experience to social apps. - Maintained a robust clipboard-copy fallback for non-supported browsers.
- Updated the default shared URL to point to the production
playtechdle.comdomain.
SEO & Discoverability Optimization
- Structured Data: Injected JSON-LD Schema (
SoftwareApplication/GameApplication) into the document head to enable rich snippets in Google Search results. - Search Console Verification: Implemented Google Site Verification via both HTML root file upload and Next.js metadata tag injection.
- Metadata Overhaul: Added targeted SEO keywords, updated OpenGraph and Twitter card descriptions, and established Canonical URLs to prevent duplicate content indexing.
Documentation & Copy Updates
- About Page Rewrite: Completely overhauled the
/aboutpage to be highly detailed and accessible to non-technical users. It now features a structured "How to Play" guide and explains the Answer Dictionary. - The Origin Story: Added a dedicated section honoring the game's inspiration (Doctordle / Doctor Mike) and establishing Techdle as the first tech-based diagnostic Wordle-like game.
- Architecture Documentation: Updated the
README.mdusing a comprehensive Graphify codebase analysis to document the Next.js App Router structure, God Nodes, and puzzle systems.
Bug Fixes & UI Polish
Mobile Responsiveness
- Dictionary Page: Resolved a critical horizontal overflow issue on small screens (e.g., iPhone SE). Added strict CSS bounds (
overflow-hidden), text wrapping (break-words), and flex-shrink utilities to ensure cards fit perfectly within 320px viewports. - Header Navigation: Optimized header layout for mobile devices by dynamically reducing icon padding, gap spacing, and logo size below the
smbreakpoint, preventing layout breakage.
Z-Index & Autocomplete Overlap
- Fixed a visual bug where the global Footer was rendering on top of the search dropdown menu.
- Elevated the search dropdown z-index layer (
z-50) to ensure it always floats above page content. - Aggressively disabled native browser spellcheck and history autocomplete overlays (
autoComplete="new-password",spellCheck="false") that were visually colliding with the custom game search dropdown.
Refactoring & Cleanup
- Dev Mode Removal: Stripped out all legacy development mode fast-paths, bypasses, and UI admin indicators from core components (
AuthProvider,Game,GameBoard,Header,SecurityProvider) to ensure a secure, production-only user experience.
Full Changelog: v1.2.0...v1.2.1