some architecture

Canvas class takes care of displaying images
Scene class will display a scene as described in script.json
Director class will switch between scenes

for now, this displays a static frame
This commit is contained in:
Mário C 2016-10-16 07:39:51 +01:00
parent d2bdcf49db
commit 563c79652f
6 changed files with 120 additions and 75 deletions

View File

@ -2,7 +2,6 @@
'use strict'; 'use strict';
let Canvas = function(container, width, height) { let Canvas = function(container, width, height) {
this.container = container; this.container = container;
@ -30,7 +29,7 @@
}; };
Canvas.prototype.showImage = function(name) { Canvas.prototype.drawImage = function(name) {
if (!(name in this.images)) { if (!(name in this.images)) {
throw new Error('image ' + name + ' unknown'); throw new Error('image ' + name + ' unknown');

24
app/director.js Normal file
View File

@ -0,0 +1,24 @@
(function() {
'use strict';
const Scene = require('./scene');
let Director = function(script, canvas) {
this.script = script;
this.canvas = canvas;
};
Director.prototype.begin = function() {
let scene = new Scene(this.script.scenes.vaginal, this.canvas);
scene.play();
};
module.exports = Director;
})();

View File

@ -4,11 +4,14 @@
require('../assets/style.css'); require('../assets/style.css');
const scenes = require('./scenes.json'); const script = require('./script.json');
const Canvas = require('./canvas'); const Canvas = require('./canvas');
const Director = require('./director');
let canvas = new Canvas(document.getElementById("canvasDiv"), 512, 272); let canvas = new Canvas(document.getElementById("canvasDiv"), 512, 272);
let director = new Director(script, canvas);
canvas.show('room'); director.begin();
})(); })();

29
app/scene.js Normal file
View File

@ -0,0 +1,29 @@
(function() {
'use strict';
let Scene = function(scene, canvas) {
this.frames = scene.frames;
this.roll = scene.roll;
this.canvas = canvas;
};
Scene.prototype.drawFrame = function(frame) {
let images = this.frames[frame];
images.forEach((image) => {
this.canvas.drawImage(image);
});
};
Scene.prototype.play = function() {
this.drawFrame('vaginal_initial');
};
module.exports = Scene;
})();

View File

@ -1,71 +0,0 @@
{
"vaginal": {
"frames": [
{
"name": "vaginal_initial",
"images": [
"room",
"vaginal_base",
"vaginal_frame1"
]
},
{
"name": "vaginal_frame1",
"images": [
"vaginal_frame1"
]
},
{
"name": "vaginal_frame2",
"images": [
"vaginal_frame2"
]
},
{
"name": "vaginal_balloon_venho",
"images": [
"vaginal_balloon_venho"
]
}
],
"scene": [
{
"frame": "vaginal_initial",
"duration": 750
},
[
{
"repeat": 19
},
{
"frame": "vaginal_frame1",
"duration": 750
},
{
"frame": "vaginal_frame2",
"duration": 750
}
],
{
"frame": "vaginal_balloon_venho"
},
[
{
"repeat": 6
},
{
"frame": "vaginal_frame1",
"duration": 750
},
{
"frame": "vaginal_frame2",
"duration": 750
}
],
{
"frame": "vaginal_initial",
"duration": 2500
}
]
}
}

61
app/script.json Normal file
View File

@ -0,0 +1,61 @@
{
"scenes": {
"vaginal": {
"frames": {
"vaginal_initial": [
"room",
"vaginal_base",
"vaginal_frame1"
],
"vaginal_frame1": [
"vaginal_frame1"
],
"vaginal_frame2": [
"vaginal_frame2"
],
"vaginal_balloon_venho": [
"vaginal_balloon_venho"
]
},
"roll": [
{
"frame": "vaginal_initial",
"duration": 750
},
[
{
"repeat": 19
},
{
"frame": "vaginal_frame1",
"duration": 750
},
{
"frame": "vaginal_frame2",
"duration": 750
}
],
{
"frame": "vaginal_balloon_venho"
},
[
{
"repeat": 6
},
{
"frame": "vaginal_frame1",
"duration": 750
},
{
"frame": "vaginal_frame2",
"duration": 750
}
],
{
"frame": "vaginal_initial",
"duration": 2500
}
]
}
}
}