```
### Step 3: Create CSS File
Create `[project-name]/style.css` - **ONLY include project-specific styles:**
```css
/* [Project Name] Specific Styles */
/* RULES:
* 1. DO NOT redefine common styles (body, .container, h1, h2, h3, buttons, etc.)
* 2. Only add styles unique to this project
* 3. Use the same color scheme: #667eea, #764ba2, #e74c3c, #3498db
* 4. Follow the existing naming conventions
*/
/* Example: Game-specific board styles */
.game-board {
/* Your unique styles here */
}
/* Example: Game-specific cell styles */
.cell {
/* Your unique styles here */
}
/* Always include responsive design */
@media (max-width: 768px) {
/* Mobile-specific adjustments */
}
@media (max-width: 600px) {
/* Small mobile adjustments */
}
```
### Step 4: Create JavaScript File
Create `[project-name]/script.js`:
```javascript
// [Project Name] Game Logic
// IMPORTANT: Do not redefine toggleSection() - it's in common/utils.js
// Game state variables
let gameState = {
// Your state here
};
// Initialize game
function initGame() {
// Setup code
}
// Game logic functions
// ...
// Event listeners
document.addEventListener('DOMContentLoaded', () => {
// Setup event listeners
});
```
### Step 5: Add Assets
1. **Banner Image** (REQUIRED): Create `assets/banner_image_generated.png`
- Size: 1200x630px
- Format: PNG
- Purpose: Social media sharing (Open Graph)
2. **Favicon**: Always use the shared favicon from `common/assets/colored-pencil.png`
- DO NOT copy colored-pencil.png to individual project directories
- Reference it from common directory in HTML: `https://prabhakar267.github.io/paper-games/common/assets/colored-pencil.png`
- Projects can create custom favicons if needed, but the default colored-pencil.png should remain only in common/assets/
### Step 6: Update Landing Page
Add your project to the main `index.html`:
```html
```
### Step 7: Update README.md
Add your project to the main `README.md` file in the games table:
```markdown
| [](https://prabhakar267.github.io/paper-games/[project-name]/) | **[[Game Name]](https://prabhakar267.github.io/paper-games/[project-name]/)** [One-line description from your game] |
```
**Important:**
- Add the new game entry as a new row in the table
- Use the same one-line description as used in the landing page
- Images are fixed at 400px width using HTML img tags
- The banner image should be clickable and link to the live game URL
- The game name should also be a clickable link
## Common Resources - DO NOT DUPLICATE
### Available from common/styles.css
**DO NOT redefine these in your project CSS:**
- CSS Reset (`* { margin: 0; padding: 0; box-sizing: border-box; }`)
- `body` styling (gradient background, flexbox layout)
- `.container` (white card with shadow)
- Typography: `h1`, `h2`, `h3`
- Buttons: `.btn-primary`, `.btn-secondary`
- `.setup-section`
- `.radio-group` and radio button styling
- `.info-sections` and collapsible sections
- `.collapsible-section`, `.section-header`, `.toggle-icon`, `.section-content`
- `.reference` links styling
- `.game-info`, `.game-status`, `.game-controls`
- `@keyframes pulse` animation
- Base responsive breakpoints (@media queries)
### Available from common/utils.js
**DO NOT redefine these in your project JavaScript:**
- `toggleSection(sectionId)` - Handles collapsible section toggling
### Available from common/assets/
- `colored-pencil.png` - Default favicon/icon
## Design Guidelines
### Color Palette (Use Consistently)
```css
--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--primary-color: #667eea;
--secondary-color: #764ba2;
--error-red: #e74c3c;
--info-blue: #3498db;
--success-green: #27ae60;
--warning-yellow: #f1c40f;
--text-dark: #333;
--text-medium: #555;
--text-light: #666;
--bg-light: #f8f9fa;
--border-color: #ddd;
```
### Typography
- **Font**: Open Sans (already loaded via Google Fonts)
- **H1**: 2.5em, center-aligned
- **H2**: 1.5-2em, center-aligned
- **H3**: 1.2em
- **Body**: 1em, line-height 1.6
### Spacing
- Use consistent padding/margin: 10px, 15px, 20px, 30px, 40px
- Container padding: 30px (20px on mobile)
- Section margins: 20-25px
### Interactive Elements
- **Hover effects**: Use `transform: translateY(-2px)` or `transform: scale(1.05)`
- **Transitions**: Keep under 0.3s (`transition: all 0.3s ease`)
- **Cursor**: Always use `cursor: pointer` on clickable elements
## File Naming Conventions
- **Directories**: `lowercase-with-hyphens`
- **HTML files**: `index.html` (always)
- **CSS files**: `style.css` (project-specific)
- **JS files**: `script.js` (project-specific)
- **Images**: `descriptive-name.png` or `descriptive-name.jpg`
- **Banner images**: Always `banner_image_generated.png`
## Code Style Guidelines
### HTML
- Use 4-space indentation
- Include semantic HTML5 elements
- Always include proper meta tags
- Use meaningful IDs and class names
- Close all tags properly
### CSS
- Use 4-space indentation
- Group related styles together
- Comment major sections
- Mobile-first responsive design
- Use class selectors over IDs for styling
### JavaScript
- Use 4-space indentation or 2-space (be consistent within file)
- Use `const` and `let`, avoid `var`
- Use descriptive variable/function names
- Comment complex logic
- Use modern ES6+ features where appropriate
## Testing Checklist
Before committing a new project:
- [ ] All HTML validates (no errors)
- [ ] CSS doesn't override common styles unnecessarily
- [ ] JavaScript works without console errors
- [ ] Responsive design works on mobile (test at 320px, 768px, 1024px)
- [ ] All buttons and interactive elements work
- [ ] Collapsible sections toggle correctly
- [ ] "Back to Games" links work
- [ ] Meta tags are complete and accurate
- [ ] Banner image exists and displays correctly
- [ ] Game is playable end-to-end
- [ ] Browser console has no errors
- [ ] Landing page updated with new game card
- [ ] README.md updated with new game entry
## Common Pitfalls to Avoid
1. **❌ Redefining common styles** - Always check `common/styles.css` first
2. **❌ Wrong stylesheet order** - common/styles.css MUST come before style.css
3. **❌ Wrong script order** - common/utils.js MUST come before script.js
4. **❌ Hardcoding paths** - Use relative paths (`../common/...`)
5. **❌ Inconsistent color schemes** - Stick to the defined palette
6. **❌ Missing responsive design** - Always include mobile breakpoints
7. **❌ Forgetting analytics** - Include Google Analytics script
8. **❌ Missing meta tags** - SEO and social sharing require complete meta tags
9. **❌ Not testing mobile** - Always test on small screens
10. **❌ Forgetting to update landing page** - Add your game to index.html
## Quick Reference Commands
```bash
# Create new project structure
mkdir [project-name]
mkdir [project-name]/assets
# Copy common files as templates (don't use these directly!)
# Create your own versions based on guidelines above
# Test locally
open [project-name]/index.html
# Test landing page
open index.html
```
## Questions or Issues?
If you encounter inconsistencies or need clarification:
1. Check existing projects for examples (bouncing-balls, order-chaos, etc.)
2. Review `common/README.md` for shared resources documentation
3. Ensure you're following the structure of successful existing projects
## Version History
- **v1.0** (2025-12-28): Initial guidelines created after refactoring common resources
![[Game Name]]([project-name]/assets/banner_image_generated.png)
](https://prabhakar267.github.io/paper-games/[project-name]/) | **[[Game Name]](https://prabhakar267.github.io/paper-games/[project-name]/)**