olemd/glitchcraft
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Enhance mobile experience and add zalgo text variants

Browse source 
Mobile improvements:
- Comprehensive responsive design for 320px-4K screens
- Touch-optimized controls with larger touch targets
- iOS zoom prevention with 16px font sizes on inputs
- Swipe-friendly interface with better spacing
- Portrait and landscape orientation support
- Enhanced accessibility with better contrast and sizes

Zalgo variants implemented:
- Full Chaos: Balanced corruption (default)
- Above Only: Marks above characters only
- Below Only: Marks below characters only
- Middle Only: Overlaying marks
- Mini Glitch: Subtle corruption
- Heavy Corruption: Maximum chaos overload

UI enhancements:
- Added corruption mode selector dropdown
- Reorganized controls into responsive groups
- Improved mobile control layouts
- Better visual hierarchy and spacing

Code quality:
- Fixed ESLint/Prettier indentation conflict
- Enhanced ZalgoGenerator with mode parameter
- Added event handlers for mode selection
- Comprehensive mobile CSS with multiple breakpoints

Documentation:
- Created comprehensive README with zalgo examples
- Documented all corruption modes with examples
- Added development and deployment instructions

The app now provides a perfect mobile experience with
diverse zalgo corruption options for creative text effects.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Ole-Morten Duesund 2025-08-18 20:30:05 +02:00
commit 7b0a3746d5
6 changed files with 377 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

57
app/zalgo.js
View file

@ -215,12 +215,13 @@ class ZalgoGenerator {
}
/**
* Generate zalgo text with specified intensity
* Generate zalgo text with specified intensity and mode
* @param {string} text - The input text to corrupt
* @param {number} intensity - Corruption intensity (1-10)
* @param {string} mode - Corruption mode (full, above, below, middle, mini, heavy)
* @returns {string} - The corrupted zalgo text
*/
generate(text, intensity = 5) {
generate(text, intensity = 5, mode = 'full') {
if (!text) return '';
// Normalize intensity to 1-10 range
@ -236,20 +237,52 @@ class ZalgoGenerator {
continue;
}
// Calculate how many combining characters to add based on intensity
// Higher intensity = more corruption
// Calculate how many combining characters to add based on intensity and mode
const factor = intensity / 10;
// Add characters above (0-3 based on intensity)
const aboveCount = Math.floor(Math.random() * (4 * factor));
let aboveCount = 0;
let middleCount = 0;
let belowCount = 0;
switch (mode) {
case 'above':
aboveCount = Math.floor(Math.random() * (6 * factor));
break;
case 'below':
belowCount = Math.floor(Math.random() * (6 * factor));
break;
case 'middle':
middleCount = Math.floor(Math.random() * (4 * factor));
break;
case 'mini':
// Light corruption - fewer characters
aboveCount = Math.floor(Math.random() * (2 * factor));
middleCount = Math.floor(Math.random() * (1 * factor));
belowCount = Math.floor(Math.random() * (2 * factor));
break;
case 'heavy':
// Heavy corruption - more characters
aboveCount = Math.floor(Math.random() * (8 * factor)) + 1;
middleCount = Math.floor(Math.random() * (5 * factor)) + 1;
belowCount = Math.floor(Math.random() * (8 * factor)) + 1;
break;
case 'full':
default:
// Balanced corruption
aboveCount = Math.floor(Math.random() * (4 * factor));
middleCount = Math.floor(Math.random() * (3 * factor));
belowCount = Math.floor(Math.random() * (4 * factor));
break;
}
// Add the calculated characters
result += this.randomChars(this.above, aboveCount);
// Add characters in middle (0-2 based on intensity)
const middleCount = Math.floor(Math.random() * (3 * factor));
result += this.randomChars(this.middle, middleCount);
// Add characters below (0-3 based on intensity)
const belowCount = Math.floor(Math.random() * (4 * factor));
result += this.randomChars(this.below, belowCount);
}