{"id":22119896,"url":"https://github.com/jayrichh/domination","last_synced_at":"2026-04-28T20:37:01.634Z","repository":{"id":265141605,"uuid":"895257921","full_name":"JayRichh/DOMination","owner":"JayRichh","description":"Learn CSS skills through practical, hands-on experience by recreating targets with code.","archived":false,"fork":false,"pushed_at":"2024-11-29T10:58:04.000Z","size":659,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-29T12:14:19.443Z","etag":null,"topics":["challenge","dev","lets-go","nextjs","web"],"latest_commit_sha":null,"homepage":"https://domination.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JayRichh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-27T21:28:03.000Z","updated_at":"2024-12-05T17:59:23.000Z","dependencies_parsed_at":"2024-11-27T22:39:44.947Z","dependency_job_id":null,"html_url":"https://github.com/JayRichh/DOMination","commit_stats":null,"previous_names":["jayrichh/domination"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JayRichh%2FDOMination","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JayRichh%2FDOMination/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JayRichh%2FDOMination/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JayRichh%2FDOMination/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JayRichh","download_url":"https://codeload.github.com/JayRichh/DOMination/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245219660,"owners_count":20579625,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["challenge","dev","lets-go","nextjs","web"],"created_at":"2024-12-01T14:18:32.485Z","updated_at":"2026-04-28T20:36:56.614Z","avatar_url":"https://github.com/JayRichh.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DOMination\n\nA full-featured web app for recreating CSS battles. Allowing users to test their Web Dev skills by replicating target designs using HTML/ CSS, providing real-time previews, scoring based on accuracy and code efficiency, and interactive comparison tools.  \u003cbr\u003e\n\n![image](https://github.com/user-attachments/assets/ef884398-74f2-42cd-b715-9f501d7442aa)\n\n\u003cdiv style=\"display: flex; flex-direction: row; align-items: flex-start; gap: 20px;\"\u003e\n\n  \u003c!-- Left Column: Tech and Setup --\u003e\n  \u003cdiv style=\"flex: 1;\"\u003e\n    \u003ch2\u003eCore Technologies\u003c/h2\u003e\n    \u003cul\u003e\n      \u003cli\u003e\u003cstrong\u003eNext.js 15.0.3 (App Router)\u003c/strong\u003e\u003c/li\u003e\n      \u003cli\u003e\u003cstrong\u003eTypeScript 5\u003c/strong\u003e\u003c/li\u003e\n      \u003cli\u003e\u003cstrong\u003eTailwind CSS 3.4.1\u003c/strong\u003e\u003c/li\u003e\n      \u003cli\u003e\u003cstrong\u003eFramer Motion 11\u003c/strong\u003e\u003c/li\u003e\n      \u003cli\u003e\u003cstrong\u003eMonaco Editor\u003c/strong\u003e for an enhanced coding experience\u003c/li\u003e\n    \u003c/ul\u003e\n\n# Setup\n```\ngit clone https://github.com/JayRichh/DOMination\ncd cssbattle\nnpm install\nnpm run dev\n```\n  \u003c/div\u003e\n\n  \u003cdiv style=\"flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;\"\u003e\n    \u003cimg src=\"https://github.com/user-attachments/assets/cac8ebb8-b034-4351-ba0c-ee8771565ed3\" alt=\"Project Screenshot 1\" style=\"width: 100%; border-radius: 8px;\" /\u003e\n    \u003cimg src=\"https://github.com/user-attachments/assets/581f371c-88ef-4f16-88d3-960ad30328b9\" alt=\"Project Screenshot 2\" style=\"width: 100%; border-radius: 8px;\" /\u003e\n  \u003c/div\u003e\n  \n![image](https://github.com/user-attachments/assets/f22dc49c-1290-4f80-a076-34846853ba66)\n\n\u003c/div\u003e\n\n## Project Structure\n\n```\nsrc/\n├── app/                    \n│   ├── page.tsx                 # Home page component\n│   ├── globals.css              # Global styles using Tailwind CSS\n│   ├── challenges/\n│   │   ├── index.tsx            # Challenges list page\n│   │   └── [id]/\n│   │       ├── page.tsx         # Individual challenge page\n│   │       └── data.ts          # Challenge data (HTML, CSS, metadata)\n│   ├── components/\n│   │   ├── Editor/\n│   │   │   ├── Editor.tsx           # Monaco Editor component\n│   │   │   └── EditorHelpers.tsx    # Helper components for the editor\n│   │   ├── Preview/\n│   │   │   ├── PreviewPane.tsx      # User's live preview pane\n│   │   │   ├── TargetPane.tsx       # Challenge target display\n│   │   │   ├── ComparisonSlider.tsx # Slider for comparing outputs\n│   │   │   └── ToggleDifference.tsx # Toggle to highlight differences\n│   │   ├── UI/\n│   │   │   ├── Button.tsx\n│   │   │   ├── Modal.tsx\n│   │   │   ├── Tooltip.tsx\n│   │   │   └── ...                 # Other reusable UI components\n│   │   ├── Header.tsx               # Application header\n│   │   ├── Footer.tsx               # Application footer\n│   │   └── ScoreDisplay.tsx         # Displays scoring results\n│   ├── hooks/\n│   │   ├── useLocalStorage.ts       # Custom hook for local storage management\n│   │   ├── useImageComparison.ts    # Custom hook for image comparison logic\n│   │   ├── useDebounce.ts           # Custom hook for debouncing\n│   │   └── useHelpers.ts            # Custom hooks for HTML/CSS helpers\n│   ├── utils/\n│   │   ├── colorUtils.ts            # Utility functions for color handling\n│   │   ├── imageUtils.ts            # Functions for canvas and image processing\n│   │   ├── scoringUtils.ts          # Scoring algorithms and utilities\n│   │   ├── htmlCssHelpers.ts        # Helper functions for generating HTML/CSS\n│   │   └── constants.ts             # Application constants\n│   └── types/\n│       ├── challenge.d.ts           # Type definitions for challenges\n│       ├── submission.d.ts          # Type definitions for user submissions\n│       └── index.d.ts               # General type definitions\n├── public/\n│   └── assets/\n│       ├── images/                  # Static images for challenges and UI\n│       └── icons/                   # Icons for UI components\n├── package.json                     # Project dependencies and scripts\n├── tsconfig.json                    # TypeScript configuration\n└── tailwind.config.js               # Tailwind CSS configuration\n\n```\n\n## Features\n\n### Code Editor Integration\n\n- **Monaco Editor:** Provides a clean code editing experience with syntax highlighting, autocomplete, and real-time error detection.\n- **Custom Snippets:** Offers predefined CSS snippets to assist users in writing code efficiently.\n- **Live Syntax Validation:** Highlights syntax errors and provides immediate feedback to users.\n\n### Live Preview and Comparison Tools\n\n- **Live Preview Pane:** Renders user-submitted CSS in real-time for instant visual feedback.\n- **Target Display Pane:** Shows the design that users aim to replicate.\n- **Comparison Slider:** Enables users to slide between their output and the target to visually identify differences.\n- **Toggle Difference Highlighting:** Highlights pixel-level differences to help users pinpoint areas for improvement.\n\n\n### Scoring System\n\nThe scoring system evaluates solutions based on two main criteria: code efficiency (character count) and visual accuracy. The final score is a weighted combination of these factors:\n\n### Character Score (40% of total)\n- Measures code efficiency based on character count compared to the optimal length\n- Character count is normalized by removing unnecessary whitespace\n- Scoring formula:\n  ```\n  If length \u003c= optimal:\n    bonus = min(5, ((optimal - length) / optimal) * 100)\n    score = min(100, 100 + bonus)\n  If length \u003e optimal:\n    penalty = sqrt((length - optimal) / optimal) * 100\n    score = max(0, 100 - penalty)\n  ```\n- Solutions shorter than optimal length receive up to 5 bonus points\n- Penalty for longer solutions uses square root scaling for more balanced scoring\n\n### Visual Score (60% of total)\n- Pixel-by-pixel comparison between your solution and the target\n- Uses advanced DOM snapshot comparison with html2canvas\n- 5-unit tolerance for RGB and alpha channels to handle anti-aliasing\n- Direct percentage mapping: matching pixels / total pixels * 100\n- Score ranges from 0 to 100\n\n### Combined Score\nFinal score is calculated as:\n```\ncombinedScore = (characterScore * 0.4 + visualScore * 0.6).toFixed(2)\n```\n\nThis scoring system rewards:\n- Clean, efficient code that meets the optimal character count\n- Pixel-perfect visual accuracy\n- Balance between code golf and visual fidelity\n\n\n### Data Persistence and Statistics\n\n- **Local Storage Integration:**\n  - Persists all challenge attempts and scores using `localStorage`\n  - Stores best scores, last attempts, and complete submission history\n  - Each submission includes timestamp, character count, visual score, and actual CSS used\n  \n- **Statistics Dashboard:**\n  - Overall progress tracking with total challenges attempted/completed\n  - Per-challenge performance metrics:\n    - Best combined score achieved\n    - Character count improvement over time\n    - Visual accuracy trends\n    - Historical submission timeline\n  - Detailed attempt history with:\n    - Submission timestamps\n    - Character and visual scores\n    - Code snippets from each attempt\n\n- **Custom React Hooks:**\n  - `useLocalStorage`: Manages persistent state with automatic JSON serialization\n  - `useImageComparison`: Handles real-time visual difference calculation\n  - `useDebounce`: Optimizes performance for live preview updates\n  - `useChallengeStats`: Aggregates and calculates performance metrics\n\n## Available Scripts\n\n```bash\nnpm run dev          # Development server\nnpm run build        # Production build\nnpm run start        # Production server\nnpm run lint         # ESLint\nnpm run format       # Prettier formatting\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjayrichh%2Fdomination","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjayrichh%2Fdomination","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjayrichh%2Fdomination/lists"}