Skip to content

Commit db10b85

Browse files
easycodereasycoder
authored
Merge pull request #220 from easycoder/dev
Reuse vfx blocks
2 parents c6929f9 + 318e783 commit db10b85

File tree

2 files changed

+72
-79
lines changed

2 files changed

+72
-79
lines changed

‎iwsy/iwsy.js

Lines changed: 67 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -167,40 +167,40 @@ const IWSY = (playerElement, scriptObject) => {
167167
const converted = converter.makeHtml(text.content.split(`%0a`).join(`\n`));
168168
const tag = converted.match(/data-slide="([\w-_.]*)"/);
169169
if (tag) {
170-
for (const vfx of script.vfx) {
171-
if (vfx.name === tag[1]) {
172-
vfx.container = block.textPanel;
173-
if (vfx.url) {
174-
if (vfx.url[0] === `=`) {
175-
const lastVFX = vfx.url.slice(1);
176-
for (const index in block.vfx) {
177-
const vfx2 = block.vfx[index];
178-
if (vfx2.name === lastVFX) {
179-
vfx.image = vfx2.image;
180-
initImage(vfx);
181-
vfx.startsize = vfx2.endsize;
182-
vfx.startxoff = vfx2.endxoff;
183-
vfx.startyoff = vfx2.endyoff;
184-
vfx.w = vfx2.w2;
185-
vfx.h = vfx2.h2;
186-
vfx.xoff = vfx2.xoff2;
187-
vfx.yoff = vfx2.yoff2;
188-
if (!vfx.image) {
189-
throw new Error(`Unknown vfx ${lastVFX}`);
190-
}
191-
block.vfx[index] = vfx;
192-
}
170+
for (const sVFX of script.vfx) {
171+
if (sVFX.name === tag[1]) {
172+
const vfx = {
173+
block,
174+
container: block.textPanel,
175+
name: sVFX.name,
176+
type: sVFX.type,
177+
aspect: sVFX.aspect,
178+
url: sVFX.url,
179+
duration: sVFX.duration,
180+
startsize: 100,
181+
startxoff: 0,
182+
startyoff: 0,
183+
endsize: sVFX.endsize,
184+
endxoff: sVFX.endxoff,
185+
endyoff: sVFX.endyoff
186+
};
187+
block.vfx.push(vfx);
188+
continueFlag = false;
189+
block.textPanel.innerHTML = converted;
190+
imagesToLoad.push(vfx);
191+
imagesLoading.push(vfx);
192+
193+
if (vfx.url[0] === `=`) {
194+
const lastVFX = vfx.url.slice(1);
195+
for (pVFX of script.vfx) {
196+
if (pVFX.name === lastVFX) {
197+
vfx.url = pVFX.url;
198+
vfx.startsize = pVFX.endsize;
199+
vfx.startxoff = pVFX.endxoff;
200+
vfx.startyoff = pVFX.endyoff;
193201
break;
194202
}
195-
} else {
196-
vfx.block = block;
197-
block.vfx.push(vfx);
198-
continueFlag = false;
199-
block.textPanel.innerHTML = converted;
200-
imagesToLoad.push(vfx);
201-
imagesLoading.push(vfx);
202203
}
203-
break;
204204
}
205205
break;
206206
}
@@ -464,6 +464,7 @@ const IWSY = (playerElement, scriptObject) => {
464464
const duration = vfx.duration * 1000;
465465
if (elapsed < duration) {
466466
const ratio = 0.5 - Math.cos(Math.PI * elapsed / duration) / 2;
467+
// console.log(ratio);
467468
image.style.width = `${vfx.w + (vfx.w2 - vfx.w) * ratio}px`;
468469
image.style.height = `${vfx.h + (vfx.h2 - vfx.h) * ratio}px`;
469470
image.style.left = `${vfx.xoff + (vfx.xoff2 - vfx.xoff) * ratio}px`;
@@ -476,66 +477,51 @@ const IWSY = (playerElement, scriptObject) => {
476477
image.style.height = `${vfx.h2}px`;
477478
image.style.left = `${vfx.xoff2}px`;
478479
image.style.top = `${vfx.yoff2}px`;
479-
// if (!vfx.continueFlag) {
480-
// if (script.runMode === `manual`) {
481-
// enterManualMode(vfx.step);
482-
// } else {
483-
// vfx.step.next();
484-
// }
485-
// }
486-
}
487-
};
488-
489-
// This is where the vfx animations are started
490-
const startVFX = (step, vfx) => {
491-
const vfxElement = vfx.container;
492-
vfxElement.style.position = `relative`;
493-
vfxElement.style.display = `inline-block`;
494-
for (const item of script.vfx) {
495-
if (item.name === vfx.name) {
496-
if (!Array.isArray(step.vfx)) {
497-
step.vfx = [];
498-
}
499-
step.vfx.push(item);
500-
delete(vfx.start);
501-
if (script.speed === `scan`) {
502-
vfx.image.style.width = `${vfx.w2}px`;
503-
vfx.image.style.height = `${vfx.h2}px`;
504-
vfx.image.style.left = `${vfx.xoff2}px`;
505-
vfx.image.style.top = `${vfx.yoff2}px`;
506-
step.next();
507-
} else {
508-
vfx.step = step;
509-
requestAnimationFrame(timestamp => {
510-
animatePanzoom(timestamp, vfx);
511-
});
512-
}
513-
break;
480+
// Remove the vfx now we've done with it
481+
const index = vfx.block.vfx.indexOf(vfx);
482+
if (index > -1) {
483+
vfx.block.vfx.splice(index, 1);
514484
}
515-
}
516-
if (step.vfx.length === 0) {
517-
step.next();
518485
}
519486
};
520487

521488
// Animate a block
522489
const animate = step => {
523-
// let continueFlag = true;
524490
for (const block of script.blocks) {
525491
if (block.defaults.name === step.block) {
526492
for (const vfx of block.vfx) {
527-
// continueFlag = step.continue === `yes`;
528-
startVFX(step, vfx);
493+
console.log(` VFX ${vfx.name}`);
494+
const vfxElement = vfx.container;
495+
vfxElement.style.position = `relative`;
496+
vfxElement.style.display = `inline-block`;
497+
for (const item of script.vfx) {
498+
if (item.name === vfx.name) {
499+
if (!Array.isArray(step.vfx)) {
500+
step.vfx = [];
501+
}
502+
step.vfx.push(item);
503+
delete(vfx.start);
504+
if (script.speed === `scan`) {
505+
vfx.image.style.width = `${vfx.w2}px`;
506+
vfx.image.style.height = `${vfx.h2}px`;
507+
vfx.image.style.left = `${vfx.xoff2}px`;
508+
vfx.image.style.top = `${vfx.yoff2}px`;
509+
} else {
510+
vfx.step = step;
511+
requestAnimationFrame(timestamp => {
512+
animatePanzoom(timestamp, vfx);
513+
});
514+
}
515+
break;
516+
}
517+
}
518+
if (step.vfx.length === 0) {
519+
step.next();
520+
}
529521
}
530522
break;
531523
}
532524
}
533-
// if (script.runMode === `manual`) {
534-
// enterManualMode(step);
535-
// } else if (continueFlag) {
536-
// step.next();
537-
// }
538-
539525
// An animation is not a transition, so move on immediately
540526
step.next();
541527
};
@@ -554,6 +540,9 @@ const IWSY = (playerElement, scriptObject) => {
554540
for (const vfx2 of script.vfx) {
555541
if (name === vfx2.name) {
556542
url = vfx2.url;
543+
vfx.startsize = vfx2.endsize;
544+
vfx.startxoff = vfx2.endxoff;
545+
vfx.startyoff = vfx2.endyoff;
557546
break;
558547
}
559548
}

‎iwsy/resources/ecs/steps.txt

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@
22

33
script Steps
44

5-
import div Panel and variable Presentation
5+
import div Container and variable Presentation
66

7+
div Panel
78
div StepsPanel
89
div BlockTable
910
div BlockRow
@@ -98,6 +99,9 @@
9899
get IsHome from storage as `.ishome`
99100
get CDN from storage as `.cdn`
100101

102+
clear Container
103+
create Panel in Container
104+
set the style of Panel to `width:100%;height:100%;display:flex;flex-direction:column`
101105
create StepsPanel in Panel
102106
set the style of StepsPanel to `flex:1;overflow-y:scroll`
103107

0 commit comments

Comments
 (0)