CFL Wiki

Chico Fab Lab Documentation

This folder contains project documentation for developers and contributors.

📚 Documentation Index

Quick Start

Core Documentation

Interactive Features (NEW!)

Technical Debt

🎮 Quick Feature Overview

Sound Effects (CFL.sounds)

Every button click triggers contextual sounds. Rainbow buttons play magical chimes, bouncy buttons go “boing”, neon buttons zap, etc.

CFL.sounds.magic();     // Ascending arpeggio
CFL.sounds.boing();     // Springy bounce
CFL.sounds.coin();      // Retro pickup sound
CFL.sounds.eldritch();  // Ominous drone

Achievement System (CFL.achievements)

16 unlockable achievements track user interactions. Toast notifications appear on unlock.

CFL.achievements.unlock('first-click');  // Manually unlock
CFL.achievements.getStats();             // { clicks: 42, pages: [...] }

Easter Eggs

🛠️ Development

Local Setup

# Install Jekyll (if not installed)
gem install bundler jekyll

# Serve locally
jekyll serve

File Structure

chicofablab.github.io/
├── _includes/components/  # Reusable UI components
├── _layouts/
│   └── default.html       # Main template + ALL JavaScript
├── _wiki/
│   ├── component-showcase.mkd  # Live component examples
│   ├── button-playground.mkd   # Interactive button builder
│   ├── void.mkd                # Eldritch corruption page
│   └── ...
├── assets/
│   └── css/main.css       # Main stylesheet (includes fun buttons)
├── docs/                  # This folder
│   ├── README.md          # This file
│   ├── SOUND-SYSTEM.md    # Sound effects documentation
│   ├── ACHIEVEMENTS.md    # Achievement system documentation
│   ├── FUN-BUTTONS.md     # Fun button styles reference
│   ├── EASTER-EGGS.md     # Secrets and hidden features
│   ├── THE-VOID.md        # Void/corruption documentation
│   ├── BUTTON-PLAYGROUND.md
│   └── technical-debt/    # Technical debt tracking
│       ├── README.md
│       ├── css-modularization.md
│       ├── javascript-extraction.md
│       └── font-loading.md
└── index.html

Key Implementation Details

  1. All JavaScript lives in _layouts/default.html - No external JS files
  2. All CSS lives in assets/css/main.css - Single stylesheet
  3. LocalStorage keys use cfl prefix (e.g., cflAchievements, cflSoundsEnabled)
  4. Animations respect prefers-reduced-motion media query

🎯 Work Efforts

This project uses the Johnny Decimal system for tracking work efforts, integrated with MCP (Model Context Protocol) tools.

Structure

Work efforts are organized in _work_efforts/ using the Johnny Decimal system:

Using MCP Tools

The project integrates with MCP tools for managing work efforts:

Documentation

📖 Quick Links