Kaj Kowalski
ad8dbb95dd
Some checks failed
CI/CD Pipeline / Test & Lint (16.x) (push) Has been cancelled
CI/CD Pipeline / Test & Lint (18.x) (push) Has been cancelled
CI/CD Pipeline / Test & Lint (20.x) (push) Has been cancelled
CI/CD Pipeline / Security Audit (push) Has been cancelled
CI/CD Pipeline / Release (push) Has been cancelled
Release / Validate Version (push) Has been cancelled
Release / Build and Test (push) Has been cancelled
Release / Create Release (push) Has been cancelled
Release / Publish to NPM (push) Has been cancelled
Release / Deploy Demo (push) Has been cancelled
Animation Processing Pipeline / Validate Animation Names (push) Has been cancelled
Animation Processing Pipeline / Process Blender Animation Assets (push) Has been cancelled
Animation Processing Pipeline / Update Animation Documentation (push) Has been cancelled
Animation Processing Pipeline / Deploy Animation Demo (push) Has been cancelled
- Added AnimationNameMapper class to handle conversion between different animation naming schemes (legacy, artist, hierarchical, semantic). - Included methods for initialization, pattern matching, conversion, and validation of animation names. - Developed comprehensive unit tests for the animation name converter and demo pages using Playwright. - Created a Vite configuration for the demo application, including asset handling and optimization settings. - Enhanced the demo with features for batch conversion, performance metrics, and responsive design.
338 lines
12 KiB
HTML
338 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Scheme Comparison - Owen Animation System</title>
|
|
<link rel="stylesheet" href="./styles/main.css" />
|
|
<link rel="stylesheet" href="./styles/comparison.css" />
|
|
</head>
|
|
<body>
|
|
<header class="demo-header">
|
|
<div class="container">
|
|
<h1 class="logo">
|
|
<span class="logo-text">Owen</span>
|
|
<span class="logo-subtitle">Scheme Comparison</span>
|
|
</h1>
|
|
<nav class="demo-nav">
|
|
<a href="index.html" class="nav-link">Demo</a>
|
|
<a href="examples.html" class="nav-link">Examples</a>
|
|
<a href="comparison.html" class="nav-link active">Comparison</a>
|
|
<a href="interactive.html" class="nav-link">Interactive</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="comparison-main">
|
|
<div class="container">
|
|
<section class="comparison-hero">
|
|
<h2>Animation Naming Scheme Comparison</h2>
|
|
<p>
|
|
Compare the four supported naming schemes and understand when to use
|
|
each one.
|
|
</p>
|
|
</section>
|
|
|
|
<!-- Scheme Overview -->
|
|
<section class="schemes-overview">
|
|
<div class="scheme-cards">
|
|
<div class="scheme-card" data-scheme="legacy">
|
|
<h3>Legacy</h3>
|
|
<div class="scheme-pattern">snake_case</div>
|
|
<div class="scheme-description">
|
|
Traditional lowercase with underscores. Compatible with older
|
|
animation systems.
|
|
</div>
|
|
<div class="scheme-example">walk_forward</div>
|
|
</div>
|
|
|
|
<div class="scheme-card" data-scheme="artist">
|
|
<h3>Artist</h3>
|
|
<div class="scheme-pattern">PascalCase</div>
|
|
<div class="scheme-description">
|
|
Artist-friendly naming with clear capitalization. Intuitive for
|
|
content creators.
|
|
</div>
|
|
<div class="scheme-example">WalkForward</div>
|
|
</div>
|
|
|
|
<div class="scheme-card" data-scheme="hierarchical">
|
|
<h3>Hierarchical</h3>
|
|
<div class="scheme-pattern">dot.notation</div>
|
|
<div class="scheme-description">
|
|
Structured hierarchy with dots. Excellent for organizing complex
|
|
animation sets.
|
|
</div>
|
|
<div class="scheme-example">character.movement.walk.forward</div>
|
|
</div>
|
|
|
|
<div class="scheme-card" data-scheme="semantic">
|
|
<h3>Semantic</h3>
|
|
<div class="scheme-pattern">descriptive_names</div>
|
|
<div class="scheme-description">
|
|
Semantic meaning with underscores. Clear intent and
|
|
self-documenting.
|
|
</div>
|
|
<div class="scheme-example">character_walk_forward</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Interactive Comparison Table -->
|
|
<section class="comparison-table-section">
|
|
<h3>Animation Name Comparison</h3>
|
|
<div class="table-controls">
|
|
<button class="filter-btn active" data-category="all">All</button>
|
|
<button class="filter-btn" data-category="movement">
|
|
Movement
|
|
</button>
|
|
<button class="filter-btn" data-category="combat">Combat</button>
|
|
<button class="filter-btn" data-category="idle">Idle</button>
|
|
<button class="filter-btn" data-category="interaction">
|
|
Interaction
|
|
</button>
|
|
</div>
|
|
|
|
<div class="comparison-table-container">
|
|
<table class="comparison-table" id="animation-comparison-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Animation Type</th>
|
|
<th>Legacy</th>
|
|
<th>Artist</th>
|
|
<th>Hierarchical</th>
|
|
<th>Semantic</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Table will be populated by JavaScript -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Detailed Comparison -->
|
|
<section class="detailed-comparison">
|
|
<h3>Detailed Analysis</h3>
|
|
|
|
<div class="comparison-aspects">
|
|
<div class="aspect-card">
|
|
<h4>🎯 Use Cases</h4>
|
|
<div class="aspect-content">
|
|
<div class="use-case">
|
|
<strong>Legacy:</strong> Migrating from older systems,
|
|
maintaining backward compatibility
|
|
</div>
|
|
<div class="use-case">
|
|
<strong>Artist:</strong> Content creation workflows,
|
|
artist-friendly tools
|
|
</div>
|
|
<div class="use-case">
|
|
<strong>Hierarchical:</strong> Large animation libraries,
|
|
complex character systems
|
|
</div>
|
|
<div class="use-case">
|
|
<strong>Semantic:</strong> Modern development, clear
|
|
documentation needs
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="aspect-card">
|
|
<h4>⚡ Performance</h4>
|
|
<div class="performance-metrics">
|
|
<div class="metric">
|
|
<span class="metric-name">Lookup Speed:</span>
|
|
<div class="metric-bars">
|
|
<div class="metric-bar legacy" style="width: 95%">
|
|
Legacy
|
|
</div>
|
|
<div class="metric-bar artist" style="width: 90%">
|
|
Artist
|
|
</div>
|
|
<div class="metric-bar hierarchical" style="width: 85%">
|
|
Hierarchical
|
|
</div>
|
|
<div class="metric-bar semantic" style="width: 92%">
|
|
Semantic
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="metric">
|
|
<span class="metric-name">Memory Usage:</span>
|
|
<div class="metric-bars">
|
|
<div class="metric-bar legacy" style="width: 88%">
|
|
Legacy
|
|
</div>
|
|
<div class="metric-bar artist" style="width: 85%">
|
|
Artist
|
|
</div>
|
|
<div class="metric-bar hierarchical" style="width: 75%">
|
|
Hierarchical
|
|
</div>
|
|
<div class="metric-bar semantic" style="width: 82%">
|
|
Semantic
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="aspect-card">
|
|
<h4>🛠️ Developer Experience</h4>
|
|
<div class="aspect-content">
|
|
<div class="dx-rating">
|
|
<div class="dx-item">
|
|
<span>Readability:</span>
|
|
<div class="rating-stars">
|
|
<div class="stars legacy">★★★☆☆</div>
|
|
<div class="stars artist">★★★★☆</div>
|
|
<div class="stars hierarchical">★★★★★</div>
|
|
<div class="stars semantic">★★★★★</div>
|
|
</div>
|
|
</div>
|
|
<div class="dx-item">
|
|
<span>Autocomplete:</span>
|
|
<div class="rating-stars">
|
|
<div class="stars legacy">★★★☆☆</div>
|
|
<div class="stars artist">★★★★☆</div>
|
|
<div class="stars hierarchical">★★★★★</div>
|
|
<div class="stars semantic">★★★★☆</div>
|
|
</div>
|
|
</div>
|
|
<div class="dx-item">
|
|
<span>Maintainability:</span>
|
|
<div class="rating-stars">
|
|
<div class="stars legacy">★★☆☆☆</div>
|
|
<div class="stars artist">★★★☆☆</div>
|
|
<div class="stars hierarchical">★★★★★</div>
|
|
<div class="stars semantic">★★★★☆</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Migration Guide -->
|
|
<section class="migration-guide">
|
|
<h3>Migration Between Schemes</h3>
|
|
<div class="migration-matrix">
|
|
<div class="migration-card">
|
|
<h4>From Legacy</h4>
|
|
<ul>
|
|
<li>
|
|
<strong>To Artist:</strong> Capitalize first letter and after
|
|
underscores
|
|
</li>
|
|
<li>
|
|
<strong>To Hierarchical:</strong> Replace underscores with
|
|
dots, add category prefixes
|
|
</li>
|
|
<li>
|
|
<strong>To Semantic:</strong> Add descriptive prefixes
|
|
(character_, ui_, effect_)
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="migration-card">
|
|
<h4>From Artist</h4>
|
|
<ul>
|
|
<li>
|
|
<strong>To Legacy:</strong> Convert to lowercase, add
|
|
underscores before capitals
|
|
</li>
|
|
<li>
|
|
<strong>To Hierarchical:</strong> Split on capitals, join with
|
|
dots, add categories
|
|
</li>
|
|
<li>
|
|
<strong>To Semantic:</strong> Convert to lowercase with
|
|
underscores, add prefixes
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="migration-card">
|
|
<h4>Automated Tools</h4>
|
|
<ul>
|
|
<li>
|
|
<strong>CLI Converter:</strong>
|
|
<code>owen convert --from legacy --to semantic</code>
|
|
</li>
|
|
<li>
|
|
<strong>Batch Processing:</strong>
|
|
<code>owen batch-convert ./animations/</code>
|
|
</li>
|
|
<li>
|
|
<strong>Validation:</strong>
|
|
<code>owen validate --scheme semantic</code>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Best Practices -->
|
|
<section class="best-practices">
|
|
<h3>Best Practices & Recommendations</h3>
|
|
<div class="practices-grid">
|
|
<div class="practice-card">
|
|
<h4>🏢 Enterprise Projects</h4>
|
|
<p><strong>Recommended:</strong> Hierarchical or Semantic</p>
|
|
<ul>
|
|
<li>Clear organization structure</li>
|
|
<li>Easy to maintain and scale</li>
|
|
<li>Good IDE support</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="practice-card">
|
|
<h4>🎨 Artist Workflows</h4>
|
|
<p><strong>Recommended:</strong> Artist or Semantic</p>
|
|
<ul>
|
|
<li>Intuitive for content creators</li>
|
|
<li>Clear visual distinction</li>
|
|
<li>Good tool integration</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="practice-card">
|
|
<h4>🔄 Legacy Migration</h4>
|
|
<p><strong>Recommended:</strong> Gradual transition</p>
|
|
<ul>
|
|
<li>Start with Legacy scheme</li>
|
|
<li>Use auto-conversion features</li>
|
|
<li>Migrate incrementally</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="practice-card">
|
|
<h4>🚀 New Projects</h4>
|
|
<p><strong>Recommended:</strong> Semantic scheme</p>
|
|
<ul>
|
|
<li>Modern best practices</li>
|
|
<li>Self-documenting code</li>
|
|
<li>Future-proof design</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="demo-footer">
|
|
<div class="container">
|
|
<p>
|
|
© 2024 Owen Animation System. Choose the scheme that fits your
|
|
workflow.
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script type="module" src="./js/comparison.js"></script>
|
|
</body>
|
|
</html>
|