git @ Cat's Eye Technologies HTML5-Gewgaws / 7671bb3
Convert The Frame. Chris Pressey 10 years ago
2 changed file(s) with 79 addition(s) and 59 deletion(s). Raw diff Collapse all Expand all
+12
-29
the-frame/index.html less more
00 <!DOCTYPE html>
11 <head>
22 <meta charset="utf-8">
3 <title>The Frame (HTML5) | Cat's Eye Technologies</title>
4 <link rel="shortcut icon" type="image/x-icon" href="../../favicon.ico" />
3 <title>The Frame</title>
54 <meta name="viewport" content="width=device-width, initial-scale=1.0">
65 <style>
7 #canvas { background: white; display: none;}
8 #container { display: none; }
9 body { background-image: none; }
6 canvas {
7 border: 1px solid blue;
8 }
9 #container {
10 width: 100%;
11 text-align: center;
12 }
1013 </style>
1114 </head>
1215 <body>
1316
14 <h1>The Frame (HTML5)</h1>
17 <h1>The Frame</h1>
1518
16 <div style="width: 100%; text-align: center;" id="container">
17 <small>Note 1. Green things can be dragged. Note 2. Due to technical limitations,
18 things cannot be dragged off of the computer screen</small>
19 </div>
20 <canvas id="canvas" width="800" height="450">
21 Your browser doesn't support displaying an HTML5 canvas.
22 </canvas>
23 <div style="width: 100%; text-align: center;" id="please_wait">
24 Please wait, loading...
25 </div>
19 <div id="container"></div>
2620
27 <script src="../common-yoob.js-0.6/animation.js"></script>
28 <script src="../common-yoob.js-0.6/sprite-manager.js"></script>
21 </body>
2922 <script src="the-frame.js"></script>
3023 <script>
31 var canvas = document.getElementById('canvas');
32 var container = document.getElementById('container');
33 var please_wait = document.getElementById('please_wait');
34 please_wait.style.display = "none";
35 container.style.display = "block";
36 canvas.style.display = "block";
37 canvas.width = document.documentElement.clientWidth - canvas.offsetLeft * 2;
38 //canvas.height = document.documentElement.clientHeight - canvas.offsetTop - 5;
39 var f = new TheFrame();
40 f.init(canvas, 'the-frame.png', function() {});
24 launch('../common-yoob.js-0.6/', 'container');
4125 </script>
42 </body>
+67
-30
the-frame/the-frame.js less more
0 function launch(prefix, containerId) {
1 var deps = [
2 "element-factory.js",
3 "animation.js",
4 "sprite-manager.js",
5 ];
6 var loaded = 0;
7 for (var i = 0; i < deps.length; i++) {
8 var elem = document.createElement('script');
9 elem.src = prefix + deps[i];
10 elem.onload = function() {
11 if (++loaded == deps.length) {
12 var container = document.getElementById(containerId);
13 var t = new TheFrame();
14 var instructions = yoob.makeParagraph(container,
15 "<small>Note 1. Green things can be dragged. " +
16 "Note 2. Due to technical limitations, " +
17 "things cannot be dragged off of the computer screen</small>"
18 );
19 var canvas = yoob.makeCanvas(container, 800, 450);
20 canvas.style.display = "block";
21 canvas.width = document.documentElement.clientWidth - canvas.offsetLeft * 2;
22 //canvas.height = document.documentElement.clientHeight - canvas.offsetTop - 5;
23 var pleaseWait = yoob.makeParagraph(container,
24 "Please wait, loading..."
25 );
26 // PREFIXME
27 t.init(canvas, 'the-frame.png', function() {
28 pleaseWait.style.display = "none";
29 });
30 }
31 };
32 document.body.appendChild(elem);
33 }
34 }
35
036 Corner = function() {
1 this.isDraggable = true;
2 this.draw = function(ctx) {
3 ctx.fillStyle = "green";
4 ctx.fillRect(this.x, this.y, this.w, this.h);
5 };
37 this.isDraggable = true;
38 this.draw = function(ctx) {
39 ctx.fillStyle = "green";
40 ctx.fillRect(this.x, this.y, this.w, this.h);
41 };
642 };
7 Corner.prototype = new yoob.Sprite();
843
944 TheFrame = function() {
1045 var request;
80115 };
81116
82117 this.init = function(c, imgUrl, callback) {
83 canvas = c;
84 ctx = canvas.getContext("2d");
85 manager.init(canvas);
86 var mkHandle = function(x, y, w, h) {
87 var d = new Corner();
88 d.init(x, y, w, h);
89 manager.addSprite(d);
90 };
91 var $this = this;
92 img.onload = function() {
93 callback();
94 // at this point, canvas.width is OK, so we can:
95 mkHandle(30, 30, 30, 30);
96 mkHandle(canvas.width - 60, 30, 30, 30);
97 mkHandle(canvas.width - 60, canvas.height - 60, 30, 30);
98 mkHandle(30, canvas.height - 60, 30, 30);
99 getFontHeight();
100 $this.draw();
101 $this.animation = (new yoob.Animation()).init({
102 object: $this
103 });
104 $this.animation.start();
105 }
106 img.src = imgUrl;
118 Corner.prototype = new yoob.Sprite();
119
120 canvas = c;
121 ctx = canvas.getContext("2d");
122 manager.init(canvas);
123 var mkHandle = function(x, y, w, h) {
124 var d = new Corner();
125 d.init(x, y, w, h);
126 manager.addSprite(d);
127 };
128 var $this = this;
129 img.onload = function() {
130 callback();
131 // at this point, canvas.width is OK, so we can:
132 mkHandle(30, 30, 30, 30);
133 mkHandle(canvas.width - 60, 30, 30, 30);
134 mkHandle(canvas.width - 60, canvas.height - 60, 30, 30);
135 mkHandle(30, canvas.height - 60, 30, 30);
136 getFontHeight();
137 $this.draw();
138 $this.animation = (new yoob.Animation()).init({
139 object: $this
140 });
141 $this.animation.start();
142 }
143 img.src = imgUrl;
107144 };
108145 };