Oblique Strategies

 ██████╗ ██████╗ ██╗     ██╗ ██████╗ ██╗   ██╗███████╗
██╔═══██╗██╔══██╗██║     ██║██╔═══██╗██║   ██║██╔════╝
██║   ██║██████╔╝██║     ██║██║   ██║██║   ██║█████╗
██║   ██║██╔══██╗██║     ██║██║▄▄ ██║██║   ██║██╔══╝
╚██████╔╝██████╔╝███████╗██║╚██████╔╝╚██████╔╝███████╗
 ╚═════╝ ╚═════╝ ╚══════╝╚═╝ ╚══▀▀═╝  ╚═════╝ ╚══════╝

███████╗████████╗██████╗  █████╗ ████████╗███████╗ ██████╗ ██╗███████╗███████╗
██╔════╝╚══██╔══╝██╔══██╗██╔══██╗╚══██╔══╝██╔════╝██╔════╝ ██║██╔════╝██╔════╝
███████╗   ██║   ██████╔╝███████║   ██║   █████╗  ██║  ███╗██║█████╗  ███████╗
╚════██║   ██║   ██╔══██╗██╔══██║   ██║   ██╔══╝  ██║   ██║██║██╔══╝  ╚════██║
███████║   ██║   ██║  ██║██║  ██║   ██║   ███████╗╚██████╔╝██║███████╗███████║
╚══════╝   ╚═╝   ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝   ╚══════╝ ╚═════╝ ╚═╝╚══════╝╚══════╝

"Honour thy error as a hidden intention" — Brian Eno & Peter Schmidt

A digital implementation of Brian Eno and Peter Schmidt's legendary creative tool, designed to break through creative blocks and inspire lateral thinking. This Progressive Web App brings the classic card deck to the modern web with beautiful animations, offline functionality, and a complete card management system.

✨ Features

🎴 Core Card Experience

• Random Card Drawing - Draw cards completely at random from the full collection
• Realistic Animations - 0.5-second shuffle followed by 0.3-second card flip
• Multiple Interaction Methods - Click the card, press the "Another" button, or use spacebar
• Fallback System - Displays "[we've created mystery]" if cards fail to load
• Paper Texture - Authentic 7cm × 9cm card dimensions with realistic styling

🎨 Visual Design

• Dark Aesthetic - Black background with golden accents matching the original cards
• Glowing Effects - Buttons glow golden on hover, cards have realistic shadows
• Animated Footer - Scroll-triggered footer with glowing leaf separator (🍃)
• Responsive Layout - Beautiful on all devices from mobile to desktop

📝 Card Management

• Full CRUD Operations - Create, read, update, and delete cards
• Advanced Search - Real-time filtering across card text and notes
• Smart Sorting - Click column headers to sort by any field
• Pagination - 25 cards per page for optimal performance
• Tag-Based Editions - Organize cards by edition with autocomplete
• Bulk Operations - Select multiple cards for batch actions

🔍 Search & Organization

• Live Search - Instant filtering as you type
• Multi-Field Search - Searches card text, notes, and editions
• Search Highlighting - Matched terms highlighted in results
• No Results Handling - Clear messaging when searches return empty
• Search Result Count - Always know how many cards match your query

📱 Progressive Web App

• Offline Functionality - Works completely offline after first load
• Service Worker - Caches all assets for instant loading
• Local Storage - All data persists in your browser
• Background Sync - Syncs changes when connection returns
• Installable - Add to home screen on mobile devices

♿ Accessibility

• Keyboard Navigation - Full keyboard support including spacebar for cards
• Screen Reader Support - Comprehensive ARIA labels and announcements
• High Contrast - Excellent color contrast ratios
• Reduced Motion - Respects user motion preferences
• Focus Management - Clear focus indicators throughout

🎯 Performance

• Fast Loading - Initial load under 1.2 seconds
• Small Bundle - Optimized ~380KB total size
• Lighthouse Score - 95+ performance rating
• Hardware Acceleration - Smooth animations on all devices
• Efficient Rendering - Virtual scrolling for large datasets

🚀 Quick Start

Prerequisites

• Node.js 16+ and npm
• Modern web browser (Chrome 80+, Firefox 75+, Safari 13+, Edge 80+)

Installation

# Clone the repository
git clone https://github.com/douglasdollars/oblique2.git
cd oblique2

# Install dependencies
npm install

# Start development server
npm start

The app will be available at http://localhost:9000

Building for Production

# Create optimized build
npm run build

# Files will be in the dist/ directory

🎮 How to Use

Drawing Cards

1. Click the card - Press down on the visible card to shuffle and draw
2. Use the "Another" button - Click the golden button below the cards
3. Press spacebar - Quick keyboard shortcut for drawing cards
4. Watch the animation - Enjoy the realistic shuffle and flip sequence

