Compare commits
11 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
e2402d8fdc
|
|||
|
e217642174
|
|||
|
cb02f280cb
|
|||
| 0d024c5556 | |||
| 0595bf0a82 | |||
|
ad8dbb95dd
|
|||
|
d513e80c07
|
|||
|
472de05e4b
|
|||
|
52f5a204c4
|
|||
|
60aad20b5e
|
|||
|
734da64b98
|
@ -1,70 +0,0 @@
|
||||
{
|
||||
"extends": [
|
||||
"eslint:recommended"
|
||||
],
|
||||
"env": {
|
||||
"browser": true,
|
||||
"es2022": true,
|
||||
"node": true
|
||||
},
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 2022,
|
||||
"sourceType": "module"
|
||||
},
|
||||
"rules": {
|
||||
"indent": [
|
||||
"error",
|
||||
2
|
||||
],
|
||||
"linebreak-style": [
|
||||
"error",
|
||||
"unix"
|
||||
],
|
||||
"quotes": [
|
||||
"error",
|
||||
"single"
|
||||
],
|
||||
"semi": [
|
||||
"error",
|
||||
"always"
|
||||
],
|
||||
"no-unused-vars": [
|
||||
"warn",
|
||||
{
|
||||
"argsIgnorePattern": "^_"
|
||||
}
|
||||
],
|
||||
"no-console": [
|
||||
"warn"
|
||||
],
|
||||
"max-len": [
|
||||
"warn",
|
||||
{
|
||||
"code": 120
|
||||
}
|
||||
]
|
||||
},
|
||||
"overrides": [
|
||||
{
|
||||
"files": [
|
||||
"examples/**/*.js"
|
||||
],
|
||||
"rules": {
|
||||
"no-console": "off"
|
||||
}
|
||||
},
|
||||
{
|
||||
"files": [
|
||||
"src/**/*.js"
|
||||
],
|
||||
"rules": {
|
||||
"no-console": "off"
|
||||
}
|
||||
}
|
||||
],
|
||||
"ignorePatterns": [
|
||||
"node_modules/",
|
||||
"dist/",
|
||||
"docs/"
|
||||
]
|
||||
}
|
||||
38
.github/CODEOWNERS
vendored
Normal file
38
.github/CODEOWNERS
vendored
Normal file
@ -0,0 +1,38 @@
|
||||
# Code owners for the Owen Animation System
|
||||
# These users will be automatically requested for review when PRs are opened
|
||||
|
||||
# Global ownership - project maintainer
|
||||
* @kjanat
|
||||
|
||||
# Core animation system
|
||||
/src/animation/ @kjanat
|
||||
/src/core/OwenAnimationContext.js @kjanat
|
||||
|
||||
# Animation processing and validation scripts
|
||||
/scripts/ @kjanat
|
||||
|
||||
# Configuration files
|
||||
/package.json @kjanat
|
||||
/vite*.config.js @kjanat
|
||||
/jsdoc.config.json @kjanat
|
||||
|
||||
# GitHub workflows and automation
|
||||
/.github/ @kjanat
|
||||
|
||||
# Documentation
|
||||
/docs/ @kjanat
|
||||
/README.md @kjanat
|
||||
/CHANGELOG.md @kjanat
|
||||
/MULTI_SCHEME_GUIDE.md @kjanat
|
||||
|
||||
# Demo application
|
||||
/demo/ @kjanat
|
||||
|
||||
# Examples and integration guides
|
||||
/examples/ @kjanat
|
||||
|
||||
# License files - require special attention
|
||||
/LICENSE.* @kjanat
|
||||
|
||||
# Animation assets - require validation
|
||||
/assets/animations/ @kjanat
|
||||
163
.github/ISSUE_TEMPLATE/animation_scheme.yml
vendored
Normal file
163
.github/ISSUE_TEMPLATE/animation_scheme.yml
vendored
Normal file
@ -0,0 +1,163 @@
|
||||
name: Animation Scheme Issue
|
||||
description: Report issues specific to animation naming schemes or conversions
|
||||
title: "[Scheme]: "
|
||||
labels: ["animation-scheme", "naming", "needs-investigation"]
|
||||
projects: ["kjanat/Owen"]
|
||||
assignees:
|
||||
- kjanat
|
||||
body:
|
||||
- type: markdown
|
||||
attributes:
|
||||
value: |
|
||||
Report issues specific to animation naming schemes, conversions, or multi-scheme functionality.
|
||||
|
||||
- type: checkboxes
|
||||
id: affected-schemes
|
||||
attributes:
|
||||
label: Affected Animation Schemes
|
||||
description: Which naming schemes are affected by this issue?
|
||||
options:
|
||||
- label: Legacy scheme
|
||||
- label: Artist scheme
|
||||
- label: Hierarchical scheme
|
||||
- label: Semantic scheme
|
||||
- label: Multi-scheme conversion
|
||||
- label: All schemes
|
||||
|
||||
- type: dropdown
|
||||
id: issue-category
|
||||
attributes:
|
||||
label: Issue Category
|
||||
description: What category best describes this issue?
|
||||
options:
|
||||
- Name Conversion Error
|
||||
- Scheme Validation Failure
|
||||
- Conflict Detection Issue
|
||||
- Performance Problem
|
||||
- Missing Animation Names
|
||||
- Incorrect Mapping
|
||||
- Blender Integration
|
||||
- Documentation Mismatch
|
||||
- API Inconsistency
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: textarea
|
||||
id: animation-names
|
||||
attributes:
|
||||
label: Animation Names Involved
|
||||
description: Provide the specific animation names that are causing issues
|
||||
placeholder: |
|
||||
Source scheme: artist
|
||||
Animation name: "char_walk_01"
|
||||
|
||||
Target scheme: semantic
|
||||
Expected result: "character.movement.walk.forward"
|
||||
Actual result: "character.walk.01"
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: textarea
|
||||
id: conversion-details
|
||||
attributes:
|
||||
label: Conversion Details
|
||||
description: Provide details about the conversion or mapping issue
|
||||
placeholder: |
|
||||
- What conversion were you attempting?
|
||||
- What was the expected behavior?
|
||||
- What actually happened?
|
||||
- Are there error messages?
|
||||
|
||||
- type: textarea
|
||||
id: reproduction-code
|
||||
attributes:
|
||||
label: Reproduction Code
|
||||
description: Provide code to reproduce the issue
|
||||
render: javascript
|
||||
placeholder: |
|
||||
```javascript
|
||||
import { AnimationNameMapper } from 'owen-animation-system';
|
||||
|
||||
const mapper = new AnimationNameMapper();
|
||||
|
||||
// Code that reproduces the issue
|
||||
const result = mapper.convert('char_walk_01', 'artist', 'semantic');
|
||||
console.log(result); // Shows unexpected result
|
||||
```
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: textarea
|
||||
id: validation-output
|
||||
attributes:
|
||||
label: Validation Output
|
||||
description: If you ran validation scripts, provide the output
|
||||
render: shell
|
||||
placeholder: |
|
||||
$ npm run check:naming-conflicts
|
||||
|
||||
# Output from validation scripts
|
||||
|
||||
- type: dropdown
|
||||
id: severity
|
||||
attributes:
|
||||
label: Severity
|
||||
description: How severe is this issue?
|
||||
options:
|
||||
- Low - Minor inconvenience
|
||||
- Medium - Affects workflow but has workarounds
|
||||
- High - Breaks functionality significantly
|
||||
- Critical - Prevents system usage
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: textarea
|
||||
id: environment-details
|
||||
attributes:
|
||||
label: Environment Details
|
||||
description: Provide environment information
|
||||
placeholder: |
|
||||
- Owen Animation System version: v1.2.3
|
||||
- Node.js version: v18.17.0
|
||||
- Animation assets source: Blender 3.6
|
||||
- Integration: React/Vue/Vanilla JS
|
||||
- OS: Windows/macOS/Linux
|
||||
|
||||
- type: textarea
|
||||
id: workaround
|
||||
attributes:
|
||||
label: Current Workaround
|
||||
description: If you found a workaround, please describe it
|
||||
placeholder: Describe any temporary solutions you're using
|
||||
|
||||
- type: checkboxes
|
||||
id: impact
|
||||
attributes:
|
||||
label: Impact Assessment
|
||||
options:
|
||||
- label: Affects multiple animation assets
|
||||
- label: Blocks automated processing
|
||||
- label: Requires manual intervention
|
||||
- label: Affects production builds
|
||||
- label: Impacts team workflow
|
||||
|
||||
- type: checkboxes
|
||||
id: terms
|
||||
attributes:
|
||||
label: Code of Conduct
|
||||
description: By submitting this issue, you agree to follow our Code of Conduct
|
||||
options:
|
||||
- label: I agree to follow this project's Code of Conduct
|
||||
required: true
|
||||
|
||||
- type: checkboxes
|
||||
id: checklist
|
||||
attributes:
|
||||
label: Pre-submission checklist
|
||||
options:
|
||||
- label: I have provided specific animation names and schemes
|
||||
required: true
|
||||
- label: I have included reproduction code
|
||||
required: true
|
||||
- label: I have checked existing issues for similar problems
|
||||
required: true
|
||||
129
.github/ISSUE_TEMPLATE/bug_report.yml
vendored
Normal file
129
.github/ISSUE_TEMPLATE/bug_report.yml
vendored
Normal file
@ -0,0 +1,129 @@
|
||||
name: Bug Report
|
||||
description: Create a report to help us improve the Owen Animation System
|
||||
title: "[Bug]: "
|
||||
labels: ["bug", "needs-triage"]
|
||||
projects: ["kjanat/Owen"]
|
||||
assignees:
|
||||
- kjanat
|
||||
body:
|
||||
- type: markdown
|
||||
attributes:
|
||||
value: |
|
||||
Thanks for taking the time to fill out this bug report! Please provide as much detail as possible to help us understand and reproduce the issue.
|
||||
|
||||
- type: textarea
|
||||
id: what-happened
|
||||
attributes:
|
||||
label: What happened?
|
||||
description: A clear and concise description of what the bug is.
|
||||
placeholder: Tell us what you see!
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: textarea
|
||||
id: expected-behavior
|
||||
attributes:
|
||||
label: Expected behavior
|
||||
description: A clear and concise description of what you expected to happen.
|
||||
placeholder: What should have happened instead?
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: textarea
|
||||
id: reproduction-steps
|
||||
attributes:
|
||||
label: Steps to reproduce
|
||||
description: Steps to reproduce the behavior
|
||||
placeholder: |
|
||||
1. Go to '...'
|
||||
2. Click on '...'
|
||||
3. Scroll down to '...'
|
||||
4. See error
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: dropdown
|
||||
id: animation-scheme
|
||||
attributes:
|
||||
label: Animation Naming Scheme
|
||||
description: Which animation naming scheme were you using when the bug occurred?
|
||||
options:
|
||||
- Legacy
|
||||
- Artist
|
||||
- Hierarchical
|
||||
- Semantic
|
||||
- Multiple schemes
|
||||
- Not applicable
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: dropdown
|
||||
id: environment
|
||||
attributes:
|
||||
label: Environment
|
||||
description: Where did you encounter this bug?
|
||||
options:
|
||||
- Browser (Web)
|
||||
- Node.js
|
||||
- React integration
|
||||
- Vue integration
|
||||
- Blender integration
|
||||
- Demo application
|
||||
- Documentation
|
||||
- Other
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: textarea
|
||||
id: browser-info
|
||||
attributes:
|
||||
label: Browser/Runtime Information
|
||||
description: If applicable, provide browser or runtime version information
|
||||
placeholder: |
|
||||
- Browser: Chrome 91.0
|
||||
- Node.js: v18.17.0
|
||||
- OS: Windows 11
|
||||
- Owen Animation System: v1.2.3
|
||||
|
||||
- type: textarea
|
||||
id: code-sample
|
||||
attributes:
|
||||
label: Code Sample
|
||||
description: If applicable, provide a minimal code sample that reproduces the issue
|
||||
render: javascript
|
||||
placeholder: |
|
||||
```javascript
|
||||
import { AnimationNameMapper } from 'owen-animation-system';
|
||||
|
||||
const mapper = new AnimationNameMapper();
|
||||
// Your code that demonstrates the issue
|
||||
```
|
||||
|
||||
- type: textarea
|
||||
id: logs
|
||||
attributes:
|
||||
label: Relevant log output
|
||||
description: Please copy and paste any relevant log output. This will be automatically formatted into code, so no need for backticks.
|
||||
render: shell
|
||||
|
||||
- type: checkboxes
|
||||
id: terms
|
||||
attributes:
|
||||
label: Code of Conduct
|
||||
description: By submitting this issue, you agree to follow our Code of Conduct
|
||||
options:
|
||||
- label: I agree to follow this project's Code of Conduct
|
||||
required: true
|
||||
|
||||
- type: checkboxes
|
||||
id: checklist
|
||||
attributes:
|
||||
label: Pre-submission checklist
|
||||
description: Please verify the following before submitting
|
||||
options:
|
||||
- label: I have searched existing issues to make sure this is not a duplicate
|
||||
required: true
|
||||
- label: I have provided a clear and concise description of the bug
|
||||
required: true
|
||||
- label: I have included steps to reproduce the issue
|
||||
required: true
|
||||
17
.github/ISSUE_TEMPLATE/config.yml
vendored
Normal file
17
.github/ISSUE_TEMPLATE/config.yml
vendored
Normal file
@ -0,0 +1,17 @@
|
||||
blank_issues_enabled: false
|
||||
contact_links:
|
||||
- name: Discussion Forum
|
||||
url: https://github.com/kjanat/Owen/discussions
|
||||
about: Ask questions, share ideas, and discuss the Owen Animation System with the community
|
||||
# - name: Discord Community
|
||||
# url: https://discord.gg/owen-animation
|
||||
# about: Join our Discord server for real-time chat and support
|
||||
- name: Documentation
|
||||
url: https://kjanat.github.io/Owen/
|
||||
about: Check our comprehensive documentation and guides
|
||||
- name: Multi-Scheme Guide
|
||||
url: https://github.com/kjanat/Owen/blob/main/MULTI_SCHEME_GUIDE.md
|
||||
about: Learn about animation naming schemes and conversions
|
||||
- name: Demo Application
|
||||
url: https://kjanat.github.io/Owen/demo/
|
||||
about: Try the interactive demo to understand the system capabilities
|
||||
139
.github/ISSUE_TEMPLATE/documentation.yml
vendored
Normal file
139
.github/ISSUE_TEMPLATE/documentation.yml
vendored
Normal file
@ -0,0 +1,139 @@
|
||||
name: Documentation Issue
|
||||
description: Report an issue with documentation or suggest improvements
|
||||
title: "[Docs]: "
|
||||
labels: ["documentation", "needs-review"]
|
||||
projects: ["kjanat/Owen"]
|
||||
assignees:
|
||||
- kjanat
|
||||
body:
|
||||
- type: markdown
|
||||
attributes:
|
||||
value: |
|
||||
Thanks for helping improve our documentation! Please provide details about the documentation issue or improvement.
|
||||
|
||||
- type: dropdown
|
||||
id: doc-type
|
||||
attributes:
|
||||
label: Documentation Type
|
||||
description: What type of documentation is affected?
|
||||
options:
|
||||
- API Documentation (JSDoc)
|
||||
- README.md
|
||||
- Multi-Scheme Guide
|
||||
- Code Examples
|
||||
- Demo Application
|
||||
- Installation Guide
|
||||
- Integration Guide
|
||||
- Changelog
|
||||
- Contributing Guide
|
||||
- Other
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: dropdown
|
||||
id: issue-type
|
||||
attributes:
|
||||
label: Issue Type
|
||||
description: What type of documentation issue is this?
|
||||
options:
|
||||
- Error/Mistake
|
||||
- Missing Information
|
||||
- Unclear/Confusing
|
||||
- Outdated Information
|
||||
- Missing Examples
|
||||
- Formatting Issues
|
||||
- Typo/Grammar
|
||||
- Improvement Suggestion
|
||||
- New Documentation Needed
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: textarea
|
||||
id: location
|
||||
attributes:
|
||||
label: Location
|
||||
description: Where did you find this issue? Provide a link or file path if possible.
|
||||
placeholder: |
|
||||
- URL: https://example.com/docs/...
|
||||
- File: README.md (line 45)
|
||||
- Section: "Animation Name Mapping"
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: textarea
|
||||
id: current-content
|
||||
attributes:
|
||||
label: Current Content
|
||||
description: What is the current documentation content that needs improvement?
|
||||
placeholder: Copy the current text or describe what's missing
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: textarea
|
||||
id: suggested-improvement
|
||||
attributes:
|
||||
label: Suggested Improvement
|
||||
description: How should the documentation be improved?
|
||||
placeholder: |
|
||||
- What should be added, changed, or removed?
|
||||
- Provide suggested text if applicable
|
||||
- Include code examples if relevant
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: textarea
|
||||
id: context
|
||||
attributes:
|
||||
label: Additional Context
|
||||
description: Any additional context about why this improvement is needed
|
||||
placeholder: |
|
||||
- What task were you trying to accomplish?
|
||||
- What confused you?
|
||||
- How would this help other users?
|
||||
|
||||
- type: textarea
|
||||
id: code-example
|
||||
attributes:
|
||||
label: Code Example
|
||||
description: If suggesting code documentation improvements, provide examples
|
||||
render: javascript
|
||||
placeholder: |
|
||||
```javascript
|
||||
// Current example (if exists)
|
||||
|
||||
// Suggested improved example
|
||||
```
|
||||
|
||||
- type: checkboxes
|
||||
id: affected-users
|
||||
attributes:
|
||||
label: Who would benefit from this improvement?
|
||||
options:
|
||||
- label: New users learning the system
|
||||
- label: Experienced developers integrating the system
|
||||
- label: Contributors to the project
|
||||
- label: Users of specific naming schemes
|
||||
- label: Blender integration users
|
||||
- label: React/Vue integration users
|
||||
|
||||
- type: checkboxes
|
||||
id: terms
|
||||
attributes:
|
||||
label: Code of Conduct
|
||||
description: By submitting this issue, you agree to follow our Code of Conduct
|
||||
options:
|
||||
- label: I agree to follow this project's Code of Conduct
|
||||
required: true
|
||||
|
||||
- type: checkboxes
|
||||
id: checklist
|
||||
attributes:
|
||||
label: Pre-submission checklist
|
||||
description: Please verify the following before submitting
|
||||
options:
|
||||
- label: I have checked that this documentation issue hasn't been reported already
|
||||
required: true
|
||||
- label: I have provided specific location information
|
||||
required: true
|
||||
- label: I have suggested concrete improvements
|
||||
required: true
|
||||
144
.github/ISSUE_TEMPLATE/feature_request.yml
vendored
Normal file
144
.github/ISSUE_TEMPLATE/feature_request.yml
vendored
Normal file
@ -0,0 +1,144 @@
|
||||
name: Feature Request
|
||||
description: Suggest an idea for the Owen Animation System
|
||||
title: "[Feature]: "
|
||||
labels: ["enhancement", "feature-request"]
|
||||
projects: ["kjanat/Owen"]
|
||||
assignees:
|
||||
- kjanat
|
||||
body:
|
||||
- type: markdown
|
||||
attributes:
|
||||
value: |
|
||||
Thanks for suggesting a new feature! Please provide as much detail as possible to help us understand your request.
|
||||
|
||||
- type: textarea
|
||||
id: problem-description
|
||||
attributes:
|
||||
label: Problem Description
|
||||
description: Is your feature request related to a problem? Please describe the problem or limitation you're experiencing.
|
||||
placeholder: A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: textarea
|
||||
id: proposed-solution
|
||||
attributes:
|
||||
label: Proposed Solution
|
||||
description: Describe the solution you'd like to see implemented.
|
||||
placeholder: A clear and concise description of what you want to happen.
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: textarea
|
||||
id: alternatives
|
||||
attributes:
|
||||
label: Alternatives Considered
|
||||
description: Describe any alternative solutions or features you've considered.
|
||||
placeholder: A clear and concise description of any alternative solutions or features you've considered.
|
||||
|
||||
- type: dropdown
|
||||
id: feature-area
|
||||
attributes:
|
||||
label: Feature Area
|
||||
description: Which area of the system would this feature affect?
|
||||
options:
|
||||
- Animation Name Mapping
|
||||
- Naming Schemes (Legacy/Artist/Hierarchical/Semantic)
|
||||
- Core Animation System
|
||||
- Blender Integration
|
||||
- Documentation
|
||||
- Demo Application
|
||||
- Build System
|
||||
- Testing Framework
|
||||
- Performance
|
||||
- Developer Experience
|
||||
- API Design
|
||||
- Other
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: dropdown
|
||||
id: priority
|
||||
attributes:
|
||||
label: Priority
|
||||
description: How important is this feature to you?
|
||||
options:
|
||||
- Low - Nice to have
|
||||
- Medium - Would improve workflow
|
||||
- High - Blocking current work
|
||||
- Critical - Major limitation
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: textarea
|
||||
id: use-case
|
||||
attributes:
|
||||
label: Use Case
|
||||
description: Describe how you would use this feature and what benefits it would provide.
|
||||
placeholder: |
|
||||
Describe your specific use case:
|
||||
- What are you trying to accomplish?
|
||||
- How would this feature help?
|
||||
- Who else might benefit from this feature?
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: textarea
|
||||
id: implementation-ideas
|
||||
attributes:
|
||||
label: Implementation Ideas
|
||||
description: If you have ideas about how this could be implemented, please share them.
|
||||
placeholder: |
|
||||
Any thoughts on implementation approach:
|
||||
- API design suggestions
|
||||
- Integration points
|
||||
- Configuration options
|
||||
- Breaking changes considerations
|
||||
|
||||
- type: textarea
|
||||
id: code-example
|
||||
attributes:
|
||||
label: Code Example
|
||||
description: If applicable, provide a code example showing how you'd like to use this feature.
|
||||
render: javascript
|
||||
placeholder: |
|
||||
```javascript
|
||||
// Example of how the feature might be used
|
||||
const mapper = new AnimationNameMapper();
|
||||
|
||||
// Your proposed API usage
|
||||
mapper.newFeature(options);
|
||||
```
|
||||
|
||||
- type: checkboxes
|
||||
id: compatibility
|
||||
attributes:
|
||||
label: Compatibility Considerations
|
||||
description: Please consider the impact of this feature
|
||||
options:
|
||||
- label: This feature should be backward compatible
|
||||
- label: This feature may require breaking changes (acceptable)
|
||||
- label: This feature should work with all naming schemes
|
||||
- label: This feature affects the public API
|
||||
|
||||
- type: checkboxes
|
||||
id: terms
|
||||
attributes:
|
||||
label: Code of Conduct
|
||||
description: By submitting this issue, you agree to follow our Code of Conduct
|
||||
options:
|
||||
- label: I agree to follow this project's Code of Conduct
|
||||
required: true
|
||||
|
||||
- type: checkboxes
|
||||
id: checklist
|
||||
attributes:
|
||||
label: Pre-submission checklist
|
||||
description: Please verify the following before submitting
|
||||
options:
|
||||
- label: I have searched existing issues and discussions for similar requests
|
||||
required: true
|
||||
- label: I have provided a clear description of the problem and proposed solution
|
||||
required: true
|
||||
- label: I have considered the impact on existing functionality
|
||||
required: true
|
||||
85
.github/dependabot.yml
vendored
Normal file
85
.github/dependabot.yml
vendored
Normal file
@ -0,0 +1,85 @@
|
||||
version: 2
|
||||
updates:
|
||||
# Enable version updates for npm
|
||||
- package-ecosystem: "npm"
|
||||
directory: "/"
|
||||
schedule:
|
||||
interval: "weekly"
|
||||
day: "monday"
|
||||
time: "09:00"
|
||||
open-pull-requests-limit: 10
|
||||
reviewers:
|
||||
- "kjanat"
|
||||
assignees:
|
||||
- "kjanat"
|
||||
commit-message:
|
||||
prefix: "deps"
|
||||
prefix-development: "deps-dev"
|
||||
include: "scope"
|
||||
labels:
|
||||
- "dependencies"
|
||||
- "javascript"
|
||||
ignore:
|
||||
# Ignore major version updates for critical dependencies
|
||||
- dependency-name: "node"
|
||||
update-types: ["version-update:semver-major"]
|
||||
- dependency-name: "vite"
|
||||
update-types: ["version-update:semver-major"]
|
||||
groups:
|
||||
development-dependencies:
|
||||
dependency-type: "development"
|
||||
patterns:
|
||||
- "@types/*"
|
||||
- "eslint*"
|
||||
- "prettier*"
|
||||
- "jest*"
|
||||
- "playwright*"
|
||||
- "vite*"
|
||||
animation-dependencies:
|
||||
patterns:
|
||||
- "*three*"
|
||||
- "*gltf*"
|
||||
- "*animation*"
|
||||
testing-dependencies:
|
||||
patterns:
|
||||
- "*test*"
|
||||
- "*mock*"
|
||||
- "*spec*"
|
||||
|
||||
# Enable version updates for GitHub Actions
|
||||
- package-ecosystem: "github-actions"
|
||||
directory: "/"
|
||||
schedule:
|
||||
interval: "weekly"
|
||||
day: "monday"
|
||||
time: "09:00"
|
||||
reviewers:
|
||||
- "kjanat"
|
||||
assignees:
|
||||
- "kjanat"
|
||||
commit-message:
|
||||
prefix: "ci"
|
||||
include: "scope"
|
||||
labels:
|
||||
- "github-actions"
|
||||
- "ci/cd"
|
||||
|
||||
# Enable version updates for Python (Blender scripts)
|
||||
- package-ecosystem: "pip"
|
||||
directory: "/scripts"
|
||||
schedule:
|
||||
interval: "monthly"
|
||||
day: "monday"
|
||||
time: "09:00"
|
||||
reviewers:
|
||||
- "kjanat"
|
||||
assignees:
|
||||
- "kjanat"
|
||||
commit-message:
|
||||
prefix: "deps"
|
||||
prefix-development: "deps-dev"
|
||||
include: "scope"
|
||||
labels:
|
||||
- "dependencies"
|
||||
- "python"
|
||||
- "blender"
|
||||
169
.github/workflows/animation-processing.yml
vendored
Normal file
169
.github/workflows/animation-processing.yml
vendored
Normal file
@ -0,0 +1,169 @@
|
||||
name: Animation Processing Pipeline
|
||||
|
||||
on:
|
||||
push:
|
||||
paths:
|
||||
- 'assets/animations/**'
|
||||
- 'src/animation/AnimationNameMapper.js'
|
||||
- 'src/animation/AnimationConstants.js'
|
||||
pull_request:
|
||||
paths:
|
||||
- 'assets/animations/**'
|
||||
- 'src/animation/AnimationNameMapper.js'
|
||||
- 'src/animation/AnimationConstants.js'
|
||||
workflow_dispatch:
|
||||
inputs:
|
||||
animation_scheme:
|
||||
description: 'Primary naming scheme to use'
|
||||
required: true
|
||||
default: 'semantic'
|
||||
type: choice
|
||||
options:
|
||||
- legacy
|
||||
- artist
|
||||
- hierarchical
|
||||
- semantic
|
||||
|
||||
jobs:
|
||||
validate-animations:
|
||||
name: Validate Animation Names
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: '20.x'
|
||||
cache: 'npm'
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
|
||||
- name: Validate animation naming schemes
|
||||
run: node scripts/validate-animations.js
|
||||
env:
|
||||
PRIMARY_SCHEME: ${{ github.event.inputs.animation_scheme || 'semantic' }}
|
||||
|
||||
- name: Generate animation constants
|
||||
run: node scripts/generate-animation-constants.js
|
||||
|
||||
- name: Check for naming conflicts
|
||||
run: node scripts/check-naming-conflicts.js
|
||||
|
||||
- name: Upload validation report
|
||||
uses: actions/upload-artifact@v4
|
||||
with:
|
||||
name: animation-validation-report
|
||||
path: |
|
||||
reports/animation-validation.json
|
||||
reports/naming-conflicts.json
|
||||
|
||||
process-blender-assets:
|
||||
name: Process Blender Animation Assets
|
||||
runs-on: ubuntu-latest
|
||||
if: contains(github.event.head_commit.message, '[process-blender]') || github.event_name == 'workflow_dispatch'
|
||||
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Setup Blender
|
||||
uses: FlorianBreitwieser/setup-blender@v1
|
||||
with:
|
||||
blender-version: '3.6'
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: '20.x'
|
||||
cache: 'npm'
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
|
||||
- name: Process Blender files
|
||||
run: |
|
||||
python scripts/blender-animation-processor.py \
|
||||
--input-dir assets/blender \
|
||||
--output-dir assets/animations \
|
||||
--naming-scheme artist
|
||||
|
||||
- name: Convert animation names
|
||||
run: node scripts/convert-animation-names.js
|
||||
|
||||
- name: Validate processed animations
|
||||
run: node scripts/validate-processed-animations.js
|
||||
|
||||
- name: Commit processed assets
|
||||
uses: stefanzweifel/git-auto-commit-action@v5
|
||||
with:
|
||||
commit_message: 'Auto-process Blender animation assets [skip ci]'
|
||||
file_pattern: 'assets/animations/* src/animation/AnimationConstants.js'
|
||||
|
||||
update-documentation:
|
||||
name: Update Animation Documentation
|
||||
runs-on: ubuntu-latest
|
||||
needs: [validate-animations]
|
||||
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: '20.x'
|
||||
cache: 'npm'
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
|
||||
- name: Generate animation documentation
|
||||
run: node scripts/generate-animation-docs.js
|
||||
|
||||
- name: Update API documentation
|
||||
run: npm run docs
|
||||
|
||||
- name: Generate multi-scheme examples
|
||||
run: node scripts/generate-scheme-examples.js
|
||||
|
||||
- name: Commit documentation updates
|
||||
uses: stefanzweifel/git-auto-commit-action@v5
|
||||
with:
|
||||
commit_message: 'Auto-update animation documentation [skip ci]'
|
||||
file_pattern: |
|
||||
docs/**
|
||||
MULTI_SCHEME_GUIDE.md
|
||||
examples/*/README.md
|
||||
|
||||
deploy-demo:
|
||||
name: Deploy Animation Demo
|
||||
runs-on: ubuntu-latest
|
||||
needs: [validate-animations, update-documentation]
|
||||
if: github.ref == 'refs/heads/main' || github.ref == 'refs/heads/master'
|
||||
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: '20.x'
|
||||
cache: 'npm'
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
|
||||
- name: Build demo
|
||||
run: npm run build:demo
|
||||
|
||||
- name: Deploy to GitHub Pages
|
||||
uses: peaceiris/actions-gh-pages@v4
|
||||
with:
|
||||
github_token: ${{ secrets.GITHUB_TOKEN }}
|
||||
publish_dir: ./dist-demo
|
||||
cname: owen-animation-demo.your-domain.com
|
||||
118
.github/workflows/ci.yml
vendored
Normal file
118
.github/workflows/ci.yml
vendored
Normal file
@ -0,0 +1,118 @@
|
||||
name: CI/CD Pipeline
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [ main, master, develop ]
|
||||
pull_request:
|
||||
branches: [ main, master ]
|
||||
|
||||
jobs:
|
||||
test:
|
||||
name: Test & Lint
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
strategy:
|
||||
matrix:
|
||||
node-version: [16.x, 18.x, 20.x]
|
||||
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Setup Node.js ${{ matrix.node-version }}
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: ${{ matrix.node-version }}
|
||||
cache: 'npm'
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
|
||||
- name: Run linting
|
||||
run: npm run lint
|
||||
|
||||
- name: Build project
|
||||
run: npm run build
|
||||
|
||||
- name: Generate documentation
|
||||
run: npm run docs
|
||||
|
||||
- name: Upload build artifacts
|
||||
if: matrix.node-version == '20.x'
|
||||
uses: actions/upload-artifact@v4
|
||||
with:
|
||||
name: build-artifacts
|
||||
path: |
|
||||
dist/
|
||||
docs/
|
||||
|
||||
security:
|
||||
name: Security Audit
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: '20.x'
|
||||
cache: 'npm'
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
|
||||
- name: Run security audit
|
||||
run: npm audit --audit-level=high
|
||||
|
||||
- name: Run security scan
|
||||
uses: securecodewarrior/github-action-add-sarif@v1
|
||||
with:
|
||||
sarif-file: 'security-scan-results.sarif'
|
||||
continue-on-error: true
|
||||
|
||||
release:
|
||||
name: Release
|
||||
runs-on: ubuntu-latest
|
||||
needs: [test, security]
|
||||
if: github.ref == 'refs/heads/main' || github.ref == 'refs/heads/master'
|
||||
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: '20.x'
|
||||
cache: 'npm'
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
|
||||
- name: Build project
|
||||
run: npm run build
|
||||
|
||||
- name: Generate documentation
|
||||
run: npm run docs
|
||||
|
||||
- name: Download build artifacts
|
||||
uses: actions/download-artifact@v4
|
||||
with:
|
||||
name: build-artifacts
|
||||
|
||||
- name: Create release
|
||||
uses: softprops/action-gh-release@v2
|
||||
if: startsWith(github.ref, 'refs/tags/')
|
||||
with:
|
||||
files: |
|
||||
dist/**
|
||||
docs/**
|
||||
CHANGELOG.md
|
||||
README.md
|
||||
MULTI_SCHEME_GUIDE.md
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
246
.github/workflows/demo-deployment.yml
vendored
Normal file
246
.github/workflows/demo-deployment.yml
vendored
Normal file
@ -0,0 +1,246 @@
|
||||
name: Demo Deployment
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [ main, master ]
|
||||
paths:
|
||||
- 'demo/**'
|
||||
- 'src/**'
|
||||
- 'vite.demo.config.js'
|
||||
- 'package.json'
|
||||
pull_request:
|
||||
branches: [ main, master ]
|
||||
paths:
|
||||
- 'demo/**'
|
||||
- 'src/**'
|
||||
- 'vite.demo.config.js'
|
||||
workflow_dispatch:
|
||||
inputs:
|
||||
environment:
|
||||
description: 'Deployment environment'
|
||||
required: true
|
||||
default: 'staging'
|
||||
type: choice
|
||||
options:
|
||||
- staging
|
||||
- production
|
||||
|
||||
env:
|
||||
NODE_VERSION: '20.x'
|
||||
|
||||
jobs:
|
||||
build-demo:
|
||||
name: Build Demo
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: ${{ env.NODE_VERSION }}
|
||||
cache: 'npm'
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
|
||||
- name: Generate animation constants
|
||||
run: npm run generate:constants
|
||||
|
||||
- name: Build demo application
|
||||
run: npm run build:demo
|
||||
env:
|
||||
NODE_ENV: production
|
||||
|
||||
- name: Validate demo build
|
||||
run: |
|
||||
test -d dist/demo || (echo "Demo build failed - dist/demo directory not found" && exit 1)
|
||||
test -f dist/demo/index.html || (echo "Demo build failed - index.html not found" && exit 1)
|
||||
test -f dist/demo/examples.html || (echo "Demo build failed - examples.html not found" && exit 1)
|
||||
test -f dist/demo/comparison.html || (echo "Demo build failed - comparison.html not found" && exit 1)
|
||||
test -f dist/demo/interactive.html || (echo "Demo build failed - interactive.html not found" && exit 1)
|
||||
|
||||
- name: Upload demo artifacts
|
||||
uses: actions/upload-artifact@v4
|
||||
with:
|
||||
name: demo-build
|
||||
path: dist/demo/
|
||||
retention-days: 30
|
||||
|
||||
- name: Upload build reports
|
||||
uses: actions/upload-artifact@v4
|
||||
with:
|
||||
name: build-reports
|
||||
path: |
|
||||
dist/demo/report.html
|
||||
dist/demo/stats.json
|
||||
retention-days: 7
|
||||
|
||||
test-demo:
|
||||
name: Test Demo
|
||||
runs-on: ubuntu-latest
|
||||
needs: build-demo
|
||||
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: ${{ env.NODE_VERSION }}
|
||||
cache: 'npm'
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
|
||||
- name: Download demo build
|
||||
uses: actions/download-artifact@v4
|
||||
with:
|
||||
name: demo-build
|
||||
path: dist/demo/
|
||||
|
||||
- name: Install Playwright
|
||||
run: npx playwright install --with-deps
|
||||
|
||||
- name: Run demo tests
|
||||
run: npm run test:demo
|
||||
env:
|
||||
CI: true
|
||||
PLAYWRIGHT_BROWSERS_PATH: ${{ github.workspace }}/ms-playwright
|
||||
|
||||
- name: Upload test results
|
||||
uses: actions/upload-artifact@v4
|
||||
if: always()
|
||||
with:
|
||||
name: playwright-report
|
||||
path: playwright-report/
|
||||
retention-days: 7
|
||||
|
||||
- name: Upload test screenshots
|
||||
uses: actions/upload-artifact@v4
|
||||
if: failure()
|
||||
with:
|
||||
name: test-screenshots
|
||||
path: test-results/
|
||||
retention-days: 7
|
||||
|
||||
lighthouse-audit:
|
||||
name: Performance Audit
|
||||
runs-on: ubuntu-latest
|
||||
needs: build-demo
|
||||
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: ${{ env.NODE_VERSION }}
|
||||
cache: 'npm'
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
|
||||
- name: Download demo build
|
||||
uses: actions/download-artifact@v4
|
||||
with:
|
||||
name: demo-build
|
||||
path: dist/demo/
|
||||
|
||||
- name: Install Lighthouse
|
||||
run: npm install -g @lhci/cli lighthouse
|
||||
|
||||
- name: Start demo server
|
||||
run: |
|
||||
npx vite preview --config vite.demo.config.js --port 3000 &
|
||||
sleep 10
|
||||
env:
|
||||
NODE_ENV: production
|
||||
|
||||
- name: Run Lighthouse audit
|
||||
run: |
|
||||
lhci autorun
|
||||
env:
|
||||
LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
|
||||
|
||||
- name: Upload Lighthouse results
|
||||
uses: actions/upload-artifact@v4
|
||||
with:
|
||||
name: lighthouse-reports
|
||||
path: .lighthouseci/
|
||||
retention-days: 7
|
||||
|
||||
deploy-staging:
|
||||
name: Deploy to Staging
|
||||
runs-on: ubuntu-latest
|
||||
needs: [build-demo, test-demo]
|
||||
if: github.ref == 'refs/heads/main' || github.ref == 'refs/heads/master' || github.event.inputs.environment == 'staging'
|
||||
environment: staging
|
||||
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Download demo build
|
||||
uses: actions/download-artifact@v4
|
||||
with:
|
||||
name: demo-build
|
||||
path: dist/demo/
|
||||
|
||||
- name: Deploy to staging
|
||||
uses: peaceiris/actions-gh-pages@v4
|
||||
with:
|
||||
github_token: ${{ secrets.GITHUB_TOKEN }}
|
||||
publish_dir: ./dist/demo
|
||||
publish_branch: gh-pages-staging
|
||||
force_orphan: true
|
||||
|
||||
- name: Update deployment status
|
||||
run: |
|
||||
echo "Demo deployed to staging: https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}/staging/"
|
||||
|
||||
deploy-production:
|
||||
name: Deploy to Production
|
||||
runs-on: ubuntu-latest
|
||||
needs: [build-demo, test-demo, lighthouse-audit]
|
||||
if: github.ref == 'refs/heads/main' && github.event.inputs.environment == 'production'
|
||||
environment: production
|
||||
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Download demo build
|
||||
uses: actions/download-artifact@v4
|
||||
with:
|
||||
name: demo-build
|
||||
path: dist/demo/
|
||||
|
||||
- name: Deploy to production
|
||||
uses: peaceiris/actions-gh-pages@v4
|
||||
with:
|
||||
github_token: ${{ secrets.GITHUB_TOKEN }}
|
||||
publish_dir: ./dist/demo
|
||||
publish_branch: gh-pages
|
||||
force_orphan: true
|
||||
|
||||
- name: Update deployment status
|
||||
run: |
|
||||
echo "Demo deployed to production: https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}/"
|
||||
|
||||
- name: Create deployment notification
|
||||
uses: actions/github-script@v7
|
||||
with:
|
||||
script: |
|
||||
github.rest.repos.createDeploymentStatus({
|
||||
owner: context.repo.owner,
|
||||
repo: context.repo.repo,
|
||||
deployment_id: context.payload.deployment.id,
|
||||
state: 'success',
|
||||
environment_url: 'https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}/',
|
||||
description: 'Demo successfully deployed'
|
||||
});
|
||||
251
.github/workflows/multi-scheme-testing.yml
vendored
Normal file
251
.github/workflows/multi-scheme-testing.yml
vendored
Normal file
@ -0,0 +1,251 @@
|
||||
name: Multi-Scheme Testing
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [ main, master, develop ]
|
||||
paths:
|
||||
- 'src/animation/**'
|
||||
- 'src/core/OwenAnimationContext.js'
|
||||
- 'examples/**'
|
||||
pull_request:
|
||||
branches: [ main, master ]
|
||||
paths:
|
||||
- 'src/animation/**'
|
||||
- 'src/core/OwenAnimationContext.js'
|
||||
- 'examples/**'
|
||||
schedule:
|
||||
# Run daily at 2 AM UTC
|
||||
- cron: '0 2 * * *'
|
||||
|
||||
env:
|
||||
NODE_VERSION: '20.x'
|
||||
|
||||
jobs:
|
||||
scheme-validation:
|
||||
name: Validate Naming Schemes
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
strategy:
|
||||
matrix:
|
||||
scheme: [legacy, artist, hierarchical, semantic]
|
||||
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: ${{ env.NODE_VERSION }}
|
||||
cache: 'npm'
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
|
||||
- name: Test ${{ matrix.scheme }} scheme
|
||||
run: |
|
||||
node -e "
|
||||
const { AnimationNameMapper } = require('./src/animation/AnimationNameMapper.js');
|
||||
const mapper = new AnimationNameMapper();
|
||||
|
||||
console.log('Testing ${{ matrix.scheme }} scheme...');
|
||||
|
||||
// Test all animations in this scheme
|
||||
const animations = mapper.getAllAnimationsByScheme('${{ matrix.scheme }}');
|
||||
console.log('Found', animations.length, 'animations');
|
||||
|
||||
// Test conversions
|
||||
let errors = 0;
|
||||
animations.forEach(anim => {
|
||||
try {
|
||||
const converted = mapper.convert(anim, '${{ matrix.scheme }}');
|
||||
if (converted !== anim) {
|
||||
console.error('Conversion error:', anim, '->', converted);
|
||||
errors++;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Error processing:', anim, e.message);
|
||||
errors++;
|
||||
}
|
||||
});
|
||||
|
||||
if (errors > 0) {
|
||||
console.error('Found', errors, 'errors in ${{ matrix.scheme }} scheme');
|
||||
process.exit(1);
|
||||
} else {
|
||||
console.log('All ${{ matrix.scheme }} animations validated successfully');
|
||||
}
|
||||
"
|
||||
|
||||
conversion-matrix:
|
||||
name: Test Scheme Conversions
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: ${{ env.NODE_VERSION }}
|
||||
cache: 'npm'
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
|
||||
- name: Test all scheme conversions
|
||||
run: |
|
||||
node -e "
|
||||
const { AnimationNameMapper } = require('./src/animation/AnimationNameMapper.js');
|
||||
const mapper = new AnimationNameMapper();
|
||||
|
||||
const schemes = ['legacy', 'artist', 'hierarchical', 'semantic'];
|
||||
const testAnimations = [
|
||||
'wait_idle_L',
|
||||
'Owen_ReactAngry',
|
||||
'owen.state.type.idle.loop',
|
||||
'OwenSleepToWaitTransition'
|
||||
];
|
||||
|
||||
console.log('Testing conversion matrix...');
|
||||
let totalTests = 0;
|
||||
let passedTests = 0;
|
||||
|
||||
testAnimations.forEach(anim => {
|
||||
schemes.forEach(fromScheme => {
|
||||
schemes.forEach(toScheme => {
|
||||
totalTests++;
|
||||
try {
|
||||
const result = mapper.convert(anim, toScheme);
|
||||
console.log('✓', anim, '->', result, '(' + fromScheme + ' to ' + toScheme + ')');
|
||||
passedTests++;
|
||||
} catch (e) {
|
||||
console.log('✗', anim, 'failed conversion from', fromScheme, 'to', toScheme, ':', e.message);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
console.log('Conversion matrix results:', passedTests + '/' + totalTests, 'passed');
|
||||
if (passedTests < totalTests * 0.9) {
|
||||
console.error('Too many conversion failures');
|
||||
process.exit(1);
|
||||
}
|
||||
"
|
||||
|
||||
demo-validation:
|
||||
name: Validate Demo Functionality
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: ${{ env.NODE_VERSION }}
|
||||
cache: 'npm'
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
|
||||
- name: Install Playwright
|
||||
run: npx playwright install --with-deps chromium
|
||||
|
||||
- name: Start demo server
|
||||
run: |
|
||||
cd examples/mock-demo
|
||||
python -m http.server 8080 &
|
||||
sleep 5
|
||||
|
||||
- name: Test demo functionality
|
||||
run: |
|
||||
npx playwright test --config=playwright.config.js
|
||||
|
||||
- name: Upload test results
|
||||
uses: actions/upload-artifact@v4
|
||||
if: always()
|
||||
with:
|
||||
name: demo-test-results
|
||||
path: |
|
||||
test-results/
|
||||
playwright-report/
|
||||
|
||||
performance-benchmark:
|
||||
name: Performance Benchmarks
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: ${{ env.NODE_VERSION }}
|
||||
cache: 'npm'
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
|
||||
- name: Run performance benchmarks
|
||||
run: |
|
||||
node -e "
|
||||
const { AnimationNameMapper } = require('./src/animation/AnimationNameMapper.js');
|
||||
const mapper = new AnimationNameMapper();
|
||||
|
||||
console.log('Running performance benchmarks...');
|
||||
|
||||
// Benchmark conversion speed
|
||||
const testAnim = 'wait_idle_L';
|
||||
const iterations = 10000;
|
||||
|
||||
console.time('10k conversions');
|
||||
for (let i = 0; i < iterations; i++) {
|
||||
mapper.convert(testAnim, 'semantic');
|
||||
}
|
||||
console.timeEnd('10k conversions');
|
||||
|
||||
// Benchmark validation speed
|
||||
console.time('10k validations');
|
||||
for (let i = 0; i < iterations; i++) {
|
||||
mapper.validateAnimationName(testAnim);
|
||||
}
|
||||
console.timeEnd('10k validations');
|
||||
|
||||
// Memory usage test
|
||||
const used = process.memoryUsage();
|
||||
console.log('Memory usage:');
|
||||
for (let key in used) {
|
||||
console.log(key + ':', Math.round(used[key] / 1024 / 1024 * 100) / 100, 'MB');
|
||||
}
|
||||
"
|
||||
|
||||
- name: Comment PR with benchmark results
|
||||
if: github.event_name == 'pull_request'
|
||||
uses: actions/github-script@v7
|
||||
with:
|
||||
script: |
|
||||
const fs = require('fs');
|
||||
|
||||
// Read benchmark results (would need to be saved to file in previous step)
|
||||
const comment = `
|
||||
## 🏃♂️ Performance Benchmark Results
|
||||
|
||||
Multi-scheme animation system performance test completed:
|
||||
|
||||
- ✅ Conversion speed: 10k operations completed
|
||||
- ✅ Validation speed: 10k operations completed
|
||||
- ✅ Memory usage: Within acceptable limits
|
||||
|
||||
Full results available in the workflow logs.
|
||||
`;
|
||||
|
||||
github.rest.issues.createComment({
|
||||
issue_number: context.issue.number,
|
||||
owner: context.repo.owner,
|
||||
repo: context.repo.repo,
|
||||
body: comment
|
||||
});
|
||||
569
.github/workflows/performance-testing.yml
vendored
Normal file
569
.github/workflows/performance-testing.yml
vendored
Normal file
@ -0,0 +1,569 @@
|
||||
name: Performance Testing
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [ main, master ]
|
||||
paths:
|
||||
- 'src/animation/**'
|
||||
- 'demo/**'
|
||||
- 'scripts/**'
|
||||
pull_request:
|
||||
branches: [ main, master ]
|
||||
paths:
|
||||
- 'src/animation/**'
|
||||
- 'demo/**'
|
||||
- 'scripts/**'
|
||||
schedule:
|
||||
# Run performance tests weekly on Sundays at 3 AM UTC
|
||||
- cron: '0 3 * * 0'
|
||||
workflow_dispatch:
|
||||
inputs:
|
||||
test_type:
|
||||
description: 'Type of performance test to run'
|
||||
required: true
|
||||
default: 'all'
|
||||
type: choice
|
||||
options:
|
||||
- all
|
||||
- conversion
|
||||
- validation
|
||||
- memory
|
||||
- lighthouse
|
||||
|
||||
env:
|
||||
NODE_VERSION: '20.x'
|
||||
|
||||
jobs:
|
||||
conversion-performance:
|
||||
name: Animation Conversion Performance
|
||||
runs-on: ubuntu-latest
|
||||
if: github.event.inputs.test_type == 'all' || github.event.inputs.test_type == 'conversion' || github.event.inputs.test_type == null
|
||||
|
||||
strategy:
|
||||
matrix:
|
||||
scheme: [legacy, artist, hierarchical, semantic]
|
||||
batch_size: [100, 1000, 5000]
|
||||
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: ${{ env.NODE_VERSION }}
|
||||
cache: 'npm'
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
|
||||
- name: Generate test data
|
||||
run: |
|
||||
node -e "
|
||||
const fs = require('fs');
|
||||
const testData = [];
|
||||
const schemes = ['legacy', 'artist', 'hierarchical', 'semantic'];
|
||||
const baseNames = [
|
||||
'walk', 'run', 'idle', 'jump', 'attack', 'defend', 'crouch', 'climb',
|
||||
'swim', 'fly', 'dance', 'wave', 'bow', 'kneel', 'sit', 'stand'
|
||||
];
|
||||
|
||||
for (let i = 0; i < ${{ matrix.batch_size }}; i++) {
|
||||
const baseName = baseNames[i % baseNames.length];
|
||||
const variant = String(i + 1).padStart(2, '0');
|
||||
|
||||
let animationName;
|
||||
switch ('${{ matrix.scheme }}') {
|
||||
case 'legacy':
|
||||
animationName = \`\${baseName}_\${variant}\`;
|
||||
break;
|
||||
case 'artist':
|
||||
animationName = \`char_\${baseName}_\${variant}\`;
|
||||
break;
|
||||
case 'hierarchical':
|
||||
animationName = \`character/movement/\${baseName}/\${variant}\`;
|
||||
break;
|
||||
case 'semantic':
|
||||
animationName = \`character.movement.\${baseName}.forward\`;
|
||||
break;
|
||||
}
|
||||
|
||||
testData.push({
|
||||
name: animationName,
|
||||
sourceScheme: '${{ matrix.scheme }}',
|
||||
targetScheme: schemes.filter(s => s !== '${{ matrix.scheme }}')[Math.floor(Math.random() * 3)]
|
||||
});
|
||||
}
|
||||
|
||||
fs.writeFileSync('test-data.json', JSON.stringify(testData, null, 2));
|
||||
console.log(\`Generated \${testData.length} test cases for ${{ matrix.scheme }} scheme\`);
|
||||
"
|
||||
|
||||
- name: Run conversion performance test
|
||||
run: |
|
||||
node -e "
|
||||
const fs = require('fs');
|
||||
const { AnimationNameMapper } = require('./src/animation/AnimationNameMapper.js');
|
||||
const testData = JSON.parse(fs.readFileSync('test-data.json', 'utf8'));
|
||||
|
||||
const mapper = new AnimationNameMapper();
|
||||
const results = {
|
||||
scheme: '${{ matrix.scheme }}',
|
||||
batchSize: ${{ matrix.batch_size }},
|
||||
totalConversions: testData.length,
|
||||
startTime: Date.now(),
|
||||
conversions: [],
|
||||
errors: []
|
||||
};
|
||||
|
||||
console.log(\`Starting performance test: ${{ matrix.scheme }} scheme, \${testData.length} conversions\`);
|
||||
|
||||
for (const testCase of testData) {
|
||||
const startTime = process.hrtime.bigint();
|
||||
|
||||
try {
|
||||
const result = mapper.convert(
|
||||
testCase.name,
|
||||
testCase.sourceScheme,
|
||||
testCase.targetScheme
|
||||
);
|
||||
|
||||
const endTime = process.hrtime.bigint();
|
||||
const duration = Number(endTime - startTime) / 1000000; // Convert to milliseconds
|
||||
|
||||
results.conversions.push({
|
||||
input: testCase.name,
|
||||
output: result,
|
||||
sourceScheme: testCase.sourceScheme,
|
||||
targetScheme: testCase.targetScheme,
|
||||
duration: duration
|
||||
});
|
||||
} catch (error) {
|
||||
results.errors.push({
|
||||
input: testCase.name,
|
||||
sourceScheme: testCase.sourceScheme,
|
||||
targetScheme: testCase.targetScheme,
|
||||
error: error.message
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
results.endTime = Date.now();
|
||||
results.totalDuration = results.endTime - results.startTime;
|
||||
results.averageConversionTime = results.conversions.length > 0
|
||||
? results.conversions.reduce((sum, c) => sum + c.duration, 0) / results.conversions.length
|
||||
: 0;
|
||||
results.conversionsPerSecond = (results.conversions.length / results.totalDuration) * 1000;
|
||||
results.errorRate = (results.errors.length / testData.length) * 100;
|
||||
|
||||
console.log(\`Performance Results:\`);
|
||||
console.log(\` Total Duration: \${results.totalDuration}ms\`);
|
||||
console.log(\` Average Conversion Time: \${results.averageConversionTime.toFixed(2)}ms\`);
|
||||
console.log(\` Conversions per Second: \${results.conversionsPerSecond.toFixed(2)}\`);
|
||||
console.log(\` Error Rate: \${results.errorRate.toFixed(2)}%\`);
|
||||
console.log(\` Successful Conversions: \${results.conversions.length}\`);
|
||||
console.log(\` Failed Conversions: \${results.errors.length}\`);
|
||||
|
||||
// Save detailed results
|
||||
fs.writeFileSync('performance-results.json', JSON.stringify(results, null, 2));
|
||||
|
||||
// Performance thresholds
|
||||
const MAX_AVG_CONVERSION_TIME = 10; // 10ms
|
||||
const MAX_ERROR_RATE = 5; // 5%
|
||||
const MIN_CONVERSIONS_PER_SECOND = 100;
|
||||
|
||||
if (results.averageConversionTime > MAX_AVG_CONVERSION_TIME) {
|
||||
console.error(\`PERFORMANCE ISSUE: Average conversion time (\${results.averageConversionTime.toFixed(2)}ms) exceeds threshold (\${MAX_AVG_CONVERSION_TIME}ms)\`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
if (results.errorRate > MAX_ERROR_RATE) {
|
||||
console.error(\`PERFORMANCE ISSUE: Error rate (\${results.errorRate.toFixed(2)}%) exceeds threshold (\${MAX_ERROR_RATE}%)\`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
if (results.conversionsPerSecond < MIN_CONVERSIONS_PER_SECOND) {
|
||||
console.error(\`PERFORMANCE ISSUE: Conversions per second (\${results.conversionsPerSecond.toFixed(2)}) below threshold (\${MIN_CONVERSIONS_PER_SECOND})\`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
console.log('All performance thresholds passed! ✓');
|
||||
"
|
||||
|
||||
- name: Upload performance results
|
||||
uses: actions/upload-artifact@v4
|
||||
with:
|
||||
name: performance-results-${{ matrix.scheme }}-${{ matrix.batch_size }}
|
||||
path: performance-results.json
|
||||
retention-days: 30
|
||||
|
||||
memory-performance:
|
||||
name: Memory Usage Analysis
|
||||
runs-on: ubuntu-latest
|
||||
if: github.event.inputs.test_type == 'all' || github.event.inputs.test_type == 'memory' || github.event.inputs.test_type == null
|
||||
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: ${{ env.NODE_VERSION }}
|
||||
cache: 'npm'
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
|
||||
- name: Run memory analysis
|
||||
run: |
|
||||
node --expose-gc -e "
|
||||
const { AnimationNameMapper } = require('./src/animation/AnimationNameMapper.js');
|
||||
|
||||
function getMemoryUsage() {
|
||||
global.gc();
|
||||
const used = process.memoryUsage();
|
||||
return {
|
||||
rss: Math.round(used.rss / 1024 / 1024 * 100) / 100,
|
||||
heapTotal: Math.round(used.heapTotal / 1024 / 1024 * 100) / 100,
|
||||
heapUsed: Math.round(used.heapUsed / 1024 / 1024 * 100) / 100,
|
||||
external: Math.round(used.external / 1024 / 1024 * 100) / 100
|
||||
};
|
||||
}
|
||||
|
||||
console.log('Starting memory analysis...');
|
||||
|
||||
const initialMemory = getMemoryUsage();
|
||||
console.log('Initial memory usage:', initialMemory);
|
||||
|
||||
// Create multiple mappers to test memory leaks
|
||||
const mappers = [];
|
||||
for (let i = 0; i < 100; i++) {
|
||||
mappers.push(new AnimationNameMapper());
|
||||
}
|
||||
|
||||
const afterCreationMemory = getMemoryUsage();
|
||||
console.log('After creating 100 mappers:', afterCreationMemory);
|
||||
|
||||
// Perform conversions
|
||||
const testAnimations = [
|
||||
'char_walk_01', 'char_run_02', 'prop_door_open',
|
||||
'character.idle.basic', 'character/movement/walk/forward',
|
||||
'idle_basic', 'walk_forward', 'attack_sword'
|
||||
];
|
||||
|
||||
for (let round = 0; round < 10; round++) {
|
||||
for (const mapper of mappers) {
|
||||
for (const animation of testAnimations) {
|
||||
try {
|
||||
mapper.convert(animation, 'artist', 'semantic');
|
||||
mapper.convert(animation, 'semantic', 'hierarchical');
|
||||
mapper.convert(animation, 'hierarchical', 'legacy');
|
||||
} catch (error) {
|
||||
// Ignore conversion errors for memory test
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (round % 3 === 0) {
|
||||
const memoryUsage = getMemoryUsage();
|
||||
console.log(\`Round \${round + 1} memory usage:\`, memoryUsage);
|
||||
}
|
||||
}
|
||||
|
||||
const finalMemory = getMemoryUsage();
|
||||
console.log('Final memory usage:', finalMemory);
|
||||
|
||||
// Calculate memory growth
|
||||
const heapGrowth = finalMemory.heapUsed - initialMemory.heapUsed;
|
||||
const rssGrowth = finalMemory.rss - initialMemory.rss;
|
||||
|
||||
console.log(\`Heap growth: \${heapGrowth} MB\`);
|
||||
console.log(\`RSS growth: \${rssGrowth} MB\`);
|
||||
|
||||
// Memory leak thresholds
|
||||
const MAX_HEAP_GROWTH = 50; // 50 MB
|
||||
const MAX_RSS_GROWTH = 100; // 100 MB
|
||||
|
||||
if (heapGrowth > MAX_HEAP_GROWTH) {
|
||||
console.error(\`MEMORY LEAK: Heap growth (\${heapGrowth} MB) exceeds threshold (\${MAX_HEAP_GROWTH} MB)\`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
if (rssGrowth > MAX_RSS_GROWTH) {
|
||||
console.error(\`MEMORY LEAK: RSS growth (\${rssGrowth} MB) exceeds threshold (\${MAX_RSS_GROWTH} MB)\`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
console.log('Memory usage within acceptable limits ✓');
|
||||
"
|
||||
|
||||
lighthouse-performance:
|
||||
name: Demo Performance Audit
|
||||
runs-on: ubuntu-latest
|
||||
if: github.event.inputs.test_type == 'all' || github.event.inputs.test_type == 'lighthouse' || github.event.inputs.test_type == null
|
||||
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: ${{ env.NODE_VERSION }}
|
||||
cache: 'npm'
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
|
||||
- name: Build demo
|
||||
run: npm run build:demo
|
||||
|
||||
- name: Install Lighthouse
|
||||
run: npm install -g @lhci/cli lighthouse
|
||||
|
||||
- name: Start demo server
|
||||
run: |
|
||||
npm run preview:demo &
|
||||
sleep 10
|
||||
env:
|
||||
NODE_ENV: production
|
||||
|
||||
- name: Run Lighthouse audit
|
||||
run: |
|
||||
lighthouse http://localhost:3000 \
|
||||
--output=json \
|
||||
--output-path=lighthouse-report.json \
|
||||
--chrome-flags="--headless --no-sandbox --disable-dev-shm-usage" \
|
||||
--only-categories=performance,accessibility,best-practices
|
||||
|
||||
- name: Analyze Lighthouse results
|
||||
run: |
|
||||
node -e "
|
||||
const fs = require('fs');
|
||||
const report = JSON.parse(fs.readFileSync('lighthouse-report.json', 'utf8'));
|
||||
|
||||
const scores = {
|
||||
performance: report.categories.performance.score * 100,
|
||||
accessibility: report.categories.accessibility.score * 100,
|
||||
bestPractices: report.categories['best-practices'].score * 100
|
||||
};
|
||||
|
||||
const metrics = {
|
||||
fcp: report.audits['first-contentful-paint'].numericValue,
|
||||
lcp: report.audits['largest-contentful-paint'].numericValue,
|
||||
cls: report.audits['cumulative-layout-shift'].numericValue,
|
||||
tbt: report.audits['total-blocking-time'].numericValue,
|
||||
tti: report.audits['interactive'].numericValue
|
||||
};
|
||||
|
||||
console.log('Lighthouse Scores:');
|
||||
console.log(\` Performance: \${scores.performance.toFixed(1)}/100\`);
|
||||
console.log(\` Accessibility: \${scores.accessibility.toFixed(1)}/100\`);
|
||||
console.log(\` Best Practices: \${scores.bestPractices.toFixed(1)}/100\`);
|
||||
|
||||
console.log('\\nCore Web Vitals:');
|
||||
console.log(\` First Contentful Paint: \${(metrics.fcp / 1000).toFixed(2)}s\`);
|
||||
console.log(\` Largest Contentful Paint: \${(metrics.lcp / 1000).toFixed(2)}s\`);
|
||||
console.log(\` Cumulative Layout Shift: \${metrics.cls.toFixed(3)}\`);
|
||||
console.log(\` Total Blocking Time: \${metrics.tbt.toFixed(0)}ms\`);
|
||||
console.log(\` Time to Interactive: \${(metrics.tti / 1000).toFixed(2)}s\`);
|
||||
|
||||
// Performance thresholds
|
||||
const thresholds = {
|
||||
performance: 90,
|
||||
accessibility: 95,
|
||||
bestPractices: 90,
|
||||
fcp: 2000, // 2 seconds
|
||||
lcp: 2500, // 2.5 seconds
|
||||
cls: 0.1,
|
||||
tbt: 300, // 300ms
|
||||
tti: 3800 // 3.8 seconds
|
||||
};
|
||||
|
||||
let failed = false;
|
||||
|
||||
if (scores.performance < thresholds.performance) {
|
||||
console.error(\`PERFORMANCE ISSUE: Performance score (\${scores.performance.toFixed(1)}) below threshold (\${thresholds.performance})\`);
|
||||
failed = true;
|
||||
}
|
||||
|
||||
if (scores.accessibility < thresholds.accessibility) {
|
||||
console.error(\`ACCESSIBILITY ISSUE: Accessibility score (\${scores.accessibility.toFixed(1)}) below threshold (\${thresholds.accessibility})\`);
|
||||
failed = true;
|
||||
}
|
||||
|
||||
if (metrics.fcp > thresholds.fcp) {
|
||||
console.error(\`PERFORMANCE ISSUE: FCP (\${(metrics.fcp / 1000).toFixed(2)}s) exceeds threshold (\${thresholds.fcp / 1000}s)\`);
|
||||
failed = true;
|
||||
}
|
||||
|
||||
if (metrics.lcp > thresholds.lcp) {
|
||||
console.error(\`PERFORMANCE ISSUE: LCP (\${(metrics.lcp / 1000).toFixed(2)}s) exceeds threshold (\${thresholds.lcp / 1000}s)\`);
|
||||
failed = true;
|
||||
}
|
||||
|
||||
if (metrics.cls > thresholds.cls) {
|
||||
console.error(\`PERFORMANCE ISSUE: CLS (\${metrics.cls.toFixed(3)}) exceeds threshold (\${thresholds.cls})\`);
|
||||
failed = true;
|
||||
}
|
||||
|
||||
if (failed) {
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
console.log('\\nAll performance thresholds passed! ✓');
|
||||
"
|
||||
|
||||
- name: Upload Lighthouse report
|
||||
uses: actions/upload-artifact@v4
|
||||
with:
|
||||
name: lighthouse-report
|
||||
path: lighthouse-report.json
|
||||
retention-days: 30
|
||||
|
||||
generate-performance-report:
|
||||
name: Generate Performance Report
|
||||
runs-on: ubuntu-latest
|
||||
needs: [conversion-performance, memory-performance, lighthouse-performance]
|
||||
if: always()
|
||||
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Download all artifacts
|
||||
uses: actions/download-artifact@v4
|
||||
with:
|
||||
path: artifacts/
|
||||
|
||||
- name: Generate performance report
|
||||
run: |
|
||||
node -e "
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
const report = {
|
||||
timestamp: new Date().toISOString(),
|
||||
commit: process.env.GITHUB_SHA || 'unknown',
|
||||
branch: process.env.GITHUB_REF_NAME || 'unknown',
|
||||
results: {
|
||||
conversion: [],
|
||||
memory: null,
|
||||
lighthouse: null
|
||||
},
|
||||
summary: {
|
||||
passed: 0,
|
||||
failed: 0,
|
||||
warnings: []
|
||||
}
|
||||
};
|
||||
|
||||
// Process conversion performance results
|
||||
const artifactsDir = 'artifacts';
|
||||
if (fs.existsSync(artifactsDir)) {
|
||||
const artifactDirs = fs.readdirSync(artifactsDir);
|
||||
|
||||
for (const dir of artifactDirs) {
|
||||
if (dir.startsWith('performance-results-')) {
|
||||
const resultFile = path.join(artifactsDir, dir, 'performance-results.json');
|
||||
if (fs.existsSync(resultFile)) {
|
||||
const result = JSON.parse(fs.readFileSync(resultFile, 'utf8'));
|
||||
report.results.conversion.push(result);
|
||||
|
||||
if (result.errorRate <= 5 && result.averageConversionTime <= 10) {
|
||||
report.summary.passed++;
|
||||
} else {
|
||||
report.summary.failed++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (dir === 'lighthouse-report') {
|
||||
const lightouseFile = path.join(artifactsDir, dir, 'lighthouse-report.json');
|
||||
if (fs.existsSync(lightouseFile)) {
|
||||
const lighthouse = JSON.parse(fs.readFileSync(lightouseFile, 'utf8'));
|
||||
report.results.lighthouse = {
|
||||
performance: lighthouse.categories.performance.score * 100,
|
||||
accessibility: lighthouse.categories.accessibility.score * 100,
|
||||
bestPractices: lighthouse.categories['best-practices'].score * 100,
|
||||
fcp: lighthouse.audits['first-contentful-paint'].numericValue,
|
||||
lcp: lighthouse.audits['largest-contentful-paint'].numericValue,
|
||||
cls: lighthouse.audits['cumulative-layout-shift'].numericValue
|
||||
};
|
||||
|
||||
if (report.results.lighthouse.performance >= 90) {
|
||||
report.summary.passed++;
|
||||
} else {
|
||||
report.summary.failed++;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Generate markdown report
|
||||
let markdown = \`# Performance Test Report\\n\\n\`;
|
||||
markdown += \`**Date:** \${new Date(report.timestamp).toLocaleString()}\\n\`;
|
||||
markdown += \`**Commit:** \${report.commit}\\n\`;
|
||||
markdown += \`**Branch:** \${report.branch}\\n\\n\`;
|
||||
|
||||
markdown += \`## Summary\\n\\n\`;
|
||||
markdown += \`- ✅ **Passed:** \${report.summary.passed}\\n\`;
|
||||
markdown += \`- ❌ **Failed:** \${report.summary.failed}\\n\\n\`;
|
||||
|
||||
if (report.results.conversion.length > 0) {
|
||||
markdown += \`## Conversion Performance\\n\\n\`;
|
||||
markdown += \`| Scheme | Batch Size | Avg Time (ms) | Conversions/sec | Error Rate (%) |\\n\`;
|
||||
markdown += \`|--------|------------|---------------|-----------------|----------------|\\n\`;
|
||||
|
||||
for (const result of report.results.conversion) {
|
||||
const status = result.errorRate <= 5 && result.averageConversionTime <= 10 ? '✅' : '❌';
|
||||
markdown += \`| \${status} \${result.scheme} | \${result.batchSize} | \${result.averageConversionTime.toFixed(2)} | \${result.conversionsPerSecond.toFixed(2)} | \${result.errorRate.toFixed(2)} |\\n\`;
|
||||
}
|
||||
markdown += \`\\n\`;
|
||||
}
|
||||
|
||||
if (report.results.lighthouse) {
|
||||
markdown += \`## Lighthouse Performance\\n\\n\`;
|
||||
const l = report.results.lighthouse;
|
||||
markdown += \`- **Performance Score:** \${l.performance.toFixed(1)}/100\\n\`;
|
||||
markdown += \`- **Accessibility Score:** \${l.accessibility.toFixed(1)}/100\\n\`;
|
||||
markdown += \`- **Best Practices Score:** \${l.bestPractices.toFixed(1)}/100\\n\`;
|
||||
markdown += \`- **First Contentful Paint:** \${(l.fcp / 1000).toFixed(2)}s\\n\`;
|
||||
markdown += \`- **Largest Contentful Paint:** \${(l.lcp / 1000).toFixed(2)}s\\n\`;
|
||||
markdown += \`- **Cumulative Layout Shift:** \${l.cls.toFixed(3)}\\n\\n\`;
|
||||
}
|
||||
|
||||
fs.writeFileSync('performance-report.json', JSON.stringify(report, null, 2));
|
||||
fs.writeFileSync('performance-report.md', markdown);
|
||||
|
||||
console.log('Performance report generated');
|
||||
console.log(markdown);
|
||||
"
|
||||
|
||||
- name: Upload performance report
|
||||
uses: actions/upload-artifact@v4
|
||||
with:
|
||||
name: performance-report
|
||||
path: |
|
||||
performance-report.json
|
||||
performance-report.md
|
||||
retention-days: 90
|
||||
|
||||
- name: Comment performance report on PR
|
||||
if: github.event_name == 'pull_request'
|
||||
uses: actions/github-script@v7
|
||||
with:
|
||||
script: |
|
||||
const fs = require('fs');
|
||||
if (fs.existsSync('performance-report.md')) {
|
||||
const report = fs.readFileSync('performance-report.md', 'utf8');
|
||||
|
||||
github.rest.issues.createComment({
|
||||
issue_number: context.issue.number,
|
||||
owner: context.repo.owner,
|
||||
repo: context.repo.repo,
|
||||
body: report
|
||||
});
|
||||
}
|
||||
252
.github/workflows/release.yml
vendored
Normal file
252
.github/workflows/release.yml
vendored
Normal file
@ -0,0 +1,252 @@
|
||||
name: Release
|
||||
|
||||
on:
|
||||
push:
|
||||
tags:
|
||||
- 'v*.*.*'
|
||||
workflow_dispatch:
|
||||
inputs:
|
||||
version:
|
||||
description: 'Version to release (e.g., v1.2.3)'
|
||||
required: true
|
||||
type: string
|
||||
prerelease:
|
||||
description: 'Mark as pre-release'
|
||||
required: false
|
||||
default: false
|
||||
type: boolean
|
||||
|
||||
env:
|
||||
NODE_VERSION: '20.x'
|
||||
|
||||
jobs:
|
||||
validate-version:
|
||||
name: Validate Version
|
||||
runs-on: ubuntu-latest
|
||||
outputs:
|
||||
version: ${{ steps.version.outputs.version }}
|
||||
is_prerelease: ${{ steps.version.outputs.is_prerelease }}
|
||||
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0
|
||||
|
||||
- name: Extract version
|
||||
id: version
|
||||
run: |
|
||||
if [ "${{ github.event_name }}" == "workflow_dispatch" ]; then
|
||||
VERSION="${{ github.event.inputs.version }}"
|
||||
IS_PRERELEASE="${{ github.event.inputs.prerelease }}"
|
||||
else
|
||||
VERSION="${GITHUB_REF#refs/tags/}"
|
||||
# Check if version contains pre-release identifiers
|
||||
if [[ "$VERSION" =~ -[a-zA-Z] ]]; then
|
||||
IS_PRERELEASE=true
|
||||
else
|
||||
IS_PRERELEASE=false
|
||||
fi
|
||||
fi
|
||||
|
||||
echo "version=$VERSION" >> $GITHUB_OUTPUT
|
||||
echo "is_prerelease=$IS_PRERELEASE" >> $GITHUB_OUTPUT
|
||||
echo "Release version: $VERSION (prerelease: $IS_PRERELEASE)"
|
||||
|
||||
- name: Validate semantic version
|
||||
run: |
|
||||
VERSION="${{ steps.version.outputs.version }}"
|
||||
if [[ ! "$VERSION" =~ ^v[0-9]+\.[0-9]+\.[0-9]+(-[a-zA-Z0-9.-]+)?(\+[a-zA-Z0-9.-]+)?$ ]]; then
|
||||
echo "Invalid semantic version: $VERSION"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
build-and-test:
|
||||
name: Build and Test
|
||||
runs-on: ubuntu-latest
|
||||
needs: validate-version
|
||||
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: ${{ env.NODE_VERSION }}
|
||||
cache: 'npm'
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
|
||||
- name: Run linting
|
||||
run: npm run lint
|
||||
|
||||
- name: Run tests
|
||||
run: npm test
|
||||
|
||||
- name: Run multi-scheme validation
|
||||
run: npm run test:multi-schemes
|
||||
|
||||
- name: Build project
|
||||
run: npm run build
|
||||
|
||||
- name: Build demo
|
||||
run: npm run build:demo
|
||||
|
||||
- name: Generate documentation
|
||||
run: npm run docs
|
||||
|
||||
- name: Validate build artifacts
|
||||
run: |
|
||||
test -d dist || (echo "Build failed - dist directory not found" && exit 1)
|
||||
test -d dist/demo || (echo "Demo build failed - dist/demo directory not found" && exit 1)
|
||||
test -d docs || (echo "Documentation generation failed" && exit 1)
|
||||
|
||||
- name: Upload build artifacts
|
||||
uses: actions/upload-artifact@v4
|
||||
with:
|
||||
name: release-artifacts
|
||||
path: |
|
||||
dist/
|
||||
docs/
|
||||
CHANGELOG.md
|
||||
README.md
|
||||
MULTI_SCHEME_GUIDE.md
|
||||
retention-days: 30
|
||||
|
||||
create-release:
|
||||
name: Create Release
|
||||
runs-on: ubuntu-latest
|
||||
needs: [validate-version, build-and-test]
|
||||
permissions:
|
||||
contents: write
|
||||
pull-requests: read
|
||||
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0
|
||||
|
||||
- name: Download build artifacts
|
||||
uses: actions/download-artifact@v4
|
||||
with:
|
||||
name: release-artifacts
|
||||
path: ./artifacts
|
||||
|
||||
- name: Generate release notes
|
||||
id: release_notes
|
||||
run: |
|
||||
VERSION="${{ needs.validate-version.outputs.version }}"
|
||||
|
||||
# Extract changelog for this version
|
||||
if [ -f CHANGELOG.md ]; then
|
||||
# Get the changelog section for this version
|
||||
CHANGELOG_SECTION=$(sed -n "/^## \[${VERSION#v}\]/,/^## \[/p" CHANGELOG.md | head -n -1)
|
||||
if [ -n "$CHANGELOG_SECTION" ]; then
|
||||
echo "Found changelog section for version ${VERSION#v}"
|
||||
echo "$CHANGELOG_SECTION" > release_notes.md
|
||||
else
|
||||
echo "No changelog section found for version ${VERSION#v}, generating default notes"
|
||||
echo "## Changes in ${VERSION}" > release_notes.md
|
||||
echo "" >> release_notes.md
|
||||
echo "This release includes various improvements and updates to the Owen Animation System." >> release_notes.md
|
||||
fi
|
||||
else
|
||||
echo "## Changes in ${VERSION}" > release_notes.md
|
||||
echo "" >> release_notes.md
|
||||
echo "This release includes various improvements and updates to the Owen Animation System." >> release_notes.md
|
||||
fi
|
||||
|
||||
# Add commit summary since last tag
|
||||
echo "" >> release_notes.md
|
||||
echo "### Commits since last release:" >> release_notes.md
|
||||
git log --oneline $(git describe --tags --abbrev=0 2>/dev/null || echo "HEAD~10")..HEAD >> release_notes.md || true
|
||||
|
||||
- name: Create GitHub Release
|
||||
uses: softprops/action-gh-release@v2
|
||||
with:
|
||||
tag_name: ${{ needs.validate-version.outputs.version }}
|
||||
name: Owen Animation System ${{ needs.validate-version.outputs.version }}
|
||||
body_path: release_notes.md
|
||||
draft: false
|
||||
prerelease: ${{ needs.validate-version.outputs.is_prerelease == 'true' }}
|
||||
files: |
|
||||
artifacts/dist/**
|
||||
artifacts/docs/**
|
||||
artifacts/CHANGELOG.md
|
||||
artifacts/README.md
|
||||
artifacts/MULTI_SCHEME_GUIDE.md
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
|
||||
publish-npm:
|
||||
name: Publish to NPM
|
||||
runs-on: ubuntu-latest
|
||||
needs: [validate-version, create-release]
|
||||
if: needs.validate-version.outputs.is_prerelease == 'false'
|
||||
environment: npm-publish
|
||||
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: ${{ env.NODE_VERSION }}
|
||||
cache: 'npm'
|
||||
registry-url: 'https://registry.npmjs.org'
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
|
||||
- name: Build project
|
||||
run: npm run build
|
||||
|
||||
- name: Update package version
|
||||
run: |
|
||||
VERSION="${{ needs.validate-version.outputs.version }}"
|
||||
npm version ${VERSION#v} --no-git-tag-version
|
||||
|
||||
- name: Publish to NPM
|
||||
run: npm publish --access public
|
||||
env:
|
||||
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
|
||||
|
||||
deploy-demo:
|
||||
name: Deploy Demo
|
||||
runs-on: ubuntu-latest
|
||||
needs: [validate-version, create-release]
|
||||
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: ${{ env.NODE_VERSION }}
|
||||
cache: 'npm'
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
|
||||
- name: Build demo
|
||||
run: npm run build:demo
|
||||
|
||||
- name: Deploy demo to GitHub Pages
|
||||
uses: peaceiris/actions-gh-pages@v4
|
||||
with:
|
||||
github_token: ${{ secrets.GITHUB_TOKEN }}
|
||||
publish_dir: ./dist/demo
|
||||
destination_dir: releases/${{ needs.validate-version.outputs.version }}
|
||||
|
||||
- name: Update latest demo link
|
||||
if: needs.validate-version.outputs.is_prerelease == 'false'
|
||||
uses: peaceiris/actions-gh-pages@v4
|
||||
with:
|
||||
github_token: ${{ secrets.GITHUB_TOKEN }}
|
||||
publish_dir: ./dist/demo
|
||||
destination_dir: latest
|
||||
44
.gitignore
vendored
44
.gitignore
vendored
@ -1,3 +1,33 @@
|
||||
# Temporary files
|
||||
*.tmp
|
||||
*.temp
|
||||
|
||||
# # Documentation output
|
||||
# /docs/
|
||||
|
||||
# Animation assets (if storing locally)
|
||||
/assets/models/
|
||||
/assets/animations/
|
||||
|
||||
# Example build outputs
|
||||
/examples/dist/
|
||||
|
||||
# 3D Models (optional - remove if you want to commit models)
|
||||
*.gltf
|
||||
*.glb
|
||||
*.fbx
|
||||
*.obj
|
||||
*.dae
|
||||
|
||||
# Three.js cache
|
||||
.three-cache/
|
||||
|
||||
# MyPy cache
|
||||
.mypy_cache/
|
||||
|
||||
# Editor (optional - remove if you want to commit editor files)
|
||||
.vscode/
|
||||
|
||||
# Created by https://www.toptal.com/developers/gitignore/api/windows,macos,linux,visualstudiocode,webstorm,vim,emacs,node
|
||||
# Edit at https://www.toptal.com/developers/gitignore?templates=windows,macos,linux,visualstudiocode,webstorm,vim,emacs,node
|
||||
|
||||
@ -418,17 +448,3 @@ $RECYCLE.BIN/
|
||||
*.lnk
|
||||
|
||||
# End of https://www.toptal.com/developers/gitignore/api/windows,macos,linux,visualstudiocode,webstorm,vim,emacs,node
|
||||
|
||||
# Build outputs
|
||||
docs/
|
||||
|
||||
# Temporary files
|
||||
*.tmp
|
||||
*.temp
|
||||
|
||||
# 3D Models (optional - remove if you want to commit models)
|
||||
*.gltf
|
||||
*.glb
|
||||
*.fbx
|
||||
*.obj
|
||||
*.dae
|
||||
|
||||
163
CHANGELOG.md
163
CHANGELOG.md
@ -5,74 +5,129 @@ All notable changes to the Owen Animation System will be documented in this file
|
||||
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
||||
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
||||
|
||||
## [1.0.2] - 2025-05-24
|
||||
|
||||
### Added
|
||||
|
||||
- 🔄 Multi-scheme animation naming system with four naming schemes
|
||||
- 🧪 Testing framework for multi-scheme compatibility with Playwright
|
||||
- 📋 GitHub workflows for animation processing and testing
|
||||
- 🚀 Demo pages showing multi-scheme usage
|
||||
- 📄 Multi-scheme animation naming guide (MULTI_SCHEME_GUIDE.md)
|
||||
- 🛠️ Animation validation and conversion scripts
|
||||
|
||||
### Fixed
|
||||
|
||||
- 🐛 Fixed duplicate methods in OwenAnimationContext
|
||||
- 🔧 Fixed linting issues across the codebase
|
||||
- 🐛 Fixed alert references in demo.js with window.alert
|
||||
- 🔧 Removed unused variables in scripts
|
||||
- 🔍 Fixed import issues in AnimationNameMapper
|
||||
|
||||
## [1.0.1] - 2025-05-24
|
||||
|
||||
### Changed
|
||||
|
||||
- 🎨 Standardized code style throughout the codebase
|
||||
- 🔧 Converted semicolons to non-semicolons according to JavaScript Standard Style
|
||||
- 📝 Improved code consistency and readability
|
||||
|
||||
## [1.0.0] - 2025-05-23
|
||||
|
||||
### Added
|
||||
- 🎉 Initial release of Owen Animation System
|
||||
- ✨ Complete state machine implementation with Wait, React, Type, and Sleep states
|
||||
- 🤖 Emotional response system for character animations
|
||||
- 🏗️ Clean architecture with dependency injection and factory patterns
|
||||
- 📝 Animation naming convention parser
|
||||
- 🔄 Smooth animation transitions with fade in/out support
|
||||
- ⚡ Performance-optimized animation caching
|
||||
- 🧩 Extensible design for custom states and emotions
|
||||
- 📊 Comprehensive JSDoc documentation
|
||||
- 🎮 Interactive demo with keyboard controls
|
||||
- 📦 TypeScript type definitions
|
||||
- 🛠️ Development tooling (ESLint, Vite, JSDoc)
|
||||
|
||||
- 🎯 Complete modular architecture with proper ES module structure
|
||||
- 🧩 Extensible plugin system for custom states and emotions
|
||||
- 📊 Comprehensive JSDoc documentation across all modules
|
||||
- 🎮 Enhanced interactive demo with keyboard controls
|
||||
- 📦 TypeScript type definitions for all components
|
||||
- 🔧 Configuration system for fine-tuning behavior
|
||||
- 🏗️ Examples directory with various implementation patterns
|
||||
- 🚀 Vite-based development and build system
|
||||
|
||||
### Enhanced
|
||||
|
||||
- ⚡ Optimized animation caching with intelligent preloading
|
||||
- 🤖 Advanced emotional analysis with broader message understanding
|
||||
- 🔄 Sophisticated animation transitions with nested state support
|
||||
- 📝 Extended animation naming convention with nested animations
|
||||
- 🎨 Refined state machine behavior and transitions
|
||||
- 🛠️ Improved development tooling integration
|
||||
|
||||
### Architecture
|
||||
- **Core Classes:**
|
||||
- `OwenAnimationContext` - Main system controller
|
||||
- `AnimationClip` - Individual animation management
|
||||
- `AnimationClipFactory` - Animation creation with metadata parsing
|
||||
- `StateHandler` - Abstract base for state implementations
|
||||
- `StateFactory` - Dynamic state handler creation
|
||||
|
||||
- **State Handlers:**
|
||||
- `WaitStateHandler` - Idle state with quirk animations
|
||||
- `ReactStateHandler` - User input response with emotion analysis
|
||||
- `TypeStateHandler` - Typing state with emotional variations
|
||||
- `SleepStateHandler` - Inactive state management
|
||||
- **Core Classes:**
|
||||
- `OwenAnimationContext` - Main system controller
|
||||
- `AnimationClip` - Individual animation management
|
||||
- `AnimationClipFactory` - Animation creation with metadata parsing
|
||||
- `StateHandler` - Abstract base for state implementations
|
||||
- `StateFactory` - Dynamic state handler creation
|
||||
|
||||
- **Animation Loaders:**
|
||||
- `AnimationLoader` - Abstract animation loading interface
|
||||
- `GLTFAnimationLoader` - GLTF/GLB model animation loader
|
||||
- **State Handlers:**
|
||||
- `WaitStateHandler` - Idle state with quirk animations
|
||||
- `ReactStateHandler` - User input response with emotion analysis
|
||||
- `TypeStateHandler` - Typing state with emotional variations
|
||||
- `SleepStateHandler` - Inactive state management
|
||||
|
||||
- **Factories:**
|
||||
- `OwenSystemFactory` - Main system assembly factory
|
||||
- **Animation Loaders:**
|
||||
- `AnimationLoader` - Abstract animation loading interface
|
||||
- `GLTFAnimationLoader` - GLTF/GLB model animation loader
|
||||
|
||||
- **Factories:**
|
||||
- `OwenSystemFactory` - Main system assembly factory
|
||||
|
||||
### Features
|
||||
- **Animation System:**
|
||||
- Support for Loop (L), Quirk (Q), Transition (T), and Nested animations
|
||||
- Automatic metadata parsing from animation names
|
||||
- Efficient animation caching and resource management
|
||||
- Smooth transitions between states and emotions
|
||||
|
||||
- **State Machine:**
|
||||
- Four core states: Wait, React, Type, Sleep
|
||||
- Emotional state transitions (Neutral, Angry, Shocked, Happy, Sad)
|
||||
- Automatic inactivity detection and sleep transitions
|
||||
- Message analysis for emotional response determination
|
||||
- **Animation System:**
|
||||
- Support for Loop (L), Quirk (Q), Transition (T), and Nested animations
|
||||
- Automatic metadata parsing from animation names
|
||||
- Efficient animation caching and resource management
|
||||
- Smooth transitions between states and emotions
|
||||
|
||||
- **Developer Experience:**
|
||||
- Comprehensive TypeScript type definitions
|
||||
- JSDoc documentation for all public APIs
|
||||
- Example implementations and demos
|
||||
- ESLint configuration for code quality
|
||||
- Vite development server setup
|
||||
- **State Machine:**
|
||||
- Four core states: Wait, React, Type, Sleep
|
||||
- Emotional state transitions (Neutral, Angry, Shocked, Happy, Sad)
|
||||
- Automatic inactivity detection and sleep transitions
|
||||
- Message analysis for emotional response determination
|
||||
|
||||
- **Developer Experience:**
|
||||
- Comprehensive TypeScript type definitions
|
||||
- JSDoc documentation for all public APIs
|
||||
- Example implementations and demos
|
||||
- ESLint configuration for code quality
|
||||
- Vite development server setup
|
||||
|
||||
### Documentation
|
||||
- Complete README with installation and usage instructions
|
||||
- API documentation via JSDoc
|
||||
- Code examples for basic and advanced usage
|
||||
- Animation naming convention guide
|
||||
- Troubleshooting section
|
||||
|
||||
- Complete README with installation and usage instructions
|
||||
- API documentation via JSDoc
|
||||
- Code examples for basic and advanced usage
|
||||
- Animation naming convention guide
|
||||
- Troubleshooting section
|
||||
|
||||
### Examples
|
||||
- Basic browser demo with Three.js integration
|
||||
- Simple Node.js example for testing
|
||||
- Interactive controls for state transitions
|
||||
- Mock model implementation for development
|
||||
|
||||
[1.0.0]: https://github.com/your-username/owen-animation-system/releases/tag/v1.0.0
|
||||
- Basic browser demo with Three.js integration
|
||||
- Simple Node.js example for testing
|
||||
- Interactive controls for state transitions
|
||||
- Mock model implementation for development
|
||||
|
||||
## [0.1.0] - 2025-05-01
|
||||
|
||||
### Added
|
||||
|
||||
- 🎉 First implementation of Owen Animation System
|
||||
- ✨ Basic state machine implementation (Wait, React, Type, Sleep)
|
||||
- 🤖 Simple emotional response system with basic message analysis
|
||||
- 🏗️ Initial architecture with basic dependency injection pattern
|
||||
- 📝 Basic animation naming parser for transitions and states
|
||||
- 🔄 Basic animation transitions between states
|
||||
- ⚡ Simple animation clip caching
|
||||
- 🎮 Basic Three.js integration with GLTFLoader
|
||||
- 🎭 Core state handlers with basic functionality
|
||||
- 🛠️ Development environment foundations
|
||||
|
||||
[0.1.0]: https://gitea.kajkowalski.nl/kjanat/Owen/releases/tag/v0.1.0
|
||||
[1.0.0]: https://gitea.kajkowalski.nl/kjanat/Owen/releases/tag/v1.0.0
|
||||
[1.0.1]: https://gitea.kajkowalski.nl/kjanat/Owen/releases/tag/v1.0.1
|
||||
[1.0.2]: https://gitea.kajkowalski.nl/kjanat/Owen/releases/tag/v1.0.2
|
||||
|
||||
303
MULTI_SCHEME_GUIDE.md
Normal file
303
MULTI_SCHEME_GUIDE.md
Normal file
@ -0,0 +1,303 @@
|
||||
# Multi-Scheme Animation Naming Guide
|
||||
|
||||
The Owen Animation System supports four different naming schemes to accommodate different workflows and preferences. This guide explains each scheme and how to use them effectively.
|
||||
|
||||
## 🎯 Overview
|
||||
|
||||
The multi-scheme animation naming system provides backward compatibility while making the Owen Animation System more accessible to different types of users:
|
||||
|
||||
- **Legacy Scheme**: Original technical format for backward compatibility
|
||||
- **Artist Scheme**: Blender-friendly names for 3D artists
|
||||
- **Hierarchical Scheme**: Organized dot-notation for structured projects
|
||||
- **Semantic Scheme**: Readable camelCase for developers
|
||||
|
||||
## 📝 Naming Schemes
|
||||
|
||||
### 1. Legacy Scheme (Technical/Backward Compatible)
|
||||
|
||||
**Format**: `{state}_{emotion}_{type}`
|
||||
**Examples**:
|
||||
|
||||
- `wait_idle_L` - Wait state, idle animation, Loop
|
||||
- `react_an2type_T` - React state, angry to type, Transition
|
||||
- `type_idle_L` - Type state, idle animation, Loop
|
||||
- `sleep_2wait_T` - Sleep state, to wait transition, Transition
|
||||
|
||||
**Use Cases**:
|
||||
|
||||
- Existing Owen implementations
|
||||
- Technical documentation
|
||||
- Legacy animation files
|
||||
|
||||
### 2. Artist Scheme (Blender-Friendly)
|
||||
|
||||
**Format**: `Owen_{Action}` or `Owen_{StateAction}`
|
||||
**Examples**:
|
||||
|
||||
- `Owen_WaitIdle` - Wait idle animation
|
||||
- `Owen_ReactAngryToType` - React angry to type transition
|
||||
- `Owen_TypeIdle` - Type idle animation
|
||||
- `Owen_SleepToWait` - Sleep to wait transition
|
||||
|
||||
**Use Cases**:
|
||||
|
||||
- 3D artists working in Blender
|
||||
- Animation asset naming
|
||||
- Non-technical team members
|
||||
- Clear, human-readable names
|
||||
|
||||
### 3. Hierarchical Scheme (Structured/Organized)
|
||||
|
||||
**Format**: `owen.{category}.{state}.{detail}.{type}`
|
||||
**Examples**:
|
||||
|
||||
- `owen.state.wait.idle.loop` - Wait state idle loop
|
||||
- `owen.state.react.angry.totype.transition` - React angry to type transition
|
||||
- `owen.state.type.idle.loop` - Type state idle loop
|
||||
- `owen.state.sleep.towait.transition` - Sleep to wait transition
|
||||
|
||||
**Use Cases**:
|
||||
|
||||
- Large projects with many animations
|
||||
- Structured asset organization
|
||||
- Configuration files
|
||||
- Automated tooling
|
||||
|
||||
### 4. Semantic Scheme (Developer-Friendly)
|
||||
|
||||
**Format**: `Owen{StateAction}{Type}` (PascalCase)
|
||||
**Examples**:
|
||||
|
||||
- `OwenWaitIdleLoop` - Wait idle loop animation
|
||||
- `OwenReactAngryToTypeTransition` - React angry to type transition
|
||||
- `OwenTypeIdleLoop` - Type idle loop animation
|
||||
- `OwenSleepToWaitTransition` - Sleep to wait transition
|
||||
|
||||
**Use Cases**:
|
||||
|
||||
- JavaScript/TypeScript code
|
||||
- API integration
|
||||
- Developer constants
|
||||
- Type-safe programming
|
||||
|
||||
## 🔧 Usage Examples
|
||||
|
||||
### Basic Usage
|
||||
|
||||
```javascript
|
||||
import { OwenAnimationContext, convertAnimationName } from './owen-animation-system';
|
||||
|
||||
// Get animation using any naming scheme
|
||||
const clip1 = owenContext.getClip('wait_idle_L'); // Legacy
|
||||
const clip2 = owenContext.getClip('Owen_WaitIdle'); // Artist
|
||||
const clip3 = owenContext.getClip('owen.state.wait.idle.loop'); // Hierarchical
|
||||
const clip4 = owenContext.getClip('OwenWaitIdleLoop'); // Semantic
|
||||
|
||||
// All return the same animation clip!
|
||||
```
|
||||
|
||||
### Name Conversion
|
||||
|
||||
```javascript
|
||||
import { convertAnimationName, getAllAnimationNames } from './owen-animation-system';
|
||||
|
||||
// Convert between schemes
|
||||
const artistName = convertAnimationName('wait_idle_L', 'artist');
|
||||
// Returns: 'Owen_WaitIdle'
|
||||
|
||||
const semanticName = convertAnimationName('Owen_ReactAngry', 'semantic');
|
||||
// Returns: 'OwenReactAngryLoop'
|
||||
|
||||
// Get all variants
|
||||
const allNames = getAllAnimationNames('react_an2type_T');
|
||||
/* Returns:
|
||||
{
|
||||
legacy: 'react_an2type_T',
|
||||
artist: 'Owen_ReactAngryToType',
|
||||
hierarchical: 'owen.state.react.angry.totype.transition',
|
||||
semantic: 'OwenReactAngryToTypeTransition'
|
||||
}
|
||||
*/
|
||||
```
|
||||
|
||||
### Validation
|
||||
|
||||
```javascript
|
||||
import { validateAnimationName } from './owen-animation-system';
|
||||
|
||||
const validation = validateAnimationName('Owen_WaitIdle');
|
||||
/* Returns:
|
||||
{
|
||||
isValid: true,
|
||||
scheme: 'artist',
|
||||
error: null,
|
||||
suggestions: []
|
||||
}
|
||||
*/
|
||||
|
||||
const invalidValidation = validateAnimationName('invalid_name');
|
||||
/* Returns:
|
||||
{
|
||||
isValid: false,
|
||||
scheme: 'unknown',
|
||||
error: 'Animation "invalid_name" not found',
|
||||
suggestions: ['OwenWaitIdleLoop', 'OwenReactIdleLoop', ...]
|
||||
}
|
||||
*/
|
||||
```
|
||||
|
||||
### Using Constants
|
||||
|
||||
```javascript
|
||||
import {
|
||||
LegacyAnimations,
|
||||
ArtistAnimations,
|
||||
SemanticAnimations
|
||||
} from './owen-animation-system';
|
||||
|
||||
// Type-safe animation references
|
||||
const legacyAnim = LegacyAnimations.WAIT_IDLE_LOOP; // 'wait_idle_L'
|
||||
const artistAnim = ArtistAnimations.WAIT_IDLE; // 'Owen_WaitIdle'
|
||||
const semanticAnim = SemanticAnimations.WAIT_IDLE_LOOP; // 'OwenWaitIdleLoop'
|
||||
```
|
||||
|
||||
## 🎨 Workflow Integration
|
||||
|
||||
### For 3D Artists (Blender)
|
||||
|
||||
1. Use **Artist Scheme** names when creating animations in Blender
|
||||
2. Name animations like `Owen_WaitIdle`, `Owen_ReactHappy`, etc.
|
||||
3. Export animations with these names
|
||||
4. The system automatically handles conversion to other schemes
|
||||
|
||||
### For Developers
|
||||
|
||||
1. Use **Semantic Scheme** constants in code for type safety
|
||||
2. Import animation constants: `import { SemanticAnimations } from './owen-animation-system'`
|
||||
3. Reference animations: `SemanticAnimations.WAIT_IDLE_LOOP`
|
||||
4. Let the system handle backward compatibility
|
||||
|
||||
### For Project Management
|
||||
|
||||
1. Use **Hierarchical Scheme** for asset organization
|
||||
2. Structure animation files: `owen.state.{stateName}.{details}.{type}`
|
||||
3. Easy filtering and categorization
|
||||
4. Clear project structure
|
||||
|
||||
## 🔄 Migration Guide
|
||||
|
||||
### From Legacy to Multi-Scheme
|
||||
|
||||
```javascript
|
||||
// Before (Legacy only)
|
||||
const clip = owenContext.getClip('wait_idle_L');
|
||||
|
||||
// After (Multi-scheme compatible)
|
||||
const clip = owenContext.getClip('wait_idle_L'); // Still works!
|
||||
// OR use any other scheme:
|
||||
const clip = owenContext.getClip('Owen_WaitIdle'); // Artist-friendly
|
||||
const clip = owenContext.getClip('OwenWaitIdleLoop'); // Developer-friendly
|
||||
```
|
||||
|
||||
### Updating Animation Assets
|
||||
|
||||
1. **No changes required** - existing legacy names continue to work
|
||||
2. **Gradual migration** - add new scheme names alongside legacy names
|
||||
3. **Full migration** - replace legacy names with preferred scheme
|
||||
|
||||
## 📚 Available Animations
|
||||
|
||||
### Wait State
|
||||
|
||||
| Legacy | Artist | Semantic |
|
||||
| ----------------- | --------------- | ------------------- |
|
||||
| `wait_idle_L` | `Owen_WaitIdle` | `OwenWaitIdleLoop` |
|
||||
| `wait_pickNose_Q` | `Owen_PickNose` | `OwenQuirkPickNose` |
|
||||
| `wait_stretch_Q` | `Owen_Stretch` | `OwenQuirkStretch` |
|
||||
| `wait_yawn_Q` | `Owen_Yawn` | `OwenQuirkYawn` |
|
||||
|
||||
### React State
|
||||
|
||||
| Legacy | Artist | Semantic |
|
||||
| -------------- | ------------------- | ---------------------- |
|
||||
| `react_idle_L` | `Owen_ReactIdle` | `OwenReactIdleLoop` |
|
||||
| `react_an_L` | `Owen_ReactAngry` | `OwenReactAngryLoop` |
|
||||
| `react_sh_L` | `Owen_ReactShocked` | `OwenReactShockedLoop` |
|
||||
| `react_ha_L` | `Owen_ReactHappy` | `OwenReactHappyLoop` |
|
||||
| `react_sd_L` | `Owen_ReactSad` | `OwenReactSadLoop` |
|
||||
|
||||
### Type State
|
||||
|
||||
| Legacy | Artist | Semantic |
|
||||
| ------------- | --------------- | ------------------ |
|
||||
| `type_idle_L` | `Owen_TypeIdle` | `OwenTypeIdleLoop` |
|
||||
| `type_fast_L` | `Owen_TypeFast` | `OwenTypeFastLoop` |
|
||||
| `type_slow_L` | `Owen_TypeSlow` | `OwenTypeSlowLoop` |
|
||||
|
||||
### Sleep State
|
||||
|
||||
| Legacy | Artist | Semantic |
|
||||
| --------------- | ------------------ | --------------------------- |
|
||||
| `sleep_idle_L` | `Owen_SleepIdle` | `OwenSleepIdleLoop` |
|
||||
| `sleep_2wait_T` | `Owen_SleepToWait` | `OwenSleepToWaitTransition` |
|
||||
|
||||
## 🛠️ API Reference
|
||||
|
||||
### Core Methods
|
||||
|
||||
#### `getClip(name: string)`
|
||||
|
||||
Get animation clip by name (supports all schemes)
|
||||
|
||||
#### `getClipByScheme(name: string, targetScheme: string)`
|
||||
|
||||
Get animation clip with specific scheme conversion
|
||||
|
||||
#### `convertAnimationName(name: string, targetScheme: string)`
|
||||
|
||||
Convert animation name between schemes
|
||||
|
||||
#### `getAllAnimationNames(name: string)`
|
||||
|
||||
Get all scheme variants for an animation
|
||||
|
||||
#### `validateAnimationName(name: string)`
|
||||
|
||||
Validate animation name and get suggestions
|
||||
|
||||
### Constants
|
||||
|
||||
#### `NamingSchemes`
|
||||
|
||||
- `LEGACY`: 'legacy'
|
||||
- `ARTIST`: 'artist'
|
||||
- `HIERARCHICAL`: 'hierarchical'
|
||||
- `SEMANTIC`: 'semantic'
|
||||
|
||||
#### Animation Constants
|
||||
|
||||
- `LegacyAnimations`: Legacy scheme constants
|
||||
- `ArtistAnimations`: Artist scheme constants
|
||||
- `HierarchicalAnimations`: Hierarchical scheme constants
|
||||
- `SemanticAnimations`: Semantic scheme constants
|
||||
|
||||
## 🎯 Best Practices
|
||||
|
||||
1. **Consistency**: Choose one primary scheme for your team and stick to it
|
||||
2. **Type Safety**: Use constants instead of raw strings when possible
|
||||
3. **Documentation**: Document which scheme you're using in your project
|
||||
4. **Validation**: Use `validateAnimationName()` to catch typos early
|
||||
5. **Migration**: Plan gradual migration for existing projects
|
||||
|
||||
## 🚀 Examples
|
||||
|
||||
Check out the [Mock Demo](./examples/mock-demo/owen_test_demo.html) for interactive examples of:
|
||||
|
||||
- Name conversion between schemes
|
||||
- Animation validation
|
||||
- Real-time scheme testing
|
||||
- Integration patterns
|
||||
|
||||
---
|
||||
|
||||
For more information, see the [main README](./README.md) or check the [API documentation](./docs/).
|
||||
66
README.md
66
README.md
@ -2,6 +2,10 @@
|
||||
|
||||
A comprehensive Three.js animation system for character state management with clean architecture principles, dependency injection, and factory patterns.
|
||||
|
||||
[](https://gitea.kajkowalski.nl/kjanat/Owen/issues)
|
||||
[](https://gitea.kajkowalski.nl/kjanat/Owen/pulls)
|
||||
[](https://gitea.kajkowalski.nl/kjanat/Owen/tags)
|
||||
|
||||
## 🎯 Overview
|
||||
|
||||
The Owen Animation System is a sophisticated character animation framework built for Three.js that manages complex state machines, emotional responses, and animation transitions. It's designed with clean architecture principles to be maintainable, extensible, and testable.
|
||||
@ -11,10 +15,13 @@ The Owen Animation System is a sophisticated character animation framework built
|
||||
- **🤖 State Machine Implementation** - Complete state management system with `Wait`, `React`, `Type`, and `Sleep` states
|
||||
- **😊 Emotional Response System** - Analyzes user input to determine appropriate emotional animations
|
||||
- **🔄 Animation Transition Management** - Smooth transitions between states with fade in/out support
|
||||
- **📝 Animation Naming Convention Parser** - Automatically parses animation metadata from naming conventions
|
||||
- **📝 Multi-Scheme Animation Naming** - Supports legacy, artist-friendly, hierarchical, and semantic naming schemes
|
||||
- **🎨 Artist-Friendly Workflow** - Blender-compatible naming for 3D artists (`Owen_WaitIdle`, `Owen_ReactHappy`)
|
||||
- **👨💻 Developer Experience** - Type-safe constants and semantic naming (`OwenWaitIdleLoop`, `OwenReactAngryTransition`)
|
||||
- **🏗️ Clean Architecture** - Uses dependency injection, factory patterns, and separation of concerns
|
||||
- **⚡ Performance Optimized** - Efficient animation caching and resource management
|
||||
- **🧩 Extensible Design** - Easy to add new states, emotions, and animation types
|
||||
- **🔄 Backward Compatibility** - Legacy naming scheme continues to work alongside new schemes
|
||||
|
||||
## 🚀 Installation
|
||||
|
||||
@ -99,10 +106,57 @@ customStates.set("custom", CustomStateHandler);
|
||||
const owenSystem = await OwenSystemFactory.createCustomOwenSystem(gltfModel, scene, customStates);
|
||||
|
||||
// Manual state transitions
|
||||
await owenSystem.transitionTo(States.REACT, Emotions.HAPPY);
|
||||
await owenSystem.transitionTo(States.REACTING, Emotions.HAPPY);
|
||||
```
|
||||
|
||||
## 🎮 Animation Naming Convention
|
||||
## 🎨 Multi-Scheme Animation Naming
|
||||
|
||||
Owen supports **four different animation naming schemes** to accommodate different workflows and preferences:
|
||||
|
||||
### Naming Schemes
|
||||
|
||||
| Scheme | Format | Example | Use Case |
|
||||
| ---------------- | ---------------------------- | --------------------------- | ------------------------------- |
|
||||
| **Legacy** | `{state}_{emotion}_{type}` | `wait_idle_L` | Backward compatibility |
|
||||
| **Artist** | `Owen_{Action}` | `Owen_WaitIdle` | Blender-friendly for 3D artists |
|
||||
| **Hierarchical** | `owen.{category}.{state}...` | `owen.state.wait.idle.loop` | Structured projects |
|
||||
| **Semantic** | `Owen{StateAction}{Type}` | `OwenWaitIdleLoop` | Developer-friendly |
|
||||
|
||||
### Usage Examples
|
||||
|
||||
```javascript
|
||||
// All of these refer to the same animation:
|
||||
const clip1 = owenSystem.getClip('wait_idle_L'); // Legacy
|
||||
const clip2 = owenSystem.getClip('Owen_WaitIdle'); // Artist
|
||||
const clip3 = owenSystem.getClip('owen.state.wait.idle.loop'); // Hierarchical
|
||||
const clip4 = owenSystem.getClip('OwenWaitIdleLoop'); // Semantic
|
||||
|
||||
// Convert between schemes
|
||||
import { convertAnimationName, SemanticAnimations } from 'owen';
|
||||
|
||||
const artistName = convertAnimationName('wait_idle_L', 'artist');
|
||||
// Returns: 'Owen_WaitIdle'
|
||||
|
||||
// Use type-safe constants
|
||||
const animation = SemanticAnimations.WAIT_IDLE_LOOP; // 'OwenWaitIdleLoop'
|
||||
```
|
||||
|
||||
### For 3D Artists (Blender Workflow)
|
||||
|
||||
```javascript
|
||||
// Use artist-friendly names in Blender:
|
||||
// Owen_WaitIdle, Owen_ReactHappy, Owen_TypeFast, etc.
|
||||
// System automatically handles conversion!
|
||||
|
||||
const clip = owenSystem.getClip('Owen_ReactAngry'); // Just works!
|
||||
```
|
||||
|
||||
> [!TIP]
|
||||
> See the [Multi-Scheme Guide](./MULTI_SCHEME_GUIDE.md) for complete documentation and examples.
|
||||
|
||||
## 🎮 Animation Naming Convention (Legacy)
|
||||
|
||||
The system maintains backward compatibility with the original naming convention:
|
||||
|
||||
The system expects animations to follow this naming convention:
|
||||
|
||||
@ -181,7 +235,6 @@ Owen/
|
||||
│ └── basic-demo.js # Basic usage example
|
||||
├── package.json
|
||||
├── vite.config.js
|
||||
├── .eslintrc.json
|
||||
├── jsdoc.config.json
|
||||
└── README.md
|
||||
```
|
||||
@ -228,9 +281,10 @@ Documentation will be generated in the `docs/` directory.
|
||||
- `npm run dev` - Start development server
|
||||
- `npm run build` - Build for production
|
||||
- `npm run preview` - Preview production build
|
||||
- `npm run lint` - Run ESLint
|
||||
- `npm run lint:fix` - Fix ESLint issues
|
||||
- `npm run lint` - Run StandardJS linting
|
||||
- `npm run lint:fix` - Fix StandardJS issues
|
||||
- `npm run docs` - Generate JSDoc documentation
|
||||
- `npm run format` - Format code with Prettier
|
||||
|
||||
## 🎮 Demo Controls
|
||||
|
||||
|
||||
337
demo/comparison.html
Normal file
337
demo/comparison.html
Normal file
@ -0,0 +1,337 @@
|
||||
<!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>
|
||||
400
demo/examples.html
Normal file
400
demo/examples.html
Normal file
@ -0,0 +1,400 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Examples - Owen Animation System</title>
|
||||
<link rel="stylesheet" href="./styles/main.css" />
|
||||
<link rel="stylesheet" href="./styles/examples.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header class="demo-header">
|
||||
<div class="container">
|
||||
<h1 class="logo">
|
||||
<span class="logo-text">Owen</span>
|
||||
<span class="logo-subtitle">Examples</span>
|
||||
</h1>
|
||||
<nav class="demo-nav">
|
||||
<a href="index.html" class="nav-link">Demo</a>
|
||||
<a href="examples.html" class="nav-link active">Examples</a>
|
||||
<a href="comparison.html" class="nav-link">Comparison</a>
|
||||
<a href="interactive.html" class="nav-link">Interactive</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="examples-main">
|
||||
<div class="container">
|
||||
<section class="examples-hero">
|
||||
<h2>Code Examples & Integration Patterns</h2>
|
||||
<p>
|
||||
Explore practical examples of using the Owen Animation System in
|
||||
different frameworks and scenarios.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="examples-grid">
|
||||
<div class="example-category">
|
||||
<h3>Framework Integration</h3>
|
||||
<div class="example-cards">
|
||||
<div class="example-card">
|
||||
<h4>React Integration</h4>
|
||||
<p>Complete React component with animation state management</p>
|
||||
<a href="#react-example" class="example-link">View Example</a>
|
||||
</div>
|
||||
<div class="example-card">
|
||||
<h4>Vue Integration</h4>
|
||||
<p>Vue 3 composition API with reactive animation controls</p>
|
||||
<a href="#vue-example" class="example-link">View Example</a>
|
||||
</div>
|
||||
<div class="example-card">
|
||||
<h4>Node.js Server</h4>
|
||||
<p>Server-side animation processing and validation</p>
|
||||
<a href="#nodejs-example" class="example-link">View Example</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example-category">
|
||||
<h3>Multi-Scheme Usage</h3>
|
||||
<div class="example-cards">
|
||||
<div class="example-card">
|
||||
<h4>Scheme Conversion</h4>
|
||||
<p>Converting animations between different naming schemes</p>
|
||||
<a href="#conversion-example" class="example-link"
|
||||
>View Example</a
|
||||
>
|
||||
</div>
|
||||
<div class="example-card">
|
||||
<h4>Batch Processing</h4>
|
||||
<p>Processing multiple animations with automated conversion</p>
|
||||
<a href="#batch-example" class="example-link">View Example</a>
|
||||
</div>
|
||||
<div class="example-card">
|
||||
<h4>Validation Pipeline</h4>
|
||||
<p>Complete validation workflow with error handling</p>
|
||||
<a href="#validation-example" class="example-link"
|
||||
>View Example</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example-category">
|
||||
<h3>Advanced Features</h3>
|
||||
<div class="example-cards">
|
||||
<div class="example-card">
|
||||
<h4>Custom Schemes</h4>
|
||||
<p>Creating and registering custom naming schemes</p>
|
||||
<a href="#custom-example" class="example-link">View Example</a>
|
||||
</div>
|
||||
<div class="example-card">
|
||||
<h4>Performance Optimization</h4>
|
||||
<p>Optimizing animation loading and caching strategies</p>
|
||||
<a href="#performance-example" class="example-link"
|
||||
>View Example</a
|
||||
>
|
||||
</div>
|
||||
<div class="example-card">
|
||||
<h4>Testing Integration</h4>
|
||||
<p>Unit and integration testing for animation systems</p>
|
||||
<a href="#testing-example" class="example-link">View Example</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Detailed Examples -->
|
||||
<section class="detailed-examples">
|
||||
<div id="react-example" class="example-detail">
|
||||
<h3>React Integration Example</h3>
|
||||
<pre><code class="javascript">import React, { useEffect, useRef, useState } from 'react'
|
||||
import { OwenAnimationContext } from '@kjanat/owen'
|
||||
|
||||
export function AnimatedCharacter({ characterModel, namingScheme = 'semantic' }) {
|
||||
const containerRef = useRef()
|
||||
const [animationContext, setAnimationContext] = useState(null)
|
||||
const [currentAnimation, setCurrentAnimation] = useState('idle')
|
||||
const [isPlaying, setIsPlaying] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
// Initialize Owen Animation Context
|
||||
const context = new OwenAnimationContext({
|
||||
namingScheme,
|
||||
autoConvert: true,
|
||||
container: containerRef.current
|
||||
})
|
||||
|
||||
context.loadModel(characterModel).then(() => {
|
||||
setAnimationContext(context)
|
||||
})
|
||||
|
||||
return () => context?.dispose()
|
||||
}, [characterModel, namingScheme])
|
||||
|
||||
const playAnimation = async (animationName) => {
|
||||
if (!animationContext) return
|
||||
|
||||
try {
|
||||
await animationContext.playAnimation(animationName)
|
||||
setCurrentAnimation(animationName)
|
||||
setIsPlaying(true)
|
||||
} catch (error) {
|
||||
console.error('Failed to play animation:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const stopAnimation = () => {
|
||||
animationContext?.stopAnimation()
|
||||
setIsPlaying(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="animated-character">
|
||||
<div ref={containerRef} className="character-viewport" />
|
||||
|
||||
<div className="animation-controls">
|
||||
<button onClick={() => playAnimation('walk_forward')}>
|
||||
Walk
|
||||
</button>
|
||||
<button onClick={() => playAnimation('character_run')}>
|
||||
Run
|
||||
</button>
|
||||
<button onClick={() => playAnimation('jump_high')}>
|
||||
Jump
|
||||
</button>
|
||||
<button onClick={stopAnimation}>
|
||||
Stop
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="animation-info">
|
||||
<p>Current: {currentAnimation}</p>
|
||||
<p>Status: {isPlaying ? 'Playing' : 'Stopped'}</p>
|
||||
<p>Scheme: {namingScheme}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}</code></pre>
|
||||
</div>
|
||||
|
||||
<div id="conversion-example" class="example-detail">
|
||||
<h3>Animation Name Conversion</h3>
|
||||
<pre><code class="javascript">import { AnimationNameMapper } from '@kjanat/owen'
|
||||
|
||||
// Initialize the mapper
|
||||
const mapper = new AnimationNameMapper()
|
||||
|
||||
// Single animation conversion
|
||||
function convertAnimation(animationName, fromScheme, toScheme) {
|
||||
try {
|
||||
const converted = mapper.convert(animationName, toScheme, fromScheme)
|
||||
console.log(`${fromScheme}: ${animationName} → ${toScheme}: ${converted}`)
|
||||
return converted
|
||||
} catch (error) {
|
||||
console.error('Conversion failed:', error.message)
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
// Batch conversion with validation
|
||||
function convertAnimationBatch(animations, fromScheme, toScheme) {
|
||||
const results = {
|
||||
successful: [],
|
||||
failed: [],
|
||||
conflicts: []
|
||||
}
|
||||
|
||||
animations.forEach(anim => {
|
||||
try {
|
||||
const converted = mapper.convert(anim, toScheme, fromScheme)
|
||||
|
||||
// Check for conflicts
|
||||
if (results.successful.includes(converted)) {
|
||||
results.conflicts.push({
|
||||
original: anim,
|
||||
converted,
|
||||
conflict: 'Duplicate target name'
|
||||
})
|
||||
} else {
|
||||
results.successful.push({
|
||||
original: anim,
|
||||
converted,
|
||||
schemes: { from: fromScheme, to: toScheme }
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
results.failed.push({
|
||||
original: anim,
|
||||
error: error.message,
|
||||
suggestions: mapper.suggestCorrections(anim, fromScheme)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
return results
|
||||
}
|
||||
|
||||
// Example usage
|
||||
const legacyAnimations = [
|
||||
'walk_forward', 'run_fast', 'jump_high',
|
||||
'attack_sword', 'defend_shield', 'idle_breathing'
|
||||
]
|
||||
|
||||
const conversionResults = convertAnimationBatch(
|
||||
legacyAnimations,
|
||||
'legacy',
|
||||
'semantic'
|
||||
)
|
||||
|
||||
console.log('Conversion Results:', conversionResults)</code></pre>
|
||||
</div>
|
||||
|
||||
<div id="batch-example" class="example-detail">
|
||||
<h3>Batch Processing Pipeline</h3>
|
||||
<pre><code class="javascript">import { AnimationProcessor } from '@kjanat/owen'
|
||||
import fs from 'fs/promises'
|
||||
import path from 'path'
|
||||
|
||||
class AnimationBatchProcessor {
|
||||
constructor(options = {}) {
|
||||
this.processor = new AnimationProcessor(options)
|
||||
this.inputDir = options.inputDir || './assets/raw'
|
||||
this.outputDir = options.outputDir || './assets/processed'
|
||||
this.targetScheme = options.targetScheme || 'semantic'
|
||||
}
|
||||
|
||||
async processDirectory() {
|
||||
console.log('Starting batch animation processing...')
|
||||
|
||||
try {
|
||||
// Scan input directory
|
||||
const files = await this.scanAnimationFiles()
|
||||
console.log(`Found ${files.length} animation files`)
|
||||
|
||||
// Process each file
|
||||
const results = await Promise.allSettled(
|
||||
files.map(file => this.processFile(file))
|
||||
)
|
||||
|
||||
// Generate summary report
|
||||
const summary = this.generateSummary(results)
|
||||
await this.saveReport(summary)
|
||||
|
||||
return summary
|
||||
} catch (error) {
|
||||
console.error('Batch processing failed:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
async scanAnimationFiles() {
|
||||
const files = []
|
||||
const entries = await fs.readdir(this.inputDir, { withFileTypes: true })
|
||||
|
||||
for (const entry of entries) {
|
||||
if (entry.isFile() && /\.(gltf|glb|fbx)$/i.test(entry.name)) {
|
||||
files.push(path.join(this.inputDir, entry.name))
|
||||
}
|
||||
}
|
||||
|
||||
return files
|
||||
}
|
||||
|
||||
async processFile(inputFile) {
|
||||
const filename = path.basename(inputFile)
|
||||
console.log(`Processing: ${filename}`)
|
||||
|
||||
try {
|
||||
// Load and analyze animation
|
||||
const animation = await this.processor.loadAnimation(inputFile)
|
||||
|
||||
// Convert naming scheme
|
||||
const convertedName = this.processor.convertName(
|
||||
animation.name,
|
||||
this.targetScheme
|
||||
)
|
||||
|
||||
// Apply optimizations
|
||||
const optimized = await this.processor.optimize(animation)
|
||||
|
||||
// Save processed animation
|
||||
const outputFile = path.join(this.outputDir, `${convertedName}.gltf`)
|
||||
await this.processor.saveAnimation(optimized, outputFile)
|
||||
|
||||
return {
|
||||
status: 'success',
|
||||
inputFile,
|
||||
outputFile,
|
||||
originalName: animation.name,
|
||||
convertedName,
|
||||
size: optimized.size,
|
||||
duration: optimized.duration
|
||||
}
|
||||
} catch (error) {
|
||||
return {
|
||||
status: 'error',
|
||||
inputFile,
|
||||
error: error.message
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
generateSummary(results) {
|
||||
const successful = results.filter(r => r.value?.status === 'success')
|
||||
const failed = results.filter(r => r.status === 'rejected' || r.value?.status === 'error')
|
||||
|
||||
return {
|
||||
timestamp: new Date().toISOString(),
|
||||
total: results.length,
|
||||
successful: successful.length,
|
||||
failed: failed.length,
|
||||
successRate: (successful.length / results.length * 100).toFixed(2),
|
||||
details: {
|
||||
successful: successful.map(r => r.value),
|
||||
failed: failed.map(r => ({
|
||||
file: r.value?.inputFile || 'unknown',
|
||||
error: r.value?.error || r.reason
|
||||
}))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async saveReport(summary) {
|
||||
const reportPath = path.join(this.outputDir, 'processing-report.json')
|
||||
await fs.mkdir(path.dirname(reportPath), { recursive: true })
|
||||
await fs.writeFile(reportPath, JSON.stringify(summary, null, 2))
|
||||
console.log(`Report saved: ${reportPath}`)
|
||||
}
|
||||
}
|
||||
|
||||
// Usage
|
||||
const processor = new AnimationBatchProcessor({
|
||||
inputDir: './assets/blender-exports',
|
||||
outputDir: './assets/animations',
|
||||
targetScheme: 'semantic'
|
||||
})
|
||||
|
||||
processor.processDirectory().then(summary => {
|
||||
console.log('Processing complete:', summary)
|
||||
}).catch(error => {
|
||||
console.error('Processing failed:', error)
|
||||
process.exit(1)
|
||||
})</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="demo-footer">
|
||||
<div class="container">
|
||||
<p>
|
||||
© 2024 Owen Animation System. All examples are MIT licensed for
|
||||
educational use.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script type="module" src="./js/examples.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
311
demo/index.html
Normal file
311
demo/index.html
Normal file
@ -0,0 +1,311 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Owen Animation System - Interactive Demo</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Interactive demonstration of the Owen Animation System with multi-scheme naming support"
|
||||
/>
|
||||
|
||||
<!-- Preload critical resources -->
|
||||
<link rel="preload" href="./styles/main.css" as="style" />
|
||||
<link rel="preload" href="./js/demo.js" as="script" />
|
||||
|
||||
<!-- Styles -->
|
||||
<link rel="stylesheet" href="./styles/main.css" />
|
||||
<link rel="stylesheet" href="./styles/demo.css" />
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/svg+xml" href="./assets/favicon.svg" />
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header -->
|
||||
<header class="demo-header">
|
||||
<div class="container">
|
||||
<h1 class="logo">
|
||||
<span class="logo-text">Owen</span>
|
||||
<span class="logo-subtitle">Animation System</span>
|
||||
</h1>
|
||||
<nav class="demo-nav">
|
||||
<a href="index.html" class="nav-link active">Demo</a>
|
||||
<a href="examples.html" class="nav-link">Examples</a>
|
||||
<a href="comparison.html" class="nav-link">Comparison</a>
|
||||
<a href="interactive.html" class="nav-link">Interactive</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="demo-main">
|
||||
<div class="container">
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-section">
|
||||
<div class="hero-content">
|
||||
<h2>Multi-Scheme Animation Naming</h2>
|
||||
<p>
|
||||
Experience the power of flexible animation naming with support for
|
||||
Legacy, Artist, Hierarchical, and Semantic schemes.
|
||||
</p>
|
||||
|
||||
<div class="hero-actions">
|
||||
<button id="start-demo" class="btn btn-primary">
|
||||
Start Interactive Demo
|
||||
</button>
|
||||
<a href="https://github.com/kjanat/Owen" class="btn btn-secondary"
|
||||
>View on GitHub</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-visual">
|
||||
<canvas id="demo-canvas" width="600" height="400"></canvas>
|
||||
<div class="demo-controls">
|
||||
<div class="control-group">
|
||||
<label for="naming-scheme">Naming Scheme:</label>
|
||||
<select id="naming-scheme">
|
||||
<option value="semantic">Semantic (default)</option>
|
||||
<option value="hierarchical">Hierarchical</option>
|
||||
<option value="artist">Artist</option>
|
||||
<option value="legacy">Legacy</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label for="animation-select">Animation:</label>
|
||||
<select id="animation-select">
|
||||
<option value="">Select an animation...</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<button id="play-animation" class="btn btn-small" disabled>
|
||||
Play
|
||||
</button>
|
||||
<button id="pause-animation" class="btn btn-small" disabled>
|
||||
Pause
|
||||
</button>
|
||||
<button id="stop-animation" class="btn btn-small" disabled>
|
||||
Stop
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section class="features-section">
|
||||
<h3>Key Features</h3>
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🎯</div>
|
||||
<h4>Multi-Scheme Support</h4>
|
||||
<p>
|
||||
Seamlessly work with Legacy, Artist, Hierarchical, and Semantic
|
||||
naming schemes in the same project.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🔄</div>
|
||||
<h4>Automatic Conversion</h4>
|
||||
<p>
|
||||
Convert animation names between schemes automatically with
|
||||
built-in validation and error handling.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">⚡</div>
|
||||
<h4>Performance Optimized</h4>
|
||||
<p>
|
||||
Efficient caching and lazy loading ensure smooth performance
|
||||
even with large animation libraries.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🛠️</div>
|
||||
<h4>Developer Tools</h4>
|
||||
<p>
|
||||
Comprehensive CLI tools, validation scripts, and documentation
|
||||
generators for streamlined workflows.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Live Demo Section -->
|
||||
<section class="live-demo-section">
|
||||
<h3>Live Animation Conversion</h3>
|
||||
<div class="conversion-demo">
|
||||
<div class="input-section">
|
||||
<label for="input-animation">Enter Animation Name:</label>
|
||||
<input
|
||||
type="text"
|
||||
id="input-animation"
|
||||
placeholder="e.g., character_walk_forward"
|
||||
/>
|
||||
|
||||
<label for="input-scheme">Current Scheme:</label>
|
||||
<select id="input-scheme">
|
||||
<option value="semantic">Semantic</option>
|
||||
<option value="hierarchical">Hierarchical</option>
|
||||
<option value="artist">Artist</option>
|
||||
<option value="legacy">Legacy</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="conversion-results">
|
||||
<h4>Converted Names:</h4>
|
||||
<div class="scheme-results">
|
||||
<div class="scheme-result">
|
||||
<strong>Legacy:</strong> <span id="result-legacy">-</span>
|
||||
</div>
|
||||
<div class="scheme-result">
|
||||
<strong>Artist:</strong> <span id="result-artist">-</span>
|
||||
</div>
|
||||
<div class="scheme-result">
|
||||
<strong>Hierarchical:</strong>
|
||||
<span id="result-hierarchical">-</span>
|
||||
</div>
|
||||
<div class="scheme-result">
|
||||
<strong>Semantic:</strong> <span id="result-semantic">-</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Code Examples Section -->
|
||||
<section class="code-examples-section">
|
||||
<h3>Usage Examples</h3>
|
||||
<div class="code-tabs">
|
||||
<button class="tab-button active" data-tab="basic">
|
||||
Basic Usage
|
||||
</button>
|
||||
<button class="tab-button" data-tab="conversion">
|
||||
Name Conversion
|
||||
</button>
|
||||
<button class="tab-button" data-tab="validation">Validation</button>
|
||||
</div>
|
||||
|
||||
<div class="tab-content">
|
||||
<div id="basic-tab" class="tab-pane active">
|
||||
<pre><code class="javascript">import { OwenAnimationContext } from '@kjanat/owen'
|
||||
|
||||
// Initialize with semantic naming scheme
|
||||
const animationContext = new OwenAnimationContext({
|
||||
namingScheme: 'semantic',
|
||||
autoConvert: true
|
||||
})
|
||||
|
||||
// Play an animation
|
||||
await animationContext.playAnimation('character_walk_forward')
|
||||
|
||||
// The system automatically handles scheme conversions
|
||||
await animationContext.playAnimation('CharacterWalkForward') // Artist scheme</code></pre>
|
||||
</div>
|
||||
|
||||
<div id="conversion-tab" class="tab-pane">
|
||||
<pre><code class="javascript">import { AnimationNameMapper } from '@kjanat/owen'
|
||||
|
||||
const mapper = new AnimationNameMapper()
|
||||
|
||||
// Convert between schemes
|
||||
const semanticName = mapper.convert('CharacterWalkForward', 'semantic')
|
||||
// Result: 'character_walk_forward'
|
||||
|
||||
const hierarchicalName = mapper.convert('walk_forward', 'hierarchical')
|
||||
// Result: 'character.movement.walk.forward'
|
||||
|
||||
// Batch conversion
|
||||
const animations = ['jump', 'run', 'idle']
|
||||
const converted = mapper.convertBatch(animations, 'legacy', 'artist')
|
||||
// Result: ['Jump', 'Run', 'Idle']</code></pre>
|
||||
</div>
|
||||
|
||||
<div id="validation-tab" class="tab-pane">
|
||||
<pre><code class="javascript">import { AnimationValidator } from '@kjanat/owen'
|
||||
|
||||
const validator = new AnimationValidator()
|
||||
|
||||
// Validate animation name for specific scheme
|
||||
const isValid = validator.validate('character_walk_forward', 'semantic')
|
||||
// Result: true
|
||||
|
||||
// Get validation details
|
||||
const validation = validator.validateDetailed('InvalidName123', 'semantic')
|
||||
console.log(validation.errors) // Array of validation errors
|
||||
console.log(validation.suggestions) // Suggested corrections</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="demo-footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-section">
|
||||
<h4>Owen Animation System</h4>
|
||||
<p>
|
||||
A comprehensive Three.js animation system with multi-scheme naming
|
||||
support.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h4>Documentation</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../docs/ANIMATION_SYSTEM.md">Animation System Guide</a>
|
||||
</li>
|
||||
<li><a href="../docs/API_REFERENCE.md">API Reference</a></li>
|
||||
<li><a href="../docs/MIGRATION_GUIDE.md">Migration Guide</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h4>Examples</h4>
|
||||
<ul>
|
||||
<li><a href="../examples/basic/README.md">Basic Usage</a></li>
|
||||
<li>
|
||||
<a href="../examples/react/README.md">React Integration</a>
|
||||
</li>
|
||||
<li><a href="../examples/vue/README.md">Vue Integration</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h4>Links</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/kjanat/Owen">GitHub Repository</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://gitea.kajkowalski.nl/kjanat/Owen"
|
||||
>Gitea Repository</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="https://semver.org/">Semantic Versioning</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
<p>
|
||||
© 2024 Kaj "kjanat" Kowalski. Licensed under AGPL-3.0-only OR
|
||||
LicenseRef-Commercial.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script type="module" src="./js/demo.js"></script>
|
||||
<script type="module" src="./js/animation-demo.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
306
demo/interactive.html
Normal file
306
demo/interactive.html
Normal file
@ -0,0 +1,306 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Interactive Playground - Owen Animation System</title>
|
||||
<link rel="stylesheet" href="./styles/main.css" />
|
||||
<link rel="stylesheet" href="./styles/interactive.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header class="demo-header">
|
||||
<div class="container">
|
||||
<h1 class="logo">
|
||||
<span class="logo-text">Owen</span>
|
||||
<span class="logo-subtitle">Interactive Playground</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">Comparison</a>
|
||||
<a href="interactive.html" class="nav-link active">Interactive</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="interactive-main">
|
||||
<div class="container">
|
||||
<section class="playground-hero">
|
||||
<h2>Interactive Animation Playground</h2>
|
||||
<p>
|
||||
Experiment with the Owen Animation System in real-time. Try
|
||||
different schemes, test conversions, and see the results instantly.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div class="playground-layout">
|
||||
<!-- Sidebar Controls -->
|
||||
<aside class="playground-sidebar">
|
||||
<div class="control-section">
|
||||
<h3>Character Model</h3>
|
||||
<select id="model-select">
|
||||
<option value="basic-character">Basic Character</option>
|
||||
<option value="detailed-character">Detailed Character</option>
|
||||
<option value="robot-character">Robot Character</option>
|
||||
</select>
|
||||
<button id="load-model" class="btn btn-small">Load Model</button>
|
||||
</div>
|
||||
|
||||
<div class="control-section">
|
||||
<h3>Naming Scheme</h3>
|
||||
<div class="scheme-selector">
|
||||
<label class="scheme-option">
|
||||
<input type="radio" name="scheme" value="legacy" />
|
||||
<span>Legacy (snake_case)</span>
|
||||
</label>
|
||||
<label class="scheme-option">
|
||||
<input type="radio" name="scheme" value="artist" />
|
||||
<span>Artist (PascalCase)</span>
|
||||
</label>
|
||||
<label class="scheme-option">
|
||||
<input type="radio" name="scheme" value="hierarchical" />
|
||||
<span>Hierarchical (dot.notation)</span>
|
||||
</label>
|
||||
<label class="scheme-option">
|
||||
<input type="radio" name="scheme" value="semantic" checked />
|
||||
<span>Semantic (descriptive_names)</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-section">
|
||||
<h3>Available Animations</h3>
|
||||
<div id="animation-list" class="animation-list">
|
||||
<!-- Populated by JavaScript -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-section">
|
||||
<h3>Playback Controls</h3>
|
||||
<div class="playback-controls">
|
||||
<button id="play-btn" class="btn btn-primary">Play</button>
|
||||
<button id="pause-btn" class="btn">Pause</button>
|
||||
<button id="stop-btn" class="btn">Stop</button>
|
||||
</div>
|
||||
|
||||
<div class="playback-options">
|
||||
<label>
|
||||
<input type="checkbox" id="loop-animation" checked />
|
||||
Loop Animation
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="range"
|
||||
id="animation-speed"
|
||||
min="0.1"
|
||||
max="3"
|
||||
step="0.1"
|
||||
value="1"
|
||||
/>
|
||||
Speed: <span id="speed-value">1.0x</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-section">
|
||||
<h3>Conversion Tool</h3>
|
||||
<div class="conversion-tool">
|
||||
<input
|
||||
type="text"
|
||||
id="conversion-input"
|
||||
placeholder="Enter animation name..."
|
||||
/>
|
||||
<select id="source-scheme">
|
||||
<option value="legacy">From Legacy</option>
|
||||
<option value="artist">From Artist</option>
|
||||
<option value="hierarchical">From Hierarchical</option>
|
||||
<option value="semantic">From Semantic</option>
|
||||
</select>
|
||||
<button id="convert-btn" class="btn btn-small">Convert</button>
|
||||
</div>
|
||||
<div id="conversion-results" class="conversion-results">
|
||||
<!-- Results will be displayed here -->
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main Viewport -->
|
||||
<div class="playground-viewport">
|
||||
<div class="viewport-header">
|
||||
<h3>Animation Viewport</h3>
|
||||
<div class="viewport-controls">
|
||||
<button id="fullscreen-btn" class="btn btn-small">
|
||||
Fullscreen
|
||||
</button>
|
||||
<button id="reset-camera" class="btn btn-small">
|
||||
Reset Camera
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="viewport-container">
|
||||
<canvas id="animation-canvas"></canvas>
|
||||
<div class="viewport-overlay">
|
||||
<div id="loading-indicator" class="loading-indicator">
|
||||
<div class="spinner"></div>
|
||||
<p>Loading model...</p>
|
||||
</div>
|
||||
|
||||
<div id="animation-info" class="animation-info">
|
||||
<div class="info-item">
|
||||
<span class="label">Current Animation:</span>
|
||||
<span id="current-animation">None</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">Duration:</span>
|
||||
<span id="animation-duration">0s</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">Progress:</span>
|
||||
<div class="progress-bar">
|
||||
<div id="progress-fill" class="progress-fill"></div>
|
||||
</div>
|
||||
<span id="progress-time">0.0s</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Code Generator -->
|
||||
<section class="code-generator">
|
||||
<h3>Generated Code</h3>
|
||||
<p>
|
||||
See the actual code that would be used to implement your current
|
||||
configuration:
|
||||
</p>
|
||||
|
||||
<div class="code-tabs">
|
||||
<button class="code-tab active" data-tab="javascript">
|
||||
JavaScript
|
||||
</button>
|
||||
<button class="code-tab" data-tab="react">React</button>
|
||||
<button class="code-tab" data-tab="vue">Vue</button>
|
||||
</div>
|
||||
|
||||
<div class="code-content">
|
||||
<div id="javascript-code" class="code-panel active">
|
||||
<pre><code id="js-code-output">// Configure your naming scheme and load animations
|
||||
// Code will be generated based on your selections above</code></pre>
|
||||
<button class="copy-code-btn" data-target="js-code-output">
|
||||
Copy Code
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="react-code" class="code-panel">
|
||||
<pre><code id="react-code-output">// React component implementation
|
||||
// Code will be generated based on your selections above</code></pre>
|
||||
<button class="copy-code-btn" data-target="react-code-output">
|
||||
Copy Code
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="vue-code" class="code-panel">
|
||||
<pre><code id="vue-code-output">// Vue component implementation
|
||||
// Code will be generated based on your selections above</code></pre>
|
||||
<button class="copy-code-btn" data-target="vue-code-output">
|
||||
Copy Code
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Performance Monitor -->
|
||||
<section class="performance-monitor">
|
||||
<h3>Performance Monitor</h3>
|
||||
<div class="performance-grid">
|
||||
<div class="performance-metric">
|
||||
<h4>Frame Rate</h4>
|
||||
<div class="metric-value" id="fps-counter">60 FPS</div>
|
||||
<div class="metric-chart" id="fps-chart"></div>
|
||||
</div>
|
||||
|
||||
<div class="performance-metric">
|
||||
<h4>Memory Usage</h4>
|
||||
<div class="metric-value" id="memory-usage">0 MB</div>
|
||||
<div class="metric-chart" id="memory-chart"></div>
|
||||
</div>
|
||||
|
||||
<div class="performance-metric">
|
||||
<h4>Animation Cache</h4>
|
||||
<div class="metric-value" id="cache-stats">0 / 0</div>
|
||||
<div class="cache-info">
|
||||
<span>Cached: <span id="cached-count">0</span></span>
|
||||
<span>Total: <span id="total-count">0</span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="performance-metric">
|
||||
<h4>Conversion Time</h4>
|
||||
<div class="metric-value" id="conversion-time">0ms</div>
|
||||
<div class="time-breakdown">
|
||||
<span>Avg: <span id="avg-time">0ms</span></span>
|
||||
<span>Max: <span id="max-time">0ms</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Experiments Section -->
|
||||
<section class="experiments-section">
|
||||
<h3>Experiments & Tests</h3>
|
||||
<div class="experiments-grid">
|
||||
<div class="experiment-card">
|
||||
<h4>🚀 Stress Test</h4>
|
||||
<p>Load multiple animations and test performance</p>
|
||||
<button id="stress-test-btn" class="btn">Run Stress Test</button>
|
||||
<div id="stress-test-results" class="test-results"></div>
|
||||
</div>
|
||||
|
||||
<div class="experiment-card">
|
||||
<h4>🔄 Conversion Benchmark</h4>
|
||||
<p>Benchmark animation name conversion performance</p>
|
||||
<button id="conversion-benchmark-btn" class="btn">
|
||||
Run Benchmark
|
||||
</button>
|
||||
<div id="conversion-benchmark-results" class="test-results"></div>
|
||||
</div>
|
||||
|
||||
<div class="experiment-card">
|
||||
<h4>📊 Scheme Analysis</h4>
|
||||
<p>Analyze and compare naming scheme efficiency</p>
|
||||
<button id="scheme-analysis-btn" class="btn">
|
||||
Analyze Schemes
|
||||
</button>
|
||||
<div id="scheme-analysis-results" class="test-results"></div>
|
||||
</div>
|
||||
|
||||
<div class="experiment-card">
|
||||
<h4>💾 Memory Profiling</h4>
|
||||
<p>Profile memory usage with different configurations</p>
|
||||
<button id="memory-profile-btn" class="btn">
|
||||
Profile Memory
|
||||
</button>
|
||||
<div id="memory-profile-results" class="test-results"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="demo-footer">
|
||||
<div class="container">
|
||||
<p>
|
||||
© 2024 Owen Animation System. Experiment freely and discover the
|
||||
possibilities.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script type="module" src="./js/interactive.js"></script>
|
||||
<script type="module" src="./js/playground.js"></script>
|
||||
<script type="module" src="./js/performance-monitor.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
602
demo/js/demo.js
Normal file
602
demo/js/demo.js
Normal file
@ -0,0 +1,602 @@
|
||||
/**
|
||||
* Owen Animation System Demo - Main JavaScript
|
||||
*
|
||||
* This file provides the interactive functionality for the demo pages.
|
||||
* It demonstrates the core features of the Owen Animation System.
|
||||
*/
|
||||
|
||||
// Import Owen Animation System (simulated for demo)
|
||||
// In a real implementation, this would import from the actual package
|
||||
const OwenDemo = {
|
||||
// Mock AnimationNameMapper for demo purposes
|
||||
AnimationNameMapper: class {
|
||||
constructor () {
|
||||
this.animations = {
|
||||
legacy: [
|
||||
'walk_forward', 'walk_backward', 'run_fast', 'run_slow',
|
||||
'jump_high', 'jump_low', 'idle_breathing', 'idle_looking',
|
||||
'attack_sword', 'attack_bow', 'defend_shield', 'defend_dodge',
|
||||
'death_forward', 'death_backward', 'hurt_light', 'hurt_heavy',
|
||||
'climb_up', 'climb_down', 'swim_forward', 'swim_idle'
|
||||
],
|
||||
artist: [
|
||||
'WalkForward', 'WalkBackward', 'RunFast', 'RunSlow',
|
||||
'JumpHigh', 'JumpLow', 'IdleBreathing', 'IdleLooking',
|
||||
'AttackSword', 'AttackBow', 'DefendShield', 'DefendDodge',
|
||||
'DeathForward', 'DeathBackward', 'HurtLight', 'HurtHeavy',
|
||||
'ClimbUp', 'ClimbDown', 'SwimForward', 'SwimIdle'
|
||||
],
|
||||
hierarchical: [
|
||||
'character.movement.walk.forward', 'character.movement.walk.backward',
|
||||
'character.movement.run.fast', 'character.movement.run.slow',
|
||||
'character.movement.jump.high', 'character.movement.jump.low',
|
||||
'character.idle.breathing', 'character.idle.looking',
|
||||
'character.combat.attack.sword', 'character.combat.attack.bow',
|
||||
'character.combat.defend.shield', 'character.combat.defend.dodge',
|
||||
'character.state.death.forward', 'character.state.death.backward',
|
||||
'character.state.hurt.light', 'character.state.hurt.heavy',
|
||||
'character.movement.climb.up', 'character.movement.climb.down',
|
||||
'character.movement.swim.forward', 'character.movement.swim.idle'
|
||||
],
|
||||
semantic: [
|
||||
'character_walk_forward', 'character_walk_backward',
|
||||
'character_run_fast', 'character_run_slow',
|
||||
'character_jump_high', 'character_jump_low',
|
||||
'character_idle_breathing', 'character_idle_looking',
|
||||
'character_attack_sword', 'character_attack_bow',
|
||||
'character_defend_shield', 'character_defend_dodge',
|
||||
'character_death_forward', 'character_death_backward',
|
||||
'character_hurt_light', 'character_hurt_heavy',
|
||||
'character_climb_up', 'character_climb_down',
|
||||
'character_swim_forward', 'character_swim_idle'
|
||||
]
|
||||
}
|
||||
|
||||
// Create conversion mappings
|
||||
this.conversionMap = this.createConversionMap()
|
||||
}
|
||||
|
||||
createConversionMap () {
|
||||
const map = {}
|
||||
const schemes = Object.keys(this.animations)
|
||||
|
||||
schemes.forEach(scheme => {
|
||||
map[scheme] = {}
|
||||
schemes.forEach(targetScheme => {
|
||||
map[scheme][targetScheme] = {}
|
||||
this.animations[scheme].forEach((anim, index) => {
|
||||
map[scheme][targetScheme][anim] = this.animations[targetScheme][index]
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
return map
|
||||
}
|
||||
|
||||
getAllAnimationsByScheme (scheme) {
|
||||
return this.animations[scheme] || []
|
||||
}
|
||||
|
||||
convert (animationName, targetScheme, sourceScheme = null) {
|
||||
// If no source scheme provided, try to detect it
|
||||
if (!sourceScheme) {
|
||||
sourceScheme = this.detectScheme(animationName)
|
||||
}
|
||||
|
||||
if (!sourceScheme) {
|
||||
throw new Error(`Unable to detect scheme for animation: ${animationName}`)
|
||||
}
|
||||
|
||||
if (!this.conversionMap[sourceScheme] || !this.conversionMap[sourceScheme][targetScheme]) {
|
||||
throw new Error(`Conversion from ${sourceScheme} to ${targetScheme} not supported`)
|
||||
}
|
||||
|
||||
const converted = this.conversionMap[sourceScheme][targetScheme][animationName]
|
||||
if (!converted) {
|
||||
throw new Error(`Animation "${animationName}" not found in ${sourceScheme} scheme`)
|
||||
}
|
||||
|
||||
return converted
|
||||
}
|
||||
|
||||
detectScheme (animationName) {
|
||||
for (const [scheme, animations] of Object.entries(this.animations)) {
|
||||
if (animations.includes(animationName)) {
|
||||
return scheme
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
convertBatch (animations, sourceScheme, targetScheme) {
|
||||
return animations.map(anim => {
|
||||
try {
|
||||
return {
|
||||
original: anim,
|
||||
converted: this.convert(anim, targetScheme, sourceScheme),
|
||||
success: true
|
||||
}
|
||||
} catch (error) {
|
||||
return {
|
||||
original: anim,
|
||||
error: error.message,
|
||||
success: false
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
suggestCorrections (animationName, scheme) {
|
||||
const animations = this.animations[scheme] || []
|
||||
return animations.filter(anim =>
|
||||
anim.toLowerCase().includes(animationName.toLowerCase()) ||
|
||||
animationName.toLowerCase().includes(anim.toLowerCase())
|
||||
).slice(0, 3)
|
||||
}
|
||||
},
|
||||
|
||||
// Mock OwenAnimationContext for demo purposes
|
||||
OwenAnimationContext: class {
|
||||
constructor (options = {}) {
|
||||
this.namingScheme = options.namingScheme || 'semantic'
|
||||
this.autoConvert = options.autoConvert !== false
|
||||
this.container = options.container
|
||||
this.currentAnimation = null
|
||||
this.isPlaying = false
|
||||
this.mapper = new OwenDemo.AnimationNameMapper()
|
||||
}
|
||||
|
||||
async loadModel (modelPath) {
|
||||
// Simulate model loading
|
||||
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||
console.log('Model loaded:', modelPath)
|
||||
}
|
||||
|
||||
async playAnimation (animationName) {
|
||||
try {
|
||||
// Convert animation name if needed
|
||||
let targetName = animationName
|
||||
if (this.autoConvert) {
|
||||
const detectedScheme = this.mapper.detectScheme(animationName)
|
||||
if (detectedScheme && detectedScheme !== this.namingScheme) {
|
||||
targetName = this.mapper.convert(animationName, this.namingScheme, detectedScheme)
|
||||
}
|
||||
}
|
||||
|
||||
this.currentAnimation = targetName
|
||||
this.isPlaying = true
|
||||
|
||||
console.log(`Playing animation: ${targetName} (original: ${animationName})`)
|
||||
|
||||
// Simulate animation playback
|
||||
return new Promise(resolve => {
|
||||
setTimeout(() => {
|
||||
console.log(`Animation ${targetName} completed`)
|
||||
resolve()
|
||||
}, 2000)
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Failed to play animation:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
stopAnimation () {
|
||||
this.isPlaying = false
|
||||
this.currentAnimation = null
|
||||
console.log('Animation stopped')
|
||||
}
|
||||
|
||||
dispose () {
|
||||
this.stopAnimation()
|
||||
console.log('Animation context disposed')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Demo Application State
|
||||
const DemoState = {
|
||||
currentScheme: 'semantic',
|
||||
selectedAnimation: null,
|
||||
animationContext: null,
|
||||
mapper: new OwenDemo.AnimationNameMapper(),
|
||||
|
||||
init () {
|
||||
this.setupEventListeners()
|
||||
this.updateAnimationList()
|
||||
this.setupConversionTool()
|
||||
this.setupTabSwitching()
|
||||
this.initAnimationContext()
|
||||
},
|
||||
|
||||
setupEventListeners () {
|
||||
// Naming scheme change
|
||||
const schemeSelect = document.getElementById('naming-scheme')
|
||||
if (schemeSelect) {
|
||||
schemeSelect.addEventListener('change', (e) => {
|
||||
this.currentScheme = e.target.value
|
||||
this.updateAnimationList()
|
||||
this.updateCodeExamples()
|
||||
})
|
||||
}
|
||||
|
||||
// Animation selection
|
||||
const animationSelect = document.getElementById('animation-select')
|
||||
if (animationSelect) {
|
||||
animationSelect.addEventListener('change', (e) => {
|
||||
this.selectedAnimation = e.target.value
|
||||
this.updatePlayButtons()
|
||||
})
|
||||
}
|
||||
|
||||
// Playback controls
|
||||
const playBtn = document.getElementById('play-animation')
|
||||
const pauseBtn = document.getElementById('pause-animation')
|
||||
const stopBtn = document.getElementById('stop-animation')
|
||||
|
||||
if (playBtn) {
|
||||
playBtn.addEventListener('click', () => this.playSelectedAnimation())
|
||||
}
|
||||
if (pauseBtn) {
|
||||
pauseBtn.addEventListener('click', () => this.pauseAnimation())
|
||||
}
|
||||
if (stopBtn) {
|
||||
stopBtn.addEventListener('click', () => this.stopAnimation())
|
||||
}
|
||||
|
||||
// Start demo button
|
||||
const startBtn = document.getElementById('start-demo')
|
||||
if (startBtn) {
|
||||
startBtn.addEventListener('click', () => this.startInteractiveDemo())
|
||||
}
|
||||
},
|
||||
|
||||
updateAnimationList () {
|
||||
const select = document.getElementById('animation-select')
|
||||
if (!select) return
|
||||
|
||||
const animations = this.mapper.getAllAnimationsByScheme(this.currentScheme)
|
||||
|
||||
select.innerHTML = '<option value="">Select an animation...</option>'
|
||||
animations.forEach(anim => {
|
||||
const option = document.createElement('option')
|
||||
option.value = anim
|
||||
option.textContent = anim
|
||||
select.appendChild(option)
|
||||
})
|
||||
|
||||
this.updatePlayButtons()
|
||||
},
|
||||
|
||||
updatePlayButtons () {
|
||||
const hasSelection = !!this.selectedAnimation
|
||||
const playBtn = document.getElementById('play-animation')
|
||||
const pauseBtn = document.getElementById('pause-animation')
|
||||
const stopBtn = document.getElementById('stop-animation')
|
||||
|
||||
if (playBtn) playBtn.disabled = !hasSelection
|
||||
if (pauseBtn) pauseBtn.disabled = !hasSelection
|
||||
if (stopBtn) stopBtn.disabled = !hasSelection
|
||||
},
|
||||
|
||||
setupConversionTool () {
|
||||
const input = document.getElementById('input-animation')
|
||||
const schemeSelect = document.getElementById('input-scheme')
|
||||
const convertBtn = document.getElementById('convert-btn')
|
||||
|
||||
if (!input || !schemeSelect || !convertBtn) return
|
||||
|
||||
const updateConversion = () => {
|
||||
const animationName = input.value.trim()
|
||||
const sourceScheme = schemeSelect.value
|
||||
|
||||
if (!animationName) {
|
||||
this.clearConversionResults()
|
||||
return
|
||||
}
|
||||
|
||||
this.performConversion(animationName, sourceScheme)
|
||||
}
|
||||
|
||||
input.addEventListener('input', updateConversion)
|
||||
schemeSelect.addEventListener('change', updateConversion)
|
||||
convertBtn.addEventListener('click', updateConversion)
|
||||
},
|
||||
|
||||
performConversion (animationName, sourceScheme) {
|
||||
const results = {
|
||||
legacy: '-',
|
||||
artist: '-',
|
||||
hierarchical: '-',
|
||||
semantic: '-'
|
||||
}
|
||||
|
||||
const schemes = ['legacy', 'artist', 'hierarchical', 'semantic']
|
||||
|
||||
schemes.forEach(targetScheme => {
|
||||
try {
|
||||
results[targetScheme] = this.mapper.convert(animationName, targetScheme, sourceScheme)
|
||||
} catch (error) {
|
||||
results[targetScheme] = `Error: ${error.message}`
|
||||
}
|
||||
})
|
||||
|
||||
this.displayConversionResults(results)
|
||||
},
|
||||
|
||||
displayConversionResults (results) {
|
||||
Object.entries(results).forEach(([scheme, result]) => {
|
||||
const element = document.getElementById(`result-${scheme}`)
|
||||
if (element) {
|
||||
element.textContent = result
|
||||
element.className = result.startsWith('Error:') ? 'error' : 'success'
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
clearConversionResults () {
|
||||
const schemes = ['legacy', 'artist', 'hierarchical', 'semantic']
|
||||
schemes.forEach(scheme => {
|
||||
const element = document.getElementById(`result-${scheme}`)
|
||||
if (element) {
|
||||
element.textContent = '-'
|
||||
element.className = ''
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
setupTabSwitching () {
|
||||
const tabButtons = document.querySelectorAll('.tab-button')
|
||||
const tabPanes = document.querySelectorAll('.tab-pane')
|
||||
|
||||
tabButtons.forEach(button => {
|
||||
button.addEventListener('click', (e) => {
|
||||
const targetTab = e.target.dataset.tab
|
||||
|
||||
// Update button states
|
||||
tabButtons.forEach(btn => btn.classList.remove('active'))
|
||||
e.target.classList.add('active')
|
||||
|
||||
// Update pane visibility
|
||||
tabPanes.forEach(pane => {
|
||||
pane.classList.remove('active')
|
||||
if (pane.id === `${targetTab}-tab`) {
|
||||
pane.classList.add('active')
|
||||
}
|
||||
})
|
||||
|
||||
this.updateCodeExamples()
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
updateCodeExamples () {
|
||||
// Update code examples based on current scheme and selection
|
||||
const jsOutput = document.getElementById('js-code-output')
|
||||
const reactOutput = document.getElementById('react-code-output')
|
||||
const vueOutput = document.getElementById('vue-code-output')
|
||||
|
||||
if (jsOutput) {
|
||||
jsOutput.textContent = this.generateJavaScriptExample()
|
||||
}
|
||||
if (reactOutput) {
|
||||
reactOutput.textContent = this.generateReactExample()
|
||||
}
|
||||
if (vueOutput) {
|
||||
vueOutput.textContent = this.generateVueExample()
|
||||
}
|
||||
},
|
||||
|
||||
generateJavaScriptExample () {
|
||||
const animation = this.selectedAnimation || 'character_walk_forward'
|
||||
return `import { OwenAnimationContext } from '@kjanat/owen'
|
||||
|
||||
// Initialize with ${this.currentScheme} naming scheme
|
||||
const animationContext = new OwenAnimationContext({
|
||||
namingScheme: '${this.currentScheme}',
|
||||
autoConvert: true
|
||||
})
|
||||
|
||||
// Load your character model
|
||||
await animationContext.loadModel('./path/to/character.gltf')
|
||||
|
||||
// Play animation using ${this.currentScheme} scheme
|
||||
await animationContext.playAnimation('${animation}')
|
||||
|
||||
// The system automatically handles conversions between schemes
|
||||
// You can use any naming scheme and it will convert automatically`
|
||||
},
|
||||
|
||||
generateReactExample () {
|
||||
const animation = this.selectedAnimation || 'character_walk_forward'
|
||||
return `import React, { useEffect, useRef, useState } from 'react'
|
||||
import { OwenAnimationContext } from '@kjanat/owen'
|
||||
|
||||
export function AnimatedCharacter() {
|
||||
const containerRef = useRef()
|
||||
const [animationContext, setAnimationContext] = useState(null)
|
||||
const [currentAnimation, setCurrentAnimation] = useState('${animation}')
|
||||
|
||||
useEffect(() => {
|
||||
const context = new OwenAnimationContext({
|
||||
namingScheme: '${this.currentScheme}',
|
||||
container: containerRef.current
|
||||
})
|
||||
|
||||
context.loadModel('./character.gltf').then(() => {
|
||||
setAnimationContext(context)
|
||||
})
|
||||
|
||||
return () => context?.dispose()
|
||||
}, [])
|
||||
|
||||
const playAnimation = async (animationName) => {
|
||||
if (animationContext) {
|
||||
await animationContext.playAnimation(animationName)
|
||||
setCurrentAnimation(animationName)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="animated-character">
|
||||
<div ref={containerRef} className="viewport" />
|
||||
<button onClick={() => playAnimation('${animation}')}>
|
||||
Play Animation
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}`
|
||||
},
|
||||
|
||||
generateVueExample () {
|
||||
const animation = this.selectedAnimation || 'character_walk_forward'
|
||||
return `<template>
|
||||
<div class="animated-character">
|
||||
<div ref="viewport" class="viewport"></div>
|
||||
<button @click="playAnimation('${animation}')">
|
||||
Play Animation
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { OwenAnimationContext } from '@kjanat/owen'
|
||||
|
||||
const viewport = ref(null)
|
||||
const animationContext = ref(null)
|
||||
const currentAnimation = ref('${animation}')
|
||||
|
||||
onMounted(async () => {
|
||||
const context = new OwenAnimationContext({
|
||||
namingScheme: '${this.currentScheme}',
|
||||
container: viewport.value
|
||||
})
|
||||
|
||||
await context.loadModel('./character.gltf')
|
||||
animationContext.value = context
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
animationContext.value?.dispose()
|
||||
})
|
||||
|
||||
const playAnimation = async (animationName) => {
|
||||
if (animationContext.value) {
|
||||
await animationContext.value.playAnimation(animationName)
|
||||
currentAnimation.value = animationName
|
||||
}
|
||||
}
|
||||
</script>`
|
||||
},
|
||||
|
||||
async initAnimationContext () {
|
||||
const canvas = document.getElementById('demo-canvas')
|
||||
if (!canvas) return
|
||||
|
||||
this.animationContext = new OwenDemo.OwenAnimationContext({
|
||||
namingScheme: this.currentScheme,
|
||||
container: canvas
|
||||
})
|
||||
|
||||
// Simulate model loading
|
||||
try {
|
||||
await this.animationContext.loadModel('basic-character.gltf')
|
||||
console.log('Demo character loaded successfully')
|
||||
} catch (error) {
|
||||
console.error('Failed to load demo character:', error)
|
||||
}
|
||||
},
|
||||
|
||||
async playSelectedAnimation () {
|
||||
if (!this.selectedAnimation || !this.animationContext) return
|
||||
|
||||
try {
|
||||
await this.animationContext.playAnimation(this.selectedAnimation)
|
||||
} catch (error) {
|
||||
console.error('Failed to play animation:', error)
|
||||
window.alert(`Failed to play animation: ${error.message}`)
|
||||
}
|
||||
},
|
||||
|
||||
pauseAnimation () {
|
||||
// In a real implementation, this would pause the current animation
|
||||
console.log('Animation paused')
|
||||
},
|
||||
|
||||
stopAnimation () {
|
||||
if (this.animationContext) {
|
||||
this.animationContext.stopAnimation()
|
||||
}
|
||||
},
|
||||
|
||||
startInteractiveDemo () {
|
||||
// Navigate to interactive page or start guided tour
|
||||
if (window.location.pathname.includes('index.html') || window.location.pathname === '/') {
|
||||
window.location.href = 'interactive.html'
|
||||
} else {
|
||||
// Already on a page with interactive features
|
||||
this.scrollToSection('.live-demo-section')
|
||||
}
|
||||
},
|
||||
|
||||
scrollToSection (selector) {
|
||||
const element = document.querySelector(selector)
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth' })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Copy code functionality
|
||||
function setupCodeCopying () {
|
||||
document.querySelectorAll('.copy-code-btn').forEach(button => {
|
||||
button.addEventListener('click', async (e) => {
|
||||
const targetId = e.target.dataset.target
|
||||
const codeElement = document.getElementById(targetId)
|
||||
|
||||
if (codeElement) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(codeElement.textContent)
|
||||
|
||||
// Visual feedback
|
||||
const originalText = e.target.textContent
|
||||
e.target.textContent = 'Copied!'
|
||||
e.target.style.background = 'var(--success-color)'
|
||||
|
||||
setTimeout(() => {
|
||||
e.target.textContent = originalText
|
||||
e.target.style.background = ''
|
||||
}, 2000)
|
||||
} catch (error) {
|
||||
console.error('Failed to copy code:', error)
|
||||
window.alert('Failed to copy code to clipboard')
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// Initialize demo when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
DemoState.init()
|
||||
setupCodeCopying()
|
||||
|
||||
// Add some visual feedback for interactions
|
||||
document.addEventListener('click', (e) => {
|
||||
if (e.target.classList.contains('btn')) {
|
||||
e.target.style.transform = 'scale(0.98)'
|
||||
setTimeout(() => {
|
||||
e.target.style.transform = ''
|
||||
}, 150)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// Export for use in other demo files
|
||||
if (typeof module !== 'undefined' && module.exports) {
|
||||
module.exports = { OwenDemo, DemoState }
|
||||
} else {
|
||||
window.OwenDemo = OwenDemo
|
||||
window.DemoState = DemoState
|
||||
}
|
||||
412
demo/styles/comparison.css
Normal file
412
demo/styles/comparison.css
Normal file
@ -0,0 +1,412 @@
|
||||
/* Comparison Page Specific Styles */
|
||||
|
||||
.comparison-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.comparison-intro {
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.comparison-intro h1 {
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.comparison-intro p {
|
||||
color: var(--text-secondary);
|
||||
font-size: 1.125rem;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.scheme-overview {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.scheme-card {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scheme-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: var(--scheme-accent, var(--accent-color));
|
||||
}
|
||||
|
||||
.scheme-card:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.scheme-card.legacy {
|
||||
--scheme-accent: #8b5cf6;
|
||||
}
|
||||
.scheme-card.artist {
|
||||
--scheme-accent: #06b6d4;
|
||||
}
|
||||
.scheme-card.hierarchical {
|
||||
--scheme-accent: #10b981;
|
||||
}
|
||||
.scheme-card.semantic {
|
||||
--scheme-accent: #f59e0b;
|
||||
}
|
||||
|
||||
.scheme-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.scheme-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
background: var(--scheme-accent);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.scheme-name {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.scheme-description {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.scheme-example {
|
||||
background: var(--bg-code);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
font-family: "Fira Code", monospace;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.scheme-pros {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.scheme-pros li {
|
||||
padding: 0.25rem 0;
|
||||
padding-left: 1.5rem;
|
||||
position: relative;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.scheme-pros li::before {
|
||||
content: "✓";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--success-text);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.comparison-table-section {
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
.table-controls {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.table-filter {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-secondary);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.table-filter:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.table-filter.active {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.search-input {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-color);
|
||||
box-shadow: 0 0 0 3px var(--accent-color-alpha);
|
||||
}
|
||||
|
||||
.comparison-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.comparison-table th,
|
||||
.comparison-table td {
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.comparison-table th {
|
||||
background: var(--bg-tertiary);
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.comparison-table td {
|
||||
color: var(--text-secondary);
|
||||
font-family: "Fira Code", monospace;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.comparison-table tbody tr:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.comparison-table tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.scheme-label {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.scheme-label.legacy {
|
||||
background: #8b5cf6;
|
||||
}
|
||||
.scheme-label.artist {
|
||||
background: #06b6d4;
|
||||
}
|
||||
.scheme-label.hierarchical {
|
||||
background: #10b981;
|
||||
}
|
||||
.scheme-label.semantic {
|
||||
background: #f59e0b;
|
||||
}
|
||||
|
||||
.conversion-demo {
|
||||
margin: 3rem 0;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.conversion-controls {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.scheme-selector {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.scheme-selector label {
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.scheme-select {
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.conversion-arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--accent-color);
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.animation-input {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
border-radius: 6px;
|
||||
font-family: "Fira Code", monospace;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.conversion-result {
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.result-label {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.result-value {
|
||||
font-family: "Fira Code", monospace;
|
||||
font-size: 1rem;
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-code);
|
||||
padding: 0.75rem;
|
||||
border-radius: 4px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.performance-comparison {
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
.performance-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.performance-card {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.performance-metric {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
color: var(--accent-color);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.performance-label {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.no-results {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: var(--text-secondary);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.comparison-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.scheme-overview {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.table-controls {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.comparison-table {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.comparison-table th,
|
||||
.comparison-table td {
|
||||
padding: 0.75rem 0.5rem;
|
||||
}
|
||||
|
||||
.conversion-controls {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.conversion-arrow {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.performance-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
302
demo/styles/demo.css
Normal file
302
demo/styles/demo.css
Normal file
@ -0,0 +1,302 @@
|
||||
/* Demo-specific styles */
|
||||
|
||||
/* Hero Section */
|
||||
.hero-section {
|
||||
padding: 4rem 0;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--bg-secondary) 0%,
|
||||
var(--bg-tertiary) 100%
|
||||
);
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.hero-content h2 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.hero-content p {
|
||||
font-size: 1.125rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 2rem;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.hero-visual {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 2rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
#demo-canvas {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.demo-controls {
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 1.5rem;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.control-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.control-group:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.control-group label {
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.control-group .btn {
|
||||
margin-right: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Features Section */
|
||||
.features-section {
|
||||
padding: 3rem 0;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.features-section h3 {
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.feature-card h4 {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Live Demo Section */
|
||||
.live-demo-section {
|
||||
padding: 3rem 0;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.live-demo-section h3 {
|
||||
text-align: center;
|
||||
font-size: 1.75rem;
|
||||
margin-bottom: 2rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.conversion-demo {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.input-section {
|
||||
background: var(--bg-primary);
|
||||
padding: 1.5rem;
|
||||
border-radius: var(--border-radius);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.input-section label {
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.input-section label:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.conversion-results {
|
||||
background: var(--bg-primary);
|
||||
padding: 1.5rem;
|
||||
border-radius: var(--border-radius);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.conversion-results h4 {
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.scheme-results {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.scheme-result {
|
||||
padding: 0.75rem;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: var(--border-radius);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.scheme-result strong {
|
||||
color: var(--primary-color);
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
/* Code Examples Section */
|
||||
.code-examples-section {
|
||||
padding: 3rem 0;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.code-examples-section h3 {
|
||||
text-align: center;
|
||||
font-size: 1.75rem;
|
||||
margin-bottom: 2rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.code-tabs {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 2rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 1rem 2rem;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.tab-button:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.tab-button.active {
|
||||
color: var(--primary-color);
|
||||
border-bottom-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.tab-pane {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-pane.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tab-pane pre {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 1.5rem;
|
||||
overflow-x: auto;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.hero-visual {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.conversion-demo {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.hero-content h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.hero-content p {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.code-tabs {
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
padding: 0.75rem 1.5rem;
|
||||
}
|
||||
}
|
||||
306
demo/styles/examples.css
Normal file
306
demo/styles/examples.css
Normal file
@ -0,0 +1,306 @@
|
||||
/* Examples Page Specific Styles */
|
||||
|
||||
.examples-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.examples-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.example-card {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.example-card:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.example-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.framework-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.react-icon {
|
||||
background: #61dafb;
|
||||
color: #000;
|
||||
}
|
||||
.vue-icon {
|
||||
background: #4fc08d;
|
||||
}
|
||||
.node-icon {
|
||||
background: #339933;
|
||||
}
|
||||
.vanilla-icon {
|
||||
background: #f7df1e;
|
||||
color: #000;
|
||||
}
|
||||
.blender-icon {
|
||||
background: #e87d0d;
|
||||
}
|
||||
|
||||
.example-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.example-description {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.code-example {
|
||||
background: var(--bg-code);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.code-header {
|
||||
background: var(--bg-tertiary);
|
||||
padding: 0.75rem 1rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.code-language {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.copy-button {
|
||||
background: none;
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-secondary);
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.copy-button:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.copy-button.copied {
|
||||
background: var(--success-bg);
|
||||
color: var(--success-text);
|
||||
border-color: var(--success-border);
|
||||
}
|
||||
|
||||
.code-content {
|
||||
padding: 1rem;
|
||||
font-family: "Fira Code", "Monaco", "Consolas", monospace;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
color: var(--text-primary);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.integration-steps {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.step {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
padding: 1rem;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid var(--accent-color);
|
||||
}
|
||||
|
||||
.step-number {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.75rem;
|
||||
font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
.step-content h4 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: var(--text-primary);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.step-content p {
|
||||
margin: 0;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.example-navigation {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.nav-filter {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-secondary);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.nav-filter:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.nav-filter.active {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.features-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.features-list li {
|
||||
padding: 0.5rem 0;
|
||||
padding-left: 1.5rem;
|
||||
position: relative;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.features-list li::before {
|
||||
content: "✓";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--success-text);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.download-section {
|
||||
margin-top: 2rem;
|
||||
padding: 1.5rem;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.download-links {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.download-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.download-link:hover {
|
||||
background: var(--accent-hover);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.error-boundary {
|
||||
border: 2px dashed var(--error-border);
|
||||
background: var(--error-bg);
|
||||
color: var(--error-text);
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
margin: 1rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.examples-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.examples-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.example-card {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.example-navigation {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-filter {
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.download-links {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.step {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
444
demo/styles/interactive.css
Normal file
444
demo/styles/interactive.css
Normal file
@ -0,0 +1,444 @@
|
||||
/* Interactive Playground Specific Styles */
|
||||
|
||||
.interactive-container {
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"header header"
|
||||
"controls playground"
|
||||
"results results";
|
||||
grid-template-columns: 300px 1fr;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
gap: 2rem;
|
||||
min-height: calc(100vh - 4rem);
|
||||
}
|
||||
|
||||
.playground-header {
|
||||
grid-area: header;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.playground-header h1 {
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.playground-header p {
|
||||
color: var(--text-secondary);
|
||||
font-size: 1.125rem;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.playground-controls {
|
||||
grid-area: controls;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
height: fit-content;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.controls-section {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.controls-section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.control-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.control-label {
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.control-input {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.control-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-color);
|
||||
box-shadow: 0 0 0 3px var(--accent-color-alpha);
|
||||
}
|
||||
|
||||
.control-textarea {
|
||||
min-height: 100px;
|
||||
resize: vertical;
|
||||
font-family: "Fira Code", monospace;
|
||||
}
|
||||
|
||||
.scheme-buttons {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.scheme-button {
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-secondary);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 0.75rem;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.scheme-button:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.scheme-button.active {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
padding: 0.75rem 1rem;
|
||||
border: 1px solid var(--accent-color);
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.action-button:hover {
|
||||
background: var(--accent-hover);
|
||||
border-color: var(--accent-hover);
|
||||
}
|
||||
|
||||
.action-button.secondary {
|
||||
background: transparent;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.action-button.secondary:hover {
|
||||
background: var(--accent-color-alpha);
|
||||
}
|
||||
|
||||
.action-button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.playground-main {
|
||||
grid-area: playground;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-sm);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.playground-tabs {
|
||||
display: flex;
|
||||
background: var(--bg-tertiary);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.playground-tab {
|
||||
padding: 1rem 1.5rem;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-weight: 500;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
|
||||
.playground-tab:hover {
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.playground-tab.active {
|
||||
color: var(--accent-color);
|
||||
border-bottom-color: var(--accent-color);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.playground-content {
|
||||
flex: 1;
|
||||
padding: 1.5rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.code-editor {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
background: var(--bg-code);
|
||||
color: var(--text-primary);
|
||||
font-family: "Fira Code", monospace;
|
||||
font-size: 0.875rem;
|
||||
padding: 1rem;
|
||||
resize: vertical;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.output-panel {
|
||||
background: var(--bg-code);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
font-family: "Fira Code", monospace;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
color: var(--text-primary);
|
||||
white-space: pre-wrap;
|
||||
overflow: auto;
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
.conversion-preview {
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.preview-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.preview-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.preview-input {
|
||||
font-family: "Fira Code", monospace;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.preview-output {
|
||||
font-family: "Fira Code", monospace;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.performance-monitor {
|
||||
grid-area: results;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.monitor-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.monitor-card {
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.monitor-value {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: var(--accent-color);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.monitor-label {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.status-indicator.success {
|
||||
background: var(--success-color);
|
||||
}
|
||||
.status-indicator.warning {
|
||||
background: var(--warning-color);
|
||||
}
|
||||
.status-indicator.error {
|
||||
background: var(--error-color);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background: var(--error-bg);
|
||||
color: var(--error-text);
|
||||
border: 1px solid var(--error-border);
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.success-message {
|
||||
background: var(--success-bg);
|
||||
color: var(--success-text);
|
||||
border: 1px solid var(--success-border);
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid var(--border-color);
|
||||
border-top: 2px solid var(--accent-color);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.history-panel {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.history-item {
|
||||
padding: 0.75rem 1rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.history-item:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.history-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.history-input {
|
||||
font-family: "Fira Code", monospace;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.history-meta {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.interactive-container {
|
||||
grid-template-areas:
|
||||
"header"
|
||||
"controls"
|
||||
"playground"
|
||||
"results";
|
||||
grid-template-columns: 1fr;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.playground-controls {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.scheme-buttons {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.monitor-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.playground-tabs {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.playground-tab {
|
||||
padding: 0.75rem 1rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.code-editor {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.monitor-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
472
demo/styles/main.css
Normal file
472
demo/styles/main.css
Normal file
@ -0,0 +1,472 @@
|
||||
/* Owen Animation System Demo - Main Styles */
|
||||
|
||||
/* CSS Variables for consistent theming */
|
||||
:root {
|
||||
--primary-color: #2563eb;
|
||||
--primary-hover: #1d4ed8;
|
||||
--secondary-color: #64748b;
|
||||
--accent-color: #0ea5e9;
|
||||
--success-color: #10b981;
|
||||
--warning-color: #f59e0b;
|
||||
--error-color: #ef4444;
|
||||
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f8fafc;
|
||||
--bg-tertiary: #f1f5f9;
|
||||
--text-primary: #1e293b;
|
||||
--text-secondary: #475569;
|
||||
--text-muted: #94a3b8;
|
||||
|
||||
--border-color: #e2e8f0;
|
||||
--border-radius: 8px;
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
||||
|
||||
--font-family:
|
||||
"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
--font-mono:
|
||||
"JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace;
|
||||
}
|
||||
|
||||
/* Dark mode variables */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg-primary: #0f172a;
|
||||
--bg-secondary: #1e293b;
|
||||
--bg-tertiary: #334155;
|
||||
--text-primary: #f1f5f9;
|
||||
--text-secondary: #cbd5e1;
|
||||
--text-muted: #64748b;
|
||||
--border-color: #334155;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reset and base styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-family);
|
||||
line-height: 1.6;
|
||||
color: var(--text-primary);
|
||||
background-color: var(--bg-primary);
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
/* Container */
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.demo-header {
|
||||
background: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 1rem 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.demo-header .container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.logo-subtitle {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.demo-nav {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
text-decoration: none;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: var(--border-radius);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: var(--primary-color);
|
||||
background-color: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
color: var(--primary-color);
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.75rem 1.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
border-radius: var(--border-radius);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--primary-hover);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Form elements */
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
font-size: 0.875rem;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1);
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.card {
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 1.5rem;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
/* Grid layouts */
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.grid-2 {
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
}
|
||||
|
||||
.grid-3 {
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
}
|
||||
|
||||
.grid-4 {
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 1rem;
|
||||
overflow-x: auto;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.875rem;
|
||||
background: var(--bg-tertiary);
|
||||
padding: 0.125rem 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
pre code {
|
||||
background: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Utility classes */
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.mb-1 {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.mb-2 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.mb-3 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.mb-4 {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.mb-5 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.mt-1 {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
.mt-2 {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.mt-3 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.mt-4 {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.mt-5 {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.p-1 {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
.p-2 {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
.p-3 {
|
||||
padding: 1rem;
|
||||
}
|
||||
.p-4 {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
.p-5 {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
.visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Animation classes */
|
||||
.fade-in {
|
||||
animation: fadeIn 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.slide-up {
|
||||
animation: slideUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Loading spinner */
|
||||
.spinner {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 2px solid var(--border-color);
|
||||
border-top: 2px solid var(--primary-color);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Progress bar */
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background-color: var(--bg-tertiary);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background-color: var(--primary-color);
|
||||
transition: width 0.3s ease;
|
||||
width: 0%;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.demo-footer {
|
||||
background: var(--bg-secondary);
|
||||
border-top: 1px solid var(--border-color);
|
||||
padding: 2rem 0;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.footer-section h4 {
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.footer-section ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.footer-section li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.footer-section a {
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.footer-section a:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
text-align: center;
|
||||
padding-top: 2rem;
|
||||
border-top: 1px solid var(--border-color);
|
||||
color: var(--text-muted);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
|
||||
.demo-header .container {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.demo-nav {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.grid-2,
|
||||
.grid-3,
|
||||
.grid-4 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.demo-nav {
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
}
|
||||
375
docs/animation_AnimationClip.js.html
Normal file
375
docs/animation_AnimationClip.js.html
Normal file
@ -0,0 +1,375 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>JSDoc: Source: animation/AnimationClip.js</title>
|
||||
|
||||
<script src="scripts/prettify/prettify.js"></script>
|
||||
<script src="scripts/prettify/lang-css.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link
|
||||
type="text/css"
|
||||
rel="stylesheet"
|
||||
href="styles/prettify-tomorrow.css"
|
||||
/>
|
||||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1 class="page-title">Source: animation/AnimationClip.js</h1>
|
||||
|
||||
<section>
|
||||
<article>
|
||||
<pre class="prettyprint source linenums"><code>/**
|
||||
* @fileoverview Core animation classes for clip management and creation
|
||||
* @module animation
|
||||
*/
|
||||
|
||||
import * as THREE from 'three'
|
||||
import { ClipTypes, Config } from '../constants.js'
|
||||
|
||||
/**
|
||||
* Represents a single animation clip with metadata and Three.js action
|
||||
* @class
|
||||
*/
|
||||
export class AnimationClip {
|
||||
/**
|
||||
* Create an animation clip
|
||||
* @param {string} name - The name of the animation clip
|
||||
* @param {THREE.AnimationClip} threeAnimation - The Three.js animation clip
|
||||
* @param {Object} metadata - Parsed metadata from animation name
|
||||
*/
|
||||
constructor (name, threeAnimation, metadata) {
|
||||
/**
|
||||
* The name of the animation clip
|
||||
* @type {string}
|
||||
*/
|
||||
this.name = name
|
||||
|
||||
/**
|
||||
* The Three.js animation clip
|
||||
* @type {THREE.AnimationClip}
|
||||
*/
|
||||
this.animation = threeAnimation
|
||||
|
||||
/**
|
||||
* Parsed metadata about the animation
|
||||
* @type {Object}
|
||||
*/
|
||||
this.metadata = metadata
|
||||
|
||||
/**
|
||||
* The Three.js animation action
|
||||
* @type {THREE.AnimationAction|null}
|
||||
*/
|
||||
this.action = null
|
||||
|
||||
/**
|
||||
* The animation mixer
|
||||
* @type {THREE.AnimationMixer|null}
|
||||
*/
|
||||
this.mixer = null
|
||||
}
|
||||
|
||||
/**
|
||||
* Create and configure a Three.js action for this clip
|
||||
* @param {THREE.AnimationMixer} mixer - The animation mixer
|
||||
* @returns {THREE.AnimationAction} The created action
|
||||
*/
|
||||
createAction (mixer) {
|
||||
this.mixer = mixer
|
||||
this.action = mixer.clipAction(this.animation)
|
||||
|
||||
// Configure based on type
|
||||
if (
|
||||
this.metadata.type === ClipTypes.LOOP ||
|
||||
this.metadata.type === ClipTypes.NESTED_LOOP
|
||||
) {
|
||||
this.action.setLoop(THREE.LoopRepeat, Infinity)
|
||||
} else {
|
||||
this.action.setLoop(THREE.LoopOnce)
|
||||
this.action.clampWhenFinished = true
|
||||
}
|
||||
|
||||
return this.action
|
||||
}
|
||||
|
||||
/**
|
||||
* Play the animation with optional fade in
|
||||
* @param {number} [fadeInDuration=0.3] - Fade in duration in seconds
|
||||
* @returns {Promise<void>} Promise that resolves when fade in completes
|
||||
*/
|
||||
play (fadeInDuration = Config.DEFAULT_FADE_IN) {
|
||||
if (this.action) {
|
||||
this.action.reset()
|
||||
this.action.fadeIn(fadeInDuration)
|
||||
this.action.play()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Stop the animation with optional fade out
|
||||
* @param {number} [fadeOutDuration=0.3] - Fade out duration in seconds
|
||||
* @returns {Promise<void>} Promise that resolves when fade out completes
|
||||
*/
|
||||
stop (fadeOutDuration = Config.DEFAULT_FADE_OUT) {
|
||||
if (this.action) {
|
||||
this.action.fadeOut(fadeOutDuration)
|
||||
setTimeout(() => {
|
||||
if (this.action) {
|
||||
this.action.stop()
|
||||
}
|
||||
}, fadeOutDuration * 1000)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if the animation is currently playing
|
||||
* @returns {boolean} True if playing, false otherwise
|
||||
*/
|
||||
isPlaying () {
|
||||
return this.action?.isRunning() || false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Factory for creating animation clips with parsed metadata
|
||||
* @class
|
||||
*/
|
||||
export class AnimationClipFactory {
|
||||
/**
|
||||
* Create an animation clip factory
|
||||
* @param {AnimationLoader} animationLoader - The animation loader instance
|
||||
*/
|
||||
constructor (animationLoader) {
|
||||
/**
|
||||
* The animation loader for loading animation data
|
||||
* @type {AnimationLoader}
|
||||
*/
|
||||
this.animationLoader = animationLoader
|
||||
|
||||
/**
|
||||
* Cache for created animation clips
|
||||
* @type {Map<string, AnimationClip>}
|
||||
*/
|
||||
this.clipCache = new Map()
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse animation name and create clip metadata
|
||||
* Format: [state]_[action]_[type] or [state]_[action]2[toState]_[emotion]_T
|
||||
* @param {string} name - The animation name to parse
|
||||
* @returns {Object} Parsed metadata object
|
||||
*/
|
||||
parseAnimationName (name) {
|
||||
const parts = name.split('_')
|
||||
const state = parts[0]
|
||||
const action = parts[1]
|
||||
|
||||
// Handle transitions with emotions
|
||||
if (parts[2]?.includes('2') && parts[3] === ClipTypes.TRANSITION) {
|
||||
const [, toState] = parts[2].split('2')
|
||||
return {
|
||||
state,
|
||||
action,
|
||||
toState,
|
||||
emotion: parts[2] || '',
|
||||
type: ClipTypes.TRANSITION,
|
||||
isTransition: true,
|
||||
hasEmotion: true
|
||||
}
|
||||
}
|
||||
|
||||
// Handle regular transitions
|
||||
if (parts[2] === ClipTypes.TRANSITION) {
|
||||
return {
|
||||
state,
|
||||
action,
|
||||
type: ClipTypes.TRANSITION,
|
||||
isTransition: true
|
||||
}
|
||||
}
|
||||
|
||||
// Handle nested animations
|
||||
if (parts[2] === ClipTypes.NESTED_IN || parts[2] === ClipTypes.NESTED_OUT) {
|
||||
return {
|
||||
state,
|
||||
action,
|
||||
type: parts[2],
|
||||
nestedType: parts[3],
|
||||
isNested: true
|
||||
}
|
||||
}
|
||||
|
||||
// Handle nested loops and quirks
|
||||
if (
|
||||
parts[3] === ClipTypes.NESTED_LOOP ||
|
||||
parts[3] === ClipTypes.NESTED_QUIRK
|
||||
) {
|
||||
return {
|
||||
state,
|
||||
action,
|
||||
subAction: parts[2],
|
||||
type: parts[3],
|
||||
isNested: true
|
||||
}
|
||||
}
|
||||
|
||||
// Handle standard loops and quirks
|
||||
return {
|
||||
state,
|
||||
action,
|
||||
type: parts[2],
|
||||
isStandard: true
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Create an animation clip from a name
|
||||
* @param {string} name - The animation name
|
||||
* @returns {Promise<AnimationClip>} The created animation clip
|
||||
*/
|
||||
async createClip (name) {
|
||||
if (this.clipCache.has(name)) {
|
||||
return this.clipCache.get(name)
|
||||
}
|
||||
|
||||
const metadata = this.parseAnimationName(name)
|
||||
const animation = await this.animationLoader.loadAnimation(name)
|
||||
|
||||
const clip = new AnimationClip(name, animation, metadata)
|
||||
this.clipCache.set(name, clip)
|
||||
|
||||
return clip
|
||||
}
|
||||
|
||||
/**
|
||||
* Create all animation clips from a model's animations
|
||||
* @param {THREE.Object3D} model - The 3D model containing animations
|
||||
* @returns {Promise<Map<string, AnimationClip>>} Map of animation name to clip
|
||||
*/
|
||||
async createClipsFromModel (model) {
|
||||
const clips = new Map()
|
||||
const animations = model.animations || []
|
||||
|
||||
for (const animation of animations) {
|
||||
const clip = await this.createClip(animation.name, model)
|
||||
clips.set(animation.name, clip)
|
||||
}
|
||||
|
||||
return clips
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear the clip cache
|
||||
* @returns {void}
|
||||
*/
|
||||
clearCache () {
|
||||
this.clipCache.clear()
|
||||
}
|
||||
|
||||
/**
|
||||
* Get cached clip by name
|
||||
* @param {string} name - The animation name
|
||||
* @returns {AnimationClip|undefined} The cached clip or undefined
|
||||
*/
|
||||
getCachedClip (name) {
|
||||
return this.clipCache.get(name)
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2>
|
||||
<h3>Modules</h3>
|
||||
<ul>
|
||||
<li><a href="module-StateHandler.html">StateHandler</a></li>
|
||||
<li><a href="module-animation.html">animation</a></li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationConstants.html"
|
||||
>animation/AnimationConstants</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationNameMapper.html"
|
||||
>animation/AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="module-constants.html">constants</a></li>
|
||||
<li><a href="module-core.html">core</a></li>
|
||||
<li><a href="module-factories.html">factories</a></li>
|
||||
<li><a href="module-loaders.html">loaders</a></li>
|
||||
<li><a href="module-owen.html">owen</a></li>
|
||||
<li><a href="module-states.html">states</a></li>
|
||||
</ul>
|
||||
<h3>Classes</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
|
||||
<li>
|
||||
<a href="module-animation.AnimationClipFactory.html"
|
||||
>AnimationClipFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
||||
>AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-core.OwenAnimationContext.html"
|
||||
>OwenAnimationContext</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-factories.OwenSystemFactory.html"
|
||||
>OwenSystemFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.GLTFAnimationLoader.html"
|
||||
>GLTFAnimationLoader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-states.StateFactory.html">StateFactory</a></li>
|
||||
<li>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<br class="clear" />
|
||||
|
||||
<footer>
|
||||
Documentation generated by
|
||||
<a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
|
||||
2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
<script src="scripts/linenumber.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
398
docs/animation_AnimationConstants.js.html
Normal file
398
docs/animation_AnimationConstants.js.html
Normal file
@ -0,0 +1,398 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>JSDoc: Source: animation/AnimationConstants.js</title>
|
||||
|
||||
<script src="scripts/prettify/prettify.js"></script>
|
||||
<script src="scripts/prettify/lang-css.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link
|
||||
type="text/css"
|
||||
rel="stylesheet"
|
||||
href="styles/prettify-tomorrow.css"
|
||||
/>
|
||||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1 class="page-title">Source: animation/AnimationConstants.js</h1>
|
||||
|
||||
<section>
|
||||
<article>
|
||||
<pre class="prettyprint source linenums"><code>/**
|
||||
* @fileoverview Animation constants with multi-scheme support for Owen Animation System
|
||||
* @module animation/AnimationConstants
|
||||
*/
|
||||
|
||||
import { AnimationNameMapper } from './AnimationNameMapper.js'
|
||||
|
||||
// Create a singleton instance of the name mapper
|
||||
const nameMapper = new AnimationNameMapper()
|
||||
|
||||
/**
|
||||
* Legacy animation names (backward compatibility)
|
||||
* @constant
|
||||
*/
|
||||
export const LegacyAnimations = {
|
||||
// Wait state animations
|
||||
WAIT_IDLE_LOOP: 'wait_idle_L',
|
||||
WAIT_PICK_NOSE_QUIRK: 'wait_pickNose_Q',
|
||||
WAIT_STRETCH_QUIRK: 'wait_stretch_Q',
|
||||
WAIT_YAWN_QUIRK: 'wait_yawn_Q',
|
||||
|
||||
// React state animations - neutral
|
||||
REACT_IDLE_LOOP: 'react_idle_L',
|
||||
REACT_ACKNOWLEDGE_TRANSITION: 'react_acknowledge_T',
|
||||
REACT_NOD_TRANSITION: 'react_nod_T',
|
||||
REACT_LISTENING_LOOP: 'react_listening_L',
|
||||
|
||||
// React state animations - angry
|
||||
REACT_ANGRY_IDLE_LOOP: 'react_angry_L',
|
||||
REACT_ANGRY_FROWN_TRANSITION: 'react_an2frown_T',
|
||||
REACT_ANGRY_GRUMBLE_QUIRK: 'react_an2grumble_Q',
|
||||
REACT_ANGRY_TO_TYPE_TRANSITION: 'react_an2type_T',
|
||||
|
||||
// React state animations - happy
|
||||
REACT_HAPPY_IDLE_LOOP: 'react_happy_L',
|
||||
REACT_HAPPY_SMILE_TRANSITION: 'react_hp2smile_T',
|
||||
REACT_HAPPY_BOUNCE_QUIRK: 'react_hp2bounce_Q',
|
||||
REACT_HAPPY_TO_TYPE_TRANSITION: 'react_hp2type_T',
|
||||
|
||||
// React state animations - sad
|
||||
REACT_SAD_IDLE_LOOP: 'react_sad_L',
|
||||
REACT_SAD_SIGH_TRANSITION: 'react_sd2sigh_T',
|
||||
REACT_SAD_SLUMP_QUIRK: 'react_sd2slump_Q',
|
||||
REACT_SAD_TO_TYPE_TRANSITION: 'react_sd2type_T',
|
||||
|
||||
// React state animations - shocked
|
||||
REACT_SHOCKED_IDLE_LOOP: 'react_shocked_L',
|
||||
REACT_SHOCKED_GASP_TRANSITION: 'react_sh2gasp_T',
|
||||
REACT_SHOCKED_JUMP_QUIRK: 'react_sh2jump_Q',
|
||||
REACT_SHOCKED_TO_TYPE_TRANSITION: 'react_sh2type_T',
|
||||
|
||||
// Type state animations
|
||||
TYPE_IDLE_LOOP: 'type_idle_L',
|
||||
TYPE_FAST_LOOP: 'type_fast_L',
|
||||
TYPE_SLOW_LOOP: 'type_slow_L',
|
||||
TYPE_THINKING_LOOP: 'type_thinking_L',
|
||||
TYPE_TO_WAIT_TRANSITION: 'type2wait_T',
|
||||
|
||||
// Sleep state animations
|
||||
SLEEP_LIGHT_LOOP: 'sleep_light_L',
|
||||
SLEEP_DEEP_LOOP: 'sleep_deep_L',
|
||||
SLEEP_DREAM_QUIRK: 'sleep_dream_Q',
|
||||
SLEEP_WAKE_UP_TRANSITION: 'sleep2wake_T'
|
||||
}
|
||||
|
||||
/**
|
||||
* Artist-friendly animation names (Blender workflow)
|
||||
* @constant
|
||||
*/
|
||||
export const ArtistAnimations = {
|
||||
// Wait state animations
|
||||
WAIT_IDLE: 'Owen_WaitIdle',
|
||||
WAIT_PICK_NOSE: 'Owen_PickNose',
|
||||
WAIT_STRETCH: 'Owen_Stretch',
|
||||
WAIT_YAWN: 'Owen_Yawn',
|
||||
|
||||
// React state animations - neutral
|
||||
REACT_IDLE: 'Owen_ReactIdle',
|
||||
REACT_ACKNOWLEDGE: 'Owen_ReactAcknowledge',
|
||||
REACT_NOD: 'Owen_ReactNod',
|
||||
REACT_LISTENING: 'Owen_ReactListening',
|
||||
|
||||
// React state animations - angry
|
||||
REACT_ANGRY_IDLE: 'Owen_ReactAngryIdle',
|
||||
REACT_ANGRY_FROWN: 'Owen_ReactAngryFrown',
|
||||
REACT_ANGRY_GRUMBLE: 'Owen_ReactAngryGrumble',
|
||||
REACT_ANGRY_TO_TYPE: 'Owen_ReactAngryToType',
|
||||
|
||||
// React state animations - happy
|
||||
REACT_HAPPY_IDLE: 'Owen_ReactHappyIdle',
|
||||
REACT_HAPPY_SMILE: 'Owen_ReactHappySmile',
|
||||
REACT_HAPPY_BOUNCE: 'Owen_ReactHappyBounce',
|
||||
REACT_HAPPY_TO_TYPE: 'Owen_ReactHappyToType',
|
||||
|
||||
// React state animations - sad
|
||||
REACT_SAD_IDLE: 'Owen_ReactSadIdle',
|
||||
REACT_SAD_SIGH: 'Owen_ReactSadSigh',
|
||||
REACT_SAD_SLUMP: 'Owen_ReactSadSlump',
|
||||
REACT_SAD_TO_TYPE: 'Owen_ReactSadToType',
|
||||
|
||||
// React state animations - shocked
|
||||
REACT_SHOCKED_IDLE: 'Owen_ReactShockedIdle',
|
||||
REACT_SHOCKED_GASP: 'Owen_ReactShockedGasp',
|
||||
REACT_SHOCKED_JUMP: 'Owen_ReactShockedJump',
|
||||
REACT_SHOCKED_TO_TYPE: 'Owen_ReactShockedToType',
|
||||
|
||||
// Type state animations
|
||||
TYPE_IDLE: 'Owen_TypeIdle',
|
||||
TYPE_FAST: 'Owen_TypeFast',
|
||||
TYPE_SLOW: 'Owen_TypeSlow',
|
||||
TYPE_THINKING: 'Owen_TypeThinking',
|
||||
TYPE_TO_WAIT: 'Owen_TypeToWait',
|
||||
|
||||
// Sleep state animations
|
||||
SLEEP_LIGHT: 'Owen_SleepLight',
|
||||
SLEEP_DEEP: 'Owen_SleepDeep',
|
||||
SLEEP_DREAM: 'Owen_SleepDream',
|
||||
SLEEP_WAKE_UP: 'Owen_SleepWakeUp'
|
||||
}
|
||||
|
||||
/**
|
||||
* Hierarchical animation names (organized structure)
|
||||
* @constant
|
||||
*/
|
||||
export const HierarchicalAnimations = {
|
||||
// Wait state animations
|
||||
WAIT_IDLE: 'owen.state.wait.idle.loop',
|
||||
WAIT_PICK_NOSE: 'owen.quirk.wait.picknose',
|
||||
WAIT_STRETCH: 'owen.quirk.wait.stretch',
|
||||
WAIT_YAWN: 'owen.quirk.wait.yawn',
|
||||
|
||||
// React state animations - neutral
|
||||
REACT_IDLE: 'owen.state.react.idle.loop',
|
||||
REACT_ACKNOWLEDGE: 'owen.state.react.acknowledge.transition',
|
||||
REACT_NOD: 'owen.state.react.nod.transition',
|
||||
REACT_LISTENING: 'owen.state.react.listening.loop',
|
||||
|
||||
// React state animations - angry
|
||||
REACT_ANGRY_IDLE: 'owen.state.react.angry.idle.loop',
|
||||
REACT_ANGRY_FROWN: 'owen.state.react.angry.frown.transition',
|
||||
REACT_ANGRY_GRUMBLE: 'owen.quirk.react.angry.grumble',
|
||||
REACT_ANGRY_TO_TYPE: 'owen.state.react.angry.totype.transition',
|
||||
|
||||
// React state animations - happy
|
||||
REACT_HAPPY_IDLE: 'owen.state.react.happy.idle.loop',
|
||||
REACT_HAPPY_SMILE: 'owen.state.react.happy.smile.transition',
|
||||
REACT_HAPPY_BOUNCE: 'owen.quirk.react.happy.bounce',
|
||||
REACT_HAPPY_TO_TYPE: 'owen.state.react.happy.totype.transition',
|
||||
|
||||
// React state animations - sad
|
||||
REACT_SAD_IDLE: 'owen.state.react.sad.idle.loop',
|
||||
REACT_SAD_SIGH: 'owen.state.react.sad.sigh.transition',
|
||||
REACT_SAD_SLUMP: 'owen.quirk.react.sad.slump',
|
||||
REACT_SAD_TO_TYPE: 'owen.state.react.sad.totype.transition',
|
||||
|
||||
// React state animations - shocked
|
||||
REACT_SHOCKED_IDLE: 'owen.state.react.shocked.idle.loop',
|
||||
REACT_SHOCKED_GASP: 'owen.state.react.shocked.gasp.transition',
|
||||
REACT_SHOCKED_JUMP: 'owen.quirk.react.shocked.jump',
|
||||
REACT_SHOCKED_TO_TYPE: 'owen.state.react.shocked.totype.transition',
|
||||
|
||||
// Type state animations
|
||||
TYPE_IDLE: 'owen.state.type.idle.loop',
|
||||
TYPE_FAST: 'owen.state.type.fast.loop',
|
||||
TYPE_SLOW: 'owen.state.type.slow.loop',
|
||||
TYPE_THINKING: 'owen.state.type.thinking.loop',
|
||||
TYPE_TO_WAIT: 'owen.state.type.towait.transition',
|
||||
|
||||
// Sleep state animations
|
||||
SLEEP_LIGHT: 'owen.state.sleep.light.loop',
|
||||
SLEEP_DEEP: 'owen.state.sleep.deep.loop',
|
||||
SLEEP_DREAM: 'owen.quirk.sleep.dream',
|
||||
SLEEP_WAKE_UP: 'owen.state.sleep.wakeup.transition'
|
||||
}
|
||||
|
||||
/**
|
||||
* Semantic animation names (readable camelCase)
|
||||
* @constant
|
||||
*/
|
||||
export const SemanticAnimations = {
|
||||
// Wait state animations
|
||||
WAIT_IDLE: 'OwenWaitIdleLoop',
|
||||
WAIT_PICK_NOSE: 'OwenQuirkPickNose',
|
||||
WAIT_STRETCH: 'OwenQuirkStretch',
|
||||
WAIT_YAWN: 'OwenQuirkYawn',
|
||||
|
||||
// React state animations - neutral
|
||||
REACT_IDLE: 'OwenReactIdleLoop',
|
||||
REACT_ACKNOWLEDGE: 'OwenReactAcknowledgeTransition',
|
||||
REACT_NOD: 'OwenReactNodTransition',
|
||||
REACT_LISTENING: 'OwenReactListeningLoop',
|
||||
|
||||
// React state animations - angry
|
||||
REACT_ANGRY_IDLE: 'OwenReactAngryIdleLoop',
|
||||
REACT_ANGRY_FROWN: 'OwenReactAngryFrownTransition',
|
||||
REACT_ANGRY_GRUMBLE: 'OwenQuirkAngryGrumble',
|
||||
REACT_ANGRY_TO_TYPE: 'OwenReactAngryToTypeTransition',
|
||||
|
||||
// React state animations - happy
|
||||
REACT_HAPPY_IDLE: 'OwenReactHappyIdleLoop',
|
||||
REACT_HAPPY_SMILE: 'OwenReactHappySmileTransition',
|
||||
REACT_HAPPY_BOUNCE: 'OwenQuirkHappyBounce',
|
||||
REACT_HAPPY_TO_TYPE: 'OwenReactHappyToTypeTransition',
|
||||
|
||||
// React state animations - sad
|
||||
REACT_SAD_IDLE: 'OwenReactSadIdleLoop',
|
||||
REACT_SAD_SIGH: 'OwenReactSadSighTransition',
|
||||
REACT_SAD_SLUMP: 'OwenQuirkSadSlump',
|
||||
REACT_SAD_TO_TYPE: 'OwenReactSadToTypeTransition',
|
||||
|
||||
// React state animations - shocked
|
||||
REACT_SHOCKED_IDLE: 'OwenReactShockedIdleLoop',
|
||||
REACT_SHOCKED_GASP: 'OwenReactShockedGaspTransition',
|
||||
REACT_SHOCKED_JUMP: 'OwenQuirkShockedJump',
|
||||
REACT_SHOCKED_TO_TYPE: 'OwenReactShockedToTypeTransition',
|
||||
|
||||
// Type state animations
|
||||
TYPE_IDLE: 'OwenTypeIdleLoop',
|
||||
TYPE_FAST: 'OwenTypeFastLoop',
|
||||
TYPE_SLOW: 'OwenTypeSlowLoop',
|
||||
TYPE_THINKING: 'OwenTypeThinkingLoop',
|
||||
TYPE_TO_WAIT: 'OwenTypeToWaitTransition',
|
||||
|
||||
// Sleep state animations
|
||||
SLEEP_LIGHT: 'OwenSleepLightLoop',
|
||||
SLEEP_DEEP: 'OwenSleepDeepLoop',
|
||||
SLEEP_DREAM: 'OwenQuirkSleepDream',
|
||||
SLEEP_WAKE_UP: 'OwenSleepWakeUpTransition'
|
||||
}
|
||||
|
||||
/**
|
||||
* Animation naming schemes enumeration
|
||||
* @constant
|
||||
*/
|
||||
export const NamingSchemes = {
|
||||
LEGACY: 'legacy',
|
||||
ARTIST: 'artist',
|
||||
HIERARCHICAL: 'hierarchical',
|
||||
SEMANTIC: 'semantic'
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert animation name between different schemes
|
||||
* @param {string} name - The source animation name
|
||||
* @param {string} targetScheme - The target naming scheme
|
||||
* @returns {string} The converted animation name
|
||||
*/
|
||||
export function convertAnimationName (name, targetScheme) {
|
||||
return nameMapper.convert(name, targetScheme)
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all naming scheme variants for an animation
|
||||
* @param {string} name - The source animation name
|
||||
* @returns {Object} Object with all scheme variants
|
||||
*/
|
||||
export function getAllAnimationNames (name) {
|
||||
return nameMapper.getAllNames(name)
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate an animation name
|
||||
* @param {string} name - The animation name to validate
|
||||
* @returns {Object} Validation result
|
||||
*/
|
||||
export function validateAnimationName (name) {
|
||||
return nameMapper.validateAnimationName(name)
|
||||
}
|
||||
|
||||
/**
|
||||
* Get animations by state and emotion
|
||||
* @param {string} state - The state name
|
||||
* @param {string} emotion - The emotion name (optional)
|
||||
* @param {string} scheme - The naming scheme to return (default: 'semantic')
|
||||
* @returns {string[]} Array of animation names
|
||||
*/
|
||||
export function getAnimationsByStateAndEmotion (state, emotion = '', scheme = 'semantic') {
|
||||
const animations = nameMapper.getAnimationsByFilter({ state, emotion })
|
||||
return animations.map(anim => anim[scheme] || anim.semantic)
|
||||
}
|
||||
</code></pre>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2>
|
||||
<h3>Modules</h3>
|
||||
<ul>
|
||||
<li><a href="module-StateHandler.html">StateHandler</a></li>
|
||||
<li><a href="module-animation.html">animation</a></li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationConstants.html"
|
||||
>animation/AnimationConstants</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationNameMapper.html"
|
||||
>animation/AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="module-constants.html">constants</a></li>
|
||||
<li><a href="module-core.html">core</a></li>
|
||||
<li><a href="module-factories.html">factories</a></li>
|
||||
<li><a href="module-loaders.html">loaders</a></li>
|
||||
<li><a href="module-owen.html">owen</a></li>
|
||||
<li><a href="module-states.html">states</a></li>
|
||||
</ul>
|
||||
<h3>Classes</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
|
||||
<li>
|
||||
<a href="module-animation.AnimationClipFactory.html"
|
||||
>AnimationClipFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
||||
>AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-core.OwenAnimationContext.html"
|
||||
>OwenAnimationContext</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-factories.OwenSystemFactory.html"
|
||||
>OwenSystemFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.GLTFAnimationLoader.html"
|
||||
>GLTFAnimationLoader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-states.StateFactory.html">StateFactory</a></li>
|
||||
<li>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<br class="clear" />
|
||||
|
||||
<footer>
|
||||
Documentation generated by
|
||||
<a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
|
||||
2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
<script src="scripts/linenumber.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
717
docs/animation_AnimationNameMapper.js.html
Normal file
717
docs/animation_AnimationNameMapper.js.html
Normal file
@ -0,0 +1,717 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>JSDoc: Source: animation/AnimationNameMapper.js</title>
|
||||
|
||||
<script src="scripts/prettify/prettify.js"></script>
|
||||
<script src="scripts/prettify/lang-css.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link
|
||||
type="text/css"
|
||||
rel="stylesheet"
|
||||
href="styles/prettify-tomorrow.css"
|
||||
/>
|
||||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1 class="page-title">Source: animation/AnimationNameMapper.js</h1>
|
||||
|
||||
<section>
|
||||
<article>
|
||||
<pre class="prettyprint source linenums"><code>/**
|
||||
* @fileoverview Multi-scheme animation name mapper for Owen Animation System
|
||||
* @module animation/AnimationNameMapper
|
||||
*/
|
||||
|
||||
/**
|
||||
* Multi-scheme animation name mapper for Owen Animation System
|
||||
* Supports legacy, artist-friendly, and hierarchical naming schemes
|
||||
* @class
|
||||
*/
|
||||
export class AnimationNameMapper {
|
||||
constructor () {
|
||||
// Mapping between different naming schemes
|
||||
this.schemeMappings = new Map()
|
||||
this.reverseMappings = new Map()
|
||||
this.patterns = new Map()
|
||||
|
||||
this.initializeMappings()
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize all naming scheme mappings and patterns
|
||||
* @private
|
||||
*/
|
||||
initializeMappings () {
|
||||
// Core animation definitions with all naming scheme variants
|
||||
const animations = [
|
||||
// Wait state animations
|
||||
{
|
||||
legacy: 'wait_idle_L',
|
||||
artist: 'Owen_WaitIdle',
|
||||
hierarchical: 'owen.state.wait.idle.loop',
|
||||
semantic: 'OwenWaitIdleLoop',
|
||||
state: 'wait',
|
||||
emotion: '',
|
||||
type: 'loop',
|
||||
category: 'state'
|
||||
},
|
||||
{
|
||||
legacy: 'wait_pickNose_Q',
|
||||
artist: 'Owen_PickNose',
|
||||
hierarchical: 'owen.quirk.wait.picknose',
|
||||
semantic: 'OwenQuirkPickNose',
|
||||
state: 'wait',
|
||||
emotion: '',
|
||||
type: 'quirk',
|
||||
category: 'quirk'
|
||||
},
|
||||
{
|
||||
legacy: 'wait_wave_Q',
|
||||
artist: 'Owen_Wave',
|
||||
hierarchical: 'owen.quirk.wait.wave',
|
||||
semantic: 'OwenQuirkWave',
|
||||
state: 'wait',
|
||||
emotion: '',
|
||||
type: 'quirk',
|
||||
category: 'quirk'
|
||||
},
|
||||
// React state animations
|
||||
{
|
||||
legacy: 'react_idle_L',
|
||||
artist: 'Owen_ReactIdle',
|
||||
hierarchical: 'owen.state.react.idle.loop',
|
||||
semantic: 'OwenReactIdleLoop',
|
||||
state: 'react',
|
||||
emotion: '',
|
||||
type: 'loop',
|
||||
category: 'state'
|
||||
},
|
||||
{
|
||||
legacy: 'react_an_L',
|
||||
artist: 'Owen_ReactAngry',
|
||||
hierarchical: 'owen.state.react.emotion.angry.loop',
|
||||
semantic: 'OwenReactAngryLoop',
|
||||
state: 'react',
|
||||
emotion: 'angry',
|
||||
type: 'loop',
|
||||
category: 'state'
|
||||
},
|
||||
{
|
||||
legacy: 'react_sh_L',
|
||||
artist: 'Owen_ReactShocked',
|
||||
hierarchical: 'owen.state.react.emotion.shocked.loop',
|
||||
semantic: 'OwenReactShockedLoop',
|
||||
state: 'react',
|
||||
emotion: 'shocked',
|
||||
type: 'loop',
|
||||
category: 'state'
|
||||
},
|
||||
{
|
||||
legacy: 'react_ha_L',
|
||||
artist: 'Owen_ReactHappy',
|
||||
hierarchical: 'owen.state.react.emotion.happy.loop',
|
||||
semantic: 'OwenReactHappyLoop',
|
||||
state: 'react',
|
||||
emotion: 'happy',
|
||||
type: 'loop',
|
||||
category: 'state'
|
||||
},
|
||||
{
|
||||
legacy: 'react_sa_L',
|
||||
artist: 'Owen_ReactSad',
|
||||
hierarchical: 'owen.state.react.emotion.sad.loop',
|
||||
semantic: 'OwenReactSadLoop',
|
||||
state: 'react',
|
||||
emotion: 'sad',
|
||||
type: 'loop',
|
||||
category: 'state'
|
||||
},
|
||||
// Type state animations
|
||||
{
|
||||
legacy: 'type_idle_L',
|
||||
artist: 'Owen_TypeIdle',
|
||||
hierarchical: 'owen.state.type.idle.loop',
|
||||
semantic: 'OwenTypeIdleLoop',
|
||||
state: 'type',
|
||||
emotion: '',
|
||||
type: 'loop',
|
||||
category: 'state'
|
||||
},
|
||||
{
|
||||
legacy: 'type_an_L',
|
||||
artist: 'Owen_TypeAngry',
|
||||
hierarchical: 'owen.state.type.emotion.angry.loop',
|
||||
semantic: 'OwenTypeAngryLoop',
|
||||
state: 'type',
|
||||
emotion: 'angry',
|
||||
type: 'loop',
|
||||
category: 'state'
|
||||
},
|
||||
{
|
||||
legacy: 'type_sh_L',
|
||||
artist: 'Owen_TypeShocked',
|
||||
hierarchical: 'owen.state.type.emotion.shocked.loop',
|
||||
semantic: 'OwenTypeShockedLoop',
|
||||
state: 'type',
|
||||
emotion: 'shocked',
|
||||
type: 'loop',
|
||||
category: 'state'
|
||||
},
|
||||
// Sleep state animations
|
||||
{
|
||||
legacy: 'sleep_idle_L',
|
||||
artist: 'Owen_SleepIdle',
|
||||
hierarchical: 'owen.state.sleep.idle.loop',
|
||||
semantic: 'OwenSleepIdleLoop',
|
||||
state: 'sleep',
|
||||
emotion: '',
|
||||
type: 'loop',
|
||||
category: 'state'
|
||||
},
|
||||
// Transition animations
|
||||
{
|
||||
legacy: 'wait_2react_T',
|
||||
artist: 'Owen_WaitToReact',
|
||||
hierarchical: 'owen.transition.wait.to.react',
|
||||
semantic: 'OwenTransitionWaitToReact',
|
||||
fromState: 'wait',
|
||||
toState: 'react',
|
||||
emotion: '',
|
||||
type: 'transition',
|
||||
category: 'transition'
|
||||
},
|
||||
{
|
||||
legacy: 'react_2type_T',
|
||||
artist: 'Owen_ReactToType',
|
||||
hierarchical: 'owen.transition.react.to.type',
|
||||
semantic: 'OwenTransitionReactToType',
|
||||
fromState: 'react',
|
||||
toState: 'type',
|
||||
emotion: '',
|
||||
type: 'transition',
|
||||
category: 'transition'
|
||||
},
|
||||
{
|
||||
legacy: 'react_an2type_T',
|
||||
artist: 'Owen_ReactAngryToType',
|
||||
hierarchical: 'owen.transition.react.to.type.emotion.angry',
|
||||
semantic: 'OwenTransitionReactToTypeAngry',
|
||||
fromState: 'react',
|
||||
toState: 'type',
|
||||
emotion: 'angry',
|
||||
type: 'transition',
|
||||
category: 'transition'
|
||||
},
|
||||
{
|
||||
legacy: 'type_2wait_T',
|
||||
artist: 'Owen_TypeToWait',
|
||||
hierarchical: 'owen.transition.type.to.wait',
|
||||
semantic: 'OwenTransitionTypeToWait',
|
||||
fromState: 'type',
|
||||
toState: 'wait',
|
||||
emotion: '',
|
||||
type: 'transition',
|
||||
category: 'transition'
|
||||
},
|
||||
{
|
||||
legacy: 'sleep_2wait_T',
|
||||
artist: 'Owen_SleepToWait',
|
||||
hierarchical: 'owen.transition.sleep.to.wait',
|
||||
semantic: 'OwenTransitionSleepToWait',
|
||||
fromState: 'sleep',
|
||||
toState: 'wait',
|
||||
emotion: '',
|
||||
type: 'transition',
|
||||
category: 'transition'
|
||||
}
|
||||
]
|
||||
|
||||
// Build bidirectional mappings
|
||||
animations.forEach(anim => {
|
||||
const schemes = ['legacy', 'artist', 'hierarchical', 'semantic']
|
||||
|
||||
schemes.forEach(scheme1 => {
|
||||
schemes.forEach(scheme2 => {
|
||||
if (scheme1 !== scheme2) {
|
||||
this.schemeMappings.set(anim[scheme1], anim[scheme2])
|
||||
}
|
||||
})
|
||||
|
||||
// Also map to animation definition
|
||||
this.schemeMappings.set(anim[scheme1], anim)
|
||||
})
|
||||
})
|
||||
|
||||
// Initialize pattern matchers for auto-detection
|
||||
this.initializePatterns()
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize pattern matchers for different naming schemes
|
||||
* @private
|
||||
*/
|
||||
initializePatterns () {
|
||||
// Pattern matchers for different naming schemes
|
||||
this.patterns.set('legacy', [
|
||||
{
|
||||
regex: /^(\w+)_(\w+)_([LTQ])$/,
|
||||
extract: (match) => ({
|
||||
state: match[1],
|
||||
action: match[2],
|
||||
type: match[3] === 'L' ? 'loop' : match[3] === 'T' ? 'transition' : 'quirk'
|
||||
})
|
||||
},
|
||||
{
|
||||
regex: /^(\w+)_(\w{2})_([LTQ])$/,
|
||||
extract: (match) => ({
|
||||
state: match[1],
|
||||
emotion: this.mapEmotionCode(match[2]),
|
||||
type: match[3] === 'L' ? 'loop' : match[3] === 'T' ? 'transition' : 'quirk'
|
||||
})
|
||||
},
|
||||
{
|
||||
regex: /^(\w+)_(\w{2})?2(\w+)_T$/,
|
||||
extract: (match) => ({
|
||||
fromState: match[1],
|
||||
emotion: match[2] ? this.mapEmotionCode(match[2]) : '',
|
||||
toState: match[3],
|
||||
type: 'transition'
|
||||
})
|
||||
},
|
||||
{
|
||||
regex: /^(\w+)_2(\w+)_T$/,
|
||||
extract: (match) => ({
|
||||
fromState: match[1],
|
||||
toState: match[2],
|
||||
type: 'transition'
|
||||
})
|
||||
}
|
||||
])
|
||||
|
||||
this.patterns.set('artist', [
|
||||
{
|
||||
regex: /^Owen_(\w+)$/,
|
||||
extract: (match) => ({
|
||||
action: match[1],
|
||||
scheme: 'artist'
|
||||
})
|
||||
},
|
||||
{
|
||||
regex: /^Owen_(\w+)To(\w+)$/,
|
||||
extract: (match) => ({
|
||||
fromState: match[1].toLowerCase(),
|
||||
toState: match[2].toLowerCase(),
|
||||
type: 'transition'
|
||||
})
|
||||
},
|
||||
{
|
||||
regex: /^Owen_(\w+)(Angry|Happy|Sad|Shocked)$/,
|
||||
extract: (match) => ({
|
||||
state: match[1].toLowerCase(),
|
||||
emotion: match[2].toLowerCase(),
|
||||
type: 'loop'
|
||||
})
|
||||
},
|
||||
{
|
||||
regex: /^Owen_(\w+)(Angry|Happy|Sad|Shocked)To(\w+)$/,
|
||||
extract: (match) => ({
|
||||
fromState: match[1].toLowerCase(),
|
||||
emotion: match[2].toLowerCase(),
|
||||
toState: match[3].toLowerCase(),
|
||||
type: 'transition'
|
||||
})
|
||||
}
|
||||
])
|
||||
|
||||
this.patterns.set('hierarchical', [
|
||||
{
|
||||
regex: /^owen\.(\w+)\.(\w+)\.(\w+)(?:\.(\w+))?(?:\.(\w+))?$/,
|
||||
extract: (match) => ({
|
||||
category: match[1],
|
||||
subcategory: match[2],
|
||||
action: match[3],
|
||||
modifier: match[4],
|
||||
type: match[5] || match[4]
|
||||
})
|
||||
}
|
||||
])
|
||||
|
||||
this.patterns.set('semantic', [
|
||||
{
|
||||
regex: /^Owen(\w+)(\w+)(\w+)$/,
|
||||
extract: (match) => ({
|
||||
category: match[1].toLowerCase(),
|
||||
action: match[2].toLowerCase(),
|
||||
type: match[3].toLowerCase()
|
||||
})
|
||||
}
|
||||
])
|
||||
}
|
||||
|
||||
/**
|
||||
* Map emotion codes to full names
|
||||
* @private
|
||||
* @param {string} code - Emotion code
|
||||
* @returns {string} Full emotion name
|
||||
*/
|
||||
mapEmotionCode (code) {
|
||||
const emotionMap = {
|
||||
an: 'angry',
|
||||
sh: 'shocked',
|
||||
ha: 'happy',
|
||||
sa: 'sad',
|
||||
'': 'neutral'
|
||||
}
|
||||
return emotionMap[code] || code
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert any animation name to any other scheme
|
||||
* @param {string} fromName - Source animation name
|
||||
* @param {string} targetScheme - Target naming scheme ('legacy', 'artist', 'hierarchical', 'semantic')
|
||||
* @returns {string} Converted animation name
|
||||
*/
|
||||
convert (fromName, targetScheme = 'hierarchical') {
|
||||
// Direct lookup first
|
||||
const directMapping = this.schemeMappings.get(fromName)
|
||||
if (directMapping && typeof directMapping === 'object') {
|
||||
return directMapping[targetScheme] || fromName
|
||||
}
|
||||
|
||||
// Pattern-based conversion
|
||||
const detected = this.detectScheme(fromName)
|
||||
if (detected) {
|
||||
return this.generateName(detected.info, targetScheme)
|
||||
}
|
||||
|
||||
console.warn(`Could not convert animation name: ${fromName}`)
|
||||
return fromName
|
||||
}
|
||||
|
||||
/**
|
||||
* Detect which naming scheme is being used
|
||||
* @param {string} name - Animation name to analyze
|
||||
* @returns {Object|null} Detection result with scheme and extracted info
|
||||
*/
|
||||
detectScheme (name) {
|
||||
for (const [scheme, patterns] of this.patterns) {
|
||||
for (const pattern of patterns) {
|
||||
const match = name.match(pattern.regex)
|
||||
if (match) {
|
||||
return {
|
||||
scheme,
|
||||
info: pattern.extract(match),
|
||||
originalName: name
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate animation name in target scheme
|
||||
* @private
|
||||
* @param {Object} info - Animation information
|
||||
* @param {string} targetScheme - Target naming scheme
|
||||
* @returns {string} Generated animation name
|
||||
*/
|
||||
generateName (info, targetScheme) {
|
||||
switch (targetScheme) {
|
||||
case 'legacy':
|
||||
return this.generateLegacyName(info)
|
||||
case 'artist':
|
||||
return this.generateArtistName(info)
|
||||
case 'hierarchical':
|
||||
return this.generateHierarchicalName(info)
|
||||
case 'semantic':
|
||||
return this.generateSemanticName(info)
|
||||
default:
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate legacy format name
|
||||
* @private
|
||||
* @param {Object} info - Animation information
|
||||
* @returns {string} Legacy format name
|
||||
*/
|
||||
generateLegacyName (info) {
|
||||
const typeMap = { loop: 'L', transition: 'T', quirk: 'Q' }
|
||||
const emotionMap = { angry: 'an', shocked: 'sh', happy: 'ha', sad: 'sa' }
|
||||
|
||||
if (info.type === 'transition' && info.fromState && info.toState) {
|
||||
const emotionPart = info.emotion ? emotionMap[info.emotion] || '' : ''
|
||||
return emotionPart
|
||||
? `${info.fromState}_${emotionPart}2${info.toState}_T`
|
||||
: `${info.fromState}_2${info.toState}_T`
|
||||
}
|
||||
|
||||
const state = info.state || info.fromState || 'wait'
|
||||
const action = info.action || (info.emotion ? emotionMap[info.emotion] : 'idle')
|
||||
const type = typeMap[info.type] || 'L'
|
||||
|
||||
return `${state}_${action}_${type}`
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate artist-friendly format name
|
||||
* @private
|
||||
* @param {Object} info - Animation information
|
||||
* @returns {string} Artist format name
|
||||
*/
|
||||
generateArtistName (info) {
|
||||
const parts = ['Owen']
|
||||
|
||||
if (info.type === 'transition') {
|
||||
const from = this.capitalize(info.fromState || info.state)
|
||||
const to = this.capitalize(info.toState)
|
||||
if (info.emotion) {
|
||||
parts.push(`${from}${this.capitalize(info.emotion)}To${to}`)
|
||||
} else {
|
||||
parts.push(`${from}To${to}`)
|
||||
}
|
||||
} else {
|
||||
if (info.state) parts.push(this.capitalize(info.state))
|
||||
if (info.action && info.action !== 'idle') parts.push(this.capitalize(info.action))
|
||||
if (info.emotion) parts.push(this.capitalize(info.emotion))
|
||||
}
|
||||
|
||||
return parts.join('_')
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate hierarchical format name
|
||||
* @private
|
||||
* @param {Object} info - Animation information
|
||||
* @returns {string} Hierarchical format name
|
||||
*/
|
||||
generateHierarchicalName (info) {
|
||||
const parts = ['owen']
|
||||
|
||||
if (info.category) {
|
||||
parts.push(info.category)
|
||||
} else if (info.type === 'transition') {
|
||||
parts.push('transition')
|
||||
} else if (info.type === 'quirk') {
|
||||
parts.push('quirk')
|
||||
} else {
|
||||
parts.push('state')
|
||||
}
|
||||
|
||||
if (info.fromState && info.toState) {
|
||||
// Transition
|
||||
parts.push(info.fromState, 'to', info.toState)
|
||||
} else if (info.state) {
|
||||
parts.push(info.state)
|
||||
}
|
||||
|
||||
if (info.action && info.action !== 'idle') parts.push(info.action)
|
||||
if (info.emotion) parts.push('emotion', info.emotion)
|
||||
if (info.type) parts.push(info.type)
|
||||
|
||||
return parts.join('.')
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate semantic format name
|
||||
* @private
|
||||
* @param {Object} info - Animation information
|
||||
* @returns {string} Semantic format name
|
||||
*/
|
||||
generateSemanticName (info) {
|
||||
const parts = ['Owen']
|
||||
|
||||
if (info.type === 'transition') {
|
||||
parts.push('Transition')
|
||||
if (info.fromState) parts.push(this.capitalize(info.fromState))
|
||||
parts.push('To')
|
||||
if (info.toState) parts.push(this.capitalize(info.toState))
|
||||
if (info.emotion) parts.push(this.capitalize(info.emotion))
|
||||
} else {
|
||||
if (info.type === 'quirk') parts.push('Quirk')
|
||||
if (info.state) parts.push(this.capitalize(info.state))
|
||||
if (info.action && info.action !== 'idle') parts.push(this.capitalize(info.action))
|
||||
if (info.emotion) parts.push(this.capitalize(info.emotion))
|
||||
if (info.type && info.type !== 'quirk') parts.push(this.capitalize(info.type))
|
||||
}
|
||||
|
||||
return parts.join('')
|
||||
}
|
||||
|
||||
/**
|
||||
* Capitalize first letter of string
|
||||
* @private
|
||||
* @param {string} str - String to capitalize
|
||||
* @returns {string} Capitalized string
|
||||
*/
|
||||
capitalize (str) {
|
||||
return str.charAt(0).toUpperCase() + str.slice(1)
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all possible names for an animation
|
||||
* @param {string} animationName - Source animation name
|
||||
* @returns {Object} Object with all naming scheme variants
|
||||
*/
|
||||
getAllNames (animationName) {
|
||||
const schemes = ['legacy', 'artist', 'hierarchical', 'semantic']
|
||||
const names = {}
|
||||
|
||||
schemes.forEach(scheme => {
|
||||
names[scheme] = this.convert(animationName, scheme)
|
||||
})
|
||||
|
||||
return names
|
||||
}
|
||||
|
||||
/**
|
||||
* Batch convert multiple animations
|
||||
* @param {string[]} animations - Array of animation names
|
||||
* @param {string} targetScheme - Target naming scheme
|
||||
* @returns {Object} Mapping of original names to converted names
|
||||
*/
|
||||
convertBatch (animations, targetScheme) {
|
||||
const converted = {}
|
||||
animations.forEach(name => {
|
||||
converted[name] = this.convert(name, targetScheme)
|
||||
})
|
||||
return converted
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate animation name format
|
||||
* @param {string} name - Animation name to validate
|
||||
* @returns {Object} Validation result with issues and suggestions
|
||||
*/
|
||||
validateAnimationName (name) {
|
||||
const issues = []
|
||||
const suggestions = []
|
||||
|
||||
// Check for common issues
|
||||
if (name.includes(' ')) {
|
||||
issues.push(`❌ "${name}" contains spaces - may cause issues`)
|
||||
suggestions.push(`💡 Suggestion: "${name.replace(/ /g, '_')}"`)
|
||||
}
|
||||
|
||||
if (!/^[a-zA-Z0-9._-]+$/.test(name)) {
|
||||
issues.push(`❌ "${name}" contains invalid characters`)
|
||||
suggestions.push('💡 Use only letters, numbers, dots, underscores, and hyphens')
|
||||
}
|
||||
|
||||
if (name.length > 50) {
|
||||
issues.push(`⚠️ "${name}" is very long (${name.length} chars)`)
|
||||
suggestions.push('💡 Consider shortening the name')
|
||||
}
|
||||
|
||||
const detected = this.detectScheme(name)
|
||||
if (!detected) {
|
||||
issues.push(`⚠️ "${name}" doesn't match any known naming pattern`)
|
||||
suggestions.push('💡 Consider using one of: legacy, artist, hierarchical, or semantic format')
|
||||
} else {
|
||||
suggestions.push(`✅ Detected as ${detected.scheme} scheme`)
|
||||
}
|
||||
|
||||
return { issues, suggestions, detected }
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2>
|
||||
<h3>Modules</h3>
|
||||
<ul>
|
||||
<li><a href="module-StateHandler.html">StateHandler</a></li>
|
||||
<li><a href="module-animation.html">animation</a></li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationConstants.html"
|
||||
>animation/AnimationConstants</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationNameMapper.html"
|
||||
>animation/AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="module-constants.html">constants</a></li>
|
||||
<li><a href="module-core.html">core</a></li>
|
||||
<li><a href="module-factories.html">factories</a></li>
|
||||
<li><a href="module-loaders.html">loaders</a></li>
|
||||
<li><a href="module-owen.html">owen</a></li>
|
||||
<li><a href="module-states.html">states</a></li>
|
||||
</ul>
|
||||
<h3>Classes</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
|
||||
<li>
|
||||
<a href="module-animation.AnimationClipFactory.html"
|
||||
>AnimationClipFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
||||
>AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-core.OwenAnimationContext.html"
|
||||
>OwenAnimationContext</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-factories.OwenSystemFactory.html"
|
||||
>OwenSystemFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.GLTFAnimationLoader.html"
|
||||
>GLTFAnimationLoader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-states.StateFactory.html">StateFactory</a></li>
|
||||
<li>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<br class="clear" />
|
||||
|
||||
<footer>
|
||||
Documentation generated by
|
||||
<a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
|
||||
2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
<script src="scripts/linenumber.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
196
docs/constants.js.html
Normal file
196
docs/constants.js.html
Normal file
@ -0,0 +1,196 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>JSDoc: Source: constants.js</title>
|
||||
|
||||
<script src="scripts/prettify/prettify.js"></script>
|
||||
<script src="scripts/prettify/lang-css.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link
|
||||
type="text/css"
|
||||
rel="stylesheet"
|
||||
href="styles/prettify-tomorrow.css"
|
||||
/>
|
||||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1 class="page-title">Source: constants.js</h1>
|
||||
|
||||
<section>
|
||||
<article>
|
||||
<pre class="prettyprint source linenums"><code>/**
|
||||
* @fileoverview Animation system constants and enumerations
|
||||
* @module constants
|
||||
*/
|
||||
|
||||
/**
|
||||
* Animation clip types based on naming convention
|
||||
* @readonly
|
||||
* @enum {string}
|
||||
*/
|
||||
export const ClipTypes = {
|
||||
/** Loop animation */
|
||||
LOOP: 'L',
|
||||
/** Quirk animation */
|
||||
QUIRK: 'Q',
|
||||
/** Nested loop animation */
|
||||
NESTED_LOOP: 'NL',
|
||||
/** Nested quirk animation */
|
||||
NESTED_QUIRK: 'NQ',
|
||||
/** Nested in transition */
|
||||
NESTED_IN: 'IN_NT',
|
||||
/** Nested out transition */
|
||||
NESTED_OUT: 'OUT_NT',
|
||||
/** Transition animation */
|
||||
TRANSITION: 'T'
|
||||
}
|
||||
|
||||
/**
|
||||
* Character animation states
|
||||
* @readonly
|
||||
* @enum {string}
|
||||
*/
|
||||
export const States = {
|
||||
/** Waiting/idle state */
|
||||
WAITING: 'wait',
|
||||
/** Reacting to input state */
|
||||
REACTING: 'react',
|
||||
/** Typing response state */
|
||||
TYPING: 'type',
|
||||
/** Sleep/inactive state */
|
||||
SLEEPING: 'sleep'
|
||||
}
|
||||
|
||||
/**
|
||||
* Character emotional states
|
||||
* @readonly
|
||||
* @enum {string}
|
||||
*/
|
||||
export const Emotions = {
|
||||
/** Neutral emotion */
|
||||
NEUTRAL: '',
|
||||
/** Angry emotion */
|
||||
ANGRY: 'an',
|
||||
/** Shocked emotion */
|
||||
SHOCKED: 'sh',
|
||||
/** Happy emotion */
|
||||
HAPPY: 'ha',
|
||||
/** Sad emotion */
|
||||
SAD: 'sa'
|
||||
}
|
||||
|
||||
/**
|
||||
* Default configuration values
|
||||
* @readonly
|
||||
* @type {Object}
|
||||
*/
|
||||
export const Config = {
|
||||
/** Default fade in duration for animations (ms) */
|
||||
DEFAULT_FADE_IN: 0.3,
|
||||
/** Default fade out duration for animations (ms) */
|
||||
DEFAULT_FADE_OUT: 0.3,
|
||||
/** Default quirk interval (ms) */
|
||||
QUIRK_INTERVAL: 5000,
|
||||
/** Default inactivity timeout (ms) */
|
||||
INACTIVITY_TIMEOUT: 60000,
|
||||
/** Quirk probability threshold */
|
||||
QUIRK_PROBABILITY: 0.3
|
||||
}
|
||||
</code></pre>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2>
|
||||
<h3>Modules</h3>
|
||||
<ul>
|
||||
<li><a href="module-StateHandler.html">StateHandler</a></li>
|
||||
<li><a href="module-animation.html">animation</a></li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationConstants.html"
|
||||
>animation/AnimationConstants</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationNameMapper.html"
|
||||
>animation/AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="module-constants.html">constants</a></li>
|
||||
<li><a href="module-core.html">core</a></li>
|
||||
<li><a href="module-factories.html">factories</a></li>
|
||||
<li><a href="module-loaders.html">loaders</a></li>
|
||||
<li><a href="module-owen.html">owen</a></li>
|
||||
<li><a href="module-states.html">states</a></li>
|
||||
</ul>
|
||||
<h3>Classes</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
|
||||
<li>
|
||||
<a href="module-animation.AnimationClipFactory.html"
|
||||
>AnimationClipFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
||||
>AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-core.OwenAnimationContext.html"
|
||||
>OwenAnimationContext</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-factories.OwenSystemFactory.html"
|
||||
>OwenSystemFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.GLTFAnimationLoader.html"
|
||||
>GLTFAnimationLoader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-states.StateFactory.html">StateFactory</a></li>
|
||||
<li>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<br class="clear" />
|
||||
|
||||
<footer>
|
||||
Documentation generated by
|
||||
<a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
|
||||
2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
<script src="scripts/linenumber.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
551
docs/core_OwenAnimationContext.js.html
Normal file
551
docs/core_OwenAnimationContext.js.html
Normal file
@ -0,0 +1,551 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>JSDoc: Source: core/OwenAnimationContext.js</title>
|
||||
|
||||
<script src="scripts/prettify/prettify.js"></script>
|
||||
<script src="scripts/prettify/lang-css.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link
|
||||
type="text/css"
|
||||
rel="stylesheet"
|
||||
href="styles/prettify-tomorrow.css"
|
||||
/>
|
||||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1 class="page-title">Source: core/OwenAnimationContext.js</h1>
|
||||
|
||||
<section>
|
||||
<article>
|
||||
<pre class="prettyprint source linenums"><code>/**
|
||||
* @fileoverview Main animation context controller
|
||||
* @module core
|
||||
*/
|
||||
|
||||
import { States, Emotions, Config } from '../constants.js'
|
||||
import { AnimationNameMapper } from '../animation/AnimationNameMapper.js'
|
||||
|
||||
/**
|
||||
* Main controller for the Owen animation system
|
||||
* Manages state transitions, animation playback, and user interactions
|
||||
* @class
|
||||
*/
|
||||
export class OwenAnimationContext {
|
||||
/**
|
||||
* Create an Owen animation context
|
||||
* @param {THREE.Object3D} model - The 3D character model
|
||||
* @param {THREE.AnimationMixer} mixer - The Three.js animation mixer
|
||||
* @param {AnimationClipFactory} animationClipFactory - Factory for creating clips
|
||||
* @param {StateFactory} stateFactory - Factory for creating state handlers
|
||||
*/
|
||||
constructor (model, mixer, animationClipFactory, stateFactory) {
|
||||
/**
|
||||
* The 3D character model
|
||||
* @type {THREE.Object3D}
|
||||
*/
|
||||
this.model = model
|
||||
|
||||
/**
|
||||
* The Three.js animation mixer
|
||||
* @type {THREE.AnimationMixer}
|
||||
*/
|
||||
this.mixer = mixer
|
||||
|
||||
/**
|
||||
* Factory for creating animation clips
|
||||
* @type {AnimationClipFactory}
|
||||
*/
|
||||
this.animationClipFactory = animationClipFactory
|
||||
|
||||
/**
|
||||
* Factory for creating state handlers
|
||||
* @type {StateFactory}
|
||||
*/
|
||||
this.stateFactory = stateFactory
|
||||
|
||||
/**
|
||||
* Multi-scheme animation name mapper
|
||||
* @type {AnimationNameMapper}
|
||||
*/
|
||||
this.nameMapper = new AnimationNameMapper()
|
||||
|
||||
/**
|
||||
* Map of animation clips by name
|
||||
* @type {Map<string, AnimationClip>}
|
||||
*/
|
||||
this.clips = new Map()
|
||||
|
||||
/**
|
||||
* Map of state handlers by name
|
||||
* @type {Map<string, StateHandler>}
|
||||
*/
|
||||
this.states = new Map()
|
||||
|
||||
/**
|
||||
* Current active state
|
||||
* @type {string}
|
||||
*/
|
||||
this.currentState = States.WAITING
|
||||
|
||||
/**
|
||||
* Current active state handler
|
||||
* @type {StateHandler|null}
|
||||
*/
|
||||
this.currentStateHandler = null
|
||||
|
||||
/**
|
||||
* Timer for inactivity detection
|
||||
* @type {number}
|
||||
*/
|
||||
this.inactivityTimer = 0
|
||||
|
||||
/**
|
||||
* Inactivity timeout in milliseconds
|
||||
* @type {number}
|
||||
*/
|
||||
this.inactivityTimeout = Config.INACTIVITY_TIMEOUT
|
||||
|
||||
/**
|
||||
* Whether the system is initialized
|
||||
* @type {boolean}
|
||||
*/
|
||||
this.initialized = false
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the animation system
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async initialize () {
|
||||
if (this.initialized) return
|
||||
|
||||
// Create animation clips from model
|
||||
this.clips = await this.animationClipFactory.createClipsFromModel(this.model)
|
||||
|
||||
// Create actions for all clips
|
||||
for (const [, clip] of this.clips) {
|
||||
clip.createAction(this.mixer)
|
||||
}
|
||||
|
||||
// Initialize state handlers
|
||||
this.initializeStates()
|
||||
|
||||
// Start in wait state
|
||||
await this.transitionTo(States.WAITING)
|
||||
|
||||
this.initialized = true
|
||||
console.log('Owen Animation System initialized')
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize all state handlers
|
||||
* @private
|
||||
* @returns {void}
|
||||
*/
|
||||
initializeStates () {
|
||||
const stateNames = this.stateFactory.getAvailableStates()
|
||||
|
||||
for (const stateName of stateNames) {
|
||||
const handler = this.stateFactory.createStateHandler(stateName, this)
|
||||
this.states.set(stateName, handler)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Transition to a new state
|
||||
* @param {string} newStateName - The name of the state to transition to
|
||||
* @param {string} [emotion=Emotions.NEUTRAL] - The emotion for the transition
|
||||
* @returns {Promise<void>}
|
||||
* @throws {Error} If state is not found or transition is invalid
|
||||
*/
|
||||
async transitionTo (newStateName, emotion = Emotions.NEUTRAL) {
|
||||
if (!this.states.has(newStateName)) {
|
||||
throw new Error(`State '${newStateName}' not found`)
|
||||
}
|
||||
|
||||
const oldState = this.currentState
|
||||
const newStateHandler = this.states.get(newStateName)
|
||||
|
||||
console.log(`Transitioning from ${oldState} to ${newStateName}`)
|
||||
|
||||
// Exit current state
|
||||
if (this.currentStateHandler) {
|
||||
await this.currentStateHandler.exit(newStateName, emotion)
|
||||
}
|
||||
|
||||
// Enter new state
|
||||
this.currentState = newStateName
|
||||
this.currentStateHandler = newStateHandler
|
||||
await this.currentStateHandler.enter(oldState, emotion)
|
||||
|
||||
// Reset inactivity timer
|
||||
this.resetActivityTimer()
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle a user message
|
||||
* @param {string} message - The user message
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async handleUserMessage (message) {
|
||||
console.log(`Handling user message: "${message}"`)
|
||||
|
||||
this.onUserActivity()
|
||||
|
||||
// If sleeping, wake up first
|
||||
if (this.currentState === States.SLEEPING) {
|
||||
await this.transitionTo(States.REACTING)
|
||||
}
|
||||
|
||||
// Let current state handle the message
|
||||
if (this.currentStateHandler) {
|
||||
await this.currentStateHandler.handleMessage(message)
|
||||
}
|
||||
|
||||
// Transition to appropriate next state based on current state
|
||||
if (this.currentState === States.WAITING) {
|
||||
await this.transitionTo(States.REACTING)
|
||||
} else if (this.currentState === States.REACTING) {
|
||||
await this.transitionTo(States.TYPING)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Called when user activity is detected
|
||||
* @returns {void}
|
||||
*/
|
||||
onUserActivity () {
|
||||
this.resetActivityTimer()
|
||||
|
||||
// Wake up if sleeping
|
||||
if (this.currentState === States.SLEEPING) {
|
||||
this.transitionTo(States.WAITING)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset the inactivity timer
|
||||
* @private
|
||||
* @returns {void}
|
||||
*/
|
||||
resetActivityTimer () {
|
||||
this.inactivityTimer = 0
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle inactivity timeout
|
||||
* @private
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async handleInactivity () {
|
||||
console.log('Inactivity detected, transitioning to sleep')
|
||||
await this.transitionTo(States.SLEEPING)
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the animation system (call every frame)
|
||||
* @param {number} deltaTime - Time elapsed since last update (ms)
|
||||
* @returns {void}
|
||||
*/
|
||||
update (deltaTime) {
|
||||
if (!this.initialized) return
|
||||
|
||||
// Update Three.js mixer
|
||||
this.mixer.update(deltaTime / 1000) // Convert to seconds
|
||||
|
||||
// Update current state
|
||||
if (this.currentStateHandler) {
|
||||
this.currentStateHandler.update(deltaTime)
|
||||
}
|
||||
|
||||
// Update inactivity timer
|
||||
this.inactivityTimer += deltaTime
|
||||
if (this.inactivityTimer > this.inactivityTimeout && this.currentState !== States.SLEEPING) {
|
||||
this.handleInactivity()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get an animation clip by name (supports all naming schemes)
|
||||
* @param {string} name - The animation clip name in any supported scheme
|
||||
* @returns {AnimationClip|undefined} The animation clip or undefined if not found
|
||||
*/
|
||||
getClip (name) {
|
||||
// First try direct lookup
|
||||
let clip = this.clips.get(name)
|
||||
if (clip) return clip
|
||||
|
||||
// Try to find clip using name mapper
|
||||
try {
|
||||
const allNames = this.nameMapper.getAllNames(name)
|
||||
|
||||
// Try each possible name variant
|
||||
for (const variant of Object.values(allNames)) {
|
||||
clip = this.clips.get(variant)
|
||||
if (clip) return clip
|
||||
}
|
||||
} catch (error) {
|
||||
// If name mapping fails, continue with pattern search
|
||||
console.debug(`Name mapping failed for "${name}":`, error.message)
|
||||
}
|
||||
|
||||
// Fall back to pattern matching for legacy compatibility
|
||||
const exactMatches = this.getClipsByPattern(`^${name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}$`)
|
||||
return exactMatches.length > 0 ? exactMatches[0] : undefined
|
||||
}
|
||||
|
||||
/**
|
||||
* Get animation clips matching a pattern
|
||||
* @param {string} pattern - Pattern to match (supports * wildcards)
|
||||
* @returns {AnimationClip[]} Array of matching clips
|
||||
*/
|
||||
getClipsByPattern (pattern) {
|
||||
const regex = new RegExp(pattern.replace(/\*/g, '.*'))
|
||||
const matches = []
|
||||
|
||||
for (const [name, clip] of this.clips) {
|
||||
if (regex.test(name)) {
|
||||
matches.push(clip)
|
||||
}
|
||||
}
|
||||
|
||||
return matches
|
||||
}
|
||||
|
||||
/**
|
||||
* Get an animation clip by name in a specific naming scheme
|
||||
* @param {string} name - The animation name
|
||||
* @param {string} [targetScheme] - Target scheme: 'legacy', 'artist', 'hierarchical', 'semantic'
|
||||
* @returns {AnimationClip|undefined} The animation clip or undefined if not found
|
||||
*/
|
||||
getClipByScheme (name, targetScheme) {
|
||||
try {
|
||||
if (targetScheme) {
|
||||
const convertedName = this.nameMapper.convert(name, targetScheme)
|
||||
return this.clips.get(convertedName)
|
||||
} else {
|
||||
return this.getClip(name)
|
||||
}
|
||||
} catch (error) {
|
||||
console.debug(`Scheme conversion failed for "${name}" to "${targetScheme}":`, error.message)
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all naming scheme variants for an animation
|
||||
* @param {string} name - The animation name in any scheme
|
||||
* @returns {Object} Object with all scheme variants: {legacy, artist, hierarchical, semantic}
|
||||
*/
|
||||
getAnimationNames (name) {
|
||||
try {
|
||||
return this.nameMapper.getAllNames(name)
|
||||
} catch (error) {
|
||||
console.warn(`Could not get animation name variants for "${name}":`, error.message)
|
||||
return {
|
||||
legacy: name,
|
||||
artist: name,
|
||||
hierarchical: name,
|
||||
semantic: name
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate an animation name and get suggestions if invalid
|
||||
* @param {string} name - The animation name to validate
|
||||
* @returns {Object} Validation result with isValid, scheme, error, and suggestions
|
||||
*/
|
||||
validateAnimationName (name) {
|
||||
try {
|
||||
return this.nameMapper.validateAnimationName(name)
|
||||
} catch (error) {
|
||||
return {
|
||||
isValid: false,
|
||||
scheme: 'unknown',
|
||||
error: error.message,
|
||||
suggestions: []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get available animations by state and emotion
|
||||
* @param {string} state - The state name (wait, react, type, sleep)
|
||||
* @param {string} [emotion] - The emotion name (angry, happy, sad, shocked, neutral)
|
||||
* @param {string} [scheme='semantic'] - The naming scheme to return
|
||||
* @returns {string[]} Array of animation names in the specified scheme
|
||||
*/
|
||||
getAnimationsByStateAndEmotion (state, emotion = '', scheme = 'semantic') {
|
||||
try {
|
||||
const animations = this.nameMapper.getAnimationsByFilter({ state, emotion })
|
||||
return animations.map(anim => anim[scheme] || anim.semantic)
|
||||
} catch (error) {
|
||||
console.warn(`Could not filter animations by state "${state}" and emotion "${emotion}":`, error.message)
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the current state name
|
||||
* @returns {string} The current state name
|
||||
*/
|
||||
getCurrentState () {
|
||||
return this.currentState
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the current state handler
|
||||
* @returns {StateHandler|null} The current state handler
|
||||
*/
|
||||
getCurrentStateHandler () {
|
||||
return this.currentStateHandler
|
||||
}
|
||||
|
||||
/**
|
||||
* Get available transitions from current state
|
||||
* @returns {string[]} Array of available state transitions
|
||||
*/
|
||||
getAvailableTransitions () {
|
||||
if (this.currentStateHandler) {
|
||||
return this.currentStateHandler.getAvailableTransitions()
|
||||
}
|
||||
return []
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all available animation clip names
|
||||
* @returns {string[]} Array of clip names
|
||||
*/
|
||||
getAvailableClips () {
|
||||
return Array.from(this.clips.keys())
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all available state names
|
||||
* @returns {string[]} Array of state names
|
||||
*/
|
||||
getAvailableStates () {
|
||||
return Array.from(this.states.keys())
|
||||
}
|
||||
|
||||
/**
|
||||
* Dispose of the animation system and clean up resources
|
||||
* @returns {void}
|
||||
*/
|
||||
dispose () {
|
||||
// Stop all animations
|
||||
for (const [, clip] of this.clips) {
|
||||
if (clip.action) {
|
||||
clip.action.stop()
|
||||
}
|
||||
}
|
||||
|
||||
// Clear caches
|
||||
this.clips.clear()
|
||||
this.states.clear()
|
||||
this.animationClipFactory.clearCache()
|
||||
|
||||
this.initialized = false
|
||||
console.log('Owen Animation System disposed')
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2>
|
||||
<h3>Modules</h3>
|
||||
<ul>
|
||||
<li><a href="module-StateHandler.html">StateHandler</a></li>
|
||||
<li><a href="module-animation.html">animation</a></li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationConstants.html"
|
||||
>animation/AnimationConstants</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationNameMapper.html"
|
||||
>animation/AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="module-constants.html">constants</a></li>
|
||||
<li><a href="module-core.html">core</a></li>
|
||||
<li><a href="module-factories.html">factories</a></li>
|
||||
<li><a href="module-loaders.html">loaders</a></li>
|
||||
<li><a href="module-owen.html">owen</a></li>
|
||||
<li><a href="module-states.html">states</a></li>
|
||||
</ul>
|
||||
<h3>Classes</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
|
||||
<li>
|
||||
<a href="module-animation.AnimationClipFactory.html"
|
||||
>AnimationClipFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
||||
>AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-core.OwenAnimationContext.html"
|
||||
>OwenAnimationContext</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-factories.OwenSystemFactory.html"
|
||||
>OwenSystemFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.GLTFAnimationLoader.html"
|
||||
>GLTFAnimationLoader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-states.StateFactory.html">StateFactory</a></li>
|
||||
<li>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<br class="clear" />
|
||||
|
||||
<footer>
|
||||
Documentation generated by
|
||||
<a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
|
||||
2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
<script src="scripts/linenumber.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
209
docs/factories_OwenSystemFactory.js.html
Normal file
209
docs/factories_OwenSystemFactory.js.html
Normal file
@ -0,0 +1,209 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>JSDoc: Source: factories/OwenSystemFactory.js</title>
|
||||
|
||||
<script src="scripts/prettify/prettify.js"></script>
|
||||
<script src="scripts/prettify/lang-css.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link
|
||||
type="text/css"
|
||||
rel="stylesheet"
|
||||
href="styles/prettify-tomorrow.css"
|
||||
/>
|
||||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1 class="page-title">Source: factories/OwenSystemFactory.js</h1>
|
||||
|
||||
<section>
|
||||
<article>
|
||||
<pre class="prettyprint source linenums"><code>/**
|
||||
* @fileoverview Main system factory for creating the complete Owen system
|
||||
* @module factories
|
||||
*/
|
||||
|
||||
import * as THREE from 'three'
|
||||
import { OwenAnimationContext } from '../core/OwenAnimationContext.js'
|
||||
import { AnimationClipFactory } from '../animation/AnimationClip.js'
|
||||
import { GLTFAnimationLoader } from '../loaders/AnimationLoader.js'
|
||||
import { StateFactory } from '../states/StateFactory.js'
|
||||
|
||||
/**
|
||||
* Main factory for creating the complete Owen animation system
|
||||
* @class
|
||||
*/
|
||||
export class OwenSystemFactory {
|
||||
/**
|
||||
* Create a complete Owen animation system
|
||||
* @param {THREE.Object3D} gltfModel - The loaded GLTF model
|
||||
* @param {THREE.Scene} scene - The Three.js scene
|
||||
* @param {Object} [options={}] - Configuration options
|
||||
* @param {THREE.GLTFLoader} [options.gltfLoader] - Custom GLTF loader
|
||||
* @returns {Promise<OwenAnimationContext>} The configured Owen system
|
||||
*/
|
||||
static async createOwenSystem (gltfModel, scene, options = {}) {
|
||||
// Create Three.js animation mixer
|
||||
const mixer = new THREE.AnimationMixer(gltfModel)
|
||||
|
||||
// Create GLTF loader if not provided
|
||||
const gltfLoader = options.gltfLoader || new THREE.GLTFLoader()
|
||||
|
||||
// Create animation loader
|
||||
const animationLoader = new GLTFAnimationLoader(gltfLoader)
|
||||
|
||||
// Preload animations from the model
|
||||
await animationLoader.preloadAnimations(gltfModel)
|
||||
|
||||
// Create animation clip factory
|
||||
const animationClipFactory = new AnimationClipFactory(animationLoader)
|
||||
|
||||
// Create state factory
|
||||
const stateFactory = new StateFactory()
|
||||
|
||||
// Create the main Owen context
|
||||
const owenContext = new OwenAnimationContext(
|
||||
gltfModel,
|
||||
mixer,
|
||||
animationClipFactory,
|
||||
stateFactory
|
||||
)
|
||||
|
||||
// Initialize the system
|
||||
await owenContext.initialize()
|
||||
|
||||
return owenContext
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a basic Owen system with minimal configuration
|
||||
* @param {THREE.Object3D} model - The 3D model
|
||||
* @returns {Promise<OwenAnimationContext>} The configured Owen system
|
||||
*/
|
||||
static async createBasicOwenSystem (model) {
|
||||
const scene = new THREE.Scene()
|
||||
scene.add(model)
|
||||
|
||||
return await OwenSystemFactory.createOwenSystem(model, scene)
|
||||
}
|
||||
|
||||
/**
|
||||
* Create an Owen system with custom state handlers
|
||||
* @param {THREE.Object3D} gltfModel - The loaded GLTF model
|
||||
* @param {THREE.Scene} scene - The Three.js scene
|
||||
* @param {Map<string, Function>} customStates - Map of state name to handler class
|
||||
* @returns {Promise<OwenAnimationContext>} The configured Owen system
|
||||
*/
|
||||
static async createCustomOwenSystem (gltfModel, scene, customStates) {
|
||||
const system = await OwenSystemFactory.createOwenSystem(gltfModel, scene)
|
||||
|
||||
// Register custom state handlers
|
||||
const stateFactory = system.stateFactory
|
||||
for (const [stateName, handlerClass] of customStates) {
|
||||
stateFactory.registerStateHandler(stateName, handlerClass)
|
||||
}
|
||||
|
||||
// Reinitialize with custom states
|
||||
system.initializeStates()
|
||||
|
||||
return system
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2>
|
||||
<h3>Modules</h3>
|
||||
<ul>
|
||||
<li><a href="module-StateHandler.html">StateHandler</a></li>
|
||||
<li><a href="module-animation.html">animation</a></li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationConstants.html"
|
||||
>animation/AnimationConstants</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationNameMapper.html"
|
||||
>animation/AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="module-constants.html">constants</a></li>
|
||||
<li><a href="module-core.html">core</a></li>
|
||||
<li><a href="module-factories.html">factories</a></li>
|
||||
<li><a href="module-loaders.html">loaders</a></li>
|
||||
<li><a href="module-owen.html">owen</a></li>
|
||||
<li><a href="module-states.html">states</a></li>
|
||||
</ul>
|
||||
<h3>Classes</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
|
||||
<li>
|
||||
<a href="module-animation.AnimationClipFactory.html"
|
||||
>AnimationClipFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
||||
>AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-core.OwenAnimationContext.html"
|
||||
>OwenAnimationContext</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-factories.OwenSystemFactory.html"
|
||||
>OwenSystemFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.GLTFAnimationLoader.html"
|
||||
>GLTFAnimationLoader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-states.StateFactory.html">StateFactory</a></li>
|
||||
<li>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<br class="clear" />
|
||||
|
||||
<footer>
|
||||
Documentation generated by
|
||||
<a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
|
||||
2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
<script src="scripts/linenumber.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
docs/fonts/OpenSans-Bold-webfont.eot
Normal file
BIN
docs/fonts/OpenSans-Bold-webfont.eot
Normal file
Binary file not shown.
1830
docs/fonts/OpenSans-Bold-webfont.svg
Normal file
1830
docs/fonts/OpenSans-Bold-webfont.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 116 KiB |
BIN
docs/fonts/OpenSans-Bold-webfont.woff
Normal file
BIN
docs/fonts/OpenSans-Bold-webfont.woff
Normal file
Binary file not shown.
BIN
docs/fonts/OpenSans-BoldItalic-webfont.eot
Normal file
BIN
docs/fonts/OpenSans-BoldItalic-webfont.eot
Normal file
Binary file not shown.
1830
docs/fonts/OpenSans-BoldItalic-webfont.svg
Normal file
1830
docs/fonts/OpenSans-BoldItalic-webfont.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 118 KiB |
BIN
docs/fonts/OpenSans-BoldItalic-webfont.woff
Normal file
BIN
docs/fonts/OpenSans-BoldItalic-webfont.woff
Normal file
Binary file not shown.
BIN
docs/fonts/OpenSans-Italic-webfont.eot
Normal file
BIN
docs/fonts/OpenSans-Italic-webfont.eot
Normal file
Binary file not shown.
1830
docs/fonts/OpenSans-Italic-webfont.svg
Normal file
1830
docs/fonts/OpenSans-Italic-webfont.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 120 KiB |
BIN
docs/fonts/OpenSans-Italic-webfont.woff
Normal file
BIN
docs/fonts/OpenSans-Italic-webfont.woff
Normal file
Binary file not shown.
BIN
docs/fonts/OpenSans-Light-webfont.eot
Normal file
BIN
docs/fonts/OpenSans-Light-webfont.eot
Normal file
Binary file not shown.
1831
docs/fonts/OpenSans-Light-webfont.svg
Normal file
1831
docs/fonts/OpenSans-Light-webfont.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 114 KiB |
BIN
docs/fonts/OpenSans-Light-webfont.woff
Normal file
BIN
docs/fonts/OpenSans-Light-webfont.woff
Normal file
Binary file not shown.
BIN
docs/fonts/OpenSans-LightItalic-webfont.eot
Normal file
BIN
docs/fonts/OpenSans-LightItalic-webfont.eot
Normal file
Binary file not shown.
1835
docs/fonts/OpenSans-LightItalic-webfont.svg
Normal file
1835
docs/fonts/OpenSans-LightItalic-webfont.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 120 KiB |
BIN
docs/fonts/OpenSans-LightItalic-webfont.woff
Normal file
BIN
docs/fonts/OpenSans-LightItalic-webfont.woff
Normal file
Binary file not shown.
BIN
docs/fonts/OpenSans-Regular-webfont.eot
Normal file
BIN
docs/fonts/OpenSans-Regular-webfont.eot
Normal file
Binary file not shown.
1831
docs/fonts/OpenSans-Regular-webfont.svg
Normal file
1831
docs/fonts/OpenSans-Regular-webfont.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 117 KiB |
BIN
docs/fonts/OpenSans-Regular-webfont.woff
Normal file
BIN
docs/fonts/OpenSans-Regular-webfont.woff
Normal file
Binary file not shown.
633
docs/index.html
Normal file
633
docs/index.html
Normal file
@ -0,0 +1,633 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>JSDoc: Home</title>
|
||||
|
||||
<script src="scripts/prettify/prettify.js"></script>
|
||||
<script src="scripts/prettify/lang-css.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link
|
||||
type="text/css"
|
||||
rel="stylesheet"
|
||||
href="styles/prettify-tomorrow.css"
|
||||
/>
|
||||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1 class="page-title">Home</h1>
|
||||
|
||||
<h3></h3>
|
||||
|
||||
<section>
|
||||
<article>
|
||||
<h1>Owen Animation System</h1>
|
||||
<p>
|
||||
A comprehensive Three.js animation system for character state
|
||||
management with clean architecture principles, dependency injection,
|
||||
and factory patterns.
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://gitea.kajkowalski.nl/kjanat/Owen/issues"
|
||||
><img
|
||||
src="https://img.shields.io/gitea/issues/all/kjanat/Owen?gitea_url=https%3A%2F%2Fgitea.kajkowalski.nl%2F"
|
||||
alt="Gitea Issues"
|
||||
/></a>
|
||||
<a href="https://gitea.kajkowalski.nl/kjanat/Owen/pulls"
|
||||
><img
|
||||
src="https://img.shields.io/gitea/pull-requests/all/kjanat/Owen?gitea_url=https%3A%2F%2Fgitea.kajkowalski.nl%2F"
|
||||
alt="Gitea Pull Requests"
|
||||
/></a>
|
||||
<a href="https://gitea.kajkowalski.nl/kjanat/Owen/tags"
|
||||
><img
|
||||
src="https://img.shields.io/gitea/v/release/kjanat/Owen?gitea_url=https%3A%2F%2Fgitea.kajkowalski.nl&include_prereleases&sort=semver"
|
||||
alt="Gitea Release"
|
||||
/></a>
|
||||
</p>
|
||||
<h2>🎯 Overview</h2>
|
||||
<p>
|
||||
The Owen Animation System is a sophisticated character animation
|
||||
framework built for Three.js that manages complex state machines,
|
||||
emotional responses, and animation transitions. It's designed with
|
||||
clean architecture principles to be maintainable, extensible, and
|
||||
testable.
|
||||
</p>
|
||||
<h2>✨ Key Features</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>🤖 State Machine Implementation</strong> - Complete state
|
||||
management system with <code>Wait</code>, <code>React</code>,
|
||||
<code>Type</code>, and <code>Sleep</code> states
|
||||
</li>
|
||||
<li>
|
||||
<strong>😊 Emotional Response System</strong> - Analyzes user
|
||||
input to determine appropriate emotional animations
|
||||
</li>
|
||||
<li>
|
||||
<strong>🔄 Animation Transition Management</strong> - Smooth
|
||||
transitions between states with fade in/out support
|
||||
</li>
|
||||
<li>
|
||||
<strong>📝 Multi-Scheme Animation Naming</strong> - Supports
|
||||
legacy, artist-friendly, hierarchical, and semantic naming schemes
|
||||
</li>
|
||||
<li>
|
||||
<strong>🎨 Artist-Friendly Workflow</strong> - Blender-compatible
|
||||
naming for 3D artists (<code>Owen_WaitIdle</code>,
|
||||
<code>Owen_ReactHappy</code>)
|
||||
</li>
|
||||
<li>
|
||||
<strong>👨💻 Developer Experience</strong> - Type-safe constants and
|
||||
semantic naming (<code>OwenWaitIdleLoop</code>,
|
||||
<code>OwenReactAngryTransition</code>)
|
||||
</li>
|
||||
<li>
|
||||
<strong>🏗️ Clean Architecture</strong> - Uses dependency
|
||||
injection, factory patterns, and separation of concerns
|
||||
</li>
|
||||
<li>
|
||||
<strong>⚡ Performance Optimized</strong> - Efficient animation
|
||||
caching and resource management
|
||||
</li>
|
||||
<li>
|
||||
<strong>🧩 Extensible Design</strong> - Easy to add new states,
|
||||
emotions, and animation types
|
||||
</li>
|
||||
<li>
|
||||
<strong>🔄 Backward Compatibility</strong> - Legacy naming scheme
|
||||
continues to work alongside new schemes
|
||||
</li>
|
||||
</ul>
|
||||
<h2>🚀 Installation</h2>
|
||||
<h3>Prerequisites</h3>
|
||||
<ul>
|
||||
<li>Node.js 16.0.0 or higher</li>
|
||||
<li>
|
||||
Three.js compatible 3D model with animations (GLTF/GLB format
|
||||
recommended)
|
||||
</li>
|
||||
</ul>
|
||||
<h3>Install Dependencies</h3>
|
||||
<pre class="prettyprint source lang-bash"><code># Clone the repository
|
||||
git clone https://gitea.kajkowalski.nl/kjanat/Owen.git
|
||||
cd Owen
|
||||
|
||||
# Install dependencies
|
||||
npm install
|
||||
|
||||
# Install dev dependencies
|
||||
npm install --include dev
|
||||
</code></pre>
|
||||
<h2>📖 Usage</h2>
|
||||
<h3>Basic Usage</h3>
|
||||
<pre
|
||||
class="prettyprint source lang-javascript"
|
||||
><code>import * as THREE from "three";
|
||||
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
|
||||
import { OwenSystemFactory } from "owen";
|
||||
|
||||
// Load your 3D model
|
||||
const loader = new GLTFLoader();
|
||||
const gltf = await loader.loadAsync("path/to/your-model.gltf");
|
||||
|
||||
// Create a Three.js scene
|
||||
const scene = new THREE.Scene();
|
||||
scene.add(gltf.scene);
|
||||
|
||||
// Create the Owen animation system
|
||||
const owenSystem = await OwenSystemFactory.createOwenSystem(gltf, scene);
|
||||
|
||||
// Handle user messages
|
||||
await owenSystem.handleUserMessage("Hello Owen!");
|
||||
|
||||
// Update in your render loop
|
||||
function animate() {
|
||||
const deltaTime = clock.getDelta() * 1000; // Convert to milliseconds
|
||||
owenSystem.update(deltaTime);
|
||||
|
||||
renderer.render(scene, camera);
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>
|
||||
[!NOTE] Replace <code>path/to/your-model.gltf</code> with the
|
||||
actual path to your 3D character model. The system is designed to
|
||||
work with any GLTF model that follows the animation naming
|
||||
convention.
|
||||
</p>
|
||||
</blockquote>
|
||||
<h3>Advanced Usage</h3>
|
||||
<pre
|
||||
class="prettyprint source lang-javascript"
|
||||
><code>import { OwenSystemFactory, States, Emotions, StateHandler } from "owen";
|
||||
|
||||
// Create custom state handler
|
||||
class CustomStateHandler extends StateHandler {
|
||||
async enter(fromState, emotion) {
|
||||
console.log(`Entering custom state from ${fromState}`);
|
||||
// Your custom logic here
|
||||
}
|
||||
|
||||
async exit(toState, emotion) {
|
||||
console.log(`Exiting custom state to ${toState}`);
|
||||
// Your custom logic here
|
||||
}
|
||||
}
|
||||
|
||||
// Register custom states
|
||||
const customStates = new Map();
|
||||
customStates.set("custom", CustomStateHandler);
|
||||
|
||||
// Create system with custom states
|
||||
const owenSystem = await OwenSystemFactory.createCustomOwenSystem(gltfModel, scene, customStates);
|
||||
|
||||
// Manual state transitions
|
||||
await owenSystem.transitionTo(States.REACTING, Emotions.HAPPY);
|
||||
</code></pre>
|
||||
<h2>🎨 Multi-Scheme Animation Naming</h2>
|
||||
<p>
|
||||
Owen supports
|
||||
<strong>four different animation naming schemes</strong> to
|
||||
accommodate different workflows and preferences:
|
||||
</p>
|
||||
<h3>Naming Schemes</h3>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Scheme</th>
|
||||
<th>Format</th>
|
||||
<th>Example</th>
|
||||
<th>Use Case</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Legacy</strong></td>
|
||||
<td><code>{state}_{emotion}_{type}</code></td>
|
||||
<td><code>wait_idle_L</code></td>
|
||||
<td>Backward compatibility</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Artist</strong></td>
|
||||
<td><code>Owen_{Action}</code></td>
|
||||
<td><code>Owen_WaitIdle</code></td>
|
||||
<td>Blender-friendly for 3D artists</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Hierarchical</strong></td>
|
||||
<td><code>owen.{category}.{state}...</code></td>
|
||||
<td><code>owen.state.wait.idle.loop</code></td>
|
||||
<td>Structured projects</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Semantic</strong></td>
|
||||
<td><code>Owen{StateAction}{Type}</code></td>
|
||||
<td><code>OwenWaitIdleLoop</code></td>
|
||||
<td>Developer-friendly</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>Usage Examples</h3>
|
||||
<pre
|
||||
class="prettyprint source lang-javascript"
|
||||
><code>// All of these refer to the same animation:
|
||||
const clip1 = owenSystem.getClip('wait_idle_L'); // Legacy
|
||||
const clip2 = owenSystem.getClip('Owen_WaitIdle'); // Artist
|
||||
const clip3 = owenSystem.getClip('owen.state.wait.idle.loop'); // Hierarchical
|
||||
const clip4 = owenSystem.getClip('OwenWaitIdleLoop'); // Semantic
|
||||
|
||||
// Convert between schemes
|
||||
import { convertAnimationName, SemanticAnimations } from 'owen';
|
||||
|
||||
const artistName = convertAnimationName('wait_idle_L', 'artist');
|
||||
// Returns: 'Owen_WaitIdle'
|
||||
|
||||
// Use type-safe constants
|
||||
const animation = SemanticAnimations.WAIT_IDLE_LOOP; // 'OwenWaitIdleLoop'
|
||||
</code></pre>
|
||||
<h3>For 3D Artists (Blender Workflow)</h3>
|
||||
<pre
|
||||
class="prettyprint source lang-javascript"
|
||||
><code>// Use artist-friendly names in Blender:
|
||||
// Owen_WaitIdle, Owen_ReactHappy, Owen_TypeFast, etc.
|
||||
// System automatically handles conversion!
|
||||
|
||||
const clip = owenSystem.getClip('Owen_ReactAngry'); // Just works!
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>
|
||||
[!TIP] See the
|
||||
<a href="./MULTI_SCHEME_GUIDE.md">Multi-Scheme Guide</a> for
|
||||
complete documentation and examples.
|
||||
</p>
|
||||
</blockquote>
|
||||
<h2>🎮 Animation Naming Convention (Legacy)</h2>
|
||||
<p>
|
||||
The system maintains backward compatibility with the original naming
|
||||
convention:
|
||||
</p>
|
||||
<p>The system expects animations to follow this naming convention:</p>
|
||||
<pre class="prettyprint source lang-txt"><code>[state]_[action]_[type]
|
||||
[state]_[action]2[toState]_[emotion]_T
|
||||
</code></pre>
|
||||
<h3>Examples</h3>
|
||||
<ul>
|
||||
<li><code>wait_idle_L</code> - Wait state idle loop</li>
|
||||
<li><code>wait_quirk1_Q</code> - Wait state quirk animation</li>
|
||||
<li>
|
||||
<code>react_angry2type_an_T</code> - Transition from react to type
|
||||
with angry emotion
|
||||
</li>
|
||||
<li>
|
||||
<code>type_happy_L</code> - Type state with happy emotion loop
|
||||
</li>
|
||||
<li><code>sleep_wakeup_T</code> - Sleep wake up transition</li>
|
||||
</ul>
|
||||
<h3>Animation Types</h3>
|
||||
<ul>
|
||||
<li><code>L</code> - Loop animation</li>
|
||||
<li><code>Q</code> - Quirk animation</li>
|
||||
<li><code>T</code> - Transition animation</li>
|
||||
<li><code>NL</code> - Nested loop</li>
|
||||
<li><code>NQ</code> - Nested quirk</li>
|
||||
</ul>
|
||||
<h3>Emotions</h3>
|
||||
<ul>
|
||||
<li><code>an</code> - Angry</li>
|
||||
<li><code>sh</code> - Shocked</li>
|
||||
<li><code>ha</code> - Happy</li>
|
||||
<li><code>sa</code> - Sad</li>
|
||||
</ul>
|
||||
<h2>🏗️ Architecture</h2>
|
||||
<h3><strong>Dependency Injection</strong></h3>
|
||||
<ul>
|
||||
<li>
|
||||
<code>OwenAnimationContext</code> receives dependencies through
|
||||
constructor injection
|
||||
</li>
|
||||
<li>State handlers are injected with required context</li>
|
||||
<li>Animation loaders are injected into factories</li>
|
||||
</ul>
|
||||
<h3><strong>Factory Patterns</strong></h3>
|
||||
<ul>
|
||||
<li>
|
||||
<code>AnimationClipFactory</code> - Creates animation clips with
|
||||
metadata parsing
|
||||
</li>
|
||||
<li>
|
||||
<code>StateFactory</code> - Creates state handlers dynamically
|
||||
</li>
|
||||
<li>
|
||||
<code>OwenSystemFactory</code> - Main factory that assembles the
|
||||
complete system
|
||||
</li>
|
||||
</ul>
|
||||
<h3><strong>State Machine</strong></h3>
|
||||
<ul>
|
||||
<li>Each state has its own handler class with entry/exit logic</li>
|
||||
<li>States manage their own transitions and behaviors</li>
|
||||
<li>
|
||||
Emotional transitions are handled with proper animation sequencing
|
||||
</li>
|
||||
</ul>
|
||||
<h2>📁 Project Structure</h2>
|
||||
<pre class="prettyprint source lang-sh"><code>Owen/
|
||||
├── src/
|
||||
│ ├── constants.js # Animation types, states, emotions
|
||||
│ ├── index.js # Main entry point
|
||||
│ ├── animation/
|
||||
│ │ └── AnimationClip.js # Core animation classes
|
||||
│ ├── core/
|
||||
│ │ └── OwenAnimationContext.js # Main system controller
|
||||
│ ├── factories/
|
||||
│ │ └── OwenSystemFactory.js # System factory
|
||||
│ ├── loaders/
|
||||
│ │ └── AnimationLoader.js # Animation loading interfaces
|
||||
│ └── states/
|
||||
│ ├── StateHandler.js # Base state handler
|
||||
│ ├── StateFactory.js # State factory
|
||||
│ ├── WaitStateHandler.js # Wait state implementation
|
||||
│ ├── ReactStateHandler.js # React state implementation
|
||||
│ ├── TypeStateHandler.js # Type state implementation
|
||||
│ └── SleepStateHandler.js # Sleep state implementation
|
||||
├── examples/
|
||||
│ ├── index.html # Demo HTML page
|
||||
│ └── basic-demo.js # Basic usage example
|
||||
├── package.json
|
||||
├── vite.config.js
|
||||
├── jsdoc.config.json
|
||||
└── README.md
|
||||
</code></pre>
|
||||
<h2>🛠️ Development</h2>
|
||||
<h3>Running the Development Server</h3>
|
||||
<pre
|
||||
class="prettyprint source lang-bash"
|
||||
><code># Start the development server
|
||||
npm run dev
|
||||
</code></pre>
|
||||
<p>
|
||||
This will start a Vite development server and open the basic demo at
|
||||
<code>http://localhost:3000</code>.
|
||||
</p>
|
||||
<h3>Building for Production</h3>
|
||||
<pre class="prettyprint source lang-bash"><code># Build the project
|
||||
npm run build
|
||||
</code></pre>
|
||||
<h3>Linting</h3>
|
||||
<pre class="prettyprint source lang-bash"><code># Run ESLint
|
||||
npm run lint
|
||||
|
||||
# Fix linting issues automatically
|
||||
npm run lint:fix
|
||||
</code></pre>
|
||||
<h3>Generating Documentation</h3>
|
||||
<pre
|
||||
class="prettyprint source lang-bash"
|
||||
><code># Generate JSDoc documentation
|
||||
npm run docs
|
||||
</code></pre>
|
||||
<p>
|
||||
Documentation will be generated in the <code>docs/</code> directory.
|
||||
</p>
|
||||
<h3>Project Scripts</h3>
|
||||
<ul>
|
||||
<li><code>npm run dev</code> - Start development server</li>
|
||||
<li><code>npm run build</code> - Build for production</li>
|
||||
<li><code>npm run preview</code> - Preview production build</li>
|
||||
<li><code>npm run lint</code> - Run StandardJS linting</li>
|
||||
<li><code>npm run lint:fix</code> - Fix StandardJS issues</li>
|
||||
<li><code>npm run docs</code> - Generate JSDoc documentation</li>
|
||||
<li><code>npm run format</code> - Format code with Prettier</li>
|
||||
</ul>
|
||||
<h2>🎮 Demo Controls</h2>
|
||||
<p>The basic demo includes these keyboard controls:</p>
|
||||
<ul>
|
||||
<li><strong>1</strong> - Transition to Wait state</li>
|
||||
<li><strong>2</strong> - Transition to React state</li>
|
||||
<li><strong>3</strong> - Transition to Type state</li>
|
||||
<li><strong>4</strong> - Transition to Sleep state</li>
|
||||
<li><strong>Space</strong> - Send random test message</li>
|
||||
<li><strong>Click</strong> - Register user activity</li>
|
||||
</ul>
|
||||
<h2>🔧 Configuration</h2>
|
||||
<h3>Customizing Emotions</h3>
|
||||
<p>
|
||||
You can extend the emotion system by modifying the message analysis:
|
||||
</p>
|
||||
<pre
|
||||
class="prettyprint source lang-javascript"
|
||||
><code>import { ReactStateHandler } from "owen";
|
||||
|
||||
class CustomReactHandler extends ReactStateHandler {
|
||||
analyzeMessageEmotion(message) {
|
||||
// Your custom emotion analysis logic
|
||||
if (message.includes("excited")) {
|
||||
return Emotions.HAPPY;
|
||||
}
|
||||
return super.analyzeMessageEmotion(message);
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
<h3>Adjusting Timing</h3>
|
||||
<p>Configure timing values in your application:</p>
|
||||
<pre
|
||||
class="prettyprint source lang-javascript"
|
||||
><code>import { Config } from "owen";
|
||||
|
||||
// Modify default values
|
||||
Config.QUIRK_INTERVAL = 8000; // 8 seconds between quirks
|
||||
Config.INACTIVITY_TIMEOUT = 120000; // 2 minutes until sleep
|
||||
</code></pre>
|
||||
<h2>🐛 Troubleshooting</h2>
|
||||
<h3>Common Issues</h3>
|
||||
<ol>
|
||||
<li><strong>"Animation not found" errors</strong></li>
|
||||
</ol>
|
||||
<ul>
|
||||
<li>
|
||||
Ensure your 3D model contains animations with the correct naming
|
||||
convention
|
||||
</li>
|
||||
<li>
|
||||
Check that animations are properly exported in your GLTF file
|
||||
</li>
|
||||
</ul>
|
||||
<ol start="2">
|
||||
<li><strong>State transitions not working</strong></li>
|
||||
</ol>
|
||||
<ul>
|
||||
<li>Verify that transition animations exist in your model</li>
|
||||
<li>Check console for error messages about missing clips</li>
|
||||
</ul>
|
||||
<ol start="3">
|
||||
<li><strong>Performance issues</strong></li>
|
||||
</ol>
|
||||
<ul>
|
||||
<li>
|
||||
Ensure you're calling <code>owenSystem.update()</code> in your
|
||||
render loop
|
||||
</li>
|
||||
<li>Check that unused animations are properly disposed</li>
|
||||
</ul>
|
||||
<h3>Debug Mode</h3>
|
||||
<p>
|
||||
Enable debug logging by opening browser console. The system logs
|
||||
state transitions and important events.
|
||||
</p>
|
||||
<h2>🤝 Contributing</h2>
|
||||
<ol>
|
||||
<li>Fork the repository</li>
|
||||
<li>
|
||||
Create a feature branch:
|
||||
<code>git checkout -b feature/new-feature</code>
|
||||
</li>
|
||||
<li>
|
||||
Commit your changes: <code>git commit -am 'Add new feature'</code>
|
||||
</li>
|
||||
<li>
|
||||
Push to the branch:
|
||||
<code>git push origin feature/new-feature</code>
|
||||
</li>
|
||||
<li>Submit a pull request</li>
|
||||
</ol>
|
||||
<h3>Code Style</h3>
|
||||
<ul>
|
||||
<li>Follow the existing ESLint configuration</li>
|
||||
<li>Add JSDoc comments for all public methods</li>
|
||||
<li>Write unit tests for new features</li>
|
||||
<li>Maintain the existing architecture patterns</li>
|
||||
</ul>
|
||||
<h2>📄 License</h2>
|
||||
<p>This project is dual-licensed under your choice of:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Open Source/Non-Commercial Use</strong>: AGPL-3.0 - see
|
||||
the <a href="LICENSE.AGPL">LICENSE.AGPL</a> file for details.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Commercial/Enterprise Use</strong>: Commercial License -
|
||||
see the <a href="LICENSE.COMMERCIAL">LICENSE.COMMERCIAL</a> file
|
||||
for details. Requires a paid commercial license. Please contact us
|
||||
at [email] for pricing and terms.
|
||||
</li>
|
||||
</ul>
|
||||
<h3>Quick Guide</h3>
|
||||
<ul>
|
||||
<li>✅ Personal/educational use → Use under AGPL-3.0</li>
|
||||
<li>✅ Open source projects → Use under AGPL-3.0</li>
|
||||
<li>✅ Commercial/proprietary use → Purchase commercial license</li>
|
||||
<li>
|
||||
❌ SaaS without source disclosure → Purchase commercial license
|
||||
</li>
|
||||
</ul>
|
||||
<h2>🙏 Acknowledgments</h2>
|
||||
<ul>
|
||||
<li>
|
||||
Built with
|
||||
<a
|
||||
href="https://threejs.org/"
|
||||
title="Three.js - JavaScript 3D Library"
|
||||
>Three.js</a
|
||||
>
|
||||
</li>
|
||||
<li>Inspired by modern character animation systems</li>
|
||||
<li>Uses clean architecture principles from Robert C. Martin</li>
|
||||
</ul>
|
||||
<!-- LINK DEFINITIONS -->
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2>
|
||||
<h3>Modules</h3>
|
||||
<ul>
|
||||
<li><a href="module-StateHandler.html">StateHandler</a></li>
|
||||
<li><a href="module-animation.html">animation</a></li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationConstants.html"
|
||||
>animation/AnimationConstants</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationNameMapper.html"
|
||||
>animation/AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="module-constants.html">constants</a></li>
|
||||
<li><a href="module-core.html">core</a></li>
|
||||
<li><a href="module-factories.html">factories</a></li>
|
||||
<li><a href="module-loaders.html">loaders</a></li>
|
||||
<li><a href="module-owen.html">owen</a></li>
|
||||
<li><a href="module-states.html">states</a></li>
|
||||
</ul>
|
||||
<h3>Classes</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
|
||||
<li>
|
||||
<a href="module-animation.AnimationClipFactory.html"
|
||||
>AnimationClipFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
||||
>AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-core.OwenAnimationContext.html"
|
||||
>OwenAnimationContext</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-factories.OwenSystemFactory.html"
|
||||
>OwenSystemFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.GLTFAnimationLoader.html"
|
||||
>GLTFAnimationLoader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-states.StateFactory.html">StateFactory</a></li>
|
||||
<li>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<br class="clear" />
|
||||
|
||||
<footer>
|
||||
Documentation generated by
|
||||
<a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
|
||||
2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
<script src="scripts/linenumber.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
176
docs/index.js.html
Normal file
176
docs/index.js.html
Normal file
@ -0,0 +1,176 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>JSDoc: Source: index.js</title>
|
||||
|
||||
<script src="scripts/prettify/prettify.js"></script>
|
||||
<script src="scripts/prettify/lang-css.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link
|
||||
type="text/css"
|
||||
rel="stylesheet"
|
||||
href="styles/prettify-tomorrow.css"
|
||||
/>
|
||||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1 class="page-title">Source: index.js</h1>
|
||||
|
||||
<section>
|
||||
<article>
|
||||
<pre class="prettyprint source linenums"><code>/**
|
||||
* @fileoverview Main entry point for the Owen Animation System
|
||||
* @module owen
|
||||
*/
|
||||
|
||||
// Core exports
|
||||
// Import for default export
|
||||
import { OwenSystemFactory } from './factories/OwenSystemFactory.js'
|
||||
import { OwenAnimationContext } from './core/OwenAnimationContext.js'
|
||||
import { States, Emotions, ClipTypes, Config } from './constants.js'
|
||||
|
||||
export { OwenAnimationContext } from './core/OwenAnimationContext.js'
|
||||
|
||||
// Animation system exports
|
||||
export { AnimationClip, AnimationClipFactory } from './animation/AnimationClip.js'
|
||||
|
||||
// Multi-scheme animation naming exports
|
||||
export { AnimationNameMapper } from './animation/AnimationNameMapper.js'
|
||||
export {
|
||||
LegacyAnimations,
|
||||
ArtistAnimations,
|
||||
HierarchicalAnimations,
|
||||
SemanticAnimations,
|
||||
NamingSchemes,
|
||||
convertAnimationName,
|
||||
getAllAnimationNames,
|
||||
validateAnimationName,
|
||||
getAnimationsByStateAndEmotion
|
||||
} from './animation/AnimationConstants.js'
|
||||
|
||||
// Loader exports
|
||||
export { AnimationLoader, GLTFAnimationLoader } from './loaders/AnimationLoader.js'
|
||||
|
||||
// State system exports
|
||||
export { StateHandler } from './states/StateHandler.js'
|
||||
export { WaitStateHandler } from './states/WaitStateHandler.js'
|
||||
export { ReactStateHandler } from './states/ReactStateHandler.js'
|
||||
export { TypeStateHandler } from './states/TypeStateHandler.js'
|
||||
export { SleepStateHandler } from './states/SleepStateHandler.js'
|
||||
export { StateFactory } from './states/StateFactory.js'
|
||||
|
||||
// Factory exports
|
||||
export { OwenSystemFactory } from './factories/OwenSystemFactory.js'
|
||||
|
||||
// Constants exports
|
||||
export { ClipTypes, States, Emotions, Config } from './constants.js'
|
||||
|
||||
/**
|
||||
* Default export - the main factory for easy usage
|
||||
*/
|
||||
export default {
|
||||
OwenSystemFactory,
|
||||
OwenAnimationContext,
|
||||
States,
|
||||
Emotions,
|
||||
ClipTypes,
|
||||
Config
|
||||
}
|
||||
</code></pre>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2>
|
||||
<h3>Modules</h3>
|
||||
<ul>
|
||||
<li><a href="module-StateHandler.html">StateHandler</a></li>
|
||||
<li><a href="module-animation.html">animation</a></li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationConstants.html"
|
||||
>animation/AnimationConstants</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationNameMapper.html"
|
||||
>animation/AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="module-constants.html">constants</a></li>
|
||||
<li><a href="module-core.html">core</a></li>
|
||||
<li><a href="module-factories.html">factories</a></li>
|
||||
<li><a href="module-loaders.html">loaders</a></li>
|
||||
<li><a href="module-owen.html">owen</a></li>
|
||||
<li><a href="module-states.html">states</a></li>
|
||||
</ul>
|
||||
<h3>Classes</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
|
||||
<li>
|
||||
<a href="module-animation.AnimationClipFactory.html"
|
||||
>AnimationClipFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
||||
>AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-core.OwenAnimationContext.html"
|
||||
>OwenAnimationContext</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-factories.OwenSystemFactory.html"
|
||||
>OwenSystemFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.GLTFAnimationLoader.html"
|
||||
>GLTFAnimationLoader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-states.StateFactory.html">StateFactory</a></li>
|
||||
<li>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<br class="clear" />
|
||||
|
||||
<footer>
|
||||
Documentation generated by
|
||||
<a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
|
||||
2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
<script src="scripts/linenumber.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
212
docs/loaders_AnimationLoader.js.html
Normal file
212
docs/loaders_AnimationLoader.js.html
Normal file
@ -0,0 +1,212 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>JSDoc: Source: loaders/AnimationLoader.js</title>
|
||||
|
||||
<script src="scripts/prettify/prettify.js"></script>
|
||||
<script src="scripts/prettify/lang-css.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link
|
||||
type="text/css"
|
||||
rel="stylesheet"
|
||||
href="styles/prettify-tomorrow.css"
|
||||
/>
|
||||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1 class="page-title">Source: loaders/AnimationLoader.js</h1>
|
||||
|
||||
<section>
|
||||
<article>
|
||||
<pre class="prettyprint source linenums"><code>/**
|
||||
* @fileoverview Animation loader interfaces and implementations
|
||||
* @module loaders
|
||||
*/
|
||||
|
||||
/**
|
||||
* Abstract base class for animation loaders
|
||||
* @abstract
|
||||
* @class
|
||||
*/
|
||||
export class AnimationLoader {
|
||||
/**
|
||||
* Load an animation by name
|
||||
* @abstract
|
||||
* @param {string} _name - The animation name to load (unused in base class)
|
||||
* @returns {Promise<THREE.AnimationClip>} The loaded animation clip
|
||||
* @throws {Error} Must be implemented by subclasses
|
||||
*/
|
||||
async loadAnimation (_name) {
|
||||
throw new Error('loadAnimation method must be implemented by subclasses')
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* GLTF animation loader implementation
|
||||
* @class
|
||||
* @extends AnimationLoader
|
||||
*/
|
||||
export class GLTFAnimationLoader extends AnimationLoader {
|
||||
/**
|
||||
* Create a GLTF animation loader
|
||||
* @param {THREE.GLTFLoader} gltfLoader - The Three.js GLTF loader instance
|
||||
*/
|
||||
constructor (gltfLoader) {
|
||||
super()
|
||||
|
||||
/**
|
||||
* The Three.js GLTF loader
|
||||
* @type {THREE.GLTFLoader}
|
||||
*/
|
||||
this.gltfLoader = gltfLoader
|
||||
|
||||
/**
|
||||
* Cache for loaded animations
|
||||
* @type {Map<string, THREE.AnimationClip>}
|
||||
*/
|
||||
this.animationCache = new Map()
|
||||
}
|
||||
|
||||
/**
|
||||
* Load an animation from GLTF by name
|
||||
* @param {string} name - The animation name to load
|
||||
* @returns {Promise<THREE.AnimationClip>} The loaded animation clip
|
||||
* @throws {Error} If animation is not found
|
||||
*/
|
||||
async loadAnimation (name) {
|
||||
if (this.animationCache.has(name)) {
|
||||
return this.animationCache.get(name)
|
||||
}
|
||||
|
||||
// In a real implementation, this would load from GLTF files
|
||||
// For now, we'll assume animations are already loaded in the model
|
||||
throw new Error(`Animation '${name}' not found. Implement GLTF loading logic.`)
|
||||
}
|
||||
|
||||
/**
|
||||
* Preload animations from a GLTF model
|
||||
* @param {Object} gltfModel - The loaded GLTF model
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async preloadAnimations (gltfModel) {
|
||||
if (gltfModel.animations) {
|
||||
for (const animation of gltfModel.animations) {
|
||||
this.animationCache.set(animation.name, animation)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear the animation cache
|
||||
* @returns {void}
|
||||
*/
|
||||
clearCache () {
|
||||
this.animationCache.clear()
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all cached animation names
|
||||
* @returns {string[]} Array of cached animation names
|
||||
*/
|
||||
getCachedAnimationNames () {
|
||||
return Array.from(this.animationCache.keys())
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2>
|
||||
<h3>Modules</h3>
|
||||
<ul>
|
||||
<li><a href="module-StateHandler.html">StateHandler</a></li>
|
||||
<li><a href="module-animation.html">animation</a></li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationConstants.html"
|
||||
>animation/AnimationConstants</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationNameMapper.html"
|
||||
>animation/AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="module-constants.html">constants</a></li>
|
||||
<li><a href="module-core.html">core</a></li>
|
||||
<li><a href="module-factories.html">factories</a></li>
|
||||
<li><a href="module-loaders.html">loaders</a></li>
|
||||
<li><a href="module-owen.html">owen</a></li>
|
||||
<li><a href="module-states.html">states</a></li>
|
||||
</ul>
|
||||
<h3>Classes</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
|
||||
<li>
|
||||
<a href="module-animation.AnimationClipFactory.html"
|
||||
>AnimationClipFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
||||
>AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-core.OwenAnimationContext.html"
|
||||
>OwenAnimationContext</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-factories.OwenSystemFactory.html"
|
||||
>OwenSystemFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.GLTFAnimationLoader.html"
|
||||
>GLTFAnimationLoader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-states.StateFactory.html">StateFactory</a></li>
|
||||
<li>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<br class="clear" />
|
||||
|
||||
<footer>
|
||||
Documentation generated by
|
||||
<a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
|
||||
2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
<script src="scripts/linenumber.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
839
docs/module-StateHandler.StateHandler.html
Normal file
839
docs/module-StateHandler.StateHandler.html
Normal file
@ -0,0 +1,839 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>JSDoc: Class: StateHandler</title>
|
||||
|
||||
<script src="scripts/prettify/prettify.js"></script>
|
||||
<script src="scripts/prettify/lang-css.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link
|
||||
type="text/css"
|
||||
rel="stylesheet"
|
||||
href="styles/prettify-tomorrow.css"
|
||||
/>
|
||||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1 class="page-title">Class: StateHandler</h1>
|
||||
|
||||
<section>
|
||||
<header>
|
||||
<h2>
|
||||
<span class="attribs"
|
||||
><span class="type-signature">(abstract) </span></span
|
||||
>
|
||||
<span class="ancestors"
|
||||
><a href="module-StateHandler.html">StateHandler</a>.</span
|
||||
>StateHandler<span class="signature">(stateName, context)</span
|
||||
><span class="type-signature"></span>
|
||||
</h2>
|
||||
|
||||
<div class="class-description">
|
||||
<p>Abstract base class for state handlers</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<article>
|
||||
<div class="container-overview">
|
||||
<h2>Constructor</h2>
|
||||
|
||||
<h4 class="name" id="StateHandler">
|
||||
<span class="type-signature">(abstract) </span>new
|
||||
StateHandler<span class="signature">(stateName, context)</span
|
||||
><span class="type-signature"></span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Create a state handler</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>stateName</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="description last"><p>The name of the state</p></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="name"><code>context</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">OwenAnimationContext</span>
|
||||
</td>
|
||||
|
||||
<td class="description last"><p>The animation context</p></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_StateHandler.js.html"
|
||||
>states/StateHandler.js</a
|
||||
>, <a href="states_StateHandler.js.html#line13">line 13</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<h3 class="subsection-title">Members</h3>
|
||||
|
||||
<h4 class="name" id="context">
|
||||
<span class="type-signature"></span>context<span
|
||||
class="type-signature"
|
||||
>
|
||||
:OwenAnimationContext</span
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>The animation context</p>
|
||||
</div>
|
||||
|
||||
<h5>Type:</h5>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="param-type">OwenAnimationContext</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_StateHandler.js.html"
|
||||
>states/StateHandler.js</a
|
||||
>, <a href="states_StateHandler.js.html#line30">line 30</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="currentClip">
|
||||
<span class="type-signature"></span>currentClip<span
|
||||
class="type-signature"
|
||||
>
|
||||
:AnimationClip|null</span
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Currently playing animation clip</p>
|
||||
</div>
|
||||
|
||||
<h5>Type:</h5>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="param-type">AnimationClip</span>
|
||||
|
|
||||
|
||||
<span class="param-type">null</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_StateHandler.js.html"
|
||||
>states/StateHandler.js</a
|
||||
>, <a href="states_StateHandler.js.html#line36">line 36</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="nestedState">
|
||||
<span class="type-signature"></span>nestedState<span
|
||||
class="type-signature"
|
||||
>
|
||||
:Object|null</span
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Nested state information</p>
|
||||
</div>
|
||||
|
||||
<h5>Type:</h5>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="param-type">Object</span>
|
||||
|
|
||||
|
||||
<span class="param-type">null</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_StateHandler.js.html"
|
||||
>states/StateHandler.js</a
|
||||
>, <a href="states_StateHandler.js.html#line42">line 42</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="stateName">
|
||||
<span class="type-signature"></span>stateName<span
|
||||
class="type-signature"
|
||||
>
|
||||
:string</span
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>The name of this state</p>
|
||||
</div>
|
||||
|
||||
<h5>Type:</h5>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="param-type">string</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_StateHandler.js.html"
|
||||
>states/StateHandler.js</a
|
||||
>, <a href="states_StateHandler.js.html#line24">line 24</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h3 class="subsection-title">Methods</h3>
|
||||
|
||||
<h4 class="name" id="enter">
|
||||
<span class="type-signature">(async, abstract) </span>enter<span
|
||||
class="signature"
|
||||
>(_fromState<span class="signature-attributes">opt</span>,
|
||||
_emotion<span class="signature-attributes">opt</span>)</span
|
||||
><span class="type-signature"> → {Promise.<void>}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Enter this state</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th>Attributes</th>
|
||||
|
||||
<th>Default</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>_fromState</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
|
|
||||
|
||||
<span class="param-type">null</span>
|
||||
</td>
|
||||
|
||||
<td class="attributes"><optional><br /></td>
|
||||
|
||||
<td class="default">null</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>The previous state (unused in base class)</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="name"><code>_emotion</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="attributes"><optional><br /></td>
|
||||
|
||||
<td class="default">Emotions.NEUTRAL</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>The emotion to enter with (unused in base class)</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_StateHandler.js.html"
|
||||
>states/StateHandler.js</a
|
||||
>, <a href="states_StateHandler.js.html#line53">line 53</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Throws:</h5>
|
||||
|
||||
<dl>
|
||||
<dt>
|
||||
<div class="param-desc">
|
||||
<p>Must be implemented by subclasses</p>
|
||||
</div>
|
||||
</dt>
|
||||
<dd></dd>
|
||||
<dt>
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Error</span>
|
||||
</dd>
|
||||
</dl>
|
||||
</dt>
|
||||
<dd></dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Promise.<void></span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="exit">
|
||||
<span class="type-signature">(async, abstract) </span>exit<span
|
||||
class="signature"
|
||||
>(_toState<span class="signature-attributes">opt</span>,
|
||||
_emotion<span class="signature-attributes">opt</span>)</span
|
||||
><span class="type-signature"> → {Promise.<void>}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Exit this state</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th>Attributes</th>
|
||||
|
||||
<th>Default</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>_toState</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
|
|
||||
|
||||
<span class="param-type">null</span>
|
||||
</td>
|
||||
|
||||
<td class="attributes"><optional><br /></td>
|
||||
|
||||
<td class="default">null</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>The next state (unused in base class)</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="name"><code>_emotion</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="attributes"><optional><br /></td>
|
||||
|
||||
<td class="default">Emotions.NEUTRAL</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>The emotion to exit with (unused in base class)</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_StateHandler.js.html"
|
||||
>states/StateHandler.js</a
|
||||
>, <a href="states_StateHandler.js.html#line65">line 65</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Throws:</h5>
|
||||
|
||||
<dl>
|
||||
<dt>
|
||||
<div class="param-desc">
|
||||
<p>Must be implemented by subclasses</p>
|
||||
</div>
|
||||
</dt>
|
||||
<dd></dd>
|
||||
<dt>
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Error</span>
|
||||
</dd>
|
||||
</dl>
|
||||
</dt>
|
||||
<dd></dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Promise.<void></span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="getAvailableTransitions">
|
||||
<span class="type-signature"></span>getAvailableTransitions<span
|
||||
class="signature"
|
||||
>()</span
|
||||
><span class="type-signature"> → {Array.<string>}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Get available transitions from this state</p>
|
||||
</div>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_StateHandler.js.html"
|
||||
>states/StateHandler.js</a
|
||||
>, <a href="states_StateHandler.js.html#line91">line 91</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<div class="param-desc">
|
||||
<p>Array of state names that can be transitioned to</p>
|
||||
</div>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Array.<string></span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="handleMessage">
|
||||
<span class="type-signature">(async) </span>handleMessage<span
|
||||
class="signature"
|
||||
>(_message)</span
|
||||
><span class="type-signature"> → {Promise.<void>}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Handle a user message while in this state</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>_message</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>The user message (unused in base class)</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_StateHandler.js.html"
|
||||
>states/StateHandler.js</a
|
||||
>, <a href="states_StateHandler.js.html#line83">line 83</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Promise.<void></span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="stopCurrentClip">
|
||||
<span class="type-signature">(async, protected) </span
|
||||
>stopCurrentClip<span class="signature"
|
||||
>(fadeOutDuration<span class="signature-attributes">opt</span
|
||||
>)</span
|
||||
><span class="type-signature"> → {Promise.<void>}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Stop the currently playing clip</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th>Attributes</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>fadeOutDuration</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">number</span>
|
||||
</td>
|
||||
|
||||
<td class="attributes"><optional><br /></td>
|
||||
|
||||
<td class="description last"><p>Fade out duration</p></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_StateHandler.js.html"
|
||||
>states/StateHandler.js</a
|
||||
>, <a href="states_StateHandler.js.html#line120">line 120</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Promise.<void></span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="update">
|
||||
<span class="type-signature"></span>update<span class="signature"
|
||||
>(_deltaTime)</span
|
||||
><span class="type-signature"> → {void}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Update this state (called every frame)</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>_deltaTime</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">number</span>
|
||||
</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>
|
||||
Time elapsed since last update (ms, unused in base class)
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_StateHandler.js.html"
|
||||
>states/StateHandler.js</a
|
||||
>, <a href="states_StateHandler.js.html#line74">line 74</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">void</span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="waitForClipEnd">
|
||||
<span class="type-signature">(async, protected) </span
|
||||
>waitForClipEnd<span class="signature">(clip)</span
|
||||
><span class="type-signature"> → {Promise.<void>}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Wait for an animation clip to finish playing</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>clip</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">AnimationClip</span>
|
||||
</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>The animation clip to wait for</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_StateHandler.js.html"
|
||||
>states/StateHandler.js</a
|
||||
>, <a href="states_StateHandler.js.html#line101">line 101</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<div class="param-desc">
|
||||
<p>Promise that resolves when the clip finishes</p>
|
||||
</div>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Promise.<void></span>
|
||||
</dd>
|
||||
</dl>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2>
|
||||
<h3>Modules</h3>
|
||||
<ul>
|
||||
<li><a href="module-StateHandler.html">StateHandler</a></li>
|
||||
<li><a href="module-animation.html">animation</a></li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationConstants.html"
|
||||
>animation/AnimationConstants</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationNameMapper.html"
|
||||
>animation/AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="module-constants.html">constants</a></li>
|
||||
<li><a href="module-core.html">core</a></li>
|
||||
<li><a href="module-factories.html">factories</a></li>
|
||||
<li><a href="module-loaders.html">loaders</a></li>
|
||||
<li><a href="module-owen.html">owen</a></li>
|
||||
<li><a href="module-states.html">states</a></li>
|
||||
</ul>
|
||||
<h3>Classes</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
|
||||
<li>
|
||||
<a href="module-animation.AnimationClipFactory.html"
|
||||
>AnimationClipFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
||||
>AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-core.OwenAnimationContext.html"
|
||||
>OwenAnimationContext</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-factories.OwenSystemFactory.html"
|
||||
>OwenSystemFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.GLTFAnimationLoader.html"
|
||||
>GLTFAnimationLoader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-states.StateFactory.html">StateFactory</a></li>
|
||||
<li>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<br class="clear" />
|
||||
|
||||
<footer>
|
||||
Documentation generated by
|
||||
<a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
|
||||
2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
<script src="scripts/linenumber.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
146
docs/module-StateHandler.html
Normal file
146
docs/module-StateHandler.html
Normal file
@ -0,0 +1,146 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>JSDoc: Module: StateHandler</title>
|
||||
|
||||
<script src="scripts/prettify/prettify.js"></script>
|
||||
<script src="scripts/prettify/lang-css.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link
|
||||
type="text/css"
|
||||
rel="stylesheet"
|
||||
href="styles/prettify-tomorrow.css"
|
||||
/>
|
||||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1 class="page-title">Module: StateHandler</h1>
|
||||
|
||||
<section>
|
||||
<header></header>
|
||||
|
||||
<article>
|
||||
<div class="container-overview">
|
||||
<div class="description">
|
||||
<p>Base state handler class and utilities</p>
|
||||
</div>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_StateHandler.js.html"
|
||||
>states/StateHandler.js</a
|
||||
>, <a href="states_StateHandler.js.html#line1">line 1</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<h3 class="subsection-title">Classes</h3>
|
||||
|
||||
<dl>
|
||||
<dt>
|
||||
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
||||
</dt>
|
||||
<dd></dd>
|
||||
</dl>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2>
|
||||
<h3>Modules</h3>
|
||||
<ul>
|
||||
<li><a href="module-StateHandler.html">StateHandler</a></li>
|
||||
<li><a href="module-animation.html">animation</a></li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationConstants.html"
|
||||
>animation/AnimationConstants</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationNameMapper.html"
|
||||
>animation/AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="module-constants.html">constants</a></li>
|
||||
<li><a href="module-core.html">core</a></li>
|
||||
<li><a href="module-factories.html">factories</a></li>
|
||||
<li><a href="module-loaders.html">loaders</a></li>
|
||||
<li><a href="module-owen.html">owen</a></li>
|
||||
<li><a href="module-states.html">states</a></li>
|
||||
</ul>
|
||||
<h3>Classes</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
|
||||
<li>
|
||||
<a href="module-animation.AnimationClipFactory.html"
|
||||
>AnimationClipFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
||||
>AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-core.OwenAnimationContext.html"
|
||||
>OwenAnimationContext</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-factories.OwenSystemFactory.html"
|
||||
>OwenSystemFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.GLTFAnimationLoader.html"
|
||||
>GLTFAnimationLoader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-states.StateFactory.html">StateFactory</a></li>
|
||||
<li>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<br class="clear" />
|
||||
|
||||
<footer>
|
||||
Documentation generated by
|
||||
<a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
|
||||
2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
<script src="scripts/linenumber.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
639
docs/module-animation.AnimationClip.html
Normal file
639
docs/module-animation.AnimationClip.html
Normal file
@ -0,0 +1,639 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>JSDoc: Class: AnimationClip</title>
|
||||
|
||||
<script src="scripts/prettify/prettify.js"></script>
|
||||
<script src="scripts/prettify/lang-css.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link
|
||||
type="text/css"
|
||||
rel="stylesheet"
|
||||
href="styles/prettify-tomorrow.css"
|
||||
/>
|
||||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1 class="page-title">Class: AnimationClip</h1>
|
||||
|
||||
<section>
|
||||
<header>
|
||||
<h2>
|
||||
<span class="attribs"><span class="type-signature"></span></span>
|
||||
<span class="ancestors"
|
||||
><a href="module-animation.html">animation</a>.</span
|
||||
>AnimationClip<span class="signature"
|
||||
>(name, threeAnimation, metadata)</span
|
||||
><span class="type-signature"></span>
|
||||
</h2>
|
||||
|
||||
<div class="class-description">
|
||||
<p>
|
||||
Represents a single animation clip with metadata and Three.js
|
||||
action
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<article>
|
||||
<div class="container-overview">
|
||||
<h2>Constructor</h2>
|
||||
|
||||
<h4 class="name" id="AnimationClip">
|
||||
<span class="type-signature"></span>new AnimationClip<span
|
||||
class="signature"
|
||||
>(name, threeAnimation, metadata)</span
|
||||
><span class="type-signature"></span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Create an animation clip</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>name</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>The name of the animation clip</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="name"><code>threeAnimation</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">THREE.AnimationClip</span>
|
||||
</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>The Three.js animation clip</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="name"><code>metadata</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">Object</span>
|
||||
</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>Parsed metadata from animation name</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="animation_AnimationClip.js.html"
|
||||
>animation/AnimationClip.js</a
|
||||
>,
|
||||
<a href="animation_AnimationClip.js.html#line13">line 13</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<h3 class="subsection-title">Members</h3>
|
||||
|
||||
<h4 class="name" id="action">
|
||||
<span class="type-signature"></span>action<span
|
||||
class="type-signature"
|
||||
>
|
||||
:THREE.AnimationAction|null</span
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>The Three.js animation action</p>
|
||||
</div>
|
||||
|
||||
<h5>Type:</h5>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="param-type">THREE.AnimationAction</span>
|
||||
|
|
||||
|
||||
<span class="param-type">null</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="animation_AnimationClip.js.html"
|
||||
>animation/AnimationClip.js</a
|
||||
>,
|
||||
<a href="animation_AnimationClip.js.html#line43">line 43</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="animation">
|
||||
<span class="type-signature"></span>animation<span
|
||||
class="type-signature"
|
||||
>
|
||||
:THREE.AnimationClip</span
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>The Three.js animation clip</p>
|
||||
</div>
|
||||
|
||||
<h5>Type:</h5>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="param-type">THREE.AnimationClip</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="animation_AnimationClip.js.html"
|
||||
>animation/AnimationClip.js</a
|
||||
>,
|
||||
<a href="animation_AnimationClip.js.html#line31">line 31</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="metadata">
|
||||
<span class="type-signature"></span>metadata<span
|
||||
class="type-signature"
|
||||
>
|
||||
:Object</span
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Parsed metadata about the animation</p>
|
||||
</div>
|
||||
|
||||
<h5>Type:</h5>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="param-type">Object</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="animation_AnimationClip.js.html"
|
||||
>animation/AnimationClip.js</a
|
||||
>,
|
||||
<a href="animation_AnimationClip.js.html#line37">line 37</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="mixer">
|
||||
<span class="type-signature"></span>mixer<span
|
||||
class="type-signature"
|
||||
>
|
||||
:THREE.AnimationMixer|null</span
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>The animation mixer</p>
|
||||
</div>
|
||||
|
||||
<h5>Type:</h5>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="param-type">THREE.AnimationMixer</span>
|
||||
|
|
||||
|
||||
<span class="param-type">null</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="animation_AnimationClip.js.html"
|
||||
>animation/AnimationClip.js</a
|
||||
>,
|
||||
<a href="animation_AnimationClip.js.html#line49">line 49</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="name">
|
||||
<span class="type-signature"></span>name<span
|
||||
class="type-signature"
|
||||
>
|
||||
:string</span
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>The name of the animation clip</p>
|
||||
</div>
|
||||
|
||||
<h5>Type:</h5>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="param-type">string</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="animation_AnimationClip.js.html"
|
||||
>animation/AnimationClip.js</a
|
||||
>,
|
||||
<a href="animation_AnimationClip.js.html#line25">line 25</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h3 class="subsection-title">Methods</h3>
|
||||
|
||||
<h4 class="name" id="createAction">
|
||||
<span class="type-signature"></span>createAction<span
|
||||
class="signature"
|
||||
>(mixer)</span
|
||||
><span class="type-signature"> → {THREE.AnimationAction}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Create and configure a Three.js action for this clip</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>mixer</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">THREE.AnimationMixer</span>
|
||||
</td>
|
||||
|
||||
<td class="description last"><p>The animation mixer</p></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="animation_AnimationClip.js.html"
|
||||
>animation/AnimationClip.js</a
|
||||
>,
|
||||
<a href="animation_AnimationClip.js.html#line57">line 57</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<div class="param-desc">
|
||||
<p>The created action</p>
|
||||
</div>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">THREE.AnimationAction</span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="isPlaying">
|
||||
<span class="type-signature"></span>isPlaying<span class="signature"
|
||||
>()</span
|
||||
><span class="type-signature"> → {boolean}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Check if the animation is currently playing</p>
|
||||
</div>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="animation_AnimationClip.js.html"
|
||||
>animation/AnimationClip.js</a
|
||||
>,
|
||||
<a href="animation_AnimationClip.js.html#line108">line 108</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<div class="param-desc">
|
||||
<p>True if playing, false otherwise</p>
|
||||
</div>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">boolean</span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="play">
|
||||
<span class="type-signature"></span>play<span class="signature"
|
||||
>(fadeInDuration<span class="signature-attributes">opt</span
|
||||
>)</span
|
||||
><span class="type-signature"> → {Promise.<void>}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Play the animation with optional fade in</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th>Attributes</th>
|
||||
|
||||
<th>Default</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>fadeInDuration</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">number</span>
|
||||
</td>
|
||||
|
||||
<td class="attributes"><optional><br /></td>
|
||||
|
||||
<td class="default">0.3</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>Fade in duration in seconds</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="animation_AnimationClip.js.html"
|
||||
>animation/AnimationClip.js</a
|
||||
>,
|
||||
<a href="animation_AnimationClip.js.html#line80">line 80</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<div class="param-desc">
|
||||
<p>Promise that resolves when fade in completes</p>
|
||||
</div>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Promise.<void></span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="stop">
|
||||
<span class="type-signature"></span>stop<span class="signature"
|
||||
>(fadeOutDuration<span class="signature-attributes">opt</span
|
||||
>)</span
|
||||
><span class="type-signature"> → {Promise.<void>}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Stop the animation with optional fade out</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th>Attributes</th>
|
||||
|
||||
<th>Default</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>fadeOutDuration</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">number</span>
|
||||
</td>
|
||||
|
||||
<td class="attributes"><optional><br /></td>
|
||||
|
||||
<td class="default">0.3</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>Fade out duration in seconds</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="animation_AnimationClip.js.html"
|
||||
>animation/AnimationClip.js</a
|
||||
>,
|
||||
<a href="animation_AnimationClip.js.html#line93">line 93</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<div class="param-desc">
|
||||
<p>Promise that resolves when fade out completes</p>
|
||||
</div>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Promise.<void></span>
|
||||
</dd>
|
||||
</dl>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2>
|
||||
<h3>Modules</h3>
|
||||
<ul>
|
||||
<li><a href="module-StateHandler.html">StateHandler</a></li>
|
||||
<li><a href="module-animation.html">animation</a></li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationConstants.html"
|
||||
>animation/AnimationConstants</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationNameMapper.html"
|
||||
>animation/AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="module-constants.html">constants</a></li>
|
||||
<li><a href="module-core.html">core</a></li>
|
||||
<li><a href="module-factories.html">factories</a></li>
|
||||
<li><a href="module-loaders.html">loaders</a></li>
|
||||
<li><a href="module-owen.html">owen</a></li>
|
||||
<li><a href="module-states.html">states</a></li>
|
||||
</ul>
|
||||
<h3>Classes</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
|
||||
<li>
|
||||
<a href="module-animation.AnimationClipFactory.html"
|
||||
>AnimationClipFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
||||
>AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-core.OwenAnimationContext.html"
|
||||
>OwenAnimationContext</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-factories.OwenSystemFactory.html"
|
||||
>OwenSystemFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.GLTFAnimationLoader.html"
|
||||
>GLTFAnimationLoader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-states.StateFactory.html">StateFactory</a></li>
|
||||
<li>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<br class="clear" />
|
||||
|
||||
<footer>
|
||||
Documentation generated by
|
||||
<a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
|
||||
2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
<script src="scripts/linenumber.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
567
docs/module-animation.AnimationClipFactory.html
Normal file
567
docs/module-animation.AnimationClipFactory.html
Normal file
@ -0,0 +1,567 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>JSDoc: Class: AnimationClipFactory</title>
|
||||
|
||||
<script src="scripts/prettify/prettify.js"></script>
|
||||
<script src="scripts/prettify/lang-css.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link
|
||||
type="text/css"
|
||||
rel="stylesheet"
|
||||
href="styles/prettify-tomorrow.css"
|
||||
/>
|
||||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1 class="page-title">Class: AnimationClipFactory</h1>
|
||||
|
||||
<section>
|
||||
<header>
|
||||
<h2>
|
||||
<span class="attribs"><span class="type-signature"></span></span>
|
||||
<span class="ancestors"
|
||||
><a href="module-animation.html">animation</a>.</span
|
||||
>AnimationClipFactory<span class="signature">(animationLoader)</span
|
||||
><span class="type-signature"></span>
|
||||
</h2>
|
||||
|
||||
<div class="class-description">
|
||||
<p>Factory for creating animation clips with parsed metadata</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<article>
|
||||
<div class="container-overview">
|
||||
<h2>Constructor</h2>
|
||||
|
||||
<h4 class="name" id="AnimationClipFactory">
|
||||
<span class="type-signature"></span>new AnimationClipFactory<span
|
||||
class="signature"
|
||||
>(animationLoader)</span
|
||||
><span class="type-signature"></span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Create an animation clip factory</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>animationLoader</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">AnimationLoader</span>
|
||||
</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>The animation loader instance</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="animation_AnimationClip.js.html"
|
||||
>animation/AnimationClip.js</a
|
||||
>,
|
||||
<a href="animation_AnimationClip.js.html#line117"
|
||||
>line 117</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<h3 class="subsection-title">Members</h3>
|
||||
|
||||
<h4 class="name" id="animationLoader">
|
||||
<span class="type-signature"></span>animationLoader<span
|
||||
class="type-signature"
|
||||
>
|
||||
:AnimationLoader</span
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>The animation loader for loading animation data</p>
|
||||
</div>
|
||||
|
||||
<h5>Type:</h5>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="param-type">AnimationLoader</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="animation_AnimationClip.js.html"
|
||||
>animation/AnimationClip.js</a
|
||||
>,
|
||||
<a href="animation_AnimationClip.js.html#line127">line 127</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="clipCache">
|
||||
<span class="type-signature"></span>clipCache<span
|
||||
class="type-signature"
|
||||
>
|
||||
:Map.<string, AnimationClip></span
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Cache for created animation clips</p>
|
||||
</div>
|
||||
|
||||
<h5>Type:</h5>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="param-type">Map.<string, AnimationClip></span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="animation_AnimationClip.js.html"
|
||||
>animation/AnimationClip.js</a
|
||||
>,
|
||||
<a href="animation_AnimationClip.js.html#line133">line 133</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h3 class="subsection-title">Methods</h3>
|
||||
|
||||
<h4 class="name" id="clearCache">
|
||||
<span class="type-signature"></span>clearCache<span
|
||||
class="signature"
|
||||
>()</span
|
||||
><span class="type-signature"> → {void}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Clear the clip cache</p>
|
||||
</div>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="animation_AnimationClip.js.html"
|
||||
>animation/AnimationClip.js</a
|
||||
>,
|
||||
<a href="animation_AnimationClip.js.html#line245">line 245</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">void</span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="createClip">
|
||||
<span class="type-signature">(async) </span>createClip<span
|
||||
class="signature"
|
||||
>(name)</span
|
||||
><span class="type-signature">
|
||||
→ {Promise.<AnimationClip>}</span
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Create an animation clip from a name</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>name</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="description last"><p>The animation name</p></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="animation_AnimationClip.js.html"
|
||||
>animation/AnimationClip.js</a
|
||||
>,
|
||||
<a href="animation_AnimationClip.js.html#line210">line 210</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<div class="param-desc">
|
||||
<p>The created animation clip</p>
|
||||
</div>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Promise.<AnimationClip></span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="createClipsFromModel">
|
||||
<span class="type-signature">(async) </span
|
||||
>createClipsFromModel<span class="signature">(model)</span
|
||||
><span class="type-signature">
|
||||
→ {Promise.<Map.<string, AnimationClip>>}</span
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Create all animation clips from a model's animations</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>model</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">THREE.Object3D</span>
|
||||
</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>The 3D model containing animations</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="animation_AnimationClip.js.html"
|
||||
>animation/AnimationClip.js</a
|
||||
>,
|
||||
<a href="animation_AnimationClip.js.html#line229">line 229</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<div class="param-desc">
|
||||
<p>Map of animation name to clip</p>
|
||||
</div>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type"
|
||||
>Promise.<Map.<string, AnimationClip>></span
|
||||
>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="getCachedClip">
|
||||
<span class="type-signature"></span>getCachedClip<span
|
||||
class="signature"
|
||||
>(name)</span
|
||||
><span class="type-signature">
|
||||
→ {AnimationClip|undefined}</span
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Get cached clip by name</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>name</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="description last"><p>The animation name</p></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="animation_AnimationClip.js.html"
|
||||
>animation/AnimationClip.js</a
|
||||
>,
|
||||
<a href="animation_AnimationClip.js.html#line254">line 254</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<div class="param-desc">
|
||||
<p>The cached clip or undefined</p>
|
||||
</div>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">AnimationClip</span>
|
||||
|
|
||||
|
||||
<span class="param-type">undefined</span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="parseAnimationName">
|
||||
<span class="type-signature"></span>parseAnimationName<span
|
||||
class="signature"
|
||||
>(name)</span
|
||||
><span class="type-signature"> → {Object}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>
|
||||
Parse animation name and create clip metadata Format:
|
||||
[state]<em>[action]</em>[type] or
|
||||
[state]<em>[action]2[toState]</em>[emotion]_T
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>name</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>The animation name to parse</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="animation_AnimationClip.js.html"
|
||||
>animation/AnimationClip.js</a
|
||||
>,
|
||||
<a href="animation_AnimationClip.js.html#line142">line 142</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<div class="param-desc">
|
||||
<p>Parsed metadata object</p>
|
||||
</div>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Object</span>
|
||||
</dd>
|
||||
</dl>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2>
|
||||
<h3>Modules</h3>
|
||||
<ul>
|
||||
<li><a href="module-StateHandler.html">StateHandler</a></li>
|
||||
<li><a href="module-animation.html">animation</a></li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationConstants.html"
|
||||
>animation/AnimationConstants</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationNameMapper.html"
|
||||
>animation/AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="module-constants.html">constants</a></li>
|
||||
<li><a href="module-core.html">core</a></li>
|
||||
<li><a href="module-factories.html">factories</a></li>
|
||||
<li><a href="module-loaders.html">loaders</a></li>
|
||||
<li><a href="module-owen.html">owen</a></li>
|
||||
<li><a href="module-states.html">states</a></li>
|
||||
</ul>
|
||||
<h3>Classes</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
|
||||
<li>
|
||||
<a href="module-animation.AnimationClipFactory.html"
|
||||
>AnimationClipFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
||||
>AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-core.OwenAnimationContext.html"
|
||||
>OwenAnimationContext</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-factories.OwenSystemFactory.html"
|
||||
>OwenSystemFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.GLTFAnimationLoader.html"
|
||||
>GLTFAnimationLoader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-states.StateFactory.html">StateFactory</a></li>
|
||||
<li>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<br class="clear" />
|
||||
|
||||
<footer>
|
||||
Documentation generated by
|
||||
<a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
|
||||
2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
<script src="scripts/linenumber.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
154
docs/module-animation.html
Normal file
154
docs/module-animation.html
Normal file
@ -0,0 +1,154 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>JSDoc: Module: animation</title>
|
||||
|
||||
<script src="scripts/prettify/prettify.js"></script>
|
||||
<script src="scripts/prettify/lang-css.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link
|
||||
type="text/css"
|
||||
rel="stylesheet"
|
||||
href="styles/prettify-tomorrow.css"
|
||||
/>
|
||||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1 class="page-title">Module: animation</h1>
|
||||
|
||||
<section>
|
||||
<header></header>
|
||||
|
||||
<article>
|
||||
<div class="container-overview">
|
||||
<div class="description">
|
||||
<p>Core animation classes for clip management and creation</p>
|
||||
</div>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="animation_AnimationClip.js.html"
|
||||
>animation/AnimationClip.js</a
|
||||
>,
|
||||
<a href="animation_AnimationClip.js.html#line1">line 1</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<h3 class="subsection-title">Classes</h3>
|
||||
|
||||
<dl>
|
||||
<dt>
|
||||
<a href="module-animation.AnimationClip.html">AnimationClip</a>
|
||||
</dt>
|
||||
<dd></dd>
|
||||
|
||||
<dt>
|
||||
<a href="module-animation.AnimationClipFactory.html"
|
||||
>AnimationClipFactory</a
|
||||
>
|
||||
</dt>
|
||||
<dd></dd>
|
||||
</dl>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2>
|
||||
<h3>Modules</h3>
|
||||
<ul>
|
||||
<li><a href="module-StateHandler.html">StateHandler</a></li>
|
||||
<li><a href="module-animation.html">animation</a></li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationConstants.html"
|
||||
>animation/AnimationConstants</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationNameMapper.html"
|
||||
>animation/AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="module-constants.html">constants</a></li>
|
||||
<li><a href="module-core.html">core</a></li>
|
||||
<li><a href="module-factories.html">factories</a></li>
|
||||
<li><a href="module-loaders.html">loaders</a></li>
|
||||
<li><a href="module-owen.html">owen</a></li>
|
||||
<li><a href="module-states.html">states</a></li>
|
||||
</ul>
|
||||
<h3>Classes</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
|
||||
<li>
|
||||
<a href="module-animation.AnimationClipFactory.html"
|
||||
>AnimationClipFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
||||
>AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-core.OwenAnimationContext.html"
|
||||
>OwenAnimationContext</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-factories.OwenSystemFactory.html"
|
||||
>OwenSystemFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.GLTFAnimationLoader.html"
|
||||
>GLTFAnimationLoader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-states.StateFactory.html">StateFactory</a></li>
|
||||
<li>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<br class="clear" />
|
||||
|
||||
<footer>
|
||||
Documentation generated by
|
||||
<a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
|
||||
2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
<script src="scripts/linenumber.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
576
docs/module-animation_AnimationConstants.html
Normal file
576
docs/module-animation_AnimationConstants.html
Normal file
@ -0,0 +1,576 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>JSDoc: Module: animation/AnimationConstants</title>
|
||||
|
||||
<script src="scripts/prettify/prettify.js"></script>
|
||||
<script src="scripts/prettify/lang-css.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link
|
||||
type="text/css"
|
||||
rel="stylesheet"
|
||||
href="styles/prettify-tomorrow.css"
|
||||
/>
|
||||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1 class="page-title">Module: animation/AnimationConstants</h1>
|
||||
|
||||
<section>
|
||||
<header></header>
|
||||
|
||||
<article>
|
||||
<div class="container-overview">
|
||||
<div class="description">
|
||||
<p>
|
||||
Animation constants with multi-scheme support for Owen Animation
|
||||
System
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="animation_AnimationConstants.js.html"
|
||||
>animation/AnimationConstants.js</a
|
||||
>,
|
||||
<a href="animation_AnimationConstants.js.html#line1"
|
||||
>line 1</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<h3 class="subsection-title">Members</h3>
|
||||
|
||||
<h4 class="name" id=".ArtistAnimations">
|
||||
<span class="type-signature">(static, constant) </span
|
||||
>ArtistAnimations<span class="type-signature"></span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Artist-friendly animation names (Blender workflow)</p>
|
||||
</div>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="animation_AnimationConstants.js.html"
|
||||
>animation/AnimationConstants.js</a
|
||||
>,
|
||||
<a href="animation_AnimationConstants.js.html#line70"
|
||||
>line 70</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id=".HierarchicalAnimations">
|
||||
<span class="type-signature">(static, constant) </span
|
||||
>HierarchicalAnimations<span class="type-signature"></span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Hierarchical animation names (organized structure)</p>
|
||||
</div>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="animation_AnimationConstants.js.html"
|
||||
>animation/AnimationConstants.js</a
|
||||
>,
|
||||
<a href="animation_AnimationConstants.js.html#line125"
|
||||
>line 125</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id=".LegacyAnimations">
|
||||
<span class="type-signature">(static, constant) </span
|
||||
>LegacyAnimations<span class="type-signature"></span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Legacy animation names (backward compatibility)</p>
|
||||
</div>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="animation_AnimationConstants.js.html"
|
||||
>animation/AnimationConstants.js</a
|
||||
>,
|
||||
<a href="animation_AnimationConstants.js.html#line15"
|
||||
>line 15</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id=".NamingSchemes">
|
||||
<span class="type-signature">(static, constant) </span
|
||||
>NamingSchemes<span class="type-signature"></span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Animation naming schemes enumeration</p>
|
||||
</div>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="animation_AnimationConstants.js.html"
|
||||
>animation/AnimationConstants.js</a
|
||||
>,
|
||||
<a href="animation_AnimationConstants.js.html#line235"
|
||||
>line 235</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id=".SemanticAnimations">
|
||||
<span class="type-signature">(static, constant) </span
|
||||
>SemanticAnimations<span class="type-signature"></span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Semantic animation names (readable camelCase)</p>
|
||||
</div>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="animation_AnimationConstants.js.html"
|
||||
>animation/AnimationConstants.js</a
|
||||
>,
|
||||
<a href="animation_AnimationConstants.js.html#line180"
|
||||
>line 180</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h3 class="subsection-title">Methods</h3>
|
||||
|
||||
<h4 class="name" id=".convertAnimationName">
|
||||
<span class="type-signature">(static) </span
|
||||
>convertAnimationName<span class="signature"
|
||||
>(name, targetScheme)</span
|
||||
><span class="type-signature"> → {string}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Convert animation name between different schemes</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>name</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>The source animation name</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="name"><code>targetScheme</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>The target naming scheme</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="animation_AnimationConstants.js.html"
|
||||
>animation/AnimationConstants.js</a
|
||||
>,
|
||||
<a href="animation_AnimationConstants.js.html#line248"
|
||||
>line 248</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<div class="param-desc">
|
||||
<p>The converted animation name</p>
|
||||
</div>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">string</span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id=".getAllAnimationNames">
|
||||
<span class="type-signature">(static) </span
|
||||
>getAllAnimationNames<span class="signature">(name)</span
|
||||
><span class="type-signature"> → {Object}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Get all naming scheme variants for an animation</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>name</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>The source animation name</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="animation_AnimationConstants.js.html"
|
||||
>animation/AnimationConstants.js</a
|
||||
>,
|
||||
<a href="animation_AnimationConstants.js.html#line257"
|
||||
>line 257</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<div class="param-desc">
|
||||
<p>Object with all scheme variants</p>
|
||||
</div>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Object</span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id=".getAnimationsByStateAndEmotion">
|
||||
<span class="type-signature">(static) </span
|
||||
>getAnimationsByStateAndEmotion<span class="signature"
|
||||
>(state, emotion, scheme)</span
|
||||
><span class="type-signature"> → {Array.<string>}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Get animations by state and emotion</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>state</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="description last"><p>The state name</p></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="name"><code>emotion</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>The emotion name (optional)</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="name"><code>scheme</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>The naming scheme to return (default: 'semantic')</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="animation_AnimationConstants.js.html"
|
||||
>animation/AnimationConstants.js</a
|
||||
>,
|
||||
<a href="animation_AnimationConstants.js.html#line277"
|
||||
>line 277</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<div class="param-desc">
|
||||
<p>Array of animation names</p>
|
||||
</div>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Array.<string></span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id=".validateAnimationName">
|
||||
<span class="type-signature">(static) </span
|
||||
>validateAnimationName<span class="signature">(name)</span
|
||||
><span class="type-signature"> → {Object}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Validate an animation name</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>name</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>The animation name to validate</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="animation_AnimationConstants.js.html"
|
||||
>animation/AnimationConstants.js</a
|
||||
>,
|
||||
<a href="animation_AnimationConstants.js.html#line266"
|
||||
>line 266</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<div class="param-desc">
|
||||
<p>Validation result</p>
|
||||
</div>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Object</span>
|
||||
</dd>
|
||||
</dl>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2>
|
||||
<h3>Modules</h3>
|
||||
<ul>
|
||||
<li><a href="module-StateHandler.html">StateHandler</a></li>
|
||||
<li><a href="module-animation.html">animation</a></li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationConstants.html"
|
||||
>animation/AnimationConstants</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationNameMapper.html"
|
||||
>animation/AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="module-constants.html">constants</a></li>
|
||||
<li><a href="module-core.html">core</a></li>
|
||||
<li><a href="module-factories.html">factories</a></li>
|
||||
<li><a href="module-loaders.html">loaders</a></li>
|
||||
<li><a href="module-owen.html">owen</a></li>
|
||||
<li><a href="module-states.html">states</a></li>
|
||||
</ul>
|
||||
<h3>Classes</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
|
||||
<li>
|
||||
<a href="module-animation.AnimationClipFactory.html"
|
||||
>AnimationClipFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
||||
>AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-core.OwenAnimationContext.html"
|
||||
>OwenAnimationContext</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-factories.OwenSystemFactory.html"
|
||||
>OwenSystemFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.GLTFAnimationLoader.html"
|
||||
>GLTFAnimationLoader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-states.StateFactory.html">StateFactory</a></li>
|
||||
<li>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<br class="clear" />
|
||||
|
||||
<footer>
|
||||
Documentation generated by
|
||||
<a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
|
||||
2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
<script src="scripts/linenumber.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,533 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>JSDoc: Class: AnimationNameMapper</title>
|
||||
|
||||
<script src="scripts/prettify/prettify.js"></script>
|
||||
<script src="scripts/prettify/lang-css.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link
|
||||
type="text/css"
|
||||
rel="stylesheet"
|
||||
href="styles/prettify-tomorrow.css"
|
||||
/>
|
||||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1 class="page-title">Class: AnimationNameMapper</h1>
|
||||
|
||||
<section>
|
||||
<header>
|
||||
<h2>
|
||||
<span class="attribs"><span class="type-signature"></span></span>
|
||||
<span class="ancestors"
|
||||
><a href="module-animation_AnimationNameMapper.html"
|
||||
>animation/AnimationNameMapper</a
|
||||
>.</span
|
||||
>AnimationNameMapper<span class="signature">()</span
|
||||
><span class="type-signature"></span>
|
||||
</h2>
|
||||
|
||||
<div class="class-description">
|
||||
<p>
|
||||
Multi-scheme animation name mapper for Owen Animation System
|
||||
Supports legacy, artist-friendly, and hierarchical naming schemes
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<article>
|
||||
<div class="container-overview">
|
||||
<h2>Constructor</h2>
|
||||
|
||||
<h4 class="name" id="AnimationNameMapper">
|
||||
<span class="type-signature"></span>new AnimationNameMapper<span
|
||||
class="signature"
|
||||
>()</span
|
||||
><span class="type-signature"></span>
|
||||
</h4>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="animation_AnimationNameMapper.js.html"
|
||||
>animation/AnimationNameMapper.js</a
|
||||
>,
|
||||
<a href="animation_AnimationNameMapper.js.html#line11"
|
||||
>line 11</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<h3 class="subsection-title">Methods</h3>
|
||||
|
||||
<h4 class="name" id="convert">
|
||||
<span class="type-signature"></span>convert<span class="signature"
|
||||
>(fromName, targetScheme)</span
|
||||
><span class="type-signature"> → {string}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Convert any animation name to any other scheme</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th>Default</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>fromName</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="default"></td>
|
||||
|
||||
<td class="description last"><p>Source animation name</p></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="name"><code>targetScheme</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="default">hierarchical</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>
|
||||
Target naming scheme ('legacy', 'artist', 'hierarchical',
|
||||
'semantic')
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="animation_AnimationNameMapper.js.html"
|
||||
>animation/AnimationNameMapper.js</a
|
||||
>,
|
||||
<a href="animation_AnimationNameMapper.js.html#line355"
|
||||
>line 355</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<div class="param-desc">
|
||||
<p>Converted animation name</p>
|
||||
</div>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">string</span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="convertBatch">
|
||||
<span class="type-signature"></span>convertBatch<span
|
||||
class="signature"
|
||||
>(animations, targetScheme)</span
|
||||
><span class="type-signature"> → {Object}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Batch convert multiple animations</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>animations</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">Array.<string></span>
|
||||
</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>Array of animation names</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="name"><code>targetScheme</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="description last"><p>Target naming scheme</p></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="animation_AnimationNameMapper.js.html"
|
||||
>animation/AnimationNameMapper.js</a
|
||||
>,
|
||||
<a href="animation_AnimationNameMapper.js.html#line556"
|
||||
>line 556</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<div class="param-desc">
|
||||
<p>Mapping of original names to converted names</p>
|
||||
</div>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Object</span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="detectScheme">
|
||||
<span class="type-signature"></span>detectScheme<span
|
||||
class="signature"
|
||||
>(name)</span
|
||||
><span class="type-signature"> → {Object|null}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Detect which naming scheme is being used</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>name</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>Animation name to analyze</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="animation_AnimationNameMapper.js.html"
|
||||
>animation/AnimationNameMapper.js</a
|
||||
>,
|
||||
<a href="animation_AnimationNameMapper.js.html#line377"
|
||||
>line 377</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<div class="param-desc">
|
||||
<p>Detection result with scheme and extracted info</p>
|
||||
</div>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Object</span>
|
||||
|
|
||||
|
||||
<span class="param-type">null</span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="getAllNames">
|
||||
<span class="type-signature"></span>getAllNames<span
|
||||
class="signature"
|
||||
>(animationName)</span
|
||||
><span class="type-signature"> → {Object}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Get all possible names for an animation</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>animationName</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="description last"><p>Source animation name</p></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="animation_AnimationNameMapper.js.html"
|
||||
>animation/AnimationNameMapper.js</a
|
||||
>,
|
||||
<a href="animation_AnimationNameMapper.js.html#line539"
|
||||
>line 539</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<div class="param-desc">
|
||||
<p>Object with all naming scheme variants</p>
|
||||
</div>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Object</span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="validateAnimationName">
|
||||
<span class="type-signature"></span>validateAnimationName<span
|
||||
class="signature"
|
||||
>(name)</span
|
||||
><span class="type-signature"> → {Object}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Validate animation name format</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>name</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>Animation name to validate</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="animation_AnimationNameMapper.js.html"
|
||||
>animation/AnimationNameMapper.js</a
|
||||
>,
|
||||
<a href="animation_AnimationNameMapper.js.html#line569"
|
||||
>line 569</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<div class="param-desc">
|
||||
<p>Validation result with issues and suggestions</p>
|
||||
</div>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Object</span>
|
||||
</dd>
|
||||
</dl>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2>
|
||||
<h3>Modules</h3>
|
||||
<ul>
|
||||
<li><a href="module-StateHandler.html">StateHandler</a></li>
|
||||
<li><a href="module-animation.html">animation</a></li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationConstants.html"
|
||||
>animation/AnimationConstants</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationNameMapper.html"
|
||||
>animation/AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="module-constants.html">constants</a></li>
|
||||
<li><a href="module-core.html">core</a></li>
|
||||
<li><a href="module-factories.html">factories</a></li>
|
||||
<li><a href="module-loaders.html">loaders</a></li>
|
||||
<li><a href="module-owen.html">owen</a></li>
|
||||
<li><a href="module-states.html">states</a></li>
|
||||
</ul>
|
||||
<h3>Classes</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
|
||||
<li>
|
||||
<a href="module-animation.AnimationClipFactory.html"
|
||||
>AnimationClipFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
||||
>AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-core.OwenAnimationContext.html"
|
||||
>OwenAnimationContext</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-factories.OwenSystemFactory.html"
|
||||
>OwenSystemFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.GLTFAnimationLoader.html"
|
||||
>GLTFAnimationLoader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-states.StateFactory.html">StateFactory</a></li>
|
||||
<li>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<br class="clear" />
|
||||
|
||||
<footer>
|
||||
Documentation generated by
|
||||
<a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
|
||||
2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
<script src="scripts/linenumber.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
154
docs/module-animation_AnimationNameMapper.html
Normal file
154
docs/module-animation_AnimationNameMapper.html
Normal file
@ -0,0 +1,154 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>JSDoc: Module: animation/AnimationNameMapper</title>
|
||||
|
||||
<script src="scripts/prettify/prettify.js"></script>
|
||||
<script src="scripts/prettify/lang-css.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link
|
||||
type="text/css"
|
||||
rel="stylesheet"
|
||||
href="styles/prettify-tomorrow.css"
|
||||
/>
|
||||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1 class="page-title">Module: animation/AnimationNameMapper</h1>
|
||||
|
||||
<section>
|
||||
<header></header>
|
||||
|
||||
<article>
|
||||
<div class="container-overview">
|
||||
<div class="description">
|
||||
<p>
|
||||
Multi-scheme animation name mapper for Owen Animation System
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="animation_AnimationNameMapper.js.html"
|
||||
>animation/AnimationNameMapper.js</a
|
||||
>,
|
||||
<a href="animation_AnimationNameMapper.js.html#line1"
|
||||
>line 1</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<h3 class="subsection-title">Classes</h3>
|
||||
|
||||
<dl>
|
||||
<dt>
|
||||
<a
|
||||
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
||||
>AnimationNameMapper</a
|
||||
>
|
||||
</dt>
|
||||
<dd></dd>
|
||||
</dl>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2>
|
||||
<h3>Modules</h3>
|
||||
<ul>
|
||||
<li><a href="module-StateHandler.html">StateHandler</a></li>
|
||||
<li><a href="module-animation.html">animation</a></li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationConstants.html"
|
||||
>animation/AnimationConstants</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationNameMapper.html"
|
||||
>animation/AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="module-constants.html">constants</a></li>
|
||||
<li><a href="module-core.html">core</a></li>
|
||||
<li><a href="module-factories.html">factories</a></li>
|
||||
<li><a href="module-loaders.html">loaders</a></li>
|
||||
<li><a href="module-owen.html">owen</a></li>
|
||||
<li><a href="module-states.html">states</a></li>
|
||||
</ul>
|
||||
<h3>Classes</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
|
||||
<li>
|
||||
<a href="module-animation.AnimationClipFactory.html"
|
||||
>AnimationClipFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
||||
>AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-core.OwenAnimationContext.html"
|
||||
>OwenAnimationContext</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-factories.OwenSystemFactory.html"
|
||||
>OwenSystemFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.GLTFAnimationLoader.html"
|
||||
>GLTFAnimationLoader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-states.StateFactory.html">StateFactory</a></li>
|
||||
<li>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<br class="clear" />
|
||||
|
||||
<footer>
|
||||
Documentation generated by
|
||||
<a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
|
||||
2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
<script src="scripts/linenumber.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
259
docs/module-constants.html
Normal file
259
docs/module-constants.html
Normal file
@ -0,0 +1,259 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>JSDoc: Module: constants</title>
|
||||
|
||||
<script src="scripts/prettify/prettify.js"></script>
|
||||
<script src="scripts/prettify/lang-css.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link
|
||||
type="text/css"
|
||||
rel="stylesheet"
|
||||
href="styles/prettify-tomorrow.css"
|
||||
/>
|
||||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1 class="page-title">Module: constants</h1>
|
||||
|
||||
<section>
|
||||
<header></header>
|
||||
|
||||
<article>
|
||||
<div class="container-overview">
|
||||
<div class="description">
|
||||
<p>Animation system constants and enumerations</p>
|
||||
</div>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="constants.js.html">constants.js</a>,
|
||||
<a href="constants.js.html#line1">line 1</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<h3 class="subsection-title">Members</h3>
|
||||
|
||||
<h4 class="name" id=".ClipTypes">
|
||||
<span class="type-signature">(static, constant) </span
|
||||
>ClipTypes<span class="type-signature"> :string</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Animation clip types based on naming convention</p>
|
||||
</div>
|
||||
|
||||
<h5>Type:</h5>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="param-type">string</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="constants.js.html">constants.js</a>,
|
||||
<a href="constants.js.html#line11">line 11</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id=".Config">
|
||||
<span class="type-signature">(static, constant) </span>Config<span
|
||||
class="type-signature"
|
||||
>
|
||||
:Object</span
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Default configuration values</p>
|
||||
</div>
|
||||
|
||||
<h5>Type:</h5>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="param-type">Object</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="constants.js.html">constants.js</a>,
|
||||
<a href="constants.js.html#line67">line 67</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id=".Emotions">
|
||||
<span class="type-signature">(static, constant) </span>Emotions<span
|
||||
class="type-signature"
|
||||
>
|
||||
:string</span
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Character emotional states</p>
|
||||
</div>
|
||||
|
||||
<h5>Type:</h5>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="param-type">string</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="constants.js.html">constants.js</a>,
|
||||
<a href="constants.js.html#line49">line 49</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id=".States">
|
||||
<span class="type-signature">(static, constant) </span>States<span
|
||||
class="type-signature"
|
||||
>
|
||||
:string</span
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Character animation states</p>
|
||||
</div>
|
||||
|
||||
<h5>Type:</h5>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="param-type">string</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="constants.js.html">constants.js</a>,
|
||||
<a href="constants.js.html#line33">line 33</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2>
|
||||
<h3>Modules</h3>
|
||||
<ul>
|
||||
<li><a href="module-StateHandler.html">StateHandler</a></li>
|
||||
<li><a href="module-animation.html">animation</a></li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationConstants.html"
|
||||
>animation/AnimationConstants</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationNameMapper.html"
|
||||
>animation/AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="module-constants.html">constants</a></li>
|
||||
<li><a href="module-core.html">core</a></li>
|
||||
<li><a href="module-factories.html">factories</a></li>
|
||||
<li><a href="module-loaders.html">loaders</a></li>
|
||||
<li><a href="module-owen.html">owen</a></li>
|
||||
<li><a href="module-states.html">states</a></li>
|
||||
</ul>
|
||||
<h3>Classes</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
|
||||
<li>
|
||||
<a href="module-animation.AnimationClipFactory.html"
|
||||
>AnimationClipFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
||||
>AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-core.OwenAnimationContext.html"
|
||||
>OwenAnimationContext</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-factories.OwenSystemFactory.html"
|
||||
>OwenSystemFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.GLTFAnimationLoader.html"
|
||||
>GLTFAnimationLoader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-states.StateFactory.html">StateFactory</a></li>
|
||||
<li>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<br class="clear" />
|
||||
|
||||
<footer>
|
||||
Documentation generated by
|
||||
<a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
|
||||
2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
<script src="scripts/linenumber.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
1661
docs/module-core.OwenAnimationContext.html
Normal file
1661
docs/module-core.OwenAnimationContext.html
Normal file
File diff suppressed because it is too large
Load Diff
149
docs/module-core.html
Normal file
149
docs/module-core.html
Normal file
@ -0,0 +1,149 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>JSDoc: Module: core</title>
|
||||
|
||||
<script src="scripts/prettify/prettify.js"></script>
|
||||
<script src="scripts/prettify/lang-css.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link
|
||||
type="text/css"
|
||||
rel="stylesheet"
|
||||
href="styles/prettify-tomorrow.css"
|
||||
/>
|
||||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1 class="page-title">Module: core</h1>
|
||||
|
||||
<section>
|
||||
<header></header>
|
||||
|
||||
<article>
|
||||
<div class="container-overview">
|
||||
<div class="description">
|
||||
<p>Main animation context controller</p>
|
||||
</div>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="core_OwenAnimationContext.js.html"
|
||||
>core/OwenAnimationContext.js</a
|
||||
>,
|
||||
<a href="core_OwenAnimationContext.js.html#line1">line 1</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<h3 class="subsection-title">Classes</h3>
|
||||
|
||||
<dl>
|
||||
<dt>
|
||||
<a href="module-core.OwenAnimationContext.html"
|
||||
>OwenAnimationContext</a
|
||||
>
|
||||
</dt>
|
||||
<dd></dd>
|
||||
</dl>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2>
|
||||
<h3>Modules</h3>
|
||||
<ul>
|
||||
<li><a href="module-StateHandler.html">StateHandler</a></li>
|
||||
<li><a href="module-animation.html">animation</a></li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationConstants.html"
|
||||
>animation/AnimationConstants</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationNameMapper.html"
|
||||
>animation/AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="module-constants.html">constants</a></li>
|
||||
<li><a href="module-core.html">core</a></li>
|
||||
<li><a href="module-factories.html">factories</a></li>
|
||||
<li><a href="module-loaders.html">loaders</a></li>
|
||||
<li><a href="module-owen.html">owen</a></li>
|
||||
<li><a href="module-states.html">states</a></li>
|
||||
</ul>
|
||||
<h3>Classes</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
|
||||
<li>
|
||||
<a href="module-animation.AnimationClipFactory.html"
|
||||
>AnimationClipFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
||||
>AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-core.OwenAnimationContext.html"
|
||||
>OwenAnimationContext</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-factories.OwenSystemFactory.html"
|
||||
>OwenSystemFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.GLTFAnimationLoader.html"
|
||||
>GLTFAnimationLoader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-states.StateFactory.html">StateFactory</a></li>
|
||||
<li>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<br class="clear" />
|
||||
|
||||
<footer>
|
||||
Documentation generated by
|
||||
<a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
|
||||
2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
<script src="scripts/linenumber.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
455
docs/module-factories.OwenSystemFactory.html
Normal file
455
docs/module-factories.OwenSystemFactory.html
Normal file
@ -0,0 +1,455 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>JSDoc: Class: OwenSystemFactory</title>
|
||||
|
||||
<script src="scripts/prettify/prettify.js"></script>
|
||||
<script src="scripts/prettify/lang-css.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link
|
||||
type="text/css"
|
||||
rel="stylesheet"
|
||||
href="styles/prettify-tomorrow.css"
|
||||
/>
|
||||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1 class="page-title">Class: OwenSystemFactory</h1>
|
||||
|
||||
<section>
|
||||
<header>
|
||||
<h2>
|
||||
<span class="attribs"><span class="type-signature"></span></span>
|
||||
<span class="ancestors"
|
||||
><a href="module-factories.html">factories</a>.</span
|
||||
>OwenSystemFactory<span class="signature">()</span
|
||||
><span class="type-signature"></span>
|
||||
</h2>
|
||||
|
||||
<div class="class-description">
|
||||
<p>Main factory for creating the complete Owen animation system</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<article>
|
||||
<div class="container-overview">
|
||||
<h2>Constructor</h2>
|
||||
|
||||
<h4 class="name" id="OwenSystemFactory">
|
||||
<span class="type-signature"></span>new OwenSystemFactory<span
|
||||
class="signature"
|
||||
>()</span
|
||||
><span class="type-signature"></span>
|
||||
</h4>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="factories_OwenSystemFactory.js.html"
|
||||
>factories/OwenSystemFactory.js</a
|
||||
>,
|
||||
<a href="factories_OwenSystemFactory.js.html#line16"
|
||||
>line 16</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<h3 class="subsection-title">Methods</h3>
|
||||
|
||||
<h4 class="name" id=".createBasicOwenSystem">
|
||||
<span class="type-signature">(async, static) </span
|
||||
>createBasicOwenSystem<span class="signature">(model)</span
|
||||
><span class="type-signature">
|
||||
→ {Promise.<OwenAnimationContext>}</span
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Create a basic Owen system with minimal configuration</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>model</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">THREE.Object3D</span>
|
||||
</td>
|
||||
|
||||
<td class="description last"><p>The 3D model</p></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="factories_OwenSystemFactory.js.html"
|
||||
>factories/OwenSystemFactory.js</a
|
||||
>,
|
||||
<a href="factories_OwenSystemFactory.js.html#line63"
|
||||
>line 63</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<div class="param-desc">
|
||||
<p>The configured Owen system</p>
|
||||
</div>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Promise.<OwenAnimationContext></span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id=".createCustomOwenSystem">
|
||||
<span class="type-signature">(async, static) </span
|
||||
>createCustomOwenSystem<span class="signature"
|
||||
>(gltfModel, scene, customStates)</span
|
||||
><span class="type-signature">
|
||||
→ {Promise.<OwenAnimationContext>}</span
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Create an Owen system with custom state handlers</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>gltfModel</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">THREE.Object3D</span>
|
||||
</td>
|
||||
|
||||
<td class="description last"><p>The loaded GLTF model</p></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="name"><code>scene</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">THREE.Scene</span>
|
||||
</td>
|
||||
|
||||
<td class="description last"><p>The Three.js scene</p></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="name"><code>customStates</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">Map.<string, function()></span>
|
||||
</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>Map of state name to handler class</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="factories_OwenSystemFactory.js.html"
|
||||
>factories/OwenSystemFactory.js</a
|
||||
>,
|
||||
<a href="factories_OwenSystemFactory.js.html#line77"
|
||||
>line 77</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<div class="param-desc">
|
||||
<p>The configured Owen system</p>
|
||||
</div>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Promise.<OwenAnimationContext></span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id=".createOwenSystem">
|
||||
<span class="type-signature">(async, static) </span
|
||||
>createOwenSystem<span class="signature"
|
||||
>(gltfModel, scene, options<span class="signature-attributes"
|
||||
>opt</span
|
||||
>)</span
|
||||
><span class="type-signature">
|
||||
→ {Promise.<OwenAnimationContext>}</span
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Create a complete Owen animation system</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th>Attributes</th>
|
||||
|
||||
<th>Default</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>gltfModel</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">THREE.Object3D</span>
|
||||
</td>
|
||||
|
||||
<td class="attributes"></td>
|
||||
|
||||
<td class="default"></td>
|
||||
|
||||
<td class="description last"><p>The loaded GLTF model</p></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="name"><code>scene</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">THREE.Scene</span>
|
||||
</td>
|
||||
|
||||
<td class="attributes"></td>
|
||||
|
||||
<td class="default"></td>
|
||||
|
||||
<td class="description last"><p>The Three.js scene</p></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="name"><code>options</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">Object</span>
|
||||
</td>
|
||||
|
||||
<td class="attributes"><optional><br /></td>
|
||||
|
||||
<td class="default">{}</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>Configuration options</p>
|
||||
<h6>Properties</h6>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th>Attributes</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>gltfLoader</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">THREE.GLTFLoader</span>
|
||||
</td>
|
||||
|
||||
<td class="attributes"><optional><br /></td>
|
||||
|
||||
<td class="description last">
|
||||
<p>Custom GLTF loader</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="factories_OwenSystemFactory.js.html"
|
||||
>factories/OwenSystemFactory.js</a
|
||||
>,
|
||||
<a href="factories_OwenSystemFactory.js.html#line25"
|
||||
>line 25</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<div class="param-desc">
|
||||
<p>The configured Owen system</p>
|
||||
</div>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Promise.<OwenAnimationContext></span>
|
||||
</dd>
|
||||
</dl>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2>
|
||||
<h3>Modules</h3>
|
||||
<ul>
|
||||
<li><a href="module-StateHandler.html">StateHandler</a></li>
|
||||
<li><a href="module-animation.html">animation</a></li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationConstants.html"
|
||||
>animation/AnimationConstants</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationNameMapper.html"
|
||||
>animation/AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="module-constants.html">constants</a></li>
|
||||
<li><a href="module-core.html">core</a></li>
|
||||
<li><a href="module-factories.html">factories</a></li>
|
||||
<li><a href="module-loaders.html">loaders</a></li>
|
||||
<li><a href="module-owen.html">owen</a></li>
|
||||
<li><a href="module-states.html">states</a></li>
|
||||
</ul>
|
||||
<h3>Classes</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
|
||||
<li>
|
||||
<a href="module-animation.AnimationClipFactory.html"
|
||||
>AnimationClipFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
||||
>AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-core.OwenAnimationContext.html"
|
||||
>OwenAnimationContext</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-factories.OwenSystemFactory.html"
|
||||
>OwenSystemFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.GLTFAnimationLoader.html"
|
||||
>GLTFAnimationLoader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-states.StateFactory.html">StateFactory</a></li>
|
||||
<li>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<br class="clear" />
|
||||
|
||||
<footer>
|
||||
Documentation generated by
|
||||
<a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
|
||||
2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
<script src="scripts/linenumber.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
151
docs/module-factories.html
Normal file
151
docs/module-factories.html
Normal file
@ -0,0 +1,151 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>JSDoc: Module: factories</title>
|
||||
|
||||
<script src="scripts/prettify/prettify.js"></script>
|
||||
<script src="scripts/prettify/lang-css.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link
|
||||
type="text/css"
|
||||
rel="stylesheet"
|
||||
href="styles/prettify-tomorrow.css"
|
||||
/>
|
||||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1 class="page-title">Module: factories</h1>
|
||||
|
||||
<section>
|
||||
<header></header>
|
||||
|
||||
<article>
|
||||
<div class="container-overview">
|
||||
<div class="description">
|
||||
<p>Main system factory for creating the complete Owen system</p>
|
||||
</div>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="factories_OwenSystemFactory.js.html"
|
||||
>factories/OwenSystemFactory.js</a
|
||||
>,
|
||||
<a href="factories_OwenSystemFactory.js.html#line1"
|
||||
>line 1</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<h3 class="subsection-title">Classes</h3>
|
||||
|
||||
<dl>
|
||||
<dt>
|
||||
<a href="module-factories.OwenSystemFactory.html"
|
||||
>OwenSystemFactory</a
|
||||
>
|
||||
</dt>
|
||||
<dd></dd>
|
||||
</dl>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2>
|
||||
<h3>Modules</h3>
|
||||
<ul>
|
||||
<li><a href="module-StateHandler.html">StateHandler</a></li>
|
||||
<li><a href="module-animation.html">animation</a></li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationConstants.html"
|
||||
>animation/AnimationConstants</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationNameMapper.html"
|
||||
>animation/AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="module-constants.html">constants</a></li>
|
||||
<li><a href="module-core.html">core</a></li>
|
||||
<li><a href="module-factories.html">factories</a></li>
|
||||
<li><a href="module-loaders.html">loaders</a></li>
|
||||
<li><a href="module-owen.html">owen</a></li>
|
||||
<li><a href="module-states.html">states</a></li>
|
||||
</ul>
|
||||
<h3>Classes</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
|
||||
<li>
|
||||
<a href="module-animation.AnimationClipFactory.html"
|
||||
>AnimationClipFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
||||
>AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-core.OwenAnimationContext.html"
|
||||
>OwenAnimationContext</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-factories.OwenSystemFactory.html"
|
||||
>OwenSystemFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.GLTFAnimationLoader.html"
|
||||
>GLTFAnimationLoader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-states.StateFactory.html">StateFactory</a></li>
|
||||
<li>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<br class="clear" />
|
||||
|
||||
<footer>
|
||||
Documentation generated by
|
||||
<a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
|
||||
2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
<script src="scripts/linenumber.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
245
docs/module-loaders.AnimationLoader.html
Normal file
245
docs/module-loaders.AnimationLoader.html
Normal file
@ -0,0 +1,245 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>JSDoc: Class: AnimationLoader</title>
|
||||
|
||||
<script src="scripts/prettify/prettify.js"></script>
|
||||
<script src="scripts/prettify/lang-css.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link
|
||||
type="text/css"
|
||||
rel="stylesheet"
|
||||
href="styles/prettify-tomorrow.css"
|
||||
/>
|
||||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1 class="page-title">Class: AnimationLoader</h1>
|
||||
|
||||
<section>
|
||||
<header>
|
||||
<h2>
|
||||
<span class="attribs"
|
||||
><span class="type-signature">(abstract) </span></span
|
||||
>
|
||||
<span class="ancestors"
|
||||
><a href="module-loaders.html">loaders</a>.</span
|
||||
>AnimationLoader<span class="signature">()</span
|
||||
><span class="type-signature"></span>
|
||||
</h2>
|
||||
|
||||
<div class="class-description">
|
||||
<p>Abstract base class for animation loaders</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<article>
|
||||
<div class="container-overview">
|
||||
<h2>Constructor</h2>
|
||||
|
||||
<h4 class="name" id="AnimationLoader">
|
||||
<span class="type-signature">(abstract) </span>new
|
||||
AnimationLoader<span class="signature">()</span
|
||||
><span class="type-signature"></span>
|
||||
</h4>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="loaders_AnimationLoader.js.html"
|
||||
>loaders/AnimationLoader.js</a
|
||||
>,
|
||||
<a href="loaders_AnimationLoader.js.html#line11">line 11</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<h3 class="subsection-title">Methods</h3>
|
||||
|
||||
<h4 class="name" id="loadAnimation">
|
||||
<span class="type-signature">(async, abstract) </span
|
||||
>loadAnimation<span class="signature">(_name)</span
|
||||
><span class="type-signature">
|
||||
→ {Promise.<THREE.AnimationClip>}</span
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Load an animation by name</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>_name</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>The animation name to load (unused in base class)</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="loaders_AnimationLoader.js.html"
|
||||
>loaders/AnimationLoader.js</a
|
||||
>,
|
||||
<a href="loaders_AnimationLoader.js.html#line19">line 19</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Throws:</h5>
|
||||
|
||||
<dl>
|
||||
<dt>
|
||||
<div class="param-desc">
|
||||
<p>Must be implemented by subclasses</p>
|
||||
</div>
|
||||
</dt>
|
||||
<dd></dd>
|
||||
<dt>
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Error</span>
|
||||
</dd>
|
||||
</dl>
|
||||
</dt>
|
||||
<dd></dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<div class="param-desc">
|
||||
<p>The loaded animation clip</p>
|
||||
</div>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Promise.<THREE.AnimationClip></span>
|
||||
</dd>
|
||||
</dl>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2>
|
||||
<h3>Modules</h3>
|
||||
<ul>
|
||||
<li><a href="module-StateHandler.html">StateHandler</a></li>
|
||||
<li><a href="module-animation.html">animation</a></li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationConstants.html"
|
||||
>animation/AnimationConstants</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationNameMapper.html"
|
||||
>animation/AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="module-constants.html">constants</a></li>
|
||||
<li><a href="module-core.html">core</a></li>
|
||||
<li><a href="module-factories.html">factories</a></li>
|
||||
<li><a href="module-loaders.html">loaders</a></li>
|
||||
<li><a href="module-owen.html">owen</a></li>
|
||||
<li><a href="module-states.html">states</a></li>
|
||||
</ul>
|
||||
<h3>Classes</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
|
||||
<li>
|
||||
<a href="module-animation.AnimationClipFactory.html"
|
||||
>AnimationClipFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
||||
>AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-core.OwenAnimationContext.html"
|
||||
>OwenAnimationContext</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-factories.OwenSystemFactory.html"
|
||||
>OwenSystemFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.GLTFAnimationLoader.html"
|
||||
>GLTFAnimationLoader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-states.StateFactory.html">StateFactory</a></li>
|
||||
<li>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<br class="clear" />
|
||||
|
||||
<footer>
|
||||
Documentation generated by
|
||||
<a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
|
||||
2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
<script src="scripts/linenumber.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
485
docs/module-loaders.GLTFAnimationLoader.html
Normal file
485
docs/module-loaders.GLTFAnimationLoader.html
Normal file
@ -0,0 +1,485 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>JSDoc: Class: GLTFAnimationLoader</title>
|
||||
|
||||
<script src="scripts/prettify/prettify.js"></script>
|
||||
<script src="scripts/prettify/lang-css.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link
|
||||
type="text/css"
|
||||
rel="stylesheet"
|
||||
href="styles/prettify-tomorrow.css"
|
||||
/>
|
||||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1 class="page-title">Class: GLTFAnimationLoader</h1>
|
||||
|
||||
<section>
|
||||
<header>
|
||||
<h2>
|
||||
<span class="attribs"><span class="type-signature"></span></span>
|
||||
<span class="ancestors"
|
||||
><a href="module-loaders.html">loaders</a>.</span
|
||||
>GLTFAnimationLoader<span class="signature">(gltfLoader)</span
|
||||
><span class="type-signature"></span>
|
||||
</h2>
|
||||
|
||||
<div class="class-description">
|
||||
<p>GLTF animation loader implementation</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<article>
|
||||
<div class="container-overview">
|
||||
<h2>Constructor</h2>
|
||||
|
||||
<h4 class="name" id="GLTFAnimationLoader">
|
||||
<span class="type-signature"></span>new GLTFAnimationLoader<span
|
||||
class="signature"
|
||||
>(gltfLoader)</span
|
||||
><span class="type-signature"></span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Create a GLTF animation loader</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>gltfLoader</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">THREE.GLTFLoader</span>
|
||||
</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>The Three.js GLTF loader instance</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="loaders_AnimationLoader.js.html"
|
||||
>loaders/AnimationLoader.js</a
|
||||
>,
|
||||
<a href="loaders_AnimationLoader.js.html#line29">line 29</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<h3 class="subsection-title">Extends</h3>
|
||||
|
||||
<ul>
|
||||
<li>AnimationLoader</li>
|
||||
</ul>
|
||||
|
||||
<h3 class="subsection-title">Members</h3>
|
||||
|
||||
<h4 class="name" id="animationCache">
|
||||
<span class="type-signature"></span>animationCache<span
|
||||
class="type-signature"
|
||||
>
|
||||
:Map.<string, THREE.AnimationClip></span
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Cache for loaded animations</p>
|
||||
</div>
|
||||
|
||||
<h5>Type:</h5>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="param-type"
|
||||
>Map.<string, THREE.AnimationClip></span
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="loaders_AnimationLoader.js.html"
|
||||
>loaders/AnimationLoader.js</a
|
||||
>,
|
||||
<a href="loaders_AnimationLoader.js.html#line47">line 47</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="gltfLoader">
|
||||
<span class="type-signature"></span>gltfLoader<span
|
||||
class="type-signature"
|
||||
>
|
||||
:THREE.GLTFLoader</span
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>The Three.js GLTF loader</p>
|
||||
</div>
|
||||
|
||||
<h5>Type:</h5>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="param-type">THREE.GLTFLoader</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="loaders_AnimationLoader.js.html"
|
||||
>loaders/AnimationLoader.js</a
|
||||
>,
|
||||
<a href="loaders_AnimationLoader.js.html#line41">line 41</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h3 class="subsection-title">Methods</h3>
|
||||
|
||||
<h4 class="name" id="clearCache">
|
||||
<span class="type-signature"></span>clearCache<span
|
||||
class="signature"
|
||||
>()</span
|
||||
><span class="type-signature"> → {void}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Clear the animation cache</p>
|
||||
</div>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="loaders_AnimationLoader.js.html"
|
||||
>loaders/AnimationLoader.js</a
|
||||
>,
|
||||
<a href="loaders_AnimationLoader.js.html#line83">line 83</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">void</span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="getCachedAnimationNames">
|
||||
<span class="type-signature"></span>getCachedAnimationNames<span
|
||||
class="signature"
|
||||
>()</span
|
||||
><span class="type-signature"> → {Array.<string>}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Get all cached animation names</p>
|
||||
</div>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="loaders_AnimationLoader.js.html"
|
||||
>loaders/AnimationLoader.js</a
|
||||
>,
|
||||
<a href="loaders_AnimationLoader.js.html#line91">line 91</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<div class="param-desc">
|
||||
<p>Array of cached animation names</p>
|
||||
</div>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Array.<string></span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="loadAnimation">
|
||||
<span class="type-signature">(async) </span>loadAnimation<span
|
||||
class="signature"
|
||||
>(name)</span
|
||||
><span class="type-signature">
|
||||
→ {Promise.<THREE.AnimationClip>}</span
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Load an animation from GLTF by name</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>name</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>The animation name to load</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="loaders_AnimationLoader.js.html"
|
||||
>loaders/AnimationLoader.js</a
|
||||
>,
|
||||
<a href="loaders_AnimationLoader.js.html#line56">line 56</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Throws:</h5>
|
||||
|
||||
<dl>
|
||||
<dt>
|
||||
<div class="param-desc">
|
||||
<p>If animation is not found</p>
|
||||
</div>
|
||||
</dt>
|
||||
<dd></dd>
|
||||
<dt>
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Error</span>
|
||||
</dd>
|
||||
</dl>
|
||||
</dt>
|
||||
<dd></dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<div class="param-desc">
|
||||
<p>The loaded animation clip</p>
|
||||
</div>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Promise.<THREE.AnimationClip></span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="preloadAnimations">
|
||||
<span class="type-signature">(async) </span>preloadAnimations<span
|
||||
class="signature"
|
||||
>(gltfModel)</span
|
||||
><span class="type-signature"> → {Promise.<void>}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Preload animations from a GLTF model</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>gltfModel</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">Object</span>
|
||||
</td>
|
||||
|
||||
<td class="description last"><p>The loaded GLTF model</p></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="loaders_AnimationLoader.js.html"
|
||||
>loaders/AnimationLoader.js</a
|
||||
>,
|
||||
<a href="loaders_AnimationLoader.js.html#line71">line 71</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Promise.<void></span>
|
||||
</dd>
|
||||
</dl>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2>
|
||||
<h3>Modules</h3>
|
||||
<ul>
|
||||
<li><a href="module-StateHandler.html">StateHandler</a></li>
|
||||
<li><a href="module-animation.html">animation</a></li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationConstants.html"
|
||||
>animation/AnimationConstants</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationNameMapper.html"
|
||||
>animation/AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="module-constants.html">constants</a></li>
|
||||
<li><a href="module-core.html">core</a></li>
|
||||
<li><a href="module-factories.html">factories</a></li>
|
||||
<li><a href="module-loaders.html">loaders</a></li>
|
||||
<li><a href="module-owen.html">owen</a></li>
|
||||
<li><a href="module-states.html">states</a></li>
|
||||
</ul>
|
||||
<h3>Classes</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
|
||||
<li>
|
||||
<a href="module-animation.AnimationClipFactory.html"
|
||||
>AnimationClipFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
||||
>AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-core.OwenAnimationContext.html"
|
||||
>OwenAnimationContext</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-factories.OwenSystemFactory.html"
|
||||
>OwenSystemFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.GLTFAnimationLoader.html"
|
||||
>GLTFAnimationLoader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-states.StateFactory.html">StateFactory</a></li>
|
||||
<li>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<br class="clear" />
|
||||
|
||||
<footer>
|
||||
Documentation generated by
|
||||
<a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
|
||||
2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
<script src="scripts/linenumber.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
154
docs/module-loaders.html
Normal file
154
docs/module-loaders.html
Normal file
@ -0,0 +1,154 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>JSDoc: Module: loaders</title>
|
||||
|
||||
<script src="scripts/prettify/prettify.js"></script>
|
||||
<script src="scripts/prettify/lang-css.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link
|
||||
type="text/css"
|
||||
rel="stylesheet"
|
||||
href="styles/prettify-tomorrow.css"
|
||||
/>
|
||||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1 class="page-title">Module: loaders</h1>
|
||||
|
||||
<section>
|
||||
<header></header>
|
||||
|
||||
<article>
|
||||
<div class="container-overview">
|
||||
<div class="description">
|
||||
<p>Animation loader interfaces and implementations</p>
|
||||
</div>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="loaders_AnimationLoader.js.html"
|
||||
>loaders/AnimationLoader.js</a
|
||||
>,
|
||||
<a href="loaders_AnimationLoader.js.html#line1">line 1</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<h3 class="subsection-title">Classes</h3>
|
||||
|
||||
<dl>
|
||||
<dt>
|
||||
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
||||
</dt>
|
||||
<dd></dd>
|
||||
|
||||
<dt>
|
||||
<a href="module-loaders.GLTFAnimationLoader.html"
|
||||
>GLTFAnimationLoader</a
|
||||
>
|
||||
</dt>
|
||||
<dd></dd>
|
||||
</dl>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2>
|
||||
<h3>Modules</h3>
|
||||
<ul>
|
||||
<li><a href="module-StateHandler.html">StateHandler</a></li>
|
||||
<li><a href="module-animation.html">animation</a></li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationConstants.html"
|
||||
>animation/AnimationConstants</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationNameMapper.html"
|
||||
>animation/AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="module-constants.html">constants</a></li>
|
||||
<li><a href="module-core.html">core</a></li>
|
||||
<li><a href="module-factories.html">factories</a></li>
|
||||
<li><a href="module-loaders.html">loaders</a></li>
|
||||
<li><a href="module-owen.html">owen</a></li>
|
||||
<li><a href="module-states.html">states</a></li>
|
||||
</ul>
|
||||
<h3>Classes</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
|
||||
<li>
|
||||
<a href="module-animation.AnimationClipFactory.html"
|
||||
>AnimationClipFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
||||
>AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-core.OwenAnimationContext.html"
|
||||
>OwenAnimationContext</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-factories.OwenSystemFactory.html"
|
||||
>OwenSystemFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.GLTFAnimationLoader.html"
|
||||
>GLTFAnimationLoader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-states.StateFactory.html">StateFactory</a></li>
|
||||
<li>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<br class="clear" />
|
||||
|
||||
<footer>
|
||||
Documentation generated by
|
||||
<a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
|
||||
2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
<script src="scripts/linenumber.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
158
docs/module-owen.html
Normal file
158
docs/module-owen.html
Normal file
@ -0,0 +1,158 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>JSDoc: Module: owen</title>
|
||||
|
||||
<script src="scripts/prettify/prettify.js"></script>
|
||||
<script src="scripts/prettify/lang-css.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link
|
||||
type="text/css"
|
||||
rel="stylesheet"
|
||||
href="styles/prettify-tomorrow.css"
|
||||
/>
|
||||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1 class="page-title">Module: owen</h1>
|
||||
|
||||
<section>
|
||||
<header></header>
|
||||
|
||||
<article>
|
||||
<div class="container-overview">
|
||||
<div class="description">
|
||||
<p>Main entry point for the Owen Animation System</p>
|
||||
</div>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="index.js.html">index.js</a>,
|
||||
<a href="index.js.html#line1">line 1</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="module:owen">
|
||||
<span class="type-signature"></span>module:owen<span
|
||||
class="type-signature"
|
||||
></span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Default export - the main factory for easy usage</p>
|
||||
</div>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="index.js.html">index.js</a>,
|
||||
<a href="index.js.html#line51">line 51</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2>
|
||||
<h3>Modules</h3>
|
||||
<ul>
|
||||
<li><a href="module-StateHandler.html">StateHandler</a></li>
|
||||
<li><a href="module-animation.html">animation</a></li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationConstants.html"
|
||||
>animation/AnimationConstants</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationNameMapper.html"
|
||||
>animation/AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="module-constants.html">constants</a></li>
|
||||
<li><a href="module-core.html">core</a></li>
|
||||
<li><a href="module-factories.html">factories</a></li>
|
||||
<li><a href="module-loaders.html">loaders</a></li>
|
||||
<li><a href="module-owen.html">owen</a></li>
|
||||
<li><a href="module-states.html">states</a></li>
|
||||
</ul>
|
||||
<h3>Classes</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
|
||||
<li>
|
||||
<a href="module-animation.AnimationClipFactory.html"
|
||||
>AnimationClipFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
||||
>AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-core.OwenAnimationContext.html"
|
||||
>OwenAnimationContext</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-factories.OwenSystemFactory.html"
|
||||
>OwenSystemFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.GLTFAnimationLoader.html"
|
||||
>GLTFAnimationLoader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-states.StateFactory.html">StateFactory</a></li>
|
||||
<li>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<br class="clear" />
|
||||
|
||||
<footer>
|
||||
Documentation generated by
|
||||
<a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
|
||||
2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
<script src="scripts/linenumber.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
508
docs/module-states.ReactStateHandler.html
Normal file
508
docs/module-states.ReactStateHandler.html
Normal file
@ -0,0 +1,508 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>JSDoc: Class: ReactStateHandler</title>
|
||||
|
||||
<script src="scripts/prettify/prettify.js"></script>
|
||||
<script src="scripts/prettify/lang-css.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link
|
||||
type="text/css"
|
||||
rel="stylesheet"
|
||||
href="styles/prettify-tomorrow.css"
|
||||
/>
|
||||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1 class="page-title">Class: ReactStateHandler</h1>
|
||||
|
||||
<section>
|
||||
<header>
|
||||
<h2>
|
||||
<span class="attribs"><span class="type-signature"></span></span>
|
||||
<span class="ancestors"
|
||||
><a href="module-states.html">states</a>.</span
|
||||
>ReactStateHandler<span class="signature">(context)</span
|
||||
><span class="type-signature"></span>
|
||||
</h2>
|
||||
|
||||
<div class="class-description">
|
||||
<p>Handler for the React state</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<article>
|
||||
<div class="container-overview">
|
||||
<h2>Constructor</h2>
|
||||
|
||||
<h4 class="name" id="ReactStateHandler">
|
||||
<span class="type-signature"></span>new ReactStateHandler<span
|
||||
class="signature"
|
||||
>(context)</span
|
||||
><span class="type-signature"></span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Create a react state handler</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>context</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">OwenAnimationContext</span>
|
||||
</td>
|
||||
|
||||
<td class="description last"><p>The animation context</p></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_ReactStateHandler.js.html"
|
||||
>states/ReactStateHandler.js</a
|
||||
>,
|
||||
<a href="states_ReactStateHandler.js.html#line14"
|
||||
>line 14</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<h3 class="subsection-title">Extends</h3>
|
||||
|
||||
<ul>
|
||||
<li>StateHandler</li>
|
||||
</ul>
|
||||
|
||||
<h3 class="subsection-title">Members</h3>
|
||||
|
||||
<h4 class="name" id="emotion">
|
||||
<span class="type-signature"></span>emotion<span
|
||||
class="type-signature"
|
||||
>
|
||||
:string</span
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Current emotional state</p>
|
||||
</div>
|
||||
|
||||
<h5>Type:</h5>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="param-type">string</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_ReactStateHandler.js.html"
|
||||
>states/ReactStateHandler.js</a
|
||||
>,
|
||||
<a href="states_ReactStateHandler.js.html#line26">line 26</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h3 class="subsection-title">Methods</h3>
|
||||
|
||||
<h4 class="name" id="enter">
|
||||
<span class="type-signature">(async) </span>enter<span
|
||||
class="signature"
|
||||
>(_fromState<span class="signature-attributes">opt</span>,
|
||||
emotion<span class="signature-attributes">opt</span>)</span
|
||||
><span class="type-signature"> → {Promise.<void>}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Enter the react state</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th>Attributes</th>
|
||||
|
||||
<th>Default</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>_fromState</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
|
|
||||
|
||||
<span class="param-type">null</span>
|
||||
</td>
|
||||
|
||||
<td class="attributes"><optional><br /></td>
|
||||
|
||||
<td class="default">null</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>The previous state (unused)</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="name"><code>emotion</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="attributes"><optional><br /></td>
|
||||
|
||||
<td class="default">Emotions.NEUTRAL</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>The emotion to enter with</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_ReactStateHandler.js.html"
|
||||
>states/ReactStateHandler.js</a
|
||||
>,
|
||||
<a href="states_ReactStateHandler.js.html#line35">line 35</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Promise.<void></span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="exit">
|
||||
<span class="type-signature">(async) </span>exit<span
|
||||
class="signature"
|
||||
>(toState<span class="signature-attributes">opt</span>,
|
||||
emotion<span class="signature-attributes">opt</span>)</span
|
||||
><span class="type-signature"> → {Promise.<void>}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Exit the react state</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th>Attributes</th>
|
||||
|
||||
<th>Default</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>toState</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
|
|
||||
|
||||
<span class="param-type">null</span>
|
||||
</td>
|
||||
|
||||
<td class="attributes"><optional><br /></td>
|
||||
|
||||
<td class="default">null</td>
|
||||
|
||||
<td class="description last"><p>The next state</p></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="name"><code>emotion</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="attributes"><optional><br /></td>
|
||||
|
||||
<td class="default">Emotions.NEUTRAL</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>The emotion to exit with</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_ReactStateHandler.js.html"
|
||||
>states/ReactStateHandler.js</a
|
||||
>,
|
||||
<a href="states_ReactStateHandler.js.html#line53">line 53</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Promise.<void></span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="getAvailableTransitions">
|
||||
<span class="type-signature"></span>getAvailableTransitions<span
|
||||
class="signature"
|
||||
>()</span
|
||||
><span class="type-signature"> → {Array.<string>}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Get available transitions from react state</p>
|
||||
</div>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_ReactStateHandler.js.html"
|
||||
>states/ReactStateHandler.js</a
|
||||
>,
|
||||
<a href="states_ReactStateHandler.js.html#line156"
|
||||
>line 156</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<div class="param-desc">
|
||||
<p>Array of available state transitions</p>
|
||||
</div>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Array.<string></span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="handleMessage">
|
||||
<span class="type-signature">(async) </span>handleMessage<span
|
||||
class="signature"
|
||||
>(message)</span
|
||||
><span class="type-signature"> → {Promise.<void>}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Handle a user message in react state</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>message</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="description last"><p>The user message</p></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_ReactStateHandler.js.html"
|
||||
>states/ReactStateHandler.js</a
|
||||
>,
|
||||
<a href="states_ReactStateHandler.js.html#line80">line 80</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Promise.<void></span>
|
||||
</dd>
|
||||
</dl>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2>
|
||||
<h3>Modules</h3>
|
||||
<ul>
|
||||
<li><a href="module-StateHandler.html">StateHandler</a></li>
|
||||
<li><a href="module-animation.html">animation</a></li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationConstants.html"
|
||||
>animation/AnimationConstants</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationNameMapper.html"
|
||||
>animation/AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="module-constants.html">constants</a></li>
|
||||
<li><a href="module-core.html">core</a></li>
|
||||
<li><a href="module-factories.html">factories</a></li>
|
||||
<li><a href="module-loaders.html">loaders</a></li>
|
||||
<li><a href="module-owen.html">owen</a></li>
|
||||
<li><a href="module-states.html">states</a></li>
|
||||
</ul>
|
||||
<h3>Classes</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
|
||||
<li>
|
||||
<a href="module-animation.AnimationClipFactory.html"
|
||||
>AnimationClipFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
||||
>AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-core.OwenAnimationContext.html"
|
||||
>OwenAnimationContext</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-factories.OwenSystemFactory.html"
|
||||
>OwenSystemFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.GLTFAnimationLoader.html"
|
||||
>GLTFAnimationLoader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-states.StateFactory.html">StateFactory</a></li>
|
||||
<li>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<br class="clear" />
|
||||
|
||||
<footer>
|
||||
Documentation generated by
|
||||
<a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
|
||||
2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
<script src="scripts/linenumber.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
683
docs/module-states.SleepStateHandler.html
Normal file
683
docs/module-states.SleepStateHandler.html
Normal file
@ -0,0 +1,683 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>JSDoc: Class: SleepStateHandler</title>
|
||||
|
||||
<script src="scripts/prettify/prettify.js"></script>
|
||||
<script src="scripts/prettify/lang-css.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link
|
||||
type="text/css"
|
||||
rel="stylesheet"
|
||||
href="styles/prettify-tomorrow.css"
|
||||
/>
|
||||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1 class="page-title">Class: SleepStateHandler</h1>
|
||||
|
||||
<section>
|
||||
<header>
|
||||
<h2>
|
||||
<span class="attribs"><span class="type-signature"></span></span>
|
||||
<span class="ancestors"
|
||||
><a href="module-states.html">states</a>.</span
|
||||
>SleepStateHandler<span class="signature">(context)</span
|
||||
><span class="type-signature"></span>
|
||||
</h2>
|
||||
|
||||
<div class="class-description">
|
||||
<p>Handler for the Sleep state</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<article>
|
||||
<div class="container-overview">
|
||||
<h2>Constructor</h2>
|
||||
|
||||
<h4 class="name" id="SleepStateHandler">
|
||||
<span class="type-signature"></span>new SleepStateHandler<span
|
||||
class="signature"
|
||||
>(context)</span
|
||||
><span class="type-signature"></span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Create a sleep state handler</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>context</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">OwenAnimationContext</span>
|
||||
</td>
|
||||
|
||||
<td class="description last"><p>The animation context</p></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_SleepStateHandler.js.html"
|
||||
>states/SleepStateHandler.js</a
|
||||
>,
|
||||
<a href="states_SleepStateHandler.js.html#line14"
|
||||
>line 14</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<h3 class="subsection-title">Extends</h3>
|
||||
|
||||
<ul>
|
||||
<li>StateHandler</li>
|
||||
</ul>
|
||||
|
||||
<h3 class="subsection-title">Members</h3>
|
||||
|
||||
<h4 class="name" id="isDeepSleep">
|
||||
<span class="type-signature"></span>isDeepSleep<span
|
||||
class="type-signature"
|
||||
>
|
||||
:boolean</span
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Whether the character is in deep sleep</p>
|
||||
</div>
|
||||
|
||||
<h5>Type:</h5>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="param-type">boolean</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_SleepStateHandler.js.html"
|
||||
>states/SleepStateHandler.js</a
|
||||
>,
|
||||
<a href="states_SleepStateHandler.js.html#line32">line 32</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="sleepClip">
|
||||
<span class="type-signature"></span>sleepClip<span
|
||||
class="type-signature"
|
||||
>
|
||||
:AnimationClip|null</span
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Sleep animation clip</p>
|
||||
</div>
|
||||
|
||||
<h5>Type:</h5>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="param-type">AnimationClip</span>
|
||||
|
|
||||
|
||||
<span class="param-type">null</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_SleepStateHandler.js.html"
|
||||
>states/SleepStateHandler.js</a
|
||||
>,
|
||||
<a href="states_SleepStateHandler.js.html#line26">line 26</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h3 class="subsection-title">Methods</h3>
|
||||
|
||||
<h4 class="name" id="enter">
|
||||
<span class="type-signature">(async) </span>enter<span
|
||||
class="signature"
|
||||
>(fromState<span class="signature-attributes">opt</span>,
|
||||
_emotion<span class="signature-attributes">opt</span>)</span
|
||||
><span class="type-signature"> → {Promise.<void>}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Enter the sleep state</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th>Attributes</th>
|
||||
|
||||
<th>Default</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>fromState</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
|
|
||||
|
||||
<span class="param-type">null</span>
|
||||
</td>
|
||||
|
||||
<td class="attributes"><optional><br /></td>
|
||||
|
||||
<td class="default">null</td>
|
||||
|
||||
<td class="description last"><p>The previous state</p></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="name"><code>_emotion</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="attributes"><optional><br /></td>
|
||||
|
||||
<td class="default">Emotions.NEUTRAL</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>The emotion to enter with (unused)</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_SleepStateHandler.js.html"
|
||||
>states/SleepStateHandler.js</a
|
||||
>,
|
||||
<a href="states_SleepStateHandler.js.html#line41">line 41</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Promise.<void></span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="exit">
|
||||
<span class="type-signature">(async) </span>exit<span
|
||||
class="signature"
|
||||
>(toState<span class="signature-attributes">opt</span>,
|
||||
emotion<span class="signature-attributes">opt</span>)</span
|
||||
><span class="type-signature"> → {Promise.<void>}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Exit the sleep state</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th>Attributes</th>
|
||||
|
||||
<th>Default</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>toState</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
|
|
||||
|
||||
<span class="param-type">null</span>
|
||||
</td>
|
||||
|
||||
<td class="attributes"><optional><br /></td>
|
||||
|
||||
<td class="default">null</td>
|
||||
|
||||
<td class="description last"><p>The next state</p></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="name"><code>emotion</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="attributes"><optional><br /></td>
|
||||
|
||||
<td class="default">Emotions.NEUTRAL</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>The emotion to exit with</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_SleepStateHandler.js.html"
|
||||
>states/SleepStateHandler.js</a
|
||||
>,
|
||||
<a href="states_SleepStateHandler.js.html#line67">line 67</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Promise.<void></span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="getAvailableTransitions">
|
||||
<span class="type-signature"></span>getAvailableTransitions<span
|
||||
class="signature"
|
||||
>()</span
|
||||
><span class="type-signature"> → {Array.<string>}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Get available transitions from sleep state</p>
|
||||
</div>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_SleepStateHandler.js.html"
|
||||
>states/SleepStateHandler.js</a
|
||||
>,
|
||||
<a href="states_SleepStateHandler.js.html#line119"
|
||||
>line 119</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<div class="param-desc">
|
||||
<p>Array of available state transitions</p>
|
||||
</div>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Array.<string></span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="handleMessage">
|
||||
<span class="type-signature">(async) </span>handleMessage<span
|
||||
class="signature"
|
||||
>(_message)</span
|
||||
><span class="type-signature"> → {Promise.<void>}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Handle a user message in sleep state (wake up)</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>_message</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>The user message (unused, just triggers wake up)</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_SleepStateHandler.js.html"
|
||||
>states/SleepStateHandler.js</a
|
||||
>,
|
||||
<a href="states_SleepStateHandler.js.html#line106"
|
||||
>line 106</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Promise.<void></span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="isInDeepSleep">
|
||||
<span class="type-signature"></span>isInDeepSleep<span
|
||||
class="signature"
|
||||
>()</span
|
||||
><span class="type-signature"> → {boolean}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Check if in deep sleep</p>
|
||||
</div>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_SleepStateHandler.js.html"
|
||||
>states/SleepStateHandler.js</a
|
||||
>,
|
||||
<a href="states_SleepStateHandler.js.html#line127"
|
||||
>line 127</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<div class="param-desc">
|
||||
<p>True if in deep sleep, false otherwise</p>
|
||||
</div>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">boolean</span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="update">
|
||||
<span class="type-signature"></span>update<span class="signature"
|
||||
>(_deltaTime)</span
|
||||
><span class="type-signature"> → {void}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Update the sleep state</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>_deltaTime</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">number</span>
|
||||
</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>Time elapsed since last update (ms, unused)</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_SleepStateHandler.js.html"
|
||||
>states/SleepStateHandler.js</a
|
||||
>,
|
||||
<a href="states_SleepStateHandler.js.html#line96">line 96</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">void</span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="wakeUp">
|
||||
<span class="type-signature">(async) </span>wakeUp<span
|
||||
class="signature"
|
||||
>()</span
|
||||
><span class="type-signature"> → {Promise.<void>}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Force wake up from sleep</p>
|
||||
</div>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_SleepStateHandler.js.html"
|
||||
>states/SleepStateHandler.js</a
|
||||
>,
|
||||
<a href="states_SleepStateHandler.js.html#line135"
|
||||
>line 135</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Promise.<void></span>
|
||||
</dd>
|
||||
</dl>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2>
|
||||
<h3>Modules</h3>
|
||||
<ul>
|
||||
<li><a href="module-StateHandler.html">StateHandler</a></li>
|
||||
<li><a href="module-animation.html">animation</a></li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationConstants.html"
|
||||
>animation/AnimationConstants</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationNameMapper.html"
|
||||
>animation/AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="module-constants.html">constants</a></li>
|
||||
<li><a href="module-core.html">core</a></li>
|
||||
<li><a href="module-factories.html">factories</a></li>
|
||||
<li><a href="module-loaders.html">loaders</a></li>
|
||||
<li><a href="module-owen.html">owen</a></li>
|
||||
<li><a href="module-states.html">states</a></li>
|
||||
</ul>
|
||||
<h3>Classes</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
|
||||
<li>
|
||||
<a href="module-animation.AnimationClipFactory.html"
|
||||
>AnimationClipFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
||||
>AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-core.OwenAnimationContext.html"
|
||||
>OwenAnimationContext</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-factories.OwenSystemFactory.html"
|
||||
>OwenSystemFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.GLTFAnimationLoader.html"
|
||||
>GLTFAnimationLoader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-states.StateFactory.html">StateFactory</a></li>
|
||||
<li>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<br class="clear" />
|
||||
|
||||
<footer>
|
||||
Documentation generated by
|
||||
<a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
|
||||
2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
<script src="scripts/linenumber.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
491
docs/module-states.StateFactory.html
Normal file
491
docs/module-states.StateFactory.html
Normal file
@ -0,0 +1,491 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>JSDoc: Class: StateFactory</title>
|
||||
|
||||
<script src="scripts/prettify/prettify.js"></script>
|
||||
<script src="scripts/prettify/lang-css.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link
|
||||
type="text/css"
|
||||
rel="stylesheet"
|
||||
href="styles/prettify-tomorrow.css"
|
||||
/>
|
||||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1 class="page-title">Class: StateFactory</h1>
|
||||
|
||||
<section>
|
||||
<header>
|
||||
<h2>
|
||||
<span class="attribs"><span class="type-signature"></span></span>
|
||||
<span class="ancestors"
|
||||
><a href="module-states.html">states</a>.</span
|
||||
>StateFactory<span class="signature">()</span
|
||||
><span class="type-signature"></span>
|
||||
</h2>
|
||||
|
||||
<div class="class-description">
|
||||
<p>
|
||||
Factory for creating state handlers using dependency injection
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<article>
|
||||
<div class="container-overview">
|
||||
<h2>Constructor</h2>
|
||||
|
||||
<h4 class="name" id="StateFactory">
|
||||
<span class="type-signature"></span>new StateFactory<span
|
||||
class="signature"
|
||||
>()</span
|
||||
><span class="type-signature"></span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Create a state factory</p>
|
||||
</div>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_StateFactory.js.html"
|
||||
>states/StateFactory.js</a
|
||||
>, <a href="states_StateFactory.js.html#line16">line 16</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<h3 class="subsection-title">Methods</h3>
|
||||
|
||||
<h4 class="name" id="createStateHandler">
|
||||
<span class="type-signature"></span>createStateHandler<span
|
||||
class="signature"
|
||||
>(stateName, context)</span
|
||||
><span class="type-signature"> → {StateHandler}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Create a state handler instance</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>stateName</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="description last"><p>The name of the state</p></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="name"><code>context</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">OwenAnimationContext</span>
|
||||
</td>
|
||||
|
||||
<td class="description last"><p>The animation context</p></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_StateFactory.js.html"
|
||||
>states/StateFactory.js</a
|
||||
>, <a href="states_StateFactory.js.html#line52">line 52</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Throws:</h5>
|
||||
|
||||
<dl>
|
||||
<dt>
|
||||
<div class="param-desc">
|
||||
<p>If state handler is not registered</p>
|
||||
</div>
|
||||
</dt>
|
||||
<dd></dd>
|
||||
<dt>
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Error</span>
|
||||
</dd>
|
||||
</dl>
|
||||
</dt>
|
||||
<dd></dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<div class="param-desc">
|
||||
<p>The created state handler</p>
|
||||
</div>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">StateHandler</span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="getAvailableStates">
|
||||
<span class="type-signature"></span>getAvailableStates<span
|
||||
class="signature"
|
||||
>()</span
|
||||
><span class="type-signature"> → {Array.<string>}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Get all available state names</p>
|
||||
</div>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_StateFactory.js.html"
|
||||
>states/StateFactory.js</a
|
||||
>, <a href="states_StateFactory.js.html#line65">line 65</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<div class="param-desc">
|
||||
<p>Array of registered state names</p>
|
||||
</div>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Array.<string></span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="isStateRegistered">
|
||||
<span class="type-signature"></span>isStateRegistered<span
|
||||
class="signature"
|
||||
>(stateName)</span
|
||||
><span class="type-signature"> → {boolean}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Check if a state is registered</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>stateName</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="description last"><p>The state name to check</p></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_StateFactory.js.html"
|
||||
>states/StateFactory.js</a
|
||||
>, <a href="states_StateFactory.js.html#line74">line 74</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<div class="param-desc">
|
||||
<p>True if registered, false otherwise</p>
|
||||
</div>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">boolean</span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="registerStateHandler">
|
||||
<span class="type-signature"></span>registerStateHandler<span
|
||||
class="signature"
|
||||
>(stateName, handlerClass)</span
|
||||
><span class="type-signature"> → {void}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Register a state handler class</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>stateName</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="description last"><p>The name of the state</p></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="name"><code>handlerClass</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">function</span>
|
||||
</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>The handler class constructor</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_StateFactory.js.html"
|
||||
>states/StateFactory.js</a
|
||||
>, <a href="states_StateFactory.js.html#line41">line 41</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">void</span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="unregisterStateHandler">
|
||||
<span class="type-signature"></span>unregisterStateHandler<span
|
||||
class="signature"
|
||||
>(stateName)</span
|
||||
><span class="type-signature"> → {boolean}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Unregister a state handler</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>stateName</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>The state name to unregister</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_StateFactory.js.html"
|
||||
>states/StateFactory.js</a
|
||||
>, <a href="states_StateFactory.js.html#line83">line 83</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<div class="param-desc">
|
||||
<p>True if removed, false if not found</p>
|
||||
</div>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">boolean</span>
|
||||
</dd>
|
||||
</dl>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2>
|
||||
<h3>Modules</h3>
|
||||
<ul>
|
||||
<li><a href="module-StateHandler.html">StateHandler</a></li>
|
||||
<li><a href="module-animation.html">animation</a></li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationConstants.html"
|
||||
>animation/AnimationConstants</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationNameMapper.html"
|
||||
>animation/AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="module-constants.html">constants</a></li>
|
||||
<li><a href="module-core.html">core</a></li>
|
||||
<li><a href="module-factories.html">factories</a></li>
|
||||
<li><a href="module-loaders.html">loaders</a></li>
|
||||
<li><a href="module-owen.html">owen</a></li>
|
||||
<li><a href="module-states.html">states</a></li>
|
||||
</ul>
|
||||
<h3>Classes</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
|
||||
<li>
|
||||
<a href="module-animation.AnimationClipFactory.html"
|
||||
>AnimationClipFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
||||
>AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-core.OwenAnimationContext.html"
|
||||
>OwenAnimationContext</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-factories.OwenSystemFactory.html"
|
||||
>OwenSystemFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.GLTFAnimationLoader.html"
|
||||
>GLTFAnimationLoader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-states.StateFactory.html">StateFactory</a></li>
|
||||
<li>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<br class="clear" />
|
||||
|
||||
<footer>
|
||||
Documentation generated by
|
||||
<a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
|
||||
2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
<script src="scripts/linenumber.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
608
docs/module-states.TypeStateHandler.html
Normal file
608
docs/module-states.TypeStateHandler.html
Normal file
@ -0,0 +1,608 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>JSDoc: Class: TypeStateHandler</title>
|
||||
|
||||
<script src="scripts/prettify/prettify.js"></script>
|
||||
<script src="scripts/prettify/lang-css.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link
|
||||
type="text/css"
|
||||
rel="stylesheet"
|
||||
href="styles/prettify-tomorrow.css"
|
||||
/>
|
||||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1 class="page-title">Class: TypeStateHandler</h1>
|
||||
|
||||
<section>
|
||||
<header>
|
||||
<h2>
|
||||
<span class="attribs"><span class="type-signature"></span></span>
|
||||
<span class="ancestors"
|
||||
><a href="module-states.html">states</a>.</span
|
||||
>TypeStateHandler<span class="signature">(context)</span
|
||||
><span class="type-signature"></span>
|
||||
</h2>
|
||||
|
||||
<div class="class-description"><p>Handler for the Type state</p></div>
|
||||
</header>
|
||||
|
||||
<article>
|
||||
<div class="container-overview">
|
||||
<h2>Constructor</h2>
|
||||
|
||||
<h4 class="name" id="TypeStateHandler">
|
||||
<span class="type-signature"></span>new TypeStateHandler<span
|
||||
class="signature"
|
||||
>(context)</span
|
||||
><span class="type-signature"></span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Create a type state handler</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>context</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">OwenAnimationContext</span>
|
||||
</td>
|
||||
|
||||
<td class="description last"><p>The animation context</p></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_TypeStateHandler.js.html"
|
||||
>states/TypeStateHandler.js</a
|
||||
>,
|
||||
<a href="states_TypeStateHandler.js.html#line14">line 14</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<h3 class="subsection-title">Extends</h3>
|
||||
|
||||
<ul>
|
||||
<li>StateHandler</li>
|
||||
</ul>
|
||||
|
||||
<h3 class="subsection-title">Members</h3>
|
||||
|
||||
<h4 class="name" id="emotion">
|
||||
<span class="type-signature"></span>emotion<span
|
||||
class="type-signature"
|
||||
>
|
||||
:string</span
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Current emotional state</p>
|
||||
</div>
|
||||
|
||||
<h5>Type:</h5>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="param-type">string</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_TypeStateHandler.js.html"
|
||||
>states/TypeStateHandler.js</a
|
||||
>,
|
||||
<a href="states_TypeStateHandler.js.html#line26">line 26</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="isTyping">
|
||||
<span class="type-signature"></span>isTyping<span
|
||||
class="type-signature"
|
||||
>
|
||||
:boolean</span
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Whether currently typing</p>
|
||||
</div>
|
||||
|
||||
<h5>Type:</h5>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="param-type">boolean</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_TypeStateHandler.js.html"
|
||||
>states/TypeStateHandler.js</a
|
||||
>,
|
||||
<a href="states_TypeStateHandler.js.html#line32">line 32</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h3 class="subsection-title">Methods</h3>
|
||||
|
||||
<h4 class="name" id="enter">
|
||||
<span class="type-signature">(async) </span>enter<span
|
||||
class="signature"
|
||||
>(_fromState<span class="signature-attributes">opt</span>,
|
||||
emotion<span class="signature-attributes">opt</span>)</span
|
||||
><span class="type-signature"> → {Promise.<void>}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Enter the type state</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th>Attributes</th>
|
||||
|
||||
<th>Default</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>_fromState</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
|
|
||||
|
||||
<span class="param-type">null</span>
|
||||
</td>
|
||||
|
||||
<td class="attributes"><optional><br /></td>
|
||||
|
||||
<td class="default">null</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>The previous state (unused)</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="name"><code>emotion</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="attributes"><optional><br /></td>
|
||||
|
||||
<td class="default">Emotions.NEUTRAL</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>The emotion to enter with</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_TypeStateHandler.js.html"
|
||||
>states/TypeStateHandler.js</a
|
||||
>,
|
||||
<a href="states_TypeStateHandler.js.html#line41">line 41</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Promise.<void></span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="exit">
|
||||
<span class="type-signature">(async) </span>exit<span
|
||||
class="signature"
|
||||
>(toState<span class="signature-attributes">opt</span>,
|
||||
_emotion<span class="signature-attributes">opt</span>)</span
|
||||
><span class="type-signature"> → {Promise.<void>}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Exit the type state</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th>Attributes</th>
|
||||
|
||||
<th>Default</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>toState</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
|
|
||||
|
||||
<span class="param-type">null</span>
|
||||
</td>
|
||||
|
||||
<td class="attributes"><optional><br /></td>
|
||||
|
||||
<td class="default">null</td>
|
||||
|
||||
<td class="description last"><p>The next state</p></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="name"><code>_emotion</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="attributes"><optional><br /></td>
|
||||
|
||||
<td class="default">Emotions.NEUTRAL</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>The emotion to exit with (unused)</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_TypeStateHandler.js.html"
|
||||
>states/TypeStateHandler.js</a
|
||||
>,
|
||||
<a href="states_TypeStateHandler.js.html#line65">line 65</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Promise.<void></span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="finishTyping">
|
||||
<span class="type-signature">(async) </span>finishTyping<span
|
||||
class="signature"
|
||||
>()</span
|
||||
><span class="type-signature"> → {Promise.<void>}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Finish typing and prepare to transition</p>
|
||||
</div>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_TypeStateHandler.js.html"
|
||||
>states/TypeStateHandler.js</a
|
||||
>,
|
||||
<a href="states_TypeStateHandler.js.html#line90">line 90</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Promise.<void></span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="getAvailableTransitions">
|
||||
<span class="type-signature"></span>getAvailableTransitions<span
|
||||
class="signature"
|
||||
>()</span
|
||||
><span class="type-signature"> → {Array.<string>}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Get available transitions from type state</p>
|
||||
</div>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_TypeStateHandler.js.html"
|
||||
>states/TypeStateHandler.js</a
|
||||
>,
|
||||
<a href="states_TypeStateHandler.js.html#line108">line 108</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<div class="param-desc">
|
||||
<p>Array of available state transitions</p>
|
||||
</div>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Array.<string></span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="getIsTyping">
|
||||
<span class="type-signature"></span>getIsTyping<span
|
||||
class="signature"
|
||||
>()</span
|
||||
><span class="type-signature"> → {boolean}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Check if currently typing</p>
|
||||
</div>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_TypeStateHandler.js.html"
|
||||
>states/TypeStateHandler.js</a
|
||||
>,
|
||||
<a href="states_TypeStateHandler.js.html#line116">line 116</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<div class="param-desc">
|
||||
<p>True if typing, false otherwise</p>
|
||||
</div>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">boolean</span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="setTyping">
|
||||
<span class="type-signature"></span>setTyping<span class="signature"
|
||||
>(typing)</span
|
||||
><span class="type-signature"> → {void}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Set typing state</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>typing</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">boolean</span>
|
||||
</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>Whether currently typing</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_TypeStateHandler.js.html"
|
||||
>states/TypeStateHandler.js</a
|
||||
>,
|
||||
<a href="states_TypeStateHandler.js.html#line125">line 125</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">void</span>
|
||||
</dd>
|
||||
</dl>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2>
|
||||
<h3>Modules</h3>
|
||||
<ul>
|
||||
<li><a href="module-StateHandler.html">StateHandler</a></li>
|
||||
<li><a href="module-animation.html">animation</a></li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationConstants.html"
|
||||
>animation/AnimationConstants</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationNameMapper.html"
|
||||
>animation/AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="module-constants.html">constants</a></li>
|
||||
<li><a href="module-core.html">core</a></li>
|
||||
<li><a href="module-factories.html">factories</a></li>
|
||||
<li><a href="module-loaders.html">loaders</a></li>
|
||||
<li><a href="module-owen.html">owen</a></li>
|
||||
<li><a href="module-states.html">states</a></li>
|
||||
</ul>
|
||||
<h3>Classes</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
|
||||
<li>
|
||||
<a href="module-animation.AnimationClipFactory.html"
|
||||
>AnimationClipFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
||||
>AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-core.OwenAnimationContext.html"
|
||||
>OwenAnimationContext</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-factories.OwenSystemFactory.html"
|
||||
>OwenSystemFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.GLTFAnimationLoader.html"
|
||||
>GLTFAnimationLoader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-states.StateFactory.html">StateFactory</a></li>
|
||||
<li>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<br class="clear" />
|
||||
|
||||
<footer>
|
||||
Documentation generated by
|
||||
<a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
|
||||
2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
<script src="scripts/linenumber.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
605
docs/module-states.WaitStateHandler.html
Normal file
605
docs/module-states.WaitStateHandler.html
Normal file
@ -0,0 +1,605 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>JSDoc: Class: WaitStateHandler</title>
|
||||
|
||||
<script src="scripts/prettify/prettify.js"></script>
|
||||
<script src="scripts/prettify/lang-css.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link
|
||||
type="text/css"
|
||||
rel="stylesheet"
|
||||
href="styles/prettify-tomorrow.css"
|
||||
/>
|
||||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1 class="page-title">Class: WaitStateHandler</h1>
|
||||
|
||||
<section>
|
||||
<header>
|
||||
<h2>
|
||||
<span class="attribs"><span class="type-signature"></span></span>
|
||||
<span class="ancestors"
|
||||
><a href="module-states.html">states</a>.</span
|
||||
>WaitStateHandler<span class="signature">(context)</span
|
||||
><span class="type-signature"></span>
|
||||
</h2>
|
||||
|
||||
<div class="class-description">
|
||||
<p>Handler for the Wait/Idle state</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<article>
|
||||
<div class="container-overview">
|
||||
<h2>Constructor</h2>
|
||||
|
||||
<h4 class="name" id="WaitStateHandler">
|
||||
<span class="type-signature"></span>new WaitStateHandler<span
|
||||
class="signature"
|
||||
>(context)</span
|
||||
><span class="type-signature"></span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Create a wait state handler</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>context</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">OwenAnimationContext</span>
|
||||
</td>
|
||||
|
||||
<td class="description last"><p>The animation context</p></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_WaitStateHandler.js.html"
|
||||
>states/WaitStateHandler.js</a
|
||||
>,
|
||||
<a href="states_WaitStateHandler.js.html#line14">line 14</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<h3 class="subsection-title">Extends</h3>
|
||||
|
||||
<ul>
|
||||
<li>StateHandler</li>
|
||||
</ul>
|
||||
|
||||
<h3 class="subsection-title">Members</h3>
|
||||
|
||||
<h4 class="name" id="idleClip">
|
||||
<span class="type-signature"></span>idleClip<span
|
||||
class="type-signature"
|
||||
>
|
||||
:AnimationClip|null</span
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>The main idle animation clip</p>
|
||||
</div>
|
||||
|
||||
<h5>Type:</h5>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="param-type">AnimationClip</span>
|
||||
|
|
||||
|
||||
<span class="param-type">null</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_WaitStateHandler.js.html"
|
||||
>states/WaitStateHandler.js</a
|
||||
>,
|
||||
<a href="states_WaitStateHandler.js.html#line26">line 26</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="quirkInterval">
|
||||
<span class="type-signature"></span>quirkInterval<span
|
||||
class="type-signature"
|
||||
>
|
||||
:number</span
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Interval between quirk attempts (ms)</p>
|
||||
</div>
|
||||
|
||||
<h5>Type:</h5>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="param-type">number</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_WaitStateHandler.js.html"
|
||||
>states/WaitStateHandler.js</a
|
||||
>,
|
||||
<a href="states_WaitStateHandler.js.html#line44">line 44</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="quirkTimer">
|
||||
<span class="type-signature"></span>quirkTimer<span
|
||||
class="type-signature"
|
||||
>
|
||||
:number</span
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Timer for quirk animations</p>
|
||||
</div>
|
||||
|
||||
<h5>Type:</h5>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="param-type">number</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_WaitStateHandler.js.html"
|
||||
>states/WaitStateHandler.js</a
|
||||
>,
|
||||
<a href="states_WaitStateHandler.js.html#line38">line 38</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="quirks">
|
||||
<span class="type-signature"></span>quirks<span
|
||||
class="type-signature"
|
||||
>
|
||||
:Array.<AnimationClip></span
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Available quirk animations</p>
|
||||
</div>
|
||||
|
||||
<h5>Type:</h5>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="param-type">Array.<AnimationClip></span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_WaitStateHandler.js.html"
|
||||
>states/WaitStateHandler.js</a
|
||||
>,
|
||||
<a href="states_WaitStateHandler.js.html#line32">line 32</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h3 class="subsection-title">Methods</h3>
|
||||
|
||||
<h4 class="name" id="enter">
|
||||
<span class="type-signature">(async) </span>enter<span
|
||||
class="signature"
|
||||
>(fromState<span class="signature-attributes">opt</span>,
|
||||
emotion<span class="signature-attributes">opt</span>)</span
|
||||
><span class="type-signature"> → {Promise.<void>}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Enter the wait state</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th>Attributes</th>
|
||||
|
||||
<th>Default</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>fromState</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
|
|
||||
|
||||
<span class="param-type">null</span>
|
||||
</td>
|
||||
|
||||
<td class="attributes"><optional><br /></td>
|
||||
|
||||
<td class="default">null</td>
|
||||
|
||||
<td class="description last"><p>The previous state</p></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="name"><code>emotion</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="attributes"><optional><br /></td>
|
||||
|
||||
<td class="default">Emotions.NEUTRAL</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>The emotion to enter with</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_WaitStateHandler.js.html"
|
||||
>states/WaitStateHandler.js</a
|
||||
>,
|
||||
<a href="states_WaitStateHandler.js.html#line53">line 53</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Promise.<void></span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="exit">
|
||||
<span class="type-signature">(async) </span>exit<span
|
||||
class="signature"
|
||||
>(toState<span class="signature-attributes">opt</span>,
|
||||
emotion<span class="signature-attributes">opt</span>)</span
|
||||
><span class="type-signature"> → {Promise.<void>}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Exit the wait state</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th>Attributes</th>
|
||||
|
||||
<th>Default</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>toState</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
|
|
||||
|
||||
<span class="param-type">null</span>
|
||||
</td>
|
||||
|
||||
<td class="attributes"><optional><br /></td>
|
||||
|
||||
<td class="default">null</td>
|
||||
|
||||
<td class="description last"><p>The next state</p></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="name"><code>emotion</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">string</span>
|
||||
</td>
|
||||
|
||||
<td class="attributes"><optional><br /></td>
|
||||
|
||||
<td class="default">Emotions.NEUTRAL</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>The emotion to exit with</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_WaitStateHandler.js.html"
|
||||
>states/WaitStateHandler.js</a
|
||||
>,
|
||||
<a href="states_WaitStateHandler.js.html#line74">line 74</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Promise.<void></span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="getAvailableTransitions">
|
||||
<span class="type-signature"></span>getAvailableTransitions<span
|
||||
class="signature"
|
||||
>()</span
|
||||
><span class="type-signature"> → {Array.<string>}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Get available transitions from wait state</p>
|
||||
</div>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_WaitStateHandler.js.html"
|
||||
>states/WaitStateHandler.js</a
|
||||
>,
|
||||
<a href="states_WaitStateHandler.js.html#line135">line 135</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<div class="param-desc">
|
||||
<p>Array of available state transitions</p>
|
||||
</div>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">Array.<string></span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h4 class="name" id="update">
|
||||
<span class="type-signature"></span>update<span class="signature"
|
||||
>(deltaTime)</span
|
||||
><span class="type-signature"> → {void}</span>
|
||||
</h4>
|
||||
|
||||
<div class="description">
|
||||
<p>Update the wait state</p>
|
||||
</div>
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>deltaTime</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">number</span>
|
||||
</td>
|
||||
|
||||
<td class="description last">
|
||||
<p>Time elapsed since last update (ms)</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_WaitStateHandler.js.html"
|
||||
>states/WaitStateHandler.js</a
|
||||
>,
|
||||
<a href="states_WaitStateHandler.js.html#line95">line 95</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>
|
||||
<span class="param-type">void</span>
|
||||
</dd>
|
||||
</dl>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2>
|
||||
<h3>Modules</h3>
|
||||
<ul>
|
||||
<li><a href="module-StateHandler.html">StateHandler</a></li>
|
||||
<li><a href="module-animation.html">animation</a></li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationConstants.html"
|
||||
>animation/AnimationConstants</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationNameMapper.html"
|
||||
>animation/AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="module-constants.html">constants</a></li>
|
||||
<li><a href="module-core.html">core</a></li>
|
||||
<li><a href="module-factories.html">factories</a></li>
|
||||
<li><a href="module-loaders.html">loaders</a></li>
|
||||
<li><a href="module-owen.html">owen</a></li>
|
||||
<li><a href="module-states.html">states</a></li>
|
||||
</ul>
|
||||
<h3>Classes</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
|
||||
<li>
|
||||
<a href="module-animation.AnimationClipFactory.html"
|
||||
>AnimationClipFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
||||
>AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-core.OwenAnimationContext.html"
|
||||
>OwenAnimationContext</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-factories.OwenSystemFactory.html"
|
||||
>OwenSystemFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.GLTFAnimationLoader.html"
|
||||
>GLTFAnimationLoader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-states.StateFactory.html">StateFactory</a></li>
|
||||
<li>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<br class="clear" />
|
||||
|
||||
<footer>
|
||||
Documentation generated by
|
||||
<a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
|
||||
2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
<script src="scripts/linenumber.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
672
docs/module-states.html
Normal file
672
docs/module-states.html
Normal file
@ -0,0 +1,672 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>JSDoc: Module: states</title>
|
||||
|
||||
<script src="scripts/prettify/prettify.js"></script>
|
||||
<script src="scripts/prettify/lang-css.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link
|
||||
type="text/css"
|
||||
rel="stylesheet"
|
||||
href="styles/prettify-tomorrow.css"
|
||||
/>
|
||||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1 class="page-title">Module: states</h1>
|
||||
|
||||
<section>
|
||||
<header></header>
|
||||
|
||||
<article>
|
||||
<div class="container-overview">
|
||||
<div class="description">
|
||||
<p>React state handler implementation</p>
|
||||
</div>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_ReactStateHandler.js.html"
|
||||
>states/ReactStateHandler.js</a
|
||||
>,
|
||||
<a href="states_ReactStateHandler.js.html#line1">line 1</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_SleepStateHandler.js.html"
|
||||
>states/SleepStateHandler.js</a
|
||||
>,
|
||||
<a href="states_SleepStateHandler.js.html#line1">line 1</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_StateFactory.js.html"
|
||||
>states/StateFactory.js</a
|
||||
>, <a href="states_StateFactory.js.html#line1">line 1</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_TypeStateHandler.js.html"
|
||||
>states/TypeStateHandler.js</a
|
||||
>,
|
||||
<a href="states_TypeStateHandler.js.html#line1">line 1</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_WaitStateHandler.js.html"
|
||||
>states/WaitStateHandler.js</a
|
||||
>,
|
||||
<a href="states_WaitStateHandler.js.html#line1">line 1</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<h3 class="subsection-title">Classes</h3>
|
||||
|
||||
<dl>
|
||||
<dt>
|
||||
<a href="module-states.ReactStateHandler.html"
|
||||
>ReactStateHandler</a
|
||||
>
|
||||
</dt>
|
||||
<dd></dd>
|
||||
|
||||
<dt>
|
||||
<a href="module-states.SleepStateHandler.html"
|
||||
>SleepStateHandler</a
|
||||
>
|
||||
</dt>
|
||||
<dd></dd>
|
||||
|
||||
<dt><a href="module-states.StateFactory.html">StateFactory</a></dt>
|
||||
<dd></dd>
|
||||
|
||||
<dt>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</dt>
|
||||
<dd></dd>
|
||||
|
||||
<dt>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</dt>
|
||||
<dd></dd>
|
||||
</dl>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<header></header>
|
||||
|
||||
<article>
|
||||
<div class="container-overview">
|
||||
<div class="description">
|
||||
<p>Sleep state handler implementation</p>
|
||||
</div>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_ReactStateHandler.js.html"
|
||||
>states/ReactStateHandler.js</a
|
||||
>,
|
||||
<a href="states_ReactStateHandler.js.html#line1">line 1</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_SleepStateHandler.js.html"
|
||||
>states/SleepStateHandler.js</a
|
||||
>,
|
||||
<a href="states_SleepStateHandler.js.html#line1">line 1</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_StateFactory.js.html"
|
||||
>states/StateFactory.js</a
|
||||
>, <a href="states_StateFactory.js.html#line1">line 1</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_TypeStateHandler.js.html"
|
||||
>states/TypeStateHandler.js</a
|
||||
>,
|
||||
<a href="states_TypeStateHandler.js.html#line1">line 1</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_WaitStateHandler.js.html"
|
||||
>states/WaitStateHandler.js</a
|
||||
>,
|
||||
<a href="states_WaitStateHandler.js.html#line1">line 1</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<h3 class="subsection-title">Classes</h3>
|
||||
|
||||
<dl>
|
||||
<dt>
|
||||
<a href="module-states.ReactStateHandler.html"
|
||||
>ReactStateHandler</a
|
||||
>
|
||||
</dt>
|
||||
<dd></dd>
|
||||
|
||||
<dt>
|
||||
<a href="module-states.SleepStateHandler.html"
|
||||
>SleepStateHandler</a
|
||||
>
|
||||
</dt>
|
||||
<dd></dd>
|
||||
|
||||
<dt><a href="module-states.StateFactory.html">StateFactory</a></dt>
|
||||
<dd></dd>
|
||||
|
||||
<dt>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</dt>
|
||||
<dd></dd>
|
||||
|
||||
<dt>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</dt>
|
||||
<dd></dd>
|
||||
</dl>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<header></header>
|
||||
|
||||
<article>
|
||||
<div class="container-overview">
|
||||
<div class="description">
|
||||
<p>State factory for creating state handlers</p>
|
||||
</div>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_ReactStateHandler.js.html"
|
||||
>states/ReactStateHandler.js</a
|
||||
>,
|
||||
<a href="states_ReactStateHandler.js.html#line1">line 1</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_SleepStateHandler.js.html"
|
||||
>states/SleepStateHandler.js</a
|
||||
>,
|
||||
<a href="states_SleepStateHandler.js.html#line1">line 1</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_StateFactory.js.html"
|
||||
>states/StateFactory.js</a
|
||||
>, <a href="states_StateFactory.js.html#line1">line 1</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_TypeStateHandler.js.html"
|
||||
>states/TypeStateHandler.js</a
|
||||
>,
|
||||
<a href="states_TypeStateHandler.js.html#line1">line 1</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_WaitStateHandler.js.html"
|
||||
>states/WaitStateHandler.js</a
|
||||
>,
|
||||
<a href="states_WaitStateHandler.js.html#line1">line 1</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<h3 class="subsection-title">Classes</h3>
|
||||
|
||||
<dl>
|
||||
<dt>
|
||||
<a href="module-states.ReactStateHandler.html"
|
||||
>ReactStateHandler</a
|
||||
>
|
||||
</dt>
|
||||
<dd></dd>
|
||||
|
||||
<dt>
|
||||
<a href="module-states.SleepStateHandler.html"
|
||||
>SleepStateHandler</a
|
||||
>
|
||||
</dt>
|
||||
<dd></dd>
|
||||
|
||||
<dt><a href="module-states.StateFactory.html">StateFactory</a></dt>
|
||||
<dd></dd>
|
||||
|
||||
<dt>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</dt>
|
||||
<dd></dd>
|
||||
|
||||
<dt>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</dt>
|
||||
<dd></dd>
|
||||
</dl>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<header></header>
|
||||
|
||||
<article>
|
||||
<div class="container-overview">
|
||||
<div class="description">
|
||||
<p>Type state handler implementation</p>
|
||||
</div>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_ReactStateHandler.js.html"
|
||||
>states/ReactStateHandler.js</a
|
||||
>,
|
||||
<a href="states_ReactStateHandler.js.html#line1">line 1</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_SleepStateHandler.js.html"
|
||||
>states/SleepStateHandler.js</a
|
||||
>,
|
||||
<a href="states_SleepStateHandler.js.html#line1">line 1</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_StateFactory.js.html"
|
||||
>states/StateFactory.js</a
|
||||
>, <a href="states_StateFactory.js.html#line1">line 1</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_TypeStateHandler.js.html"
|
||||
>states/TypeStateHandler.js</a
|
||||
>,
|
||||
<a href="states_TypeStateHandler.js.html#line1">line 1</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_WaitStateHandler.js.html"
|
||||
>states/WaitStateHandler.js</a
|
||||
>,
|
||||
<a href="states_WaitStateHandler.js.html#line1">line 1</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<h3 class="subsection-title">Classes</h3>
|
||||
|
||||
<dl>
|
||||
<dt>
|
||||
<a href="module-states.ReactStateHandler.html"
|
||||
>ReactStateHandler</a
|
||||
>
|
||||
</dt>
|
||||
<dd></dd>
|
||||
|
||||
<dt>
|
||||
<a href="module-states.SleepStateHandler.html"
|
||||
>SleepStateHandler</a
|
||||
>
|
||||
</dt>
|
||||
<dd></dd>
|
||||
|
||||
<dt><a href="module-states.StateFactory.html">StateFactory</a></dt>
|
||||
<dd></dd>
|
||||
|
||||
<dt>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</dt>
|
||||
<dd></dd>
|
||||
|
||||
<dt>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</dt>
|
||||
<dd></dd>
|
||||
</dl>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<header></header>
|
||||
|
||||
<article>
|
||||
<div class="container-overview">
|
||||
<div class="description">
|
||||
<p>Wait state handler implementation</p>
|
||||
</div>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_ReactStateHandler.js.html"
|
||||
>states/ReactStateHandler.js</a
|
||||
>,
|
||||
<a href="states_ReactStateHandler.js.html#line1">line 1</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_SleepStateHandler.js.html"
|
||||
>states/SleepStateHandler.js</a
|
||||
>,
|
||||
<a href="states_SleepStateHandler.js.html#line1">line 1</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_StateFactory.js.html"
|
||||
>states/StateFactory.js</a
|
||||
>, <a href="states_StateFactory.js.html#line1">line 1</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_TypeStateHandler.js.html"
|
||||
>states/TypeStateHandler.js</a
|
||||
>,
|
||||
<a href="states_TypeStateHandler.js.html#line1">line 1</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<dl class="details">
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<li>
|
||||
<a href="states_WaitStateHandler.js.html"
|
||||
>states/WaitStateHandler.js</a
|
||||
>,
|
||||
<a href="states_WaitStateHandler.js.html#line1">line 1</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<h3 class="subsection-title">Classes</h3>
|
||||
|
||||
<dl>
|
||||
<dt>
|
||||
<a href="module-states.ReactStateHandler.html"
|
||||
>ReactStateHandler</a
|
||||
>
|
||||
</dt>
|
||||
<dd></dd>
|
||||
|
||||
<dt>
|
||||
<a href="module-states.SleepStateHandler.html"
|
||||
>SleepStateHandler</a
|
||||
>
|
||||
</dt>
|
||||
<dd></dd>
|
||||
|
||||
<dt><a href="module-states.StateFactory.html">StateFactory</a></dt>
|
||||
<dd></dd>
|
||||
|
||||
<dt>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</dt>
|
||||
<dd></dd>
|
||||
|
||||
<dt>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</dt>
|
||||
<dd></dd>
|
||||
</dl>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2>
|
||||
<h3>Modules</h3>
|
||||
<ul>
|
||||
<li><a href="module-StateHandler.html">StateHandler</a></li>
|
||||
<li><a href="module-animation.html">animation</a></li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationConstants.html"
|
||||
>animation/AnimationConstants</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationNameMapper.html"
|
||||
>animation/AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="module-constants.html">constants</a></li>
|
||||
<li><a href="module-core.html">core</a></li>
|
||||
<li><a href="module-factories.html">factories</a></li>
|
||||
<li><a href="module-loaders.html">loaders</a></li>
|
||||
<li><a href="module-owen.html">owen</a></li>
|
||||
<li><a href="module-states.html">states</a></li>
|
||||
</ul>
|
||||
<h3>Classes</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
|
||||
<li>
|
||||
<a href="module-animation.AnimationClipFactory.html"
|
||||
>AnimationClipFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
||||
>AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-core.OwenAnimationContext.html"
|
||||
>OwenAnimationContext</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-factories.OwenSystemFactory.html"
|
||||
>OwenSystemFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.GLTFAnimationLoader.html"
|
||||
>GLTFAnimationLoader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-states.StateFactory.html">StateFactory</a></li>
|
||||
<li>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<br class="clear" />
|
||||
|
||||
<footer>
|
||||
Documentation generated by
|
||||
<a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
|
||||
2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
<script src="scripts/linenumber.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
25
docs/scripts/linenumber.js
Normal file
25
docs/scripts/linenumber.js
Normal file
@ -0,0 +1,25 @@
|
||||
/* global document */
|
||||
(() => {
|
||||
const source = document.getElementsByClassName('prettyprint source linenums')
|
||||
let i = 0
|
||||
let lineNumber = 0
|
||||
let lineId
|
||||
let lines
|
||||
let totalLines
|
||||
let anchorHash
|
||||
|
||||
if (source && source[0]) {
|
||||
anchorHash = document.location.hash.substring(1)
|
||||
lines = source[0].getElementsByTagName('li')
|
||||
totalLines = lines.length
|
||||
|
||||
for (; i < totalLines; i++) {
|
||||
lineNumber++
|
||||
lineId = `line${lineNumber}`
|
||||
lines[i].id = lineId
|
||||
if (lineId === anchorHash) {
|
||||
lines[i].className += ' selected'
|
||||
}
|
||||
}
|
||||
}
|
||||
})()
|
||||
202
docs/scripts/prettify/Apache-License-2.0.txt
Normal file
202
docs/scripts/prettify/Apache-License-2.0.txt
Normal file
@ -0,0 +1,202 @@
|
||||
|
||||
Apache License
|
||||
Version 2.0, January 2004
|
||||
http://www.apache.org/licenses/
|
||||
|
||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||
|
||||
1. Definitions.
|
||||
|
||||
"License" shall mean the terms and conditions for use, reproduction,
|
||||
and distribution as defined by Sections 1 through 9 of this document.
|
||||
|
||||
"Licensor" shall mean the copyright owner or entity authorized by
|
||||
the copyright owner that is granting the License.
|
||||
|
||||
"Legal Entity" shall mean the union of the acting entity and all
|
||||
other entities that control, are controlled by, or are under common
|
||||
control with that entity. For the purposes of this definition,
|
||||
"control" means (i) the power, direct or indirect, to cause the
|
||||
direction or management of such entity, whether by contract or
|
||||
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||
|
||||
"You" (or "Your") shall mean an individual or Legal Entity
|
||||
exercising permissions granted by this License.
|
||||
|
||||
"Source" form shall mean the preferred form for making modifications,
|
||||
including but not limited to software source code, documentation
|
||||
source, and configuration files.
|
||||
|
||||
"Object" form shall mean any form resulting from mechanical
|
||||
transformation or translation of a Source form, including but
|
||||
not limited to compiled object code, generated documentation,
|
||||
and conversions to other media types.
|
||||
|
||||
"Work" shall mean the work of authorship, whether in Source or
|
||||
Object form, made available under the License, as indicated by a
|
||||
copyright notice that is included in or attached to the work
|
||||
(an example is provided in the Appendix below).
|
||||
|
||||
"Derivative Works" shall mean any work, whether in Source or Object
|
||||
form, that is based on (or derived from) the Work and for which the
|
||||
editorial revisions, annotations, elaborations, or other modifications
|
||||
represent, as a whole, an original work of authorship. For the purposes
|
||||
of this License, Derivative Works shall not include works that remain
|
||||
separable from, or merely link (or bind by name) to the interfaces of,
|
||||
the Work and Derivative Works thereof.
|
||||
|
||||
"Contribution" shall mean any work of authorship, including
|
||||
the original version of the Work and any modifications or additions
|
||||
to that Work or Derivative Works thereof, that is intentionally
|
||||
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||
or by an individual or Legal Entity authorized to submit on behalf of
|
||||
the copyright owner. For the purposes of this definition, "submitted"
|
||||
means any form of electronic, verbal, or written communication sent
|
||||
to the Licensor or its representatives, including but not limited to
|
||||
communication on electronic mailing lists, source code control systems,
|
||||
and issue tracking systems that are managed by, or on behalf of, the
|
||||
Licensor for the purpose of discussing and improving the Work, but
|
||||
excluding communication that is conspicuously marked or otherwise
|
||||
designated in writing by the copyright owner as "Not a Contribution."
|
||||
|
||||
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||
on behalf of whom a Contribution has been received by Licensor and
|
||||
subsequently incorporated within the Work.
|
||||
|
||||
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
copyright license to reproduce, prepare Derivative Works of,
|
||||
publicly display, publicly perform, sublicense, and distribute the
|
||||
Work and such Derivative Works in Source or Object form.
|
||||
|
||||
3. Grant of Patent License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
(except as stated in this section) patent license to make, have made,
|
||||
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||
where such license applies only to those patent claims licensable
|
||||
by such Contributor that are necessarily infringed by their
|
||||
Contribution(s) alone or by combination of their Contribution(s)
|
||||
with the Work to which such Contribution(s) was submitted. If You
|
||||
institute patent litigation against any entity (including a
|
||||
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||
or a Contribution incorporated within the Work constitutes direct
|
||||
or contributory patent infringement, then any patent licenses
|
||||
granted to You under this License for that Work shall terminate
|
||||
as of the date such litigation is filed.
|
||||
|
||||
4. Redistribution. You may reproduce and distribute copies of the
|
||||
Work or Derivative Works thereof in any medium, with or without
|
||||
modifications, and in Source or Object form, provided that You
|
||||
meet the following conditions:
|
||||
|
||||
(a) You must give any other recipients of the Work or
|
||||
Derivative Works a copy of this License; and
|
||||
|
||||
(b) You must cause any modified files to carry prominent notices
|
||||
stating that You changed the files; and
|
||||
|
||||
(c) You must retain, in the Source form of any Derivative Works
|
||||
that You distribute, all copyright, patent, trademark, and
|
||||
attribution notices from the Source form of the Work,
|
||||
excluding those notices that do not pertain to any part of
|
||||
the Derivative Works; and
|
||||
|
||||
(d) If the Work includes a "NOTICE" text file as part of its
|
||||
distribution, then any Derivative Works that You distribute must
|
||||
include a readable copy of the attribution notices contained
|
||||
within such NOTICE file, excluding those notices that do not
|
||||
pertain to any part of the Derivative Works, in at least one
|
||||
of the following places: within a NOTICE text file distributed
|
||||
as part of the Derivative Works; within the Source form or
|
||||
documentation, if provided along with the Derivative Works; or,
|
||||
within a display generated by the Derivative Works, if and
|
||||
wherever such third-party notices normally appear. The contents
|
||||
of the NOTICE file are for informational purposes only and
|
||||
do not modify the License. You may add Your own attribution
|
||||
notices within Derivative Works that You distribute, alongside
|
||||
or as an addendum to the NOTICE text from the Work, provided
|
||||
that such additional attribution notices cannot be construed
|
||||
as modifying the License.
|
||||
|
||||
You may add Your own copyright statement to Your modifications and
|
||||
may provide additional or different license terms and conditions
|
||||
for use, reproduction, or distribution of Your modifications, or
|
||||
for any such Derivative Works as a whole, provided Your use,
|
||||
reproduction, and distribution of the Work otherwise complies with
|
||||
the conditions stated in this License.
|
||||
|
||||
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||
any Contribution intentionally submitted for inclusion in the Work
|
||||
by You to the Licensor shall be under the terms and conditions of
|
||||
this License, without any additional terms or conditions.
|
||||
Notwithstanding the above, nothing herein shall supersede or modify
|
||||
the terms of any separate license agreement you may have executed
|
||||
with Licensor regarding such Contributions.
|
||||
|
||||
6. Trademarks. This License does not grant permission to use the trade
|
||||
names, trademarks, service marks, or product names of the Licensor,
|
||||
except as required for reasonable and customary use in describing the
|
||||
origin of the Work and reproducing the content of the NOTICE file.
|
||||
|
||||
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||
agreed to in writing, Licensor provides the Work (and each
|
||||
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||
implied, including, without limitation, any warranties or conditions
|
||||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||
appropriateness of using or redistributing the Work and assume any
|
||||
risks associated with Your exercise of permissions under this License.
|
||||
|
||||
8. Limitation of Liability. In no event and under no legal theory,
|
||||
whether in tort (including negligence), contract, or otherwise,
|
||||
unless required by applicable law (such as deliberate and grossly
|
||||
negligent acts) or agreed to in writing, shall any Contributor be
|
||||
liable to You for damages, including any direct, indirect, special,
|
||||
incidental, or consequential damages of any character arising as a
|
||||
result of this License or out of the use or inability to use the
|
||||
Work (including but not limited to damages for loss of goodwill,
|
||||
work stoppage, computer failure or malfunction, or any and all
|
||||
other commercial damages or losses), even if such Contributor
|
||||
has been advised of the possibility of such damages.
|
||||
|
||||
9. Accepting Warranty or Additional Liability. While redistributing
|
||||
the Work or Derivative Works thereof, You may choose to offer,
|
||||
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||
or other liability obligations and/or rights consistent with this
|
||||
License. However, in accepting such obligations, You may act only
|
||||
on Your own behalf and on Your sole responsibility, not on behalf
|
||||
of any other Contributor, and only if You agree to indemnify,
|
||||
defend, and hold each Contributor harmless for any liability
|
||||
incurred by, or claims asserted against, such Contributor by reason
|
||||
of your accepting any such warranty or additional liability.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
APPENDIX: How to apply the Apache License to your work.
|
||||
|
||||
To apply the Apache License to your work, attach the following
|
||||
boilerplate notice, with the fields enclosed by brackets "[]"
|
||||
replaced with your own identifying information. (Don't include
|
||||
the brackets!) The text should be enclosed in the appropriate
|
||||
comment syntax for the file format. We also recommend that a
|
||||
file or class name and description of purpose be included on the
|
||||
same "printed page" as the copyright notice for easier
|
||||
identification within third-party archives.
|
||||
|
||||
Copyright [yyyy] [name of copyright owner]
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
2
docs/scripts/prettify/lang-css.js
Normal file
2
docs/scripts/prettify/lang-css.js
Normal file
@ -0,0 +1,2 @@
|
||||
PR.registerLangHandler(PR.createSimpleLexer([['pln', /^[\t\n\f\r ]+/, null, ' \t\r\n ']], [['str', /^"(?:[^\n\f\r"\\]|\\(?:\r\n?|\n|\f)|\\[\S\s])*"/, null], ['str', /^'(?:[^\n\f\r'\\]|\\(?:\r\n?|\n|\f)|\\[\S\s])*'/, null], ['lang-css-str', /^url\(([^"')]*)\)/i], ['kwd', /^(?:url|rgb|!important|@import|@page|@media|@charset|inherit)(?=[^\w-]|$)/i, null], ['lang-css-kw', /^(-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*)\s*:/i], ['com', /^\/\*[^*]*\*+(?:[^*/][^*]*\*+)*\//], ['com',
|
||||
/^(?:<\!--|--\>)/], ['lit', /^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i], ['lit', /^#[\da-f]{3,6}/i], ['pln', /^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i], ['pun', /^[^\s\w"']+/]]), ['css']); PR.registerLangHandler(PR.createSimpleLexer([], [['kwd', /^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i]]), ['css-kw']); PR.registerLangHandler(PR.createSimpleLexer([], [['str', /^[^"')]+/]]), ['css-str'])
|
||||
118
docs/scripts/prettify/prettify.js
Normal file
118
docs/scripts/prettify/prettify.js
Normal file
@ -0,0 +1,118 @@
|
||||
const q = null; window.PR_SHOULD_USE_CONTINUATION = !0;
|
||||
(function () {
|
||||
function L (a) {
|
||||
function m (a) { let f = a.charCodeAt(0); if (f !== 92) return f; const b = a.charAt(1); return (f = r[b]) ? f : b >= '0' && b <= '7' ? parseInt(a.substring(1), 8) : b === 'u' || b === 'x' ? parseInt(a.substring(2), 16) : a.charCodeAt(1) } function e (a) { if (a < 32) return (a < 16 ? '\\x0' : '\\x') + a.toString(16); a = String.fromCharCode(a); if (a === '\\' || a === '-' || a === '[' || a === ']')a = '\\' + a; return a } function h (a) {
|
||||
for (var f = a.substring(1, a.length - 1).match(/\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\S\s]|[^\\]/g), a =
|
||||
[], b = [], o = f[0] === '^', c = o ? 1 : 0, i = f.length; c < i; ++c) { var j = f[c]; if (/\\[bdsw]/i.test(j))a.push(j); else { var j = m(j); var d; c + 2 < i && f[c + 1] === '-' ? (d = m(f[c + 2]), c += 2) : d = j; b.push([j, d]); d < 65 || j > 122 || (d < 65 || j > 90 || b.push([Math.max(65, j) | 32, Math.min(d, 90) | 32]), d < 97 || j > 122 || b.push([Math.max(97, j) & -33, Math.min(d, 122) & -33])) } }b.sort(function (a, f) { return a[0] - f[0] || f[1] - a[1] }); f = []; j = [NaN, NaN]; for (c = 0; c < b.length; ++c)i = b[c], i[0] <= j[1] + 1 ? j[1] = Math.max(j[1], i[1]) : f.push(j = i); b = ['[']; o && b.push('^'); b.push.apply(b, a); for (c = 0; c <
|
||||
f.length; ++c)i = f[c], b.push(e(i[0])), i[1] > i[0] && (i[1] + 1 > i[0] && b.push('-'), b.push(e(i[1]))); b.push(']'); return b.join('')
|
||||
} function y (a) {
|
||||
for (var f = a.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g), b = f.length, d = [], c = 0, i = 0; c < b; ++c) { var j = f[c]; j === '(' ? ++i : j.charAt(0) === '\\' && (j = +j.substring(1)) && j <= i && (d[j] = -1) } for (c = 1; c < d.length; ++c)d[c] === -1 && (d[c] = ++t); for (i = c = 0; c < b; ++c) {
|
||||
j = f[c], j === '('
|
||||
? (++i, d[i] === void 0 && (f[c] = '(?:'))
|
||||
: j.charAt(0) === '\\' &&
|
||||
(j = +j.substring(1)) && j <= i && (f[c] = '\\' + d[i])
|
||||
} for (i = c = 0; c < b; ++c)f[c] === '^' && f[c + 1] !== '^' && (f[c] = ''); if (a.ignoreCase && s) for (c = 0; c < b; ++c)j = f[c], a = j.charAt(0), j.length >= 2 && a === '[' ? f[c] = h(j) : a !== '\\' && (f[c] = j.replace(/[A-Za-z]/g, function (a) { a = a.charCodeAt(0); return '[' + String.fromCharCode(a & -33, a | 32) + ']' })); return f.join('')
|
||||
} for (var t = 0, s = !1, l = !1, p = 0, d = a.length; p < d; ++p) { var g = a[p]; if (g.ignoreCase)l = !0; else if (/[a-z]/i.test(g.source.replace(/\\u[\da-f]{4}|\\x[\da-f]{2}|\\[^UXux]/gi, ''))) { s = !0; l = !1; break } } for (var r =
|
||||
{ b: 8, t: 9, n: 10, v: 11, f: 12, r: 13 }, n = [], p = 0, d = a.length; p < d; ++p) { g = a[p]; if (g.global || g.multiline) throw Error('' + g); n.push('(?:' + y(g) + ')') } return RegExp(n.join('|'), l ? 'gi' : 'g')
|
||||
} function M (a) {
|
||||
function m (a) {
|
||||
switch (a.nodeType) {
|
||||
case 1:if (e.test(a.className)) break; for (var g = a.firstChild; g; g = g.nextSibling)m(g); g = a.nodeName; if (g === 'BR' || g === 'LI')h[s] = '\n', t[s << 1] = y++, t[s++ << 1 | 1] = a; break; case 3:case 4:g = a.nodeValue, g.length && (g = p ? g.replace(/\r\n?/g, '\n') : g.replace(/[\t\n\r ]+/g, ' '), h[s] = g, t[s << 1] = y, y += g.length,
|
||||
t[s++ << 1 | 1] = a)
|
||||
}
|
||||
} var e = /(?:^|\s)nocode(?:\s|$)/; var h = []; var y = 0; var t = []; var s = 0; let l; a.currentStyle ? l = a.currentStyle.whiteSpace : window.getComputedStyle && (l = document.defaultView.getComputedStyle(a, q).getPropertyValue('white-space')); var p = l && l.substring(0, 3) === 'pre'; m(a); return { a: h.join('').replace(/\n$/, ''), c: t }
|
||||
} function B (a, m, e, h) { m && (a = { a: m, d: a }, e(a), h.push.apply(h, a.e)) } function x (a, m) {
|
||||
function e (a) {
|
||||
for (var l = a.d, p = [l, 'pln'], d = 0, g = a.a.match(y) || [], r = {}, n = 0, z = g.length; n < z; ++n) {
|
||||
const f = g[n]; let b = r[f]; let o = void 0; var c; if (typeof b ===
|
||||
'string')c = !1; else { var i = h[f.charAt(0)]; if (i)o = f.match(i[1]), b = i[0]; else { for (c = 0; c < t; ++c) if (i = m[c], o = f.match(i[1])) { b = i[0]; break }o || (b = 'pln') } if ((c = b.length >= 5 && b.substring(0, 5) === 'lang-') && !(o && typeof o[1] === 'string'))c = !1, b = 'src'; c || (r[f] = b) }i = d; d += f.length; if (c) { c = o[1]; let j = f.indexOf(c); let k = j + c.length; o[2] && (k = f.length - o[2].length, j = k - c.length); b = b.substring(5); B(l + i, f.substring(0, j), e, p); B(l + i + j, c, C(b, c), p); B(l + i + k, f.substring(k), e, p) } else p.push(l + i, b)
|
||||
}a.e = p
|
||||
} var h = {}; let y; (function () {
|
||||
for (var e = a.concat(m),
|
||||
l = [], p = {}, d = 0, g = e.length; d < g; ++d) { let r = e[d]; let n = r[3]; if (n) for (let k = n.length; --k >= 0;)h[n.charAt(k)] = r; r = r[1]; n = '' + r; p.hasOwnProperty(n) || (l.push(r), p[n] = q) }l.push(/[\S\s]/); y = L(l)
|
||||
})(); var t = m.length; return e
|
||||
} function u (a) {
|
||||
const m = []; const e = []; a.tripleQuotedStrings
|
||||
? m.push(['str', /^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/, q, "'\""])
|
||||
: a.multiLineStrings
|
||||
? m.push(['str', /^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/,
|
||||
q, "'\"`"])
|
||||
: m.push(['str', /^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/, q, "\"'"]); a.verbatimStrings && e.push(['str', /^@"(?:[^"]|"")*(?:"|$)/, q]); let h = a.hashComments; h && (a.cStyleComments
|
||||
? (h > 1 ? m.push(['com', /^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/, q, '#']) : m.push(['com', /^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\n\r]*)/, q, '#']), e.push(['str', /^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/, q]))
|
||||
: m.push(['com', /^#[^\n\r]*/,
|
||||
q, '#'])); a.cStyleComments && (e.push(['com', /^\/\/[^\n\r]*/, q]), e.push(['com', /^\/\*[\S\s]*?(?:\*\/|$)/, q])); a.regexLiterals && e.push(['lang-regex', /^(?:^^\.?|[!+-]|!=|!==|#|%|%=|&|&&|&&=|&=|\(|\*|\*=|\+=|,|-=|->|\/|\/=|:|::|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|[?@[^]|\^=|\^\^|\^\^=|{|\||\|=|\|\||\|\|=|~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\s*(\/(?=[^*/])(?:[^/[\\]|\\[\S\s]|\[(?:[^\\\]]|\\[\S\s])*(?:]|$))+\/)/]); (h = a.types) && e.push(['typ', h]); a = ('' + a.keywords).replace(/^ | $/g,
|
||||
''); a.length && e.push(['kwd', RegExp('^(?:' + a.replace(/[\s,]+/g, '|') + ')\\b'), q]); m.push(['pln', /^\s+/, q, ' \r\n\t\xa0']); e.push(['lit', /^@[$_a-z][\w$@]*/i, q], ['typ', /^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/, q], ['pln', /^[$_a-z][\w$@]*/i, q], ['lit', /^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i, q, '0123456789'], ['pln', /^\\[\S\s]?/, q], ['pun', /^.[^\s\w"-$'./@\\`]*/, q]); return x(m, e)
|
||||
} function D (a, m) {
|
||||
function e (a) {
|
||||
switch (a.nodeType) {
|
||||
case 1:if (k.test(a.className)) break; if (a.nodeName === 'BR') {
|
||||
h(a),
|
||||
a.parentNode && a.parentNode.removeChild(a)
|
||||
} else for (a = a.firstChild; a; a = a.nextSibling)e(a); break; case 3:case 4:if (p) { let b = a.nodeValue; const d = b.match(t); if (d) { const c = b.substring(0, d.index); a.nodeValue = c; (b = b.substring(d.index + d[0].length)) && a.parentNode.insertBefore(s.createTextNode(b), a.nextSibling); h(a); c || a.parentNode.removeChild(a) } }
|
||||
}
|
||||
} function h (a) {
|
||||
function b (a, d) { const e = d ? a.cloneNode(!1) : a; var f = a.parentNode; if (f) { var f = b(f, 1); let g = a.nextSibling; f.appendChild(e); for (let h = g; h; h = g)g = h.nextSibling, f.appendChild(h) } return e }
|
||||
for (;!a.nextSibling;) if (a = a.parentNode, !a) return; for (var a = b(a.nextSibling, 0), e; (e = a.parentNode) && e.nodeType === 1;)a = e; d.push(a)
|
||||
} var k = /(?:^|\s)nocode(?:\s|$)/; var t = /\r\n?|\n/; var s = a.ownerDocument; let l; a.currentStyle ? l = a.currentStyle.whiteSpace : window.getComputedStyle && (l = s.defaultView.getComputedStyle(a, q).getPropertyValue('white-space')); var p = l && l.substring(0, 3) === 'pre'; for (l = s.createElement('LI'); a.firstChild;)l.appendChild(a.firstChild); for (var d = [l], g = 0; g < d.length; ++g)e(d[g]); m === (m | 0) && d[0].setAttribute('value',
|
||||
m); const r = s.createElement('OL'); r.className = 'linenums'; for (var n = Math.max(0, m - 1 | 0) || 0, g = 0, z = d.length; g < z; ++g)l = d[g], l.className = 'L' + (g + n) % 10, l.firstChild || l.appendChild(s.createTextNode('\xa0')), r.appendChild(l); a.appendChild(r)
|
||||
} function k (a, m) { for (let e = m.length; --e >= 0;) { const h = m[e]; A.hasOwnProperty(h) ? window.console && console.warn('cannot override language handler %s', h) : A[h] = a } } function C (a, m) { if (!a || !A.hasOwnProperty(a))a = /^\s*</.test(m) ? 'default-markup' : 'default-code'; return A[a] } function E (a) {
|
||||
var m =
|
||||
a.g; try {
|
||||
var e = M(a.h); var h = e.a; a.a = h; a.c = e.c; a.d = 0; C(m, h)(a); const k = /\bMSIE\b/.test(navigator.userAgent); var m = /\n/g; const t = a.a; const s = t.length; var e = 0; const l = a.c; const p = l.length; var h = 0; const d = a.e; let g = d.length; var a = 0; d[g] = s; let r, n; for (n = r = 0; n < g;)d[n] !== d[n + 2] ? (d[r++] = d[n++], d[r++] = d[n++]) : n += 2; g = r; for (n = r = 0; n < g;) { for (var z = d[n], f = d[n + 1], b = n + 2; b + 2 <= g && d[b + 1] === f;)b += 2; d[r++] = z; d[r++] = f; n = b } for (d.length = r; h < p;) {
|
||||
const o = l[h + 2] || s; const c = d[a + 2] || s; var b = Math.min(o, c); let i = l[h + 1]; var j; if (i.nodeType !== 1 && (j = t.substring(e, b))) {
|
||||
k && (j = j.replace(m, '\r')); i.nodeValue =
|
||||
j; const u = i.ownerDocument; const v = u.createElement('SPAN'); v.className = d[a + 1]; const x = i.parentNode; x.replaceChild(v, i); v.appendChild(i); e < o && (l[h + 1] = i = u.createTextNode(t.substring(b, o)), x.insertBefore(i, v.nextSibling))
|
||||
}e = b; e >= o && (h += 2); e >= c && (a += 2)
|
||||
}
|
||||
} catch (w) { 'console' in window && console.log(w && w.stack ? w.stack : w) }
|
||||
} var v = ['break,continue,do,else,for,if,return,while']; var w = [[v, 'auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile'],
|
||||
'catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof']; const F = [w, 'alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,dynamic_cast,explicit,export,friend,inline,late_check,mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where']; const G = [w, 'abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient']
|
||||
const H = [G, 'as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var']; var w = [w, 'debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN']; const I = [v, 'and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None']
|
||||
const J = [v, 'alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END']; var v = [v, 'case,done,elif,esac,eval,fi,function,in,local,set,then,until']; const K = /^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/; const N = /\S/; const O = u({
|
||||
keywords: [F, H, w, 'caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END' +
|
||||
I, J, v],
|
||||
hashComments: !0,
|
||||
cStyleComments: !0,
|
||||
multiLineStrings: !0,
|
||||
regexLiterals: !0
|
||||
}); var A = {}; k(O, ['default-code']); k(x([], [['pln', /^[^<?]+/], ['dec', /^<!\w[^>]*(?:>|$)/], ['com', /^<\!--[\S\s]*?(?:--\>|$)/], ['lang-', /^<\?([\S\s]+?)(?:\?>|$)/], ['lang-', /^<%([\S\s]+?)(?:%>|$)/], ['pun', /^(?:<[%?]|[%?]>)/], ['lang-', /^<xmp\b[^>]*>([\S\s]+?)<\/xmp\b[^>]*>/i], ['lang-js', /^<script\b[^>]*>([\S\s]*?)(<\/script\b[^>]*>)/i], ['lang-css', /^<style\b[^>]*>([\S\s]*?)(<\/style\b[^>]*>)/i], ['lang-in.tag', /^(<\/?[a-z][^<>]*>)/i]]),
|
||||
['default-markup', 'htm', 'html', 'mxml', 'xhtml', 'xml', 'xsl']); k(x([['pln', /^\s+/, q, ' \t\r\n'], ['atv', /^(?:"[^"]*"?|'[^']*'?)/, q, "\"'"]], [['tag', /^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i], ['atn', /^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i], ['lang-uq.val', /^=\s*([^\s"'>]*(?:[^\s"'/>]|\/(?=\s)))/], ['pun', /^[/<->]+/], ['lang-js', /^on\w+\s*=\s*"([^"]+)"/i], ['lang-js', /^on\w+\s*=\s*'([^']+)'/i], ['lang-js', /^on\w+\s*=\s*([^\s"'>]+)/i], ['lang-css', /^style\s*=\s*"([^"]+)"/i], ['lang-css', /^style\s*=\s*'([^']+)'/i], ['lang-css',
|
||||
/^style\s*=\s*([^\s"'>]+)/i]]), ['in.tag']); k(x([], [['atv', /^[\S\s]+/]]), ['uq.val']); k(u({ keywords: F, hashComments: !0, cStyleComments: !0, types: K }), ['c', 'cc', 'cpp', 'cxx', 'cyc', 'm']); k(u({ keywords: 'null,true,false' }), ['json']); k(u({ keywords: H, hashComments: !0, cStyleComments: !0, verbatimStrings: !0, types: K }), ['cs']); k(u({ keywords: G, cStyleComments: !0 }), ['java']); k(u({ keywords: v, hashComments: !0, multiLineStrings: !0 }), ['bsh', 'csh', 'sh']); k(u({ keywords: I, hashComments: !0, multiLineStrings: !0, tripleQuotedStrings: !0 }),
|
||||
['cv', 'py']); k(u({ keywords: 'caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END', hashComments: !0, multiLineStrings: !0, regexLiterals: !0 }), ['perl', 'pl', 'pm']); k(u({ keywords: J, hashComments: !0, multiLineStrings: !0, regexLiterals: !0 }), ['rb']); k(u({ keywords: w, cStyleComments: !0, regexLiterals: !0 }), ['js']); k(u({
|
||||
keywords: 'all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,true,try,unless,until,when,while,yes',
|
||||
hashComments: 3,
|
||||
cStyleComments: !0,
|
||||
multilineStrings: !0,
|
||||
tripleQuotedStrings: !0,
|
||||
regexLiterals: !0
|
||||
}), ['coffee']); k(x([], [['str', /^[\S\s]+/]]), ['regex']); window.prettyPrintOne = function (a, m, e) { const h = document.createElement('PRE'); h.innerHTML = a; e && D(h, e); E({ g: m, i: e, h }); return h.innerHTML }; window.prettyPrint = function (a) {
|
||||
function m () {
|
||||
for (let e = window.PR_SHOULD_USE_CONTINUATION ? l.now() + 250 : Infinity; p < h.length && l.now() < e; p++) {
|
||||
const n = h[p]; var k = n.className; if (k.indexOf('prettyprint') >= 0) {
|
||||
var k = k.match(g); var f; var b; if (b =
|
||||
!k) { b = n; for (var o = void 0, c = b.firstChild; c; c = c.nextSibling) var i = c.nodeType, o = i === 1 ? o ? b : c : i === 3 ? N.test(c.nodeValue) ? b : o : o; b = (f = o === b ? void 0 : o) && f.tagName === 'CODE' }b && (k = f.className.match(g)); k && (k = k[1]); b = !1; for (o = n.parentNode; o; o = o.parentNode) if ((o.tagName === 'pre' || o.tagName === 'code' || o.tagName === 'xmp') && o.className && o.className.indexOf('prettyprint') >= 0) { b = !0; break }b || ((b = (b = n.className.match(/\blinenums\b(?::(\d+))?/)) ? b[1] && b[1].length ? +b[1] : !0 : !1) && D(n, b), d = { g: k, h: n, i: b }, E(d))
|
||||
}
|
||||
}p < h.length
|
||||
? setTimeout(m,
|
||||
250)
|
||||
: a && a()
|
||||
} for (var e = [document.getElementsByTagName('pre'), document.getElementsByTagName('code'), document.getElementsByTagName('xmp')], h = [], k = 0; k < e.length; ++k) for (let t = 0, s = e[k].length; t < s; ++t)h.push(e[k][t]); var e = q; var l = Date; l.now || (l = { now: function () { return +new Date() } }); var p = 0; let d; var g = /\blang(?:uage)?-([\w.]+)(?!\S)/; m()
|
||||
}; window.PR = {
|
||||
createSimpleLexer: x,
|
||||
registerLangHandler: k,
|
||||
sourceDecorator: u,
|
||||
PR_ATTRIB_NAME: 'atn',
|
||||
PR_ATTRIB_VALUE: 'atv',
|
||||
PR_COMMENT: 'com',
|
||||
PR_DECLARATION: 'dec',
|
||||
PR_KEYWORD: 'kwd',
|
||||
PR_LITERAL: 'lit',
|
||||
PR_NOCODE: 'nocode',
|
||||
PR_PLAIN: 'pln',
|
||||
PR_PUNCTUATION: 'pun',
|
||||
PR_SOURCE: 'src',
|
||||
PR_STRING: 'str',
|
||||
PR_TAG: 'tag',
|
||||
PR_TYPE: 'typ'
|
||||
}
|
||||
})()
|
||||
277
docs/states_ReactStateHandler.js.html
Normal file
277
docs/states_ReactStateHandler.js.html
Normal file
@ -0,0 +1,277 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>JSDoc: Source: states/ReactStateHandler.js</title>
|
||||
|
||||
<script src="scripts/prettify/prettify.js"></script>
|
||||
<script src="scripts/prettify/lang-css.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link
|
||||
type="text/css"
|
||||
rel="stylesheet"
|
||||
href="styles/prettify-tomorrow.css"
|
||||
/>
|
||||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1 class="page-title">Source: states/ReactStateHandler.js</h1>
|
||||
|
||||
<section>
|
||||
<article>
|
||||
<pre class="prettyprint source linenums"><code>/**
|
||||
* @fileoverview React state handler implementation
|
||||
* @module states
|
||||
*/
|
||||
|
||||
import { StateHandler } from './StateHandler.js'
|
||||
import { States, Emotions } from '../constants.js'
|
||||
|
||||
/**
|
||||
* Handler for the React state
|
||||
* @class
|
||||
* @extends StateHandler
|
||||
*/
|
||||
export class ReactStateHandler extends StateHandler {
|
||||
/**
|
||||
* Create a react state handler
|
||||
* @param {OwenAnimationContext} context - The animation context
|
||||
*/
|
||||
constructor (context) {
|
||||
super(States.REACTING, context)
|
||||
|
||||
/**
|
||||
* Current emotional state
|
||||
* @type {string}
|
||||
*/
|
||||
this.emotion = Emotions.NEUTRAL
|
||||
}
|
||||
|
||||
/**
|
||||
* Enter the react state
|
||||
* @param {string|null} [_fromState=null] - The previous state (unused)
|
||||
* @param {string} [emotion=Emotions.NEUTRAL] - The emotion to enter with
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async enter (_fromState = null, emotion = Emotions.NEUTRAL) {
|
||||
console.log(`Entering REACTING state with emotion: ${emotion}`)
|
||||
this.emotion = emotion
|
||||
|
||||
// Play appropriate reaction
|
||||
const reactionClip = this.context.getClip('react_idle_L')
|
||||
if (reactionClip) {
|
||||
await reactionClip.play()
|
||||
this.currentClip = reactionClip
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Exit the react state
|
||||
* @param {string|null} [toState=null] - The next state
|
||||
* @param {string} [emotion=Emotions.NEUTRAL] - The emotion to exit with
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async exit (toState = null, emotion = Emotions.NEUTRAL) {
|
||||
console.log(`Exiting REACTING state to ${toState} with emotion: ${emotion}`)
|
||||
|
||||
if (this.currentClip) {
|
||||
await this.stopCurrentClip()
|
||||
}
|
||||
|
||||
// Play emotional transition if available
|
||||
let transitionName
|
||||
if (emotion !== Emotions.NEUTRAL) {
|
||||
transitionName = `react_${this.emotion}2${toState}_${emotion}_T`
|
||||
} else {
|
||||
transitionName = `react_2${toState}_T`
|
||||
}
|
||||
|
||||
const transition = this.context.getClip(transitionName)
|
||||
if (transition) {
|
||||
await transition.play()
|
||||
await this.waitForClipEnd(transition)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle a user message in react state
|
||||
* @param {string} message - The user message
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async handleMessage (message) {
|
||||
// Analyze message sentiment to determine emotion
|
||||
const emotion = this.analyzeMessageEmotion(message)
|
||||
this.emotion = emotion
|
||||
|
||||
// Play emotional reaction if needed
|
||||
if (emotion !== Emotions.NEUTRAL) {
|
||||
const emotionalReaction = this.context.getClip(`react_${emotion}_Q`)
|
||||
if (emotionalReaction) {
|
||||
if (this.currentClip) {
|
||||
await this.stopCurrentClip(0.2)
|
||||
}
|
||||
await emotionalReaction.play()
|
||||
await this.waitForClipEnd(emotionalReaction)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Analyze message to determine emotional response
|
||||
* @private
|
||||
* @param {string} message - The message to analyze
|
||||
* @returns {string} The determined emotion
|
||||
*/
|
||||
analyzeMessageEmotion (message) {
|
||||
const text = message.toLowerCase()
|
||||
|
||||
// Check for urgent/angry indicators
|
||||
if (
|
||||
text.includes('!') ||
|
||||
text.includes('urgent') ||
|
||||
text.includes('asap') ||
|
||||
text.includes('hurry')
|
||||
) {
|
||||
return Emotions.ANGRY
|
||||
}
|
||||
|
||||
// Check for error/shocked indicators
|
||||
if (
|
||||
text.includes('error') ||
|
||||
text.includes('problem') ||
|
||||
text.includes('issue') ||
|
||||
text.includes('bug') ||
|
||||
text.includes('broken')
|
||||
) {
|
||||
return Emotions.SHOCKED
|
||||
}
|
||||
|
||||
// Check for positive/happy indicators
|
||||
if (
|
||||
text.includes('great') ||
|
||||
text.includes('awesome') ||
|
||||
text.includes('good') ||
|
||||
text.includes('excellent') ||
|
||||
text.includes('perfect')
|
||||
) {
|
||||
return Emotions.HAPPY
|
||||
}
|
||||
|
||||
// Check for sad indicators
|
||||
if (
|
||||
text.includes('sad') ||
|
||||
text.includes('disappointed') ||
|
||||
text.includes('failed') ||
|
||||
text.includes('wrong')
|
||||
) {
|
||||
return Emotions.SAD
|
||||
}
|
||||
|
||||
return Emotions.NEUTRAL
|
||||
}
|
||||
|
||||
/**
|
||||
* Get available transitions from react state
|
||||
* @returns {string[]} Array of available state transitions
|
||||
*/
|
||||
getAvailableTransitions () {
|
||||
return [States.TYPING, States.WAITING]
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2>
|
||||
<h3>Modules</h3>
|
||||
<ul>
|
||||
<li><a href="module-StateHandler.html">StateHandler</a></li>
|
||||
<li><a href="module-animation.html">animation</a></li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationConstants.html"
|
||||
>animation/AnimationConstants</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationNameMapper.html"
|
||||
>animation/AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="module-constants.html">constants</a></li>
|
||||
<li><a href="module-core.html">core</a></li>
|
||||
<li><a href="module-factories.html">factories</a></li>
|
||||
<li><a href="module-loaders.html">loaders</a></li>
|
||||
<li><a href="module-owen.html">owen</a></li>
|
||||
<li><a href="module-states.html">states</a></li>
|
||||
</ul>
|
||||
<h3>Classes</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
|
||||
<li>
|
||||
<a href="module-animation.AnimationClipFactory.html"
|
||||
>AnimationClipFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
||||
>AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-core.OwenAnimationContext.html"
|
||||
>OwenAnimationContext</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-factories.OwenSystemFactory.html"
|
||||
>OwenSystemFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.GLTFAnimationLoader.html"
|
||||
>GLTFAnimationLoader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-states.StateFactory.html">StateFactory</a></li>
|
||||
<li>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<br class="clear" />
|
||||
|
||||
<footer>
|
||||
Documentation generated by
|
||||
<a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
|
||||
2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
<script src="scripts/linenumber.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
258
docs/states_SleepStateHandler.js.html
Normal file
258
docs/states_SleepStateHandler.js.html
Normal file
@ -0,0 +1,258 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>JSDoc: Source: states/SleepStateHandler.js</title>
|
||||
|
||||
<script src="scripts/prettify/prettify.js"></script>
|
||||
<script src="scripts/prettify/lang-css.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link
|
||||
type="text/css"
|
||||
rel="stylesheet"
|
||||
href="styles/prettify-tomorrow.css"
|
||||
/>
|
||||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1 class="page-title">Source: states/SleepStateHandler.js</h1>
|
||||
|
||||
<section>
|
||||
<article>
|
||||
<pre class="prettyprint source linenums"><code>/**
|
||||
* @fileoverview Sleep state handler implementation
|
||||
* @module states
|
||||
*/
|
||||
|
||||
import { StateHandler } from './StateHandler.js'
|
||||
import { States, Emotions } from '../constants.js'
|
||||
|
||||
/**
|
||||
* Handler for the Sleep state
|
||||
* @class
|
||||
* @extends StateHandler
|
||||
*/
|
||||
export class SleepStateHandler extends StateHandler {
|
||||
/**
|
||||
* Create a sleep state handler
|
||||
* @param {OwenAnimationContext} context - The animation context
|
||||
*/
|
||||
constructor (context) {
|
||||
super(States.SLEEPING, context)
|
||||
|
||||
/**
|
||||
* Sleep animation clip
|
||||
* @type {AnimationClip|null}
|
||||
*/
|
||||
this.sleepClip = null
|
||||
|
||||
/**
|
||||
* Whether the character is in deep sleep
|
||||
* @type {boolean}
|
||||
*/
|
||||
this.isDeepSleep = false
|
||||
}
|
||||
|
||||
/**
|
||||
* Enter the sleep state
|
||||
* @param {string|null} [fromState=null] - The previous state
|
||||
* @param {string} [_emotion=Emotions.NEUTRAL] - The emotion to enter with (unused)
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async enter (fromState = null, _emotion = Emotions.NEUTRAL) {
|
||||
console.log(`Entering SLEEPING state from ${fromState}`)
|
||||
|
||||
// Play sleep transition if available
|
||||
const sleepTransition = this.context.getClip('wait_2sleep_T')
|
||||
if (sleepTransition) {
|
||||
await sleepTransition.play()
|
||||
await this.waitForClipEnd(sleepTransition)
|
||||
}
|
||||
|
||||
// Start sleep loop
|
||||
this.sleepClip = this.context.getClip('sleep_idle_L')
|
||||
if (this.sleepClip) {
|
||||
await this.sleepClip.play()
|
||||
this.currentClip = this.sleepClip
|
||||
}
|
||||
|
||||
this.isDeepSleep = true
|
||||
}
|
||||
|
||||
/**
|
||||
* Exit the sleep state
|
||||
* @param {string|null} [toState=null] - The next state
|
||||
* @param {string} [emotion=Emotions.NEUTRAL] - The emotion to exit with
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async exit (toState = null, _emotion = Emotions.NEUTRAL) {
|
||||
console.log(`Exiting SLEEPING state to ${toState}`)
|
||||
this.isDeepSleep = false
|
||||
|
||||
if (this.currentClip) {
|
||||
await this.stopCurrentClip()
|
||||
}
|
||||
|
||||
// Play wake up animation
|
||||
const wakeUpClip = this.context.getClip('sleep_wakeup_T')
|
||||
if (wakeUpClip) {
|
||||
await wakeUpClip.play()
|
||||
await this.waitForClipEnd(wakeUpClip)
|
||||
}
|
||||
|
||||
// Play transition to next state if available
|
||||
const transitionName = `sleep_2${toState}_T`
|
||||
const transition = this.context.getClip(transitionName)
|
||||
if (transition) {
|
||||
await transition.play()
|
||||
await this.waitForClipEnd(transition)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the sleep state
|
||||
* @param {number} _deltaTime - Time elapsed since last update (ms, unused)
|
||||
* @returns {void}
|
||||
*/
|
||||
update (_deltaTime) {
|
||||
// Sleep state doesn't need regular updates
|
||||
// Character remains asleep until external stimulus
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle a user message in sleep state (wake up)
|
||||
* @param {string} _message - The user message (unused, just triggers wake up)
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async handleMessage (_message) {
|
||||
// Any message should wake up the character
|
||||
if (this.isDeepSleep) {
|
||||
console.log('Waking up due to user message')
|
||||
// This will trigger a state transition to REACTING
|
||||
await this.context.transitionTo(States.REACTING)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get available transitions from sleep state
|
||||
* @returns {string[]} Array of available state transitions
|
||||
*/
|
||||
getAvailableTransitions () {
|
||||
return [States.WAITING, States.REACTING]
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if in deep sleep
|
||||
* @returns {boolean} True if in deep sleep, false otherwise
|
||||
*/
|
||||
isInDeepSleep () {
|
||||
return this.isDeepSleep
|
||||
}
|
||||
|
||||
/**
|
||||
* Force wake up from sleep
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async wakeUp () {
|
||||
if (this.isDeepSleep) {
|
||||
await this.context.transitionTo(States.WAITING)
|
||||
}
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2>
|
||||
<h3>Modules</h3>
|
||||
<ul>
|
||||
<li><a href="module-StateHandler.html">StateHandler</a></li>
|
||||
<li><a href="module-animation.html">animation</a></li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationConstants.html"
|
||||
>animation/AnimationConstants</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationNameMapper.html"
|
||||
>animation/AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="module-constants.html">constants</a></li>
|
||||
<li><a href="module-core.html">core</a></li>
|
||||
<li><a href="module-factories.html">factories</a></li>
|
||||
<li><a href="module-loaders.html">loaders</a></li>
|
||||
<li><a href="module-owen.html">owen</a></li>
|
||||
<li><a href="module-states.html">states</a></li>
|
||||
</ul>
|
||||
<h3>Classes</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
|
||||
<li>
|
||||
<a href="module-animation.AnimationClipFactory.html"
|
||||
>AnimationClipFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
||||
>AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-core.OwenAnimationContext.html"
|
||||
>OwenAnimationContext</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-factories.OwenSystemFactory.html"
|
||||
>OwenSystemFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.GLTFAnimationLoader.html"
|
||||
>GLTFAnimationLoader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-states.StateFactory.html">StateFactory</a></li>
|
||||
<li>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<br class="clear" />
|
||||
|
||||
<footer>
|
||||
Documentation generated by
|
||||
<a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
|
||||
2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
<script src="scripts/linenumber.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
204
docs/states_StateFactory.js.html
Normal file
204
docs/states_StateFactory.js.html
Normal file
@ -0,0 +1,204 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>JSDoc: Source: states/StateFactory.js</title>
|
||||
|
||||
<script src="scripts/prettify/prettify.js"></script>
|
||||
<script src="scripts/prettify/lang-css.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link
|
||||
type="text/css"
|
||||
rel="stylesheet"
|
||||
href="styles/prettify-tomorrow.css"
|
||||
/>
|
||||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1 class="page-title">Source: states/StateFactory.js</h1>
|
||||
|
||||
<section>
|
||||
<article>
|
||||
<pre class="prettyprint source linenums"><code>/**
|
||||
* @fileoverview State factory for creating state handlers
|
||||
* @module states
|
||||
*/
|
||||
|
||||
import { WaitStateHandler } from './WaitStateHandler.js'
|
||||
import { ReactStateHandler } from './ReactStateHandler.js'
|
||||
import { TypeStateHandler } from './TypeStateHandler.js'
|
||||
import { SleepStateHandler } from './SleepStateHandler.js'
|
||||
import { States } from '../constants.js'
|
||||
|
||||
/**
|
||||
* Factory for creating state handlers using dependency injection
|
||||
* @class
|
||||
*/
|
||||
export class StateFactory {
|
||||
/**
|
||||
* Create a state factory
|
||||
*/
|
||||
constructor () {
|
||||
/**
|
||||
* Registry of state handler classes
|
||||
* @type {Map<string, Function>}
|
||||
* @private
|
||||
*/
|
||||
this.stateHandlers = new Map()
|
||||
|
||||
// Register default state handlers
|
||||
this.registerStateHandler(States.WAITING, WaitStateHandler)
|
||||
this.registerStateHandler(States.REACTING, ReactStateHandler)
|
||||
this.registerStateHandler(States.TYPING, TypeStateHandler)
|
||||
this.registerStateHandler(States.SLEEPING, SleepStateHandler)
|
||||
}
|
||||
|
||||
/**
|
||||
* Register a state handler class
|
||||
* @param {string} stateName - The name of the state
|
||||
* @param {Function} handlerClass - The handler class constructor
|
||||
* @returns {void}
|
||||
*/
|
||||
registerStateHandler (stateName, handlerClass) {
|
||||
this.stateHandlers.set(stateName, handlerClass)
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a state handler instance
|
||||
* @param {string} stateName - The name of the state
|
||||
* @param {OwenAnimationContext} context - The animation context
|
||||
* @returns {StateHandler} The created state handler
|
||||
* @throws {Error} If state handler is not registered
|
||||
*/
|
||||
createStateHandler (stateName, context) {
|
||||
const HandlerClass = this.stateHandlers.get(stateName)
|
||||
if (!HandlerClass) {
|
||||
throw new Error(`No handler registered for state: ${stateName}`)
|
||||
}
|
||||
|
||||
return new HandlerClass(context)
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all available state names
|
||||
* @returns {string[]} Array of registered state names
|
||||
*/
|
||||
getAvailableStates () {
|
||||
return Array.from(this.stateHandlers.keys())
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if a state is registered
|
||||
* @param {string} stateName - The state name to check
|
||||
* @returns {boolean} True if registered, false otherwise
|
||||
*/
|
||||
isStateRegistered (stateName) {
|
||||
return this.stateHandlers.has(stateName)
|
||||
}
|
||||
|
||||
/**
|
||||
* Unregister a state handler
|
||||
* @param {string} stateName - The state name to unregister
|
||||
* @returns {boolean} True if removed, false if not found
|
||||
*/
|
||||
unregisterStateHandler (stateName) {
|
||||
return this.stateHandlers.delete(stateName)
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2>
|
||||
<h3>Modules</h3>
|
||||
<ul>
|
||||
<li><a href="module-StateHandler.html">StateHandler</a></li>
|
||||
<li><a href="module-animation.html">animation</a></li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationConstants.html"
|
||||
>animation/AnimationConstants</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationNameMapper.html"
|
||||
>animation/AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="module-constants.html">constants</a></li>
|
||||
<li><a href="module-core.html">core</a></li>
|
||||
<li><a href="module-factories.html">factories</a></li>
|
||||
<li><a href="module-loaders.html">loaders</a></li>
|
||||
<li><a href="module-owen.html">owen</a></li>
|
||||
<li><a href="module-states.html">states</a></li>
|
||||
</ul>
|
||||
<h3>Classes</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
|
||||
<li>
|
||||
<a href="module-animation.AnimationClipFactory.html"
|
||||
>AnimationClipFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
||||
>AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-core.OwenAnimationContext.html"
|
||||
>OwenAnimationContext</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-factories.OwenSystemFactory.html"
|
||||
>OwenSystemFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.GLTFAnimationLoader.html"
|
||||
>GLTFAnimationLoader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-states.StateFactory.html">StateFactory</a></li>
|
||||
<li>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<br class="clear" />
|
||||
|
||||
<footer>
|
||||
Documentation generated by
|
||||
<a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
|
||||
2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
<script src="scripts/linenumber.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
244
docs/states_StateHandler.js.html
Normal file
244
docs/states_StateHandler.js.html
Normal file
@ -0,0 +1,244 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>JSDoc: Source: states/StateHandler.js</title>
|
||||
|
||||
<script src="scripts/prettify/prettify.js"></script>
|
||||
<script src="scripts/prettify/lang-css.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link
|
||||
type="text/css"
|
||||
rel="stylesheet"
|
||||
href="styles/prettify-tomorrow.css"
|
||||
/>
|
||||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1 class="page-title">Source: states/StateHandler.js</h1>
|
||||
|
||||
<section>
|
||||
<article>
|
||||
<pre class="prettyprint source linenums"><code>/**
|
||||
* @fileoverview Base state handler class and utilities
|
||||
* @module StateHandler
|
||||
*/
|
||||
|
||||
import { Emotions, Config } from '../constants.js'
|
||||
|
||||
/**
|
||||
* Abstract base class for state handlers
|
||||
* @abstract
|
||||
* @class
|
||||
*/
|
||||
export class StateHandler {
|
||||
/**
|
||||
* Create a state handler
|
||||
* @param {string} stateName - The name of the state
|
||||
* @param {OwenAnimationContext} context - The animation context
|
||||
*/
|
||||
constructor (stateName, context) {
|
||||
/**
|
||||
* The name of this state
|
||||
* @type {string}
|
||||
*/
|
||||
this.stateName = stateName
|
||||
|
||||
/**
|
||||
* The animation context
|
||||
* @type {OwenAnimationContext}
|
||||
*/
|
||||
this.context = context
|
||||
|
||||
/**
|
||||
* Currently playing animation clip
|
||||
* @type {AnimationClip|null}
|
||||
*/
|
||||
this.currentClip = null
|
||||
|
||||
/**
|
||||
* Nested state information
|
||||
* @type {Object|null}
|
||||
*/
|
||||
this.nestedState = null
|
||||
}
|
||||
|
||||
/**
|
||||
* Enter this state
|
||||
* @abstract
|
||||
* @param {string|null} [_fromState=null] - The previous state (unused in base class)
|
||||
* @param {string} [_emotion=Emotions.NEUTRAL] - The emotion to enter with (unused in base class)
|
||||
* @returns {Promise<void>}
|
||||
* @throws {Error} Must be implemented by subclasses
|
||||
*/
|
||||
async enter (_fromState = null, _emotion = Emotions.NEUTRAL) {
|
||||
throw new Error('enter method must be implemented by subclasses')
|
||||
}
|
||||
|
||||
/**
|
||||
* Exit this state
|
||||
* @abstract
|
||||
* @param {string|null} [_toState=null] - The next state (unused in base class)
|
||||
* @param {string} [_emotion=Emotions.NEUTRAL] - The emotion to exit with (unused in base class)
|
||||
* @returns {Promise<void>}
|
||||
* @throws {Error} Must be implemented by subclasses
|
||||
*/
|
||||
async exit (_toState = null, _emotion = Emotions.NEUTRAL) {
|
||||
throw new Error('exit method must be implemented by subclasses')
|
||||
}
|
||||
|
||||
/**
|
||||
* Update this state (called every frame)
|
||||
* @param {number} _deltaTime - Time elapsed since last update (ms, unused in base class)
|
||||
* @returns {void}
|
||||
*/
|
||||
update (_deltaTime) {
|
||||
// Override in subclasses if needed
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle a user message while in this state
|
||||
* @param {string} _message - The user message (unused in base class)
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async handleMessage (_message) {
|
||||
// Override in subclasses if needed
|
||||
}
|
||||
|
||||
/**
|
||||
* Get available transitions from this state
|
||||
* @returns {string[]} Array of state names that can be transitioned to
|
||||
*/
|
||||
getAvailableTransitions () {
|
||||
return []
|
||||
}
|
||||
|
||||
/**
|
||||
* Wait for an animation clip to finish playing
|
||||
* @protected
|
||||
* @param {AnimationClip} clip - The animation clip to wait for
|
||||
* @returns {Promise<void>} Promise that resolves when the clip finishes
|
||||
*/
|
||||
async waitForClipEnd (clip) {
|
||||
return new Promise((resolve) => {
|
||||
const checkFinished = () => {
|
||||
if (!clip.isPlaying()) {
|
||||
resolve()
|
||||
} else {
|
||||
requestAnimationFrame(checkFinished)
|
||||
}
|
||||
}
|
||||
checkFinished()
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Stop the currently playing clip
|
||||
* @protected
|
||||
* @param {number} [fadeOutDuration] - Fade out duration
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async stopCurrentClip (fadeOutDuration = Config.DEFAULT_FADE_OUT) {
|
||||
if (this.currentClip) {
|
||||
await this.currentClip.stop(fadeOutDuration)
|
||||
this.currentClip = null
|
||||
}
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2>
|
||||
<h3>Modules</h3>
|
||||
<ul>
|
||||
<li><a href="module-StateHandler.html">StateHandler</a></li>
|
||||
<li><a href="module-animation.html">animation</a></li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationConstants.html"
|
||||
>animation/AnimationConstants</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationNameMapper.html"
|
||||
>animation/AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="module-constants.html">constants</a></li>
|
||||
<li><a href="module-core.html">core</a></li>
|
||||
<li><a href="module-factories.html">factories</a></li>
|
||||
<li><a href="module-loaders.html">loaders</a></li>
|
||||
<li><a href="module-owen.html">owen</a></li>
|
||||
<li><a href="module-states.html">states</a></li>
|
||||
</ul>
|
||||
<h3>Classes</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
|
||||
<li>
|
||||
<a href="module-animation.AnimationClipFactory.html"
|
||||
>AnimationClipFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
||||
>AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-core.OwenAnimationContext.html"
|
||||
>OwenAnimationContext</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-factories.OwenSystemFactory.html"
|
||||
>OwenSystemFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.GLTFAnimationLoader.html"
|
||||
>GLTFAnimationLoader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-states.StateFactory.html">StateFactory</a></li>
|
||||
<li>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<br class="clear" />
|
||||
|
||||
<footer>
|
||||
Documentation generated by
|
||||
<a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
|
||||
2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
<script src="scripts/linenumber.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
246
docs/states_TypeStateHandler.js.html
Normal file
246
docs/states_TypeStateHandler.js.html
Normal file
@ -0,0 +1,246 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>JSDoc: Source: states/TypeStateHandler.js</title>
|
||||
|
||||
<script src="scripts/prettify/prettify.js"></script>
|
||||
<script src="scripts/prettify/lang-css.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link
|
||||
type="text/css"
|
||||
rel="stylesheet"
|
||||
href="styles/prettify-tomorrow.css"
|
||||
/>
|
||||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1 class="page-title">Source: states/TypeStateHandler.js</h1>
|
||||
|
||||
<section>
|
||||
<article>
|
||||
<pre class="prettyprint source linenums"><code>/**
|
||||
* @fileoverview Type state handler implementation
|
||||
* @module states
|
||||
*/
|
||||
|
||||
import { StateHandler } from './StateHandler.js'
|
||||
import { States, Emotions } from '../constants.js'
|
||||
|
||||
/**
|
||||
* Handler for the Type state
|
||||
* @class
|
||||
* @extends StateHandler
|
||||
*/
|
||||
export class TypeStateHandler extends StateHandler {
|
||||
/**
|
||||
* Create a type state handler
|
||||
* @param {OwenAnimationContext} context - The animation context
|
||||
*/
|
||||
constructor (context) {
|
||||
super(States.TYPING, context)
|
||||
|
||||
/**
|
||||
* Current emotional state
|
||||
* @type {string}
|
||||
*/
|
||||
this.emotion = Emotions.NEUTRAL
|
||||
|
||||
/**
|
||||
* Whether currently typing
|
||||
* @type {boolean}
|
||||
*/
|
||||
this.isTyping = false
|
||||
}
|
||||
|
||||
/**
|
||||
* Enter the type state
|
||||
* @param {string|null} [_fromState=null] - The previous state (unused)
|
||||
* @param {string} [emotion=Emotions.NEUTRAL] - The emotion to enter with
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async enter (_fromState = null, emotion = Emotions.NEUTRAL) {
|
||||
console.log(`Entering TYPING state with emotion: ${emotion}`)
|
||||
this.emotion = emotion
|
||||
this.isTyping = true
|
||||
|
||||
// Play appropriate typing animation
|
||||
let typingClipName = 'type_idle_L'
|
||||
if (emotion !== Emotions.NEUTRAL) {
|
||||
typingClipName = `type_${emotion}_L`
|
||||
}
|
||||
|
||||
const typingClip = this.context.getClip(typingClipName)
|
||||
if (typingClip) {
|
||||
await typingClip.play()
|
||||
this.currentClip = typingClip
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Exit the type state
|
||||
* @param {string|null} [toState=null] - The next state
|
||||
* @param {string} [_emotion=Emotions.NEUTRAL] - The emotion to exit with (unused)
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async exit (toState = null, _emotion = Emotions.NEUTRAL) {
|
||||
console.log(`Exiting TYPING state to ${toState}`)
|
||||
this.isTyping = false
|
||||
|
||||
if (this.currentClip) {
|
||||
await this.stopCurrentClip()
|
||||
}
|
||||
|
||||
// Play transition if available
|
||||
let transitionName = `type_2${toState}_T`
|
||||
if (this.emotion !== Emotions.NEUTRAL) {
|
||||
transitionName = `type_${this.emotion}2${toState}_T`
|
||||
}
|
||||
|
||||
const transition = this.context.getClip(transitionName)
|
||||
if (transition) {
|
||||
await transition.play()
|
||||
await this.waitForClipEnd(transition)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Finish typing and prepare to transition
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async finishTyping () {
|
||||
if (!this.isTyping) return
|
||||
|
||||
// Play typing finish animation if available
|
||||
const finishClip = this.context.getClip('type_finish_Q')
|
||||
if (finishClip && this.currentClip) {
|
||||
await this.stopCurrentClip(0.2)
|
||||
await finishClip.play()
|
||||
await this.waitForClipEnd(finishClip)
|
||||
}
|
||||
|
||||
this.isTyping = false
|
||||
}
|
||||
|
||||
/**
|
||||
* Get available transitions from type state
|
||||
* @returns {string[]} Array of available state transitions
|
||||
*/
|
||||
getAvailableTransitions () {
|
||||
return [States.WAITING, States.REACTING]
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if currently typing
|
||||
* @returns {boolean} True if typing, false otherwise
|
||||
*/
|
||||
getIsTyping () {
|
||||
return this.isTyping
|
||||
}
|
||||
|
||||
/**
|
||||
* Set typing state
|
||||
* @param {boolean} typing - Whether currently typing
|
||||
* @returns {void}
|
||||
*/
|
||||
setTyping (typing) {
|
||||
this.isTyping = typing
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2>
|
||||
<h3>Modules</h3>
|
||||
<ul>
|
||||
<li><a href="module-StateHandler.html">StateHandler</a></li>
|
||||
<li><a href="module-animation.html">animation</a></li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationConstants.html"
|
||||
>animation/AnimationConstants</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationNameMapper.html"
|
||||
>animation/AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="module-constants.html">constants</a></li>
|
||||
<li><a href="module-core.html">core</a></li>
|
||||
<li><a href="module-factories.html">factories</a></li>
|
||||
<li><a href="module-loaders.html">loaders</a></li>
|
||||
<li><a href="module-owen.html">owen</a></li>
|
||||
<li><a href="module-states.html">states</a></li>
|
||||
</ul>
|
||||
<h3>Classes</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
|
||||
<li>
|
||||
<a href="module-animation.AnimationClipFactory.html"
|
||||
>AnimationClipFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
||||
>AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-core.OwenAnimationContext.html"
|
||||
>OwenAnimationContext</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-factories.OwenSystemFactory.html"
|
||||
>OwenSystemFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.GLTFAnimationLoader.html"
|
||||
>GLTFAnimationLoader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-states.StateFactory.html">StateFactory</a></li>
|
||||
<li>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<br class="clear" />
|
||||
|
||||
<footer>
|
||||
Documentation generated by
|
||||
<a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
|
||||
2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
<script src="scripts/linenumber.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
256
docs/states_WaitStateHandler.js.html
Normal file
256
docs/states_WaitStateHandler.js.html
Normal file
@ -0,0 +1,256 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>JSDoc: Source: states/WaitStateHandler.js</title>
|
||||
|
||||
<script src="scripts/prettify/prettify.js"></script>
|
||||
<script src="scripts/prettify/lang-css.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link
|
||||
type="text/css"
|
||||
rel="stylesheet"
|
||||
href="styles/prettify-tomorrow.css"
|
||||
/>
|
||||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1 class="page-title">Source: states/WaitStateHandler.js</h1>
|
||||
|
||||
<section>
|
||||
<article>
|
||||
<pre class="prettyprint source linenums"><code>/**
|
||||
* @fileoverview Wait state handler implementation
|
||||
* @module states
|
||||
*/
|
||||
|
||||
import { StateHandler } from './StateHandler.js'
|
||||
import { States, Emotions, Config } from '../constants.js'
|
||||
|
||||
/**
|
||||
* Handler for the Wait/Idle state
|
||||
* @class
|
||||
* @extends StateHandler
|
||||
*/
|
||||
export class WaitStateHandler extends StateHandler {
|
||||
/**
|
||||
* Create a wait state handler
|
||||
* @param {OwenAnimationContext} context - The animation context
|
||||
*/
|
||||
constructor (context) {
|
||||
super(States.WAITING, context)
|
||||
|
||||
/**
|
||||
* The main idle animation clip
|
||||
* @type {AnimationClip|null}
|
||||
*/
|
||||
this.idleClip = null
|
||||
|
||||
/**
|
||||
* Available quirk animations
|
||||
* @type {AnimationClip[]}
|
||||
*/
|
||||
this.quirks = []
|
||||
|
||||
/**
|
||||
* Timer for quirk animations
|
||||
* @type {number}
|
||||
*/
|
||||
this.quirkTimer = 0
|
||||
|
||||
/**
|
||||
* Interval between quirk attempts (ms)
|
||||
* @type {number}
|
||||
*/
|
||||
this.quirkInterval = Config.QUIRK_INTERVAL
|
||||
}
|
||||
|
||||
/**
|
||||
* Enter the wait state
|
||||
* @param {string|null} [fromState=null] - The previous state
|
||||
* @param {string} [emotion=Emotions.NEUTRAL] - The emotion to enter with
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async enter (fromState = null, _emotion = Emotions.NEUTRAL) {
|
||||
console.log(`Entering WAITING state from ${fromState}`)
|
||||
|
||||
// Play idle loop
|
||||
this.idleClip = this.context.getClip('wait_idle_L')
|
||||
if (this.idleClip) {
|
||||
await this.idleClip.play()
|
||||
this.currentClip = this.idleClip
|
||||
}
|
||||
|
||||
// Collect available quirks
|
||||
this.quirks = this.context.getClipsByPattern('wait_*_Q')
|
||||
this.quirkTimer = 0
|
||||
}
|
||||
|
||||
/**
|
||||
* Exit the wait state
|
||||
* @param {string|null} [toState=null] - The next state
|
||||
* @param {string} [emotion=Emotions.NEUTRAL] - The emotion to exit with
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async exit (toState = null, _emotion = Emotions.NEUTRAL) {
|
||||
console.log(`Exiting WAITING state to ${toState}`)
|
||||
|
||||
if (this.currentClip) {
|
||||
await this.stopCurrentClip()
|
||||
}
|
||||
|
||||
// Play transition if available
|
||||
const transitionName = `wait_2${toState}_T`
|
||||
const transition = this.context.getClip(transitionName)
|
||||
if (transition) {
|
||||
await transition.play()
|
||||
await this.waitForClipEnd(transition)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the wait state
|
||||
* @param {number} deltaTime - Time elapsed since last update (ms)
|
||||
* @returns {void}
|
||||
*/
|
||||
update (deltaTime) {
|
||||
this.quirkTimer += deltaTime
|
||||
|
||||
// Randomly play quirks
|
||||
if (this.quirkTimer > this.quirkInterval && Math.random() < Config.QUIRK_PROBABILITY) {
|
||||
this.playRandomQuirk()
|
||||
this.quirkTimer = 0
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Play a random quirk animation
|
||||
* @private
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async playRandomQuirk () {
|
||||
if (this.quirks.length === 0) return
|
||||
|
||||
const quirk = this.quirks[Math.floor(Math.random() * this.quirks.length)]
|
||||
|
||||
// Fade out idle
|
||||
if (this.idleClip) {
|
||||
await this.idleClip.stop(0.2)
|
||||
}
|
||||
|
||||
// Play quirk
|
||||
await quirk.play()
|
||||
await this.waitForClipEnd(quirk)
|
||||
|
||||
// Return to idle
|
||||
if (this.idleClip) {
|
||||
await this.idleClip.play()
|
||||
this.currentClip = this.idleClip
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get available transitions from wait state
|
||||
* @returns {string[]} Array of available state transitions
|
||||
*/
|
||||
getAvailableTransitions () {
|
||||
return [States.REACTING, States.SLEEPING]
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2>
|
||||
<h3>Modules</h3>
|
||||
<ul>
|
||||
<li><a href="module-StateHandler.html">StateHandler</a></li>
|
||||
<li><a href="module-animation.html">animation</a></li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationConstants.html"
|
||||
>animation/AnimationConstants</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-animation_AnimationNameMapper.html"
|
||||
>animation/AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="module-constants.html">constants</a></li>
|
||||
<li><a href="module-core.html">core</a></li>
|
||||
<li><a href="module-factories.html">factories</a></li>
|
||||
<li><a href="module-loaders.html">loaders</a></li>
|
||||
<li><a href="module-owen.html">owen</a></li>
|
||||
<li><a href="module-states.html">states</a></li>
|
||||
</ul>
|
||||
<h3>Classes</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
|
||||
<li>
|
||||
<a href="module-animation.AnimationClipFactory.html"
|
||||
>AnimationClipFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
||||
>AnimationNameMapper</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-core.OwenAnimationContext.html"
|
||||
>OwenAnimationContext</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-factories.OwenSystemFactory.html"
|
||||
>OwenSystemFactory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-loaders.GLTFAnimationLoader.html"
|
||||
>GLTFAnimationLoader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
|
||||
</li>
|
||||
<li><a href="module-states.StateFactory.html">StateFactory</a></li>
|
||||
<li>
|
||||
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<br class="clear" />
|
||||
|
||||
<footer>
|
||||
Documentation generated by
|
||||
<a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
|
||||
2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
<script src="scripts/linenumber.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
377
docs/styles/jsdoc-default.css
Normal file
377
docs/styles/jsdoc-default.css
Normal file
@ -0,0 +1,377 @@
|
||||
@font-face {
|
||||
font-family: "Open Sans";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
src: url("../fonts/OpenSans-Regular-webfont.eot");
|
||||
src:
|
||||
local("Open Sans"),
|
||||
local("OpenSans"),
|
||||
url("../fonts/OpenSans-Regular-webfont.eot?#iefix")
|
||||
format("embedded-opentype"),
|
||||
url("../fonts/OpenSans-Regular-webfont.woff") format("woff"),
|
||||
url("../fonts/OpenSans-Regular-webfont.svg#open_sansregular") format("svg");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Open Sans Light";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
src: url("../fonts/OpenSans-Light-webfont.eot");
|
||||
src:
|
||||
local("Open Sans Light"),
|
||||
local("OpenSans Light"),
|
||||
url("../fonts/OpenSans-Light-webfont.eot?#iefix")
|
||||
format("embedded-opentype"),
|
||||
url("../fonts/OpenSans-Light-webfont.woff") format("woff"),
|
||||
url("../fonts/OpenSans-Light-webfont.svg#open_sanslight") format("svg");
|
||||
}
|
||||
|
||||
html {
|
||||
overflow: auto;
|
||||
background-color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
line-height: 1.5;
|
||||
color: #4d4e53;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited,
|
||||
a:active {
|
||||
color: #0095dd;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
header {
|
||||
display: block;
|
||||
padding: 0px 4px;
|
||||
}
|
||||
|
||||
tt,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: Consolas, Monaco, "Andale Mono", monospace;
|
||||
}
|
||||
|
||||
.class-description {
|
||||
font-size: 130%;
|
||||
line-height: 140%;
|
||||
margin-bottom: 1em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.class-description:empty {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#main {
|
||||
float: left;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
article dl {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
article img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
section {
|
||||
display: block;
|
||||
background-color: #fff;
|
||||
padding: 12px 24px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.variation {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.signature-attributes {
|
||||
font-size: 60%;
|
||||
color: #aaa;
|
||||
font-style: italic;
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: block;
|
||||
float: right;
|
||||
margin-top: 28px;
|
||||
width: 30%;
|
||||
box-sizing: border-box;
|
||||
border-left: 1px solid #ccc;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", arial, sans-serif;
|
||||
font-size: 100%;
|
||||
line-height: 17px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
nav ul a,
|
||||
nav ul a:visited,
|
||||
nav ul a:active {
|
||||
font-family: Consolas, Monaco, "Andale Mono", monospace;
|
||||
line-height: 18px;
|
||||
color: #4d4e53;
|
||||
}
|
||||
|
||||
nav h3 {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
nav li {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: block;
|
||||
padding: 6px;
|
||||
margin-top: 12px;
|
||||
font-style: italic;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
font-weight: 200;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: "Open Sans Light", sans-serif;
|
||||
font-size: 48px;
|
||||
letter-spacing: -2px;
|
||||
margin: 12px 24px 20px;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3.subsection-title {
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -1px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
letter-spacing: -0.5px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
letter-spacing: -0.33px;
|
||||
margin-bottom: 12px;
|
||||
color: #4d4e53;
|
||||
}
|
||||
|
||||
h5,
|
||||
.container-overview .subsection-title {
|
||||
font-size: 120%;
|
||||
font-weight: bold;
|
||||
letter-spacing: -0.01em;
|
||||
margin: 8px 0 3px 0;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 100%;
|
||||
letter-spacing: -0.01em;
|
||||
margin: 6px 0 3px 0;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
border: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
border: 1px solid #ddd;
|
||||
margin: 0px;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
padding: 4px 6px;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
thead tr {
|
||||
background-color: #ddd;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
th {
|
||||
border-right: 1px solid #aaa;
|
||||
}
|
||||
tr > th:last-child {
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.ancestors,
|
||||
.attribs {
|
||||
color: #999;
|
||||
}
|
||||
.ancestors a,
|
||||
.attribs a {
|
||||
color: #999 !important;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.important {
|
||||
font-weight: bold;
|
||||
color: #950b02;
|
||||
}
|
||||
|
||||
.yes-def {
|
||||
text-indent: -1000px;
|
||||
}
|
||||
|
||||
.type-signature {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.name,
|
||||
.signature {
|
||||
font-family: Consolas, Monaco, "Andale Mono", monospace;
|
||||
}
|
||||
|
||||
.details {
|
||||
margin-top: 14px;
|
||||
border-left: 2px solid #ddd;
|
||||
}
|
||||
.details dt {
|
||||
width: 120px;
|
||||
float: left;
|
||||
padding-left: 10px;
|
||||
padding-top: 6px;
|
||||
}
|
||||
.details dd {
|
||||
margin-left: 70px;
|
||||
}
|
||||
.details ul {
|
||||
margin: 0;
|
||||
}
|
||||
.details ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
.details li {
|
||||
margin-left: 30px;
|
||||
padding-top: 6px;
|
||||
}
|
||||
.details pre.prettyprint {
|
||||
margin: 0;
|
||||
}
|
||||
.details .object-value {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-bottom: 1em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.code-caption {
|
||||
font-style: italic;
|
||||
font-size: 107%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.source {
|
||||
border: 1px solid #ddd;
|
||||
width: 80%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.prettyprint.source {
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
.source code {
|
||||
font-size: 100%;
|
||||
line-height: 18px;
|
||||
display: block;
|
||||
padding: 4px 12px;
|
||||
margin: 0;
|
||||
background-color: #fff;
|
||||
color: #4d4e53;
|
||||
}
|
||||
|
||||
.prettyprint code span.line {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.prettyprint.linenums {
|
||||
padding-left: 70px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.prettyprint.linenums ol {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.prettyprint.linenums li {
|
||||
border-left: 3px #ddd solid;
|
||||
}
|
||||
|
||||
.prettyprint.linenums li.selected,
|
||||
.prettyprint.linenums li.selected * {
|
||||
background-color: lightyellow;
|
||||
}
|
||||
|
||||
.prettyprint.linenums li * {
|
||||
-webkit-user-select: text;
|
||||
-moz-user-select: text;
|
||||
-ms-user-select: text;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
.params .name,
|
||||
.props .name,
|
||||
.name code {
|
||||
color: #4d4e53;
|
||||
font-family: Consolas, Monaco, "Andale Mono", monospace;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
.params td.description > p:first-child,
|
||||
.props td.description > p:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.params td.description > p:last-child,
|
||||
.props td.description > p:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
color: #454545;
|
||||
}
|
||||
111
docs/styles/prettify-jsdoc.css
Normal file
111
docs/styles/prettify-jsdoc.css
Normal file
@ -0,0 +1,111 @@
|
||||
/* JSDoc prettify.js theme */
|
||||
|
||||
/* plain text */
|
||||
.pln {
|
||||
color: #000000;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* string content */
|
||||
.str {
|
||||
color: #006400;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* a keyword */
|
||||
.kwd {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* a comment */
|
||||
.com {
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* a type name */
|
||||
.typ {
|
||||
color: #000000;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* a literal value */
|
||||
.lit {
|
||||
color: #006400;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* punctuation */
|
||||
.pun {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* lisp open bracket */
|
||||
.opn {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* lisp close bracket */
|
||||
.clo {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* a markup tag name */
|
||||
.tag {
|
||||
color: #006400;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* a markup attribute name */
|
||||
.atn {
|
||||
color: #006400;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* a markup attribute value */
|
||||
.atv {
|
||||
color: #006400;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* a declaration */
|
||||
.dec {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* a variable name */
|
||||
.var {
|
||||
color: #000000;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* a function name */
|
||||
.fun {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Specify class=linenums on a pre to get line numbering */
|
||||
ol.linenums {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
163
docs/styles/prettify-tomorrow.css
Normal file
163
docs/styles/prettify-tomorrow.css
Normal file
@ -0,0 +1,163 @@
|
||||
/* Tomorrow Theme */
|
||||
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
|
||||
/* Pretty printing styles. Used with prettify.js. */
|
||||
/* SPAN elements with the classes below are added by prettyprint. */
|
||||
/* plain text */
|
||||
.pln {
|
||||
color: #4d4d4c;
|
||||
}
|
||||
|
||||
@media screen {
|
||||
/* string content */
|
||||
.str {
|
||||
color: #718c00;
|
||||
}
|
||||
|
||||
/* a keyword */
|
||||
.kwd {
|
||||
color: #8959a8;
|
||||
}
|
||||
|
||||
/* a comment */
|
||||
.com {
|
||||
color: #8e908c;
|
||||
}
|
||||
|
||||
/* a type name */
|
||||
.typ {
|
||||
color: #4271ae;
|
||||
}
|
||||
|
||||
/* a literal value */
|
||||
.lit {
|
||||
color: #f5871f;
|
||||
}
|
||||
|
||||
/* punctuation */
|
||||
.pun {
|
||||
color: #4d4d4c;
|
||||
}
|
||||
|
||||
/* lisp open bracket */
|
||||
.opn {
|
||||
color: #4d4d4c;
|
||||
}
|
||||
|
||||
/* lisp close bracket */
|
||||
.clo {
|
||||
color: #4d4d4c;
|
||||
}
|
||||
|
||||
/* a markup tag name */
|
||||
.tag {
|
||||
color: #c82829;
|
||||
}
|
||||
|
||||
/* a markup attribute name */
|
||||
.atn {
|
||||
color: #f5871f;
|
||||
}
|
||||
|
||||
/* a markup attribute value */
|
||||
.atv {
|
||||
color: #3e999f;
|
||||
}
|
||||
|
||||
/* a declaration */
|
||||
.dec {
|
||||
color: #f5871f;
|
||||
}
|
||||
|
||||
/* a variable name */
|
||||
.var {
|
||||
color: #c82829;
|
||||
}
|
||||
|
||||
/* a function name */
|
||||
.fun {
|
||||
color: #4271ae;
|
||||
}
|
||||
}
|
||||
/* Use higher contrast and text-weight for printable form. */
|
||||
@media print, projection {
|
||||
.str {
|
||||
color: #060;
|
||||
}
|
||||
|
||||
.kwd {
|
||||
color: #006;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.com {
|
||||
color: #600;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.typ {
|
||||
color: #404;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.lit {
|
||||
color: #044;
|
||||
}
|
||||
|
||||
.pun,
|
||||
.opn,
|
||||
.clo {
|
||||
color: #440;
|
||||
}
|
||||
|
||||
.tag {
|
||||
color: #006;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.atn {
|
||||
color: #404;
|
||||
}
|
||||
|
||||
.atv {
|
||||
color: #060;
|
||||
}
|
||||
}
|
||||
/* Style */
|
||||
/*
|
||||
pre.prettyprint {
|
||||
background: white;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', monospace;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
border: 1px solid #ccc;
|
||||
padding: 10px; }
|
||||
*/
|
||||
|
||||
/* Specify class=linenums on a pre to get line numbering */
|
||||
ol.linenums {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* IE indents via margin-left */
|
||||
li.L0,
|
||||
li.L1,
|
||||
li.L2,
|
||||
li.L3,
|
||||
li.L4,
|
||||
li.L5,
|
||||
li.L6,
|
||||
li.L7,
|
||||
li.L8,
|
||||
li.L9 {
|
||||
/* */
|
||||
}
|
||||
|
||||
/* Alternate shading for lines */
|
||||
li.L1,
|
||||
li.L3,
|
||||
li.L5,
|
||||
li.L7,
|
||||
li.L9 {
|
||||
/* */
|
||||
}
|
||||
@ -1,332 +0,0 @@
|
||||
/**
|
||||
* @fileoverview Basic example of using the Owen Animation System
|
||||
* @author Owen Animation System
|
||||
*/
|
||||
|
||||
import * as THREE from 'three';
|
||||
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
|
||||
import { OwenSystemFactory, States } from '../src/index.js';
|
||||
|
||||
/**
|
||||
* Basic Owen Animation System demo
|
||||
* @class
|
||||
*/
|
||||
class OwenDemo {
|
||||
/**
|
||||
* Create the demo
|
||||
*/
|
||||
constructor() {
|
||||
/**
|
||||
* The Three.js scene
|
||||
* @type {THREE.Scene}
|
||||
*/
|
||||
this.scene = new THREE.Scene();
|
||||
|
||||
/**
|
||||
* The Three.js camera
|
||||
* @type {THREE.PerspectiveCamera}
|
||||
*/
|
||||
this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||||
|
||||
/**
|
||||
* The Three.js renderer
|
||||
* @type {THREE.WebGLRenderer}
|
||||
*/
|
||||
this.renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
|
||||
/**
|
||||
* The Owen animation system
|
||||
* @type {OwenAnimationContext|null}
|
||||
*/
|
||||
this.owenSystem = null;
|
||||
|
||||
/**
|
||||
* Clock for tracking time
|
||||
* @type {THREE.Clock}
|
||||
*/
|
||||
this.clock = new THREE.Clock();
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the demo
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async init() {
|
||||
// Setup renderer
|
||||
this.renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
this.renderer.setClearColor(0x1a1a1a);
|
||||
this.renderer.shadowMap.enabled = true;
|
||||
this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
|
||||
document.body.appendChild(this.renderer.domElement);
|
||||
|
||||
// Setup camera
|
||||
this.camera.position.set(0, 1.6, 3);
|
||||
this.camera.lookAt(0, 1, 0);
|
||||
|
||||
// Add lighting
|
||||
this.setupLighting();
|
||||
|
||||
// Load Owen model (replace with your model path)
|
||||
await this.loadOwenModel();
|
||||
|
||||
// Setup event listeners
|
||||
this.setupEventListeners();
|
||||
|
||||
// Start render loop
|
||||
this.animate();
|
||||
|
||||
console.log('Owen Demo initialized');
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup scene lighting
|
||||
* @private
|
||||
* @returns {void}
|
||||
*/
|
||||
setupLighting() {
|
||||
// Ambient light
|
||||
const ambientLight = new THREE.AmbientLight(0x404040, 0.4);
|
||||
this.scene.add(ambientLight);
|
||||
|
||||
// Directional light
|
||||
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
|
||||
directionalLight.position.set(5, 10, 5);
|
||||
directionalLight.castShadow = true;
|
||||
directionalLight.shadow.mapSize.width = 2048;
|
||||
directionalLight.shadow.mapSize.height = 2048;
|
||||
this.scene.add(directionalLight);
|
||||
|
||||
// Fill light
|
||||
const fillLight = new THREE.DirectionalLight(0x8bb7f0, 0.3);
|
||||
fillLight.position.set(-5, 5, -5);
|
||||
this.scene.add(fillLight);
|
||||
}
|
||||
|
||||
/**
|
||||
* Load the Owen character model
|
||||
* @private
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async loadOwenModel() {
|
||||
try {
|
||||
const loader = new GLTFLoader();
|
||||
|
||||
// Replace 'path/to/owen.gltf' with your actual model path
|
||||
const gltf = await new Promise((resolve, reject) => {
|
||||
loader.load(
|
||||
'path/to/owen.gltf', // Update this path
|
||||
resolve,
|
||||
(progress) => console.log('Loading progress:', progress.loaded / progress.total * 100 + '%'),
|
||||
reject
|
||||
);
|
||||
});
|
||||
|
||||
const model = gltf.scene;
|
||||
model.position.set(0, 0, 0);
|
||||
model.scale.setScalar(1);
|
||||
|
||||
// Enable shadows
|
||||
model.traverse((child) => {
|
||||
if (child.isMesh) {
|
||||
child.castShadow = true;
|
||||
child.receiveShadow = true;
|
||||
}
|
||||
});
|
||||
|
||||
this.scene.add(model);
|
||||
|
||||
// Create Owen animation system
|
||||
this.owenSystem = await OwenSystemFactory.createOwenSystem(gltf, this.scene);
|
||||
|
||||
console.log('Owen model loaded and animation system created');
|
||||
this.logSystemInfo();
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error loading Owen model:', error);
|
||||
|
||||
// Create a placeholder cube for demo purposes
|
||||
this.createPlaceholderModel();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a placeholder model for demo purposes
|
||||
* @private
|
||||
* @returns {void}
|
||||
*/
|
||||
createPlaceholderModel() {
|
||||
const geometry = new THREE.BoxGeometry(1, 2, 1);
|
||||
const material = new THREE.MeshPhongMaterial({ color: 0x6699ff });
|
||||
const cube = new THREE.Mesh(geometry, material);
|
||||
cube.position.set(0, 1, 0);
|
||||
cube.castShadow = true;
|
||||
cube.receiveShadow = true;
|
||||
this.scene.add(cube);
|
||||
|
||||
console.log('Created placeholder model (cube)');
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup event listeners for user interaction
|
||||
* @private
|
||||
* @returns {void}
|
||||
*/
|
||||
setupEventListeners() {
|
||||
// Keyboard controls
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if (!this.owenSystem) return;
|
||||
|
||||
switch (event.key) {
|
||||
case '1':
|
||||
this.owenSystem.transitionTo(States.WAIT);
|
||||
break;
|
||||
case '2':
|
||||
this.owenSystem.transitionTo(States.REACT);
|
||||
break;
|
||||
case '3':
|
||||
this.owenSystem.transitionTo(States.TYPE);
|
||||
break;
|
||||
case '4':
|
||||
this.owenSystem.transitionTo(States.SLEEP);
|
||||
break;
|
||||
case ' ':
|
||||
this.sendTestMessage();
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
// Mouse interaction
|
||||
document.addEventListener('click', () => {
|
||||
if (this.owenSystem) {
|
||||
this.owenSystem.onUserActivity();
|
||||
}
|
||||
});
|
||||
|
||||
// Window resize
|
||||
window.addEventListener('resize', () => {
|
||||
this.camera.aspect = window.innerWidth / window.innerHeight;
|
||||
this.camera.updateProjectionMatrix();
|
||||
this.renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
});
|
||||
|
||||
// Add instructions to the page
|
||||
this.addInstructions();
|
||||
}
|
||||
|
||||
/**
|
||||
* Add on-screen instructions
|
||||
* @private
|
||||
* @returns {void}
|
||||
*/
|
||||
addInstructions() {
|
||||
const instructions = document.createElement('div');
|
||||
instructions.innerHTML = `
|
||||
<div style="position: absolute; top: 10px; left: 10px; color: white; ` +
|
||||
`font-family: monospace; font-size: 14px; line-height: 1.4;">
|
||||
<h3>Owen Animation System Demo</h3>
|
||||
<p><strong>Controls:</strong></p>
|
||||
<p>1 - Wait State</p>
|
||||
<p>2 - React State</p>
|
||||
<p>3 - Type State</p>
|
||||
<p>4 - Sleep State</p>
|
||||
<p>Space - Send Test Message</p>
|
||||
<p>Click - User Activity</p>
|
||||
<br>
|
||||
<p><strong>Current State:</strong> <span id="current-state">-</span></p>
|
||||
<p><strong>Available Transitions:</strong> <span id="transitions">-</span></p>
|
||||
</div>
|
||||
`;
|
||||
document.body.appendChild(instructions);
|
||||
}
|
||||
|
||||
/**
|
||||
* Send a test message to Owen
|
||||
* @private
|
||||
* @returns {void}
|
||||
*/
|
||||
sendTestMessage() {
|
||||
if (!this.owenSystem) return;
|
||||
|
||||
const testMessages = [
|
||||
'Hello Owen!',
|
||||
'How are you doing?',
|
||||
'This is urgent!',
|
||||
'Great work!',
|
||||
'Error in the system!',
|
||||
'I\'m feeling sad today'
|
||||
];
|
||||
|
||||
const randomMessage = testMessages[ Math.floor(Math.random() * testMessages.length) ];
|
||||
console.log(`Sending message: "${randomMessage}"`);
|
||||
this.owenSystem.handleUserMessage(randomMessage);
|
||||
}
|
||||
|
||||
/**
|
||||
* Log system information
|
||||
* @private
|
||||
* @returns {void}
|
||||
*/
|
||||
logSystemInfo() {
|
||||
if (!this.owenSystem) return;
|
||||
|
||||
console.log('=== Owen System Info ===');
|
||||
console.log('Available States:', this.owenSystem.getAvailableStates());
|
||||
console.log('Available Clips:', this.owenSystem.getAvailableClips());
|
||||
console.log('Current State:', this.owenSystem.getCurrentState());
|
||||
console.log('========================');
|
||||
}
|
||||
|
||||
/**
|
||||
* Update UI with current system state
|
||||
* @private
|
||||
* @returns {void}
|
||||
*/
|
||||
updateUI() {
|
||||
if (!this.owenSystem) return;
|
||||
|
||||
const currentStateElement = document.getElementById('current-state');
|
||||
const transitionsElement = document.getElementById('transitions');
|
||||
|
||||
if (currentStateElement) {
|
||||
currentStateElement.textContent = this.owenSystem.getCurrentState();
|
||||
}
|
||||
|
||||
if (transitionsElement) {
|
||||
transitionsElement.textContent = this.owenSystem.getAvailableTransitions().join(', ');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Main animation loop
|
||||
* @private
|
||||
* @returns {void}
|
||||
*/
|
||||
animate() {
|
||||
requestAnimationFrame(() => this.animate());
|
||||
|
||||
const deltaTime = this.clock.getDelta() * 1000; // Convert to milliseconds
|
||||
|
||||
// Update Owen system
|
||||
if (this.owenSystem) {
|
||||
this.owenSystem.update(deltaTime);
|
||||
}
|
||||
|
||||
// Update UI
|
||||
this.updateUI();
|
||||
|
||||
// Render scene
|
||||
this.renderer.render(this.scene, this.camera);
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize the demo when the page loads
|
||||
window.addEventListener('load', async () => {
|
||||
const demo = new OwenDemo();
|
||||
try {
|
||||
await demo.init();
|
||||
} catch (error) {
|
||||
console.error('Failed to initialize Owen demo:', error);
|
||||
}
|
||||
});
|
||||
|
||||
export default OwenDemo;
|
||||
@ -3,9 +3,9 @@
|
||||
* @author Owen Animation System
|
||||
*/
|
||||
|
||||
import * as THREE from 'three';
|
||||
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
|
||||
import { OwenSystemFactory, States } from '../src/index.js';
|
||||
import * as THREE from 'three'
|
||||
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
|
||||
import { OwenSystemFactory, States } from '../../src/index.js'
|
||||
|
||||
/**
|
||||
* Basic Owen Animation System demo
|
||||
@ -15,67 +15,67 @@ class OwenDemo {
|
||||
/**
|
||||
* Create the demo
|
||||
*/
|
||||
constructor() {
|
||||
constructor () {
|
||||
/**
|
||||
* The Three.js scene
|
||||
* @type {THREE.Scene}
|
||||
*/
|
||||
this.scene = new THREE.Scene();
|
||||
this.scene = new THREE.Scene()
|
||||
|
||||
/**
|
||||
* The Three.js camera
|
||||
* @type {THREE.PerspectiveCamera}
|
||||
*/
|
||||
this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||||
this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
|
||||
|
||||
/**
|
||||
* The Three.js renderer
|
||||
* @type {THREE.WebGLRenderer}
|
||||
*/
|
||||
this.renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
this.renderer = new THREE.WebGLRenderer({ antialias: true })
|
||||
|
||||
/**
|
||||
* The Owen animation system
|
||||
* @type {OwenAnimationContext|null}
|
||||
*/
|
||||
this.owenSystem = null;
|
||||
this.owenSystem = null
|
||||
|
||||
/**
|
||||
* Clock for tracking time
|
||||
* @type {THREE.Clock}
|
||||
*/
|
||||
this.clock = new THREE.Clock();
|
||||
this.clock = new THREE.Clock()
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the demo
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async init() {
|
||||
async init () {
|
||||
// Setup renderer
|
||||
this.renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
this.renderer.setClearColor(0x1a1a1a);
|
||||
this.renderer.shadowMap.enabled = true;
|
||||
this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
|
||||
document.body.appendChild(this.renderer.domElement);
|
||||
this.renderer.setSize(window.innerWidth, window.innerHeight)
|
||||
this.renderer.setClearColor(0x1a1a1a)
|
||||
this.renderer.shadowMap.enabled = true
|
||||
this.renderer.shadowMap.type = THREE.PCFSoftShadowMap
|
||||
document.body.appendChild(this.renderer.domElement)
|
||||
|
||||
// Setup camera
|
||||
this.camera.position.set(0, 1.6, 3);
|
||||
this.camera.lookAt(0, 1, 0);
|
||||
this.camera.position.set(0, 1.6, 3)
|
||||
this.camera.lookAt(0, 1, 0)
|
||||
|
||||
// Add lighting
|
||||
this.setupLighting();
|
||||
this.setupLighting()
|
||||
|
||||
// Load Owen model (replace with your model path)
|
||||
await this.loadOwenModel();
|
||||
await this.loadOwenModel()
|
||||
|
||||
// Setup event listeners
|
||||
this.setupEventListeners();
|
||||
this.setupEventListeners()
|
||||
|
||||
// Start render loop
|
||||
this.animate();
|
||||
this.animate()
|
||||
|
||||
console.log('Owen Demo initialized');
|
||||
console.log('Owen Demo initialized')
|
||||
}
|
||||
|
||||
/**
|
||||
@ -83,23 +83,23 @@ class OwenDemo {
|
||||
* @private
|
||||
* @returns {void}
|
||||
*/
|
||||
setupLighting() {
|
||||
setupLighting () {
|
||||
// Ambient light
|
||||
const ambientLight = new THREE.AmbientLight(0x404040, 0.4);
|
||||
this.scene.add(ambientLight);
|
||||
const ambientLight = new THREE.AmbientLight(0x404040, 0.4)
|
||||
this.scene.add(ambientLight)
|
||||
|
||||
// Directional light
|
||||
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
|
||||
directionalLight.position.set(5, 10, 5);
|
||||
directionalLight.castShadow = true;
|
||||
directionalLight.shadow.mapSize.width = 2048;
|
||||
directionalLight.shadow.mapSize.height = 2048;
|
||||
this.scene.add(directionalLight);
|
||||
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8)
|
||||
directionalLight.position.set(5, 10, 5)
|
||||
directionalLight.castShadow = true
|
||||
directionalLight.shadow.mapSize.width = 2048
|
||||
directionalLight.shadow.mapSize.height = 2048
|
||||
this.scene.add(directionalLight)
|
||||
|
||||
// Fill light
|
||||
const fillLight = new THREE.DirectionalLight(0x8bb7f0, 0.3);
|
||||
fillLight.position.set(-5, 5, -5);
|
||||
this.scene.add(fillLight);
|
||||
const fillLight = new THREE.DirectionalLight(0x8bb7f0, 0.3)
|
||||
fillLight.position.set(-5, 5, -5)
|
||||
this.scene.add(fillLight)
|
||||
}
|
||||
|
||||
/**
|
||||
@ -107,9 +107,9 @@ class OwenDemo {
|
||||
* @private
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async loadOwenModel() {
|
||||
async loadOwenModel () {
|
||||
try {
|
||||
const loader = new GLTFLoader();
|
||||
const loader = new GLTFLoader()
|
||||
|
||||
// Replace 'path/to/owen.gltf' with your actual model path
|
||||
const gltf = await new Promise((resolve, reject) => {
|
||||
@ -118,34 +118,33 @@ class OwenDemo {
|
||||
resolve,
|
||||
(progress) => console.log('Loading progress:', progress.loaded / progress.total * 100 + '%'),
|
||||
reject
|
||||
);
|
||||
});
|
||||
)
|
||||
})
|
||||
|
||||
const model = gltf.scene;
|
||||
model.position.set(0, 0, 0);
|
||||
model.scale.setScalar(1);
|
||||
const model = gltf.scene
|
||||
model.position.set(0, 0, 0)
|
||||
model.scale.setScalar(1)
|
||||
|
||||
// Enable shadows
|
||||
model.traverse((child) => {
|
||||
if (child.isMesh) {
|
||||
child.castShadow = true;
|
||||
child.receiveShadow = true;
|
||||
child.castShadow = true
|
||||
child.receiveShadow = true
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
this.scene.add(model);
|
||||
this.scene.add(model)
|
||||
|
||||
// Create Owen animation system
|
||||
this.owenSystem = await OwenSystemFactory.createOwenSystem(gltf, this.scene);
|
||||
|
||||
console.log('Owen model loaded and animation system created');
|
||||
this.logSystemInfo();
|
||||
this.owenSystem = await OwenSystemFactory.createOwenSystem(gltf, this.scene)
|
||||
|
||||
console.log('Owen model loaded and animation system created')
|
||||
this.logSystemInfo()
|
||||
} catch (error) {
|
||||
console.error('Error loading Owen model:', error);
|
||||
console.error('Error loading Owen model:', error)
|
||||
|
||||
// Create a placeholder cube for demo purposes
|
||||
this.createPlaceholderModel();
|
||||
this.createPlaceholderModel()
|
||||
}
|
||||
}
|
||||
|
||||
@ -154,16 +153,16 @@ class OwenDemo {
|
||||
* @private
|
||||
* @returns {void}
|
||||
*/
|
||||
createPlaceholderModel() {
|
||||
const geometry = new THREE.BoxGeometry(1, 2, 1);
|
||||
const material = new THREE.MeshPhongMaterial({ color: 0x6699ff });
|
||||
const cube = new THREE.Mesh(geometry, material);
|
||||
cube.position.set(0, 1, 0);
|
||||
cube.castShadow = true;
|
||||
cube.receiveShadow = true;
|
||||
this.scene.add(cube);
|
||||
createPlaceholderModel () {
|
||||
const geometry = new THREE.BoxGeometry(1, 2, 1)
|
||||
const material = new THREE.MeshPhongMaterial({ color: 0x6699ff })
|
||||
const cube = new THREE.Mesh(geometry, material)
|
||||
cube.position.set(0, 1, 0)
|
||||
cube.castShadow = true
|
||||
cube.receiveShadow = true
|
||||
this.scene.add(cube)
|
||||
|
||||
console.log('Created placeholder model (cube)');
|
||||
console.log('Created placeholder model (cube)')
|
||||
}
|
||||
|
||||
/**
|
||||
@ -171,46 +170,46 @@ class OwenDemo {
|
||||
* @private
|
||||
* @returns {void}
|
||||
*/
|
||||
setupEventListeners() {
|
||||
setupEventListeners () {
|
||||
// Keyboard controls
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if (!this.owenSystem) return;
|
||||
if (!this.owenSystem) return
|
||||
|
||||
switch (event.key) {
|
||||
case '1':
|
||||
this.owenSystem.transitionTo(States.WAIT);
|
||||
break;
|
||||
case '2':
|
||||
this.owenSystem.transitionTo(States.REACT);
|
||||
break;
|
||||
case '3':
|
||||
this.owenSystem.transitionTo(States.TYPE);
|
||||
break;
|
||||
case '4':
|
||||
this.owenSystem.transitionTo(States.SLEEP);
|
||||
break;
|
||||
case ' ':
|
||||
this.sendTestMessage();
|
||||
break;
|
||||
case '1':
|
||||
this.owenSystem.transitionTo(States.WAITING)
|
||||
break
|
||||
case '2':
|
||||
this.owenSystem.transitionTo(States.REACTING)
|
||||
break
|
||||
case '3':
|
||||
this.owenSystem.transitionTo(States.TYPING)
|
||||
break
|
||||
case '4':
|
||||
this.owenSystem.transitionTo(States.SLEEPING)
|
||||
break
|
||||
case ' ':
|
||||
this.sendTestMessage()
|
||||
break
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
// Mouse interaction
|
||||
document.addEventListener('click', () => {
|
||||
if (this.owenSystem) {
|
||||
this.owenSystem.onUserActivity();
|
||||
this.owenSystem.onUserActivity()
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
// Window resize
|
||||
window.addEventListener('resize', () => {
|
||||
this.camera.aspect = window.innerWidth / window.innerHeight;
|
||||
this.camera.updateProjectionMatrix();
|
||||
this.renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
});
|
||||
this.camera.aspect = window.innerWidth / window.innerHeight
|
||||
this.camera.updateProjectionMatrix()
|
||||
this.renderer.setSize(window.innerWidth, window.innerHeight)
|
||||
})
|
||||
|
||||
// Add instructions to the page
|
||||
this.addInstructions();
|
||||
this.addInstructions()
|
||||
}
|
||||
|
||||
/**
|
||||
@ -218,8 +217,8 @@ class OwenDemo {
|
||||
* @private
|
||||
* @returns {void}
|
||||
*/
|
||||
addInstructions() {
|
||||
const instructions = document.createElement('div');
|
||||
addInstructions () {
|
||||
const instructions = document.createElement('div')
|
||||
instructions.innerHTML = `
|
||||
<div style="position: absolute; top: 10px; left: 10px; color: white; ` +
|
||||
`font-family: monospace; font-size: 14px; line-height: 1.4;">
|
||||
@ -235,8 +234,8 @@ class OwenDemo {
|
||||
<p><strong>Current State:</strong> <span id="current-state">-</span></p>
|
||||
<p><strong>Available Transitions:</strong> <span id="transitions">-</span></p>
|
||||
</div>
|
||||
`;
|
||||
document.body.appendChild(instructions);
|
||||
`
|
||||
document.body.appendChild(instructions)
|
||||
}
|
||||
|
||||
/**
|
||||
@ -244,8 +243,8 @@ class OwenDemo {
|
||||
* @private
|
||||
* @returns {void}
|
||||
*/
|
||||
sendTestMessage() {
|
||||
if (!this.owenSystem) return;
|
||||
sendTestMessage () {
|
||||
if (!this.owenSystem) return
|
||||
|
||||
const testMessages = [
|
||||
'Hello Owen!',
|
||||
@ -254,11 +253,11 @@ class OwenDemo {
|
||||
'Great work!',
|
||||
'Error in the system!',
|
||||
'I\'m feeling sad today'
|
||||
];
|
||||
]
|
||||
|
||||
const randomMessage = testMessages[Math.floor(Math.random() * testMessages.length)];
|
||||
console.log(`Sending message: "${randomMessage}"`);
|
||||
this.owenSystem.handleUserMessage(randomMessage);
|
||||
const randomMessage = testMessages[Math.floor(Math.random() * testMessages.length)]
|
||||
console.log(`Sending message: "${randomMessage}"`)
|
||||
this.owenSystem.handleUserMessage(randomMessage)
|
||||
}
|
||||
|
||||
/**
|
||||
@ -266,14 +265,14 @@ class OwenDemo {
|
||||
* @private
|
||||
* @returns {void}
|
||||
*/
|
||||
logSystemInfo() {
|
||||
if (!this.owenSystem) return;
|
||||
logSystemInfo () {
|
||||
if (!this.owenSystem) return
|
||||
|
||||
console.log('=== Owen System Info ===');
|
||||
console.log('Available States:', this.owenSystem.getAvailableStates());
|
||||
console.log('Available Clips:', this.owenSystem.getAvailableClips());
|
||||
console.log('Current State:', this.owenSystem.getCurrentState());
|
||||
console.log('========================');
|
||||
console.log('=== Owen System Info ===')
|
||||
console.log('Available States:', this.owenSystem.getAvailableStates())
|
||||
console.log('Available Clips:', this.owenSystem.getAvailableClips())
|
||||
console.log('Current State:', this.owenSystem.getCurrentState())
|
||||
console.log('========================')
|
||||
}
|
||||
|
||||
/**
|
||||
@ -281,18 +280,18 @@ class OwenDemo {
|
||||
* @private
|
||||
* @returns {void}
|
||||
*/
|
||||
updateUI() {
|
||||
if (!this.owenSystem) return;
|
||||
updateUI () {
|
||||
if (!this.owenSystem) return
|
||||
|
||||
const currentStateElement = document.getElementById('current-state');
|
||||
const transitionsElement = document.getElementById('transitions');
|
||||
const currentStateElement = document.getElementById('current-state')
|
||||
const transitionsElement = document.getElementById('transitions')
|
||||
|
||||
if (currentStateElement) {
|
||||
currentStateElement.textContent = this.owenSystem.getCurrentState();
|
||||
currentStateElement.textContent = this.owenSystem.getCurrentState()
|
||||
}
|
||||
|
||||
if (transitionsElement) {
|
||||
transitionsElement.textContent = this.owenSystem.getAvailableTransitions().join(', ');
|
||||
transitionsElement.textContent = this.owenSystem.getAvailableTransitions().join(', ')
|
||||
}
|
||||
}
|
||||
|
||||
@ -301,32 +300,32 @@ class OwenDemo {
|
||||
* @private
|
||||
* @returns {void}
|
||||
*/
|
||||
animate() {
|
||||
requestAnimationFrame(() => this.animate());
|
||||
animate () {
|
||||
requestAnimationFrame(() => this.animate())
|
||||
|
||||
const deltaTime = this.clock.getDelta() * 1000; // Convert to milliseconds
|
||||
const deltaTime = this.clock.getDelta() * 1000 // Convert to milliseconds
|
||||
|
||||
// Update Owen system
|
||||
if (this.owenSystem) {
|
||||
this.owenSystem.update(deltaTime);
|
||||
this.owenSystem.update(deltaTime)
|
||||
}
|
||||
|
||||
// Update UI
|
||||
this.updateUI();
|
||||
this.updateUI()
|
||||
|
||||
// Render scene
|
||||
this.renderer.render(this.scene, this.camera);
|
||||
this.renderer.render(this.scene, this.camera)
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize the demo when the page loads
|
||||
window.addEventListener('load', async () => {
|
||||
const demo = new OwenDemo();
|
||||
const demo = new OwenDemo()
|
||||
try {
|
||||
await demo.init();
|
||||
await demo.init()
|
||||
} catch (error) {
|
||||
console.error('Failed to initialize Owen demo:', error);
|
||||
console.error('Failed to initialize Owen demo:', error)
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
export default OwenDemo;
|
||||
export default OwenDemo
|
||||
45
examples/basic-demo/index.html
Normal file
45
examples/basic-demo/index.html
Normal file
@ -0,0 +1,45 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Owen Animation System - Basic Demo</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background: #1a1a1a;
|
||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
#loading {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="loading">Loading Owen Animation System...</div>
|
||||
|
||||
<script type="module">
|
||||
import "./basic-demo.js";
|
||||
|
||||
// Hide loading screen after a short delay
|
||||
setTimeout(() => {
|
||||
const loading = document.getElementById("loading");
|
||||
if (loading) {
|
||||
loading.classList.add("hidden");
|
||||
}
|
||||
}, 3000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -3,39 +3,38 @@
|
||||
* @author Owen Animation System
|
||||
*/
|
||||
|
||||
import { OwenSystemFactory, States } from '../src/index.js';
|
||||
import { OwenSystemFactory, States } from '../../src/index.js'
|
||||
|
||||
/**
|
||||
* Simple example of using Owen Animation System
|
||||
* This example shows how to use the system without a browser environment
|
||||
*/
|
||||
class SimpleOwenExample {
|
||||
constructor() {
|
||||
this.owenSystem = null;
|
||||
constructor () {
|
||||
this.owenSystem = null
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the Owen system with a mock model
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async init() {
|
||||
async init () {
|
||||
try {
|
||||
// Create a mock GLTF model for demonstration
|
||||
const mockModel = this.createMockModel();
|
||||
const mockModel = this.createMockModel()
|
||||
|
||||
// Create the Owen system
|
||||
this.owenSystem = await OwenSystemFactory.createBasicOwenSystem(mockModel);
|
||||
this.owenSystem = await OwenSystemFactory.createBasicOwenSystem(mockModel)
|
||||
|
||||
console.log('✅ Owen Animation System initialized successfully!');
|
||||
console.log('📊 System Info:');
|
||||
console.log(` Available States: ${this.owenSystem.getAvailableStates().join(', ')}`);
|
||||
console.log(` Current State: ${this.owenSystem.getCurrentState()}`);
|
||||
console.log('✅ Owen Animation System initialized successfully!')
|
||||
console.log('📊 System Info:')
|
||||
console.log(` Available States: ${this.owenSystem.getAvailableStates().join(', ')}`)
|
||||
console.log(` Current State: ${this.owenSystem.getCurrentState()}`)
|
||||
|
||||
// Run some example interactions
|
||||
await this.runExamples();
|
||||
|
||||
await this.runExamples()
|
||||
} catch (error) {
|
||||
console.error('❌ Failed to initialize Owen system:', error.message);
|
||||
console.error('❌ Failed to initialize Owen system:', error.message)
|
||||
}
|
||||
}
|
||||
|
||||
@ -43,7 +42,7 @@ class SimpleOwenExample {
|
||||
* Create a mock 3D model for demonstration purposes
|
||||
* @returns {Object} Mock model object
|
||||
*/
|
||||
createMockModel() {
|
||||
createMockModel () {
|
||||
return {
|
||||
animations: [
|
||||
{ name: 'wait_idle_L' },
|
||||
@ -63,46 +62,46 @@ class SimpleOwenExample {
|
||||
],
|
||||
scene: {},
|
||||
userData: {}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Run example interactions with the Owen system
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async runExamples() {
|
||||
console.log('\n🎬 Running example interactions...\n');
|
||||
async runExamples () {
|
||||
console.log('\n🎬 Running example interactions...\n')
|
||||
|
||||
// Example 1: Basic state transitions
|
||||
console.log('📝 Example 1: Manual state transitions');
|
||||
await this.demonstrateStateTransitions();
|
||||
console.log('📝 Example 1: Manual state transitions')
|
||||
await this.demonstrateStateTransitions()
|
||||
|
||||
// Example 2: Message handling
|
||||
console.log('\n📝 Example 2: Message handling with emotions');
|
||||
await this.demonstrateMessageHandling();
|
||||
console.log('\n📝 Example 2: Message handling with emotions')
|
||||
await this.demonstrateMessageHandling()
|
||||
|
||||
// Example 3: System update loop
|
||||
console.log('\n📝 Example 3: System update simulation');
|
||||
this.demonstrateUpdateLoop();
|
||||
console.log('\n📝 Example 3: System update simulation')
|
||||
this.demonstrateUpdateLoop()
|
||||
|
||||
console.log('\n✨ All examples completed!');
|
||||
console.log('\n✨ All examples completed!')
|
||||
}
|
||||
|
||||
/**
|
||||
* Demonstrate manual state transitions
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async demonstrateStateTransitions() {
|
||||
const states = [ States.REACT, States.TYPE, States.WAIT, States.SLEEP ];
|
||||
async demonstrateStateTransitions () {
|
||||
const states = [States.REACTING, States.TYPING, States.WAITING, States.SLEEPING]
|
||||
|
||||
for (const state of states) {
|
||||
console.log(`🔄 Transitioning to ${state.toUpperCase()} state...`);
|
||||
await this.owenSystem.transitionTo(state);
|
||||
console.log(` ✓ Current state: ${this.owenSystem.getCurrentState()}`);
|
||||
console.log(` ✓ Available transitions: ${this.owenSystem.getAvailableTransitions().join(', ')}`);
|
||||
console.log(`🔄 Transitioning to ${state.toUpperCase()} state...`)
|
||||
await this.owenSystem.transitionTo(state)
|
||||
console.log(` ✓ Current state: ${this.owenSystem.getCurrentState()}`)
|
||||
console.log(` ✓ Available transitions: ${this.owenSystem.getAvailableTransitions().join(', ')}`)
|
||||
|
||||
// Simulate some time passing
|
||||
await this.sleep(500);
|
||||
await this.sleep(500)
|
||||
}
|
||||
}
|
||||
|
||||
@ -110,23 +109,23 @@ class SimpleOwenExample {
|
||||
* Demonstrate message handling with emotional responses
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async demonstrateMessageHandling() {
|
||||
async demonstrateMessageHandling () {
|
||||
const messages = [
|
||||
{ text: 'Hello Owen!', expected: 'neutral response' },
|
||||
{ text: 'This is urgent!', expected: 'angry/urgent response' },
|
||||
{ text: 'Great work!', expected: 'happy response' },
|
||||
{ text: 'There\'s an error in the system', expected: 'shocked response' },
|
||||
{ text: 'I\'m feeling sad today', expected: 'sad response' }
|
||||
];
|
||||
]
|
||||
|
||||
for (const message of messages) {
|
||||
console.log(`💬 Sending message: "${message.text}"`);
|
||||
console.log(` Expected: ${message.expected}`);
|
||||
console.log(`💬 Sending message: "${message.text}"`)
|
||||
console.log(` Expected: ${message.expected}`)
|
||||
|
||||
await this.owenSystem.handleUserMessage(message.text);
|
||||
console.log(` ✓ Current state after message: ${this.owenSystem.getCurrentState()}`);
|
||||
await this.owenSystem.handleUserMessage(message.text)
|
||||
console.log(` ✓ Current state after message: ${this.owenSystem.getCurrentState()}`)
|
||||
|
||||
await this.sleep(300);
|
||||
await this.sleep(300)
|
||||
}
|
||||
}
|
||||
|
||||
@ -134,26 +133,26 @@ class SimpleOwenExample {
|
||||
* Demonstrate the system update loop
|
||||
* @returns {void}
|
||||
*/
|
||||
demonstrateUpdateLoop() {
|
||||
console.log('⏱️ Simulating update loop for 3 seconds...');
|
||||
demonstrateUpdateLoop () {
|
||||
console.log('⏱️ Simulating update loop for 3 seconds...')
|
||||
|
||||
let iterations = 0;
|
||||
const startTime = Date.now();
|
||||
let iterations = 0
|
||||
const startTime = Date.now()
|
||||
|
||||
const updateLoop = () => {
|
||||
const deltaTime = 16.67; // ~60 FPS
|
||||
this.owenSystem.update(deltaTime);
|
||||
iterations++;
|
||||
const deltaTime = 16.67 // ~60 FPS
|
||||
this.owenSystem.update(deltaTime)
|
||||
iterations++
|
||||
|
||||
if (Date.now() - startTime < 3000) {
|
||||
setTimeout(updateLoop, 16);
|
||||
setTimeout(updateLoop, 16)
|
||||
} else {
|
||||
console.log(` ✓ Completed ${iterations} update iterations`);
|
||||
console.log(` ✓ Final state: ${this.owenSystem.getCurrentState()}`);
|
||||
console.log(` ✓ Completed ${iterations} update iterations`)
|
||||
console.log(` ✓ Final state: ${this.owenSystem.getCurrentState()}`)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
updateLoop();
|
||||
updateLoop()
|
||||
}
|
||||
|
||||
/**
|
||||
@ -161,24 +160,24 @@ class SimpleOwenExample {
|
||||
* @param {number} ms - Milliseconds to sleep
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
sleep(ms) {
|
||||
return new Promise(resolve => setTimeout(resolve, ms));
|
||||
sleep (ms) {
|
||||
return new Promise(resolve => setTimeout(resolve, ms))
|
||||
}
|
||||
}
|
||||
|
||||
// Run the example if this file is executed directly
|
||||
if (import.meta.url === `file://${process.argv[ 1 ]}`) {
|
||||
console.log('🚀 Starting Owen Animation System Example\n');
|
||||
if (import.meta.url === `file://${process.argv[1]}`) {
|
||||
console.log('🚀 Starting Owen Animation System Example\n')
|
||||
|
||||
const example = new SimpleOwenExample();
|
||||
const example = new SimpleOwenExample()
|
||||
example.init()
|
||||
.then(() => {
|
||||
console.log('\n🎉 Example completed successfully!');
|
||||
console.log('💡 Try modifying this example or check out the browser demo in examples/index.html');
|
||||
console.log('\n🎉 Example completed successfully!')
|
||||
console.log('💡 Try modifying this example or check out the browser demo in examples/index.html')
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('\n💥 Example failed:', error);
|
||||
});
|
||||
console.error('\n💥 Example failed:', error)
|
||||
})
|
||||
}
|
||||
|
||||
export default SimpleOwenExample;
|
||||
export default SimpleOwenExample
|
||||
@ -1,45 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Owen Animation System - Basic Demo</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background: #1a1a1a;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
#loading {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="loading">Loading Owen Animation System...</div>
|
||||
|
||||
<script type="module">
|
||||
import './basic-demo.js';
|
||||
|
||||
// Hide loading screen after a short delay
|
||||
setTimeout(() => {
|
||||
const loading = document.getElementById('loading');
|
||||
if (loading) {
|
||||
loading.classList.add('hidden');
|
||||
}
|
||||
}, 3000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
1532
examples/mock-demo/owen_test_demo.html
Normal file
1532
examples/mock-demo/owen_test_demo.html
Normal file
File diff suppressed because it is too large
Load Diff
8167
package-lock.json
generated
8167
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
101
package.json
101
package.json
@ -1,37 +1,68 @@
|
||||
{
|
||||
"name": "owen-animation-system",
|
||||
"version": "1.0.0",
|
||||
"description": "A comprehensive Three.js animation system for character state management with clean architecture principles",
|
||||
"main": "src/index.js",
|
||||
"types": "src/index.d.ts",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint src --ext .js",
|
||||
"lint:fix": "eslint src --ext .js --fix",
|
||||
"docs": "jsdoc -c jsdoc.config.json"
|
||||
},
|
||||
"keywords": [
|
||||
"three.js",
|
||||
"animation",
|
||||
"state-machine",
|
||||
"character",
|
||||
"gltf",
|
||||
"3d"
|
||||
],
|
||||
"author": "Owen Animation System",
|
||||
"license": "AGPL-3.0-only OR LicenseRef-Commercial",
|
||||
"dependencies": {
|
||||
"three": "^0.176.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"vite": "^6.3.5",
|
||||
"eslint": "^9.27.0",
|
||||
"jsdoc": "^4.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16.0.0"
|
||||
}
|
||||
"name": "@kjanat/owen",
|
||||
"version": "1.0.2",
|
||||
"description": "A comprehensive Three.js animation system for character state management with clean architecture principles",
|
||||
"main": "src/index.js",
|
||||
"types": "src/index.d.ts",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"dev:host": "vite --host",
|
||||
"build": "vite build",
|
||||
"build:demo": "vite build --config vite.demo.config.js",
|
||||
"preview": "vite preview",
|
||||
"lint": "standard",
|
||||
"lint:fix": "standard --fix",
|
||||
"docs": "jsdoc -c jsdoc.config.json",
|
||||
"format": "npx prettier --ignore-path --write '**/*.{html,css}' 'docs/**/*.{html,css}'",
|
||||
"validate:animations": "node scripts/validate-animations.js",
|
||||
"generate:constants": "node scripts/generate-animation-constants.js",
|
||||
"check:conflicts": "node scripts/check-naming-conflicts.js",
|
||||
"test:schemes": "node scripts/test-multi-schemes.js",
|
||||
"animation:validate": "npm run validate:animations && npm run check:conflicts",
|
||||
"animation:generate": "npm run generate:constants && npm run validate:animations",
|
||||
"preview:demo": "vite preview --config vite.demo.config.js --port 3000",
|
||||
"test": "npx playwright test",
|
||||
"test:demo": "npx playwright test tests/demo.spec.js",
|
||||
"test:pages": "npx playwright test tests/pages.spec.js",
|
||||
"test:ui": "npx playwright test --ui",
|
||||
"test:headed": "npx playwright test --headed"
|
||||
},
|
||||
"keywords": [
|
||||
"three.js",
|
||||
"animation",
|
||||
"state-machine",
|
||||
"character",
|
||||
"gltf",
|
||||
"3d"
|
||||
],
|
||||
"author": "Kaj \"@kjanat\" Kowalski",
|
||||
"license": "AGPL-3.0-only OR LicenseRef-Commercial",
|
||||
"dependencies": {
|
||||
"three": "^0.176.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.52.0",
|
||||
"jsdoc": "^4.0.2",
|
||||
"pre-commit": "^1.2.2",
|
||||
"standard": "*",
|
||||
"vite": "^6.3.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16.0.0"
|
||||
},
|
||||
"standard": {
|
||||
"globals": [
|
||||
"requestAnimationFrame"
|
||||
],
|
||||
"ignore": [
|
||||
"scripts/"
|
||||
]
|
||||
},
|
||||
"pre-commit": [
|
||||
"lint:fix",
|
||||
"lint",
|
||||
"docs",
|
||||
"format"
|
||||
]
|
||||
}
|
||||
|
||||
92
playwright.config.js
Normal file
92
playwright.config.js
Normal file
@ -0,0 +1,92 @@
|
||||
import { defineConfig, devices } from '@playwright/test'
|
||||
|
||||
/**
|
||||
* @see https://playwright.dev/docs/test-configuration
|
||||
*/
|
||||
export default defineConfig({
|
||||
testDir: './tests',
|
||||
/* Run tests in files in parallel */
|
||||
fullyParallel: true,
|
||||
/* Fail the build on CI if you accidentally left test.only in the source code. */
|
||||
forbidOnly: !!process.env.CI,
|
||||
/* Retry on CI only */
|
||||
retries: process.env.CI ? 2 : 0,
|
||||
/* Opt out of parallel tests on CI. */
|
||||
workers: process.env.CI ? 1 : undefined,
|
||||
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
|
||||
reporter: process.env.CI ? 'github' : 'html',
|
||||
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
|
||||
use: {
|
||||
/* Base URL to use in actions like `await page.goto('/')`. */
|
||||
baseURL: 'http://localhost:3000',
|
||||
|
||||
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
|
||||
trace: 'on-first-retry',
|
||||
|
||||
/* Take screenshot on failure */
|
||||
screenshot: 'only-on-failure',
|
||||
|
||||
/* Record video on failure */
|
||||
video: 'retain-on-failure'
|
||||
},
|
||||
|
||||
/* Configure projects for major browsers */
|
||||
projects: [
|
||||
{
|
||||
name: 'chromium',
|
||||
use: { ...devices['Desktop Chrome'] }
|
||||
},
|
||||
|
||||
{
|
||||
name: 'firefox',
|
||||
use: { ...devices['Desktop Firefox'] }
|
||||
},
|
||||
|
||||
{
|
||||
name: 'webkit',
|
||||
use: { ...devices['Desktop Safari'] }
|
||||
},
|
||||
|
||||
/* Test against mobile viewports. */
|
||||
{
|
||||
name: 'Mobile Chrome',
|
||||
use: { ...devices['Pixel 5'] }
|
||||
},
|
||||
{
|
||||
name: 'Mobile Safari',
|
||||
use: { ...devices['iPhone 12'] }
|
||||
},
|
||||
|
||||
/* Test against branded browsers. */
|
||||
{
|
||||
name: 'Microsoft Edge',
|
||||
use: { ...devices['Desktop Edge'], channel: 'msedge' }
|
||||
},
|
||||
{
|
||||
name: 'Google Chrome',
|
||||
use: { ...devices['Desktop Chrome'], channel: 'chrome' }
|
||||
}
|
||||
],
|
||||
|
||||
/* Run your local dev server before starting the tests */
|
||||
webServer: {
|
||||
command: 'npm run preview:demo',
|
||||
port: 3000,
|
||||
reuseExistingServer: !process.env.CI,
|
||||
timeout: 120000
|
||||
},
|
||||
|
||||
/* Global test timeout */
|
||||
timeout: 30000,
|
||||
|
||||
/* Global test expect timeout */
|
||||
expect: {
|
||||
timeout: 5000
|
||||
},
|
||||
|
||||
/* Output directory for test results */
|
||||
outputDir: 'test-results/',
|
||||
|
||||
/* Test timeout per test */
|
||||
globalTimeout: 600000
|
||||
})
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user