Skip to content
This repository was archived by the owner on Jun 19, 2018. It is now read-only.

Commit c4b2652

Browse files
nathannathan
committed
Updated theme to be more like the Flash player
Also: - The project input field now allows pasting of URLs - The overlay cannot be clicked while the project is loading
1 parent d302a62 commit c4b2652

14 files changed

+478
-375
lines changed

‎compare.css

+31-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,38 @@
1+
body {
2+
background: #fff;
3+
font-family: sans-serif;
4+
color: #000;
5+
width: 1108px;
6+
margin: 0 auto;
7+
}
8+
9+
.container {
10+
display: inline-block;
11+
vertical-align: top;
12+
}
13+
114
textarea {
2-
width: 450px;
15+
width: 482px;
16+
padding: 6px;
17+
-moz-box-sizing: border-box;
18+
box-sizing: border-box;
319
height: 200px;
20+
display: block;
21+
margin: 16px auto;
22+
border: 1px solid #aaa;
23+
box-shadow: inset 3px 3px 3px -3px rgba(0, 0, 0, .3);
424
}
525

6-
object {
26+
#flash-scratch {
27+
text-align: center;
28+
visibility: hidden;
729
display: block;
30+
margin: 48px 0 62px;
831
}
932

33+
#flash-scratch p {
34+
color: #aaa;
35+
font-size: 22px;
36+
margin-top: 14px;
37+
line-height: 28px;
38+
}

‎compare.html