Managing Cards

1. Navigate to Edit Cards - Click "Edit Cards" in the top navigation
2. Add New Cards - Fill out the form with card text and edition
3. Search Cards - Use the search bar to find specific cards
4. Edit Existing Cards - Click the edit button on any row
5. Delete Cards - Click delete and confirm in the modal dialog

Organizing by Edition

• Tag Input - Type edition names and press Enter to add
• Autocomplete - Existing editions appear as suggestions
• Multiple Editions - Cards can belong to multiple editions
• Edition Validation - Max 30 characters, alphanumeric + spaces only

📖 About Oblique Strategies

Oblique Strategies is a set of cards created by musician Brian Eno and artist Peter Schmidt in 1975. Each card contains a cryptic remark or instruction designed to help break creative deadlocks and encourage lateral thinking.

The strategies have been used by countless artists, musicians, writers, and creative professionals to:

• Break through creative blocks
• Approach problems from new angles
• Generate unexpected solutions
• Stimulate innovative thinking
• Overcome decision paralysis

The Creators

Brian Eno - Renowned musician, composer, and producer influential in ambient and electronic music. Known for work with David Bowie, U2, and Talking Heads.

Peter Schmidt - German-born British painter and multimedia artist known for experimental approaches to art and interest in cybernetics and systems.

🛠 Technical Details

Architecture

• Vanilla JavaScript - No framework dependencies for maximum performance
• ES6+ Modules - Modern JavaScript with clean module structure
• CSS Custom Properties - Maintainable design system
• Web Components - Reusable, encapsulated components
• Service Worker - Offline functionality and caching

Browser Support

• Chrome 80+ - Full support
• Firefox 75+ - Full support
• Safari 13+ - Full support
• Edge 80+ - Full support
• IE 11 - Graceful degradation (limited functionality)

Performance Metrics

• First Contentful Paint - < 1.5s
• Largest Contentful Paint - < 2.5s
• Cumulative Layout Shift - < 0.1
• First Input Delay - < 100ms

🔧 Development

Available Scripts

npm start          # Start development server
npm run build      # Build for production
npm test           # Run test suite
npm run lint       # Check code quality
npm run format     # Format code with Prettier

Project Structure

src/
├── components/          # Reusable UI components
├── pages/              # Page-level components
├── services/           # Business logic and utilities
├── styles/             # CSS files and design system
├── animations/         # Animation utilities
├── models/             # Data models
└── router/             # Client-side routing

tests/                  # Test files mirroring src structure
dist/                   # Built files (generated)

Testing

• Jest - Unit testing framework
• JSDOM - DOM testing environment
• Coverage - Comprehensive test coverage
• E2E Testing - Integration test scenarios

🚀 Deployment

The app can be deployed to any static hosting service:

Recommended Platforms

• Netlify - Automatic deployments from Git
• Vercel - Optimized for modern web apps
• GitHub Pages - Free hosting for open source projects
• Firebase Hosting - Google's hosting platform

Traditional Servers

• Apache - Configure for SPA routing
• Nginx - Set up try_files for client-side routing
• Express - Node.js server with static file serving

See DEPLOYMENT.md for detailed deployment instructions.

🐛 Troubleshooting

Common issues and solutions:

App Won't Load

• Check browser compatibility
• Clear browser cache
• Disable browser extensions
• Try incognito/private mode

Cards Not Displaying

• Check browser console for errors
• Verify local storage permissions
• Reset card data if corrupted

Animations Not Working

• Check for "reduced motion" settings
• Verify CSS loading
• Test hardware acceleration

See TROUBLESHOOTING.md for comprehensive troubleshooting guide.

🤝 Contributing

Contributions are welcome! Please read our contributing guidelines:

1. Fork the repository
2. Create a feature branch - git checkout -b feature/amazing-feature
3. Commit your changes - git commit -m 'Add amazing feature'
4. Push to the branch - git push origin feature/amazing-feature
5. Open a Pull Request

Development Guidelines

• Follow existing code style
• Add tests for new features
• Update documentation as needed
• Ensure accessibility compliance

📄 License

This project is licensed under the ISC License - see the LICENSE file for details.

🙏 Acknowledgments

• Brian Eno & Peter Schmidt - Creators of the original Oblique Strategies
• The Creative Community - For decades of inspiration using these strategies
• Open Source Contributors - For the tools and libraries that made this possible

📞 Support

• Documentation - Check DEPLOYMENT.md and TROUBLESHOOTING.md
• Issues - Report bugs and request features on GitHub

---

"The important thing is this: to be able at any moment to sacrifice what we are for what we could become." — Charles Du Bos