|
|
|
@ -2,7 +2,7 @@ import * as animation from "./animation.js";
|
|
|
|
|
import * as interpreter from "./interpreter.js";
|
|
|
|
|
import * as renderer from "./renderer.js";
|
|
|
|
|
import { DancerIdentity } from "./danceCommon.js";
|
|
|
|
|
import { Move } from "./libfigureMapper.js";
|
|
|
|
|
import { LibFigureDance, Move } from "./libfigureMapper.js";
|
|
|
|
|
import { animateLowLevelMove, LowLevelMove } from "./lowLevelMove.js";
|
|
|
|
|
|
|
|
|
|
const body = document.querySelector('body')!;
|
|
|
|
@ -139,6 +139,32 @@ function playAnimation(bpm: number, start: number, end: number) {
|
|
|
|
|
anim();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Two Hearts in Time by Isaac Banner. Selected arbitrarily.
|
|
|
|
|
const exampleDance: LibFigureDance = [{ "parameter_values": [true, 8], "move": "petronella" }, { "parameter_values": [true, 8], "move": "petronella" }, { "parameter_values": ["neighbors", "balance", 16], "move": "swing" }, { "parameter_values": ["ladles", true, 540, 8], "move": "allemande" }, { "parameter_values": ["partners", "none", 8], "move": "swing" }, { "parameter_values": ["gentlespoons", 360, 6], "move": "mad robin" }, { "parameter_values": [true, 270, 6], "move": "circle" }, { "parameter_values": ["partners", 4], "move": "California twirl", "progression": 1 }];
|
|
|
|
|
|
|
|
|
|
const danceJsonArea = document.createElement('textarea');
|
|
|
|
|
danceJsonArea.value = JSON.stringify(exampleDance, undefined, 2);
|
|
|
|
|
danceJsonArea.rows = 15;
|
|
|
|
|
danceJsonArea.cols = 30;
|
|
|
|
|
const loadDanceButton = document.createElement('button');
|
|
|
|
|
loadDanceButton.innerText = 'Load Dance';
|
|
|
|
|
wrapperDiv.appendChild(document.createElement('br'));
|
|
|
|
|
wrapperDiv.appendChild(danceJsonArea);
|
|
|
|
|
wrapperDiv.appendChild(loadDanceButton);
|
|
|
|
|
|
|
|
|
|
loadDanceButton.addEventListener('click', (ev) => {
|
|
|
|
|
const dance: LibFigureDance = JSON.parse(danceJsonArea.value);
|
|
|
|
|
r.animation = interpreter.loadDance(dance);
|
|
|
|
|
if (cancelAnim !== undefined) {
|
|
|
|
|
cancelAnimationFrame(cancelAnim);
|
|
|
|
|
playButton.innerText = 'Play';
|
|
|
|
|
}
|
|
|
|
|
beatSlider.value = '0';
|
|
|
|
|
beatDisplay.innerText = '0';
|
|
|
|
|
r.drawSetsWithTrails(0);
|
|
|
|
|
buildDebugTable();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function createJsonCell(content: any, rowSpan?: number, id?: DancerIdentity) {
|
|
|
|
|
const cell = document.createElement('td');
|
|
|
|
|
const pre = document.createElement('pre');
|
|
|
|
@ -195,17 +221,22 @@ body.appendChild(showDebugLabel);
|
|
|
|
|
const table = document.createElement('table');
|
|
|
|
|
table.id = 'debug'
|
|
|
|
|
|
|
|
|
|
const headerRow = document.createElement('tr');
|
|
|
|
|
const roles = [DancerIdentity.OnesLark, DancerIdentity.OnesRobin,
|
|
|
|
|
DancerIdentity.TwosLark, DancerIdentity.TwosRobin];
|
|
|
|
|
headerRow.appendChild(createHeaderCell("Move"));
|
|
|
|
|
for (const role of roles) {
|
|
|
|
|
headerRow.appendChild(createHeaderCell(role.toString(), role));
|
|
|
|
|
}
|
|
|
|
|
table.appendChild(headerRow);
|
|
|
|
|
function buildDebugTable() {
|
|
|
|
|
while (table.childNodes.length > 0) {
|
|
|
|
|
table.removeChild(table.childNodes[table.childNodes.length - 1]);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const byMove: { move: Move, byRole: Map<DancerIdentity, { lowLevelMove?: LowLevelMove, animationSegment: animation.AnimationSegment, numSegments?: number }[]> }[] = [];
|
|
|
|
|
for (const [role, moveList] of interpreter.interpretedDance.entries()) {
|
|
|
|
|
const headerRow = document.createElement('tr');
|
|
|
|
|
const roles = [DancerIdentity.OnesLark, DancerIdentity.OnesRobin,
|
|
|
|
|
DancerIdentity.TwosLark, DancerIdentity.TwosRobin];
|
|
|
|
|
headerRow.appendChild(createHeaderCell("Move"));
|
|
|
|
|
for (const role of roles) {
|
|
|
|
|
headerRow.appendChild(createHeaderCell(role.toString(), role));
|
|
|
|
|
}
|
|
|
|
|
table.appendChild(headerRow);
|
|
|
|
|
|
|
|
|
|
const byMove: { move: Move, byRole: Map<DancerIdentity, { lowLevelMove?: LowLevelMove, animationSegment: animation.AnimationSegment, numSegments?: number }[]> }[] = [];
|
|
|
|
|
for (const [role, moveList] of interpreter.interpretedDance.entries()) {
|
|
|
|
|
for (const move of moveList) {
|
|
|
|
|
let entry = byMove.find(el => el.move === move.move);
|
|
|
|
|
if (!entry) {
|
|
|
|
@ -228,9 +259,9 @@ for (const [role, moveList] of interpreter.interpretedDance.entries()) {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
for (const infoForMove of byMove) {
|
|
|
|
|
for (const infoForMove of byMove) {
|
|
|
|
|
const moveRow = document.createElement('tr');
|
|
|
|
|
const numRows = Math.max(...[...infoForMove.byRole.values()].map(l => l.length));
|
|
|
|
|
moveRow.appendChild(createJsonCell(infoForMove.move, numRows));
|
|
|
|
@ -250,6 +281,8 @@ for (const infoForMove of byMove) {
|
|
|
|
|
|
|
|
|
|
table.appendChild(row);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
buildDebugTable();
|
|
|
|
|
|
|
|
|
|
body.appendChild(table);
|
|
|
|
|