+120-120
Original file line numberDiff line numberDiff line change
@@ -1,134 +1,134 @@
1-
<?
2-
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
3-
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
4-
?>
51
<!DOCTYPE html>
6-
<html>
7-
<head>
8-
<title>Scratch HTML5 vs. Flash</title>
9-
<meta charset="utf-8">
10-
<link href="player.css" type="text/css" rel="stylesheet" />
11-
<link href="compare.css" type="text/css" rel="stylesheet" />
12-
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
13-
<script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
14-
<script src="js/util/Timer.js"></script>
15-
<script src="js/util/OffsetBuffer.js"></script>
16-
<script src="js/util/Color.js"></script>
17-
<script src="js/util/Rectangle.js"></script>
18-
<script src="js/Sprite.js"></script>
19-
<script src="js/Reporter.js"></script>
20-
<script src="js/Stage.js"></script>
21-
<script src="js/sound/WAVFile.js"></script>
22-
<script src="js/sound/SoundDecoder.js"></script>
23-
<script src="js/sound/SoundBank.js"></script>
24-
<script src="js/sound/NotePlayer.js"></script>
25-
<script src="soundbank/Instr.js"></script>
26-
<script src="js/IO.js"></script>
27-
<script src="js/primitives/VarListPrims.js"></script>
28-
<script src="js/primitives/MotionAndPenPrims.js"></script>
29-
<script src="js/primitives/LooksPrims.js"></script>
30-
<script src="js/primitives/SensingPrims.js"></script>
31-
<script src="js/primitives/SoundPrims.js"></script>
32-
<script src="js/primitives/Primitives.js"></script>
33-
<script src="js/Interpreter.js"></script>
34-
<script src="js/Runtime.js"></script>
35-
<script src="js/Scratch.js"></script>
36-
<script type="text/javascript">
37-
if (window.location.hash) {
38-
var project_id = parseInt(window.location.hash.substr(1));
39-
} else {
40-
var project_id = 10000160; // Default project for display
41-
}
42-
</script>
43-
<script>
44-
var flashLog = null;
45-
$(function() {
46-
// The flashvars tell flash about the project data (and autostart=true)
47-
var flashvars = {
48-
server: encodeURIComponent('scratch.mit.edu'),
49-
debugOps: true,
50-
debugOpCmd: 'debugFlash',
51-
project_id: project_id
52-
};
2+
<meta charset=utf-8>
3+
<title>Scratch HTML5 vs. Flash</title>
534

54-
var params = {
55-
allowscriptaccess: 'always',
56-
allowfullscreen: 'false',
57-
wmode: 'direct',
58-
menu: 'false'
59-
};
5+
<link rel=stylesheet href=player.css>
6+
<link rel=stylesheet href=compare.css>
607

61-
var flashPlayer = null;
62-
//var swf_url = "http://cdn.scratch.mit.edu/scratchr2/static/Scratch.swf";
63-
var swf_url = "http://jiggler.media.mit.edu/shanemc/scratchr2/static/Scratch.swf";
64-
swfobject.embedSWF(swf_url, "flashScratch", "482", "402", "10.2.0",
65-
"http://cdn.scratch.mit.edu/scratchr2/static/expressInstall.swf",
66-
flashvars, params, null, function(e) {
67-
$('#flashScratch').css('visibility', 'visible');
68-
if (e.success) flashPlayer = e.ref;
69-
});
8+
<script src=//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script>
9+
<script src=//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js></script>
7010

71-
$('#trigger_green_flag, #greenSlide').click(function() {
72-
flashPlayer.ASstartRunning();
73-
});
11+
<script src=js/util/Timer.js></script>
12+
<script src=js/util/OffsetBuffer.js></script>
13+
<script src=js/util/Color.js></script>
14+
<script src=js/util/Rectangle.js></script>
15+
<script src=js/Sprite.js></script>
16+
<script src=js/Reporter.js></script>
17+
<script src=js/Stage.js></script>
18+
<script src=js/sound/WAVFile.js></script>
19+
<script src=js/sound/SoundDecoder.js></script>
20+
<script src=js/sound/SoundBank.js></script>
21+
<script src=js/sound/NotePlayer.js></script>
22+
<script src=soundbank/Instr.js></script>
23+
<script src=js/IO.js></script>
24+
<script src=js/primitives/VarListPrims.js></script>
25+
<script src=js/primitives/MotionAndPenPrims.js></script>
26+
<script src=js/primitives/LooksPrims.js></script>
27+
<script src=js/primitives/SensingPrims.js></script>
28+
<script src=js/primitives/SoundPrims.js></script>
29+
<script src=js/primitives/Primitives.js></script>
30+
<script src=js/Interpreter.js></script>
31+
<script src=js/Runtime.js></script>
32+
<script src=js/Scratch.js></script>
7433

75-
// Stop button behavior
76-
$('#trigger_stop').click(function() {
77-
flashPlayer.ASstopRunning();
78-
});
34+
<script>
35+
var project_id = location.hash && parseInt(location.hash.substr(1)) || 10000160;
36+
</script>
7937

80-
flashLog = $('#flashDebug');
81-
var jsLog = $('#jsDebug');
82-
interp.debugOps = true;
83-
interp.debugFunc = function(opCount, opName, args) {
84-
var text = opCount + ': '+opName+'('+args.join(', ')+')';
85-
jsLog.val(jsLog.val() + text + "\n");
86-
}
38+
<script>
39+
var flashLog = null;
40+
$(function() {
41+
// The flashvars tell flash about the project data (and autostart=true)
42+
var flashvars = {
43+
server: encodeURIComponent('scratch.mit.edu'),
44+
debugOps: true,
45+
debugOpCmd: 'debugFlash',
46+
project_id: project_id
47+
};
8748

88-
// Setup synchronized scrolling
89-
flashLog.scroll(function() {
90-
jsLog.scrollTop(flashLog.scrollTop());
91-
});
49+
var params = {
50+
allowscriptaccess: 'always',
51+
allowfullscreen: 'false',
52+
wmode: 'direct',
53+
menu: 'false'
54+
};
9255

93-
jsLog.scroll(function() {
94-
flashLog.scrollTop(jsLog.scrollTop());
95-
});
56+
var flashPlayer = null;
57+
//var swf_url = "http://cdn.scratch.mit.edu/scratchr2/static/Scratch.swf";
58+
var swf_url = "http://jiggler.media.mit.edu/shanemc/scratchr2/static/Scratch.swf";
59+
swfobject.embedSWF(swf_url, "flash-scratch", "482", "402", "10.2.0",
60+
"http://cdn.scratch.mit.edu/scratchr2/static/expressInstall.swf",
61+
flashvars, params, null, function(e) {
62+
$('#flash-scratch').css('visibility', 'visible');
63+
if (e.success) flashPlayer = e.ref;
9664
});
9765

98-
function debugFlash(opCount, opName, args) {
99-
var text = opCount + ': '+opName+'('+args.join(', ')+')';
100-
flashLog.val(flashLog.val() + text + "\n");
101-
}
102-
</script>
103-
</head>
104-
<body>
105-
<div class="playerContainer">
106-
<div id="up">&#x25B2;</div>
107-
<div id="ui-top">
108-
<div id="info">Loading&hellip;</div>
109-
<button id="trigger_stop">&#9632;</button>
110-
<button id="trigger_green_flag">&#9873;</button>
111-
<div class="clearer"></div>
66+
$('#trigger-green-flag, #overlay').click(function() {
67+
flashPlayer.ASstartRunning();
68+
});
69+
70+
// Stop button behavior
71+
$('#trigger-stop').click(function() {
72+
flashPlayer.ASstopRunning();
73+
});
74+
75+
flashLog = $('#flash-debug');
76+
var jsLog = $('#js-debug');
77+
interp.debugOps = true;
78+
interp.debugFunc = function(opCount, opName, args) {
79+
var text = opCount + ': ' + opName + '(' + args.join(', ') + ')';
80+
jsLog.val(jsLog.val() + text + "\n");
81+
};
82+
83+
// Setup synchronized scrolling
84+
flashLog.scroll(function() {
85+
jsLog.scrollTop(flashLog.scrollTop());
86+
});
87+
88+
jsLog.scroll(function() {
89+
flashLog.scrollTop(jsLog.scrollTop());
90+
});
91+
});
92+
93+
function debugFlash(opCount, opName, args) {
94+
var text = opCount + ': '+opName+'('+args.join(', ')+')';
95+
flashLog.val(flashLog.val() + text + "\n");
96+
}
97+
</script>
98+
99+
<div class=container>
100+
<div id=player-container>
101+
<div class="arrow vertical" id=up></div>
102+
<div class="arrow vertical" id=down></div>
103+
<div class="arrow horizontal" id=left></div>
104+
<div class="arrow horizontal" id=right></div>
105+
<div id=player-header>
106+
<div id=player-header-preload></div>
107+
<div id=player-header-version>HTML5</div>
108+
<button id=toggle-fullscreen tabindex=1></button>
109+
<button id=trigger-stop tabindex=3></button>
110+
<button id=trigger-green-flag tabindex=2></button>
112111
</div>
113-
<div id="left">&#x25c0;</div>
114-
<div id="overContainer">
115-
<div id="greenSlide"><div id="greenSlideFg"><img src="img/greenflag.png"></div></div>
116-
<div id="container"></div>
112+
<div id=player-content>
113+
<div id=container></div>
114+
<div id=overlay></div>
115+
<div id=preloader>
116+
<div id=preloader-progress><div id=preloader-progress-bar></div></div>
117+
<div id=preloader-caption>Loading project&hellip;</div>
118+
<div id=preloader-details></div>
119+
</div>
117120
</div>
118-
<div id="right">&#x25b6;</div>
119-
<div id="ui-bottom">
120-
<span id="address-hint">http://scratch.mit.edu/projects/</span><input type="text" name="project_id" id="project_id" placeholder="10000160" /><button id='go_project'>&rarr;</button></div>
121-
<div id="down">&#x25BC;</div>
122-
<textarea id="jsDebug"></textarea>
123121
</div>
124-
<div class="playerContainer">
125-
<div id="flashScratch" style="text-align:center;visibility:hidden;">
126-
<p style="color:#aaa;font-size:22px;margin-top:14px;line-height:28px;">Oh Noes! Scratch project cannot display.<br/>Flash player is disabled, missing, or less than version 10.2.</p>
127-
<a href="http://www.adobe.com/go/getflashplayer">
128-
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" target="_blank" />
129-
</a>
130-
</div>
131-
<textarea id="flashDebug"></textarea>
122+
<textarea id=js-debug readonly></textarea>
123+
<div id=project-picker>
124+
<span id=address-hint>http://scratch.mit.edu/projects/</span><input id=project-id placeholder=10000160><button id=go-project>&rarr;</button>
125+
</div>
126+
</div><div class=container>
127+
<div id=flash-scratch>
128+
<p>Oh Noes! Scratch project cannot display.<br>Flash player is disabled, missing, or less than version 10.2.</p>
129+
<a href=http://www.adobe.com/go/getflashplayer>
130+
<img src=http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif alt="Get Adobe Flash player" target=_blank>
131+
</a>
132132
</div>
133-
</body>
134-
</html>
133+
<textarea id=flash-debug readonly></textarea>
134+
</div>

‎img/fullScreenOff.png

523 Bytes
Loading

‎img/fullScreenOn.png

285 Bytes
Loading

‎img/greenFlagOff.png

3.03 KB
Loading

‎img/greenFlagOn.png

3.04 KB
Loading

‎img/greenflag.png renamed to ‎img/playerStartFlag.png

File renamed without changes.

‎img/stopOff.png

2.87 KB
Loading

‎img/stopOn.png

2.87 KB
Loading

‎index.css

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
body {
2+
width: 578px;
3+
padding: 16px;
4+
margin: 0 auto;
5+
background: #fff;
6+
font-family: sans-serif;
7+
color: #000;
8+
}

0 commit comments

Comments
 (0)