From c4b2652c12233cf614f120830edc86af730189e9 Mon Sep 17 00:00:00 2001
From: Nathan Dinsmore <nfdins@gmail.com>
Date: Thu, 14 Nov 2013 20:08:52 -0500
Subject: [PATCH] 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
---
compare.css | 37 +-
compare.html | 240 ++++++-------
img/fullScreenOff.png | Bin 0 -> 523 bytes
img/fullScreenOn.png | Bin 0 -> 285 bytes
img/greenFlagOff.png | Bin 0 -> 3104 bytes
img/greenFlagOn.png | Bin 0 -> 3110 bytes
img/{greenflag.png => playerStartFlag.png} | Bin
img/stopOff.png | Bin 0 -> 2942 bytes
img/stopOn.png | Bin 0 -> 2938 bytes
index.css | 8 +
index.html | 143 ++++----
js/Runtime.js | 2 +-
js/Scratch.js | 33 +-
player.css | 400 ++++++++++++---------
14 files changed, 483 insertions(+), 380 deletions(-)
create mode 100644 img/fullScreenOff.png
create mode 100644 img/fullScreenOn.png
create mode 100644 img/greenFlagOff.png
create mode 100644 img/greenFlagOn.png
rename img/{greenflag.png => playerStartFlag.png} (100%)
create mode 100644 img/stopOff.png
create mode 100644 img/stopOn.png
create mode 100644 index.css
diff --git a/compare.css b/compare.css
index c28d073..5c5d5e7 100644
--- a/compare.css
+++ b/compare.css
@@ -1,9 +1,38 @@
+body {
+ background: #fff;
+ font-family: sans-serif;
+ color: #000;
+ width: 1108px;
+ margin: 0 auto;
+}
+
+.container {
+ display: inline-block;
+ vertical-align: top;
+}
+
textarea {
- width: 450px;
+ width: 482px;
+ padding: 6px;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
height: 200px;
-}
-
-object {
display: block;
+ margin: 16px auto;
+ border: 1px solid #aaa;
+ box-shadow: inset 3px 3px 3px -3px rgba(0, 0, 0, .3);
}
+#flash-scratch {
+ text-align: center;
+ visibility: hidden;
+ display: block;
+ margin: 48px 0 62px;
+}
+
+#flash-scratch p {
+ color: #aaa;
+ font-size: 22px;
+ margin-top: 14px;
+ line-height: 28px;
+}
diff --git a/compare.html b/compare.html
index 54961e8..5bf9a2d 100644
--- a/compare.html
+++ b/compare.html
@@ -1,134 +1,134 @@
-<?
-header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
-header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
-?>
<!DOCTYPE html>
-<html>
- <head>
- <title>Scratch HTML5 vs. Flash</title>
- <meta charset="utf-8">
- <link href="player.css" type="text/css" rel="stylesheet" />
- <link href="compare.css" type="text/css" rel="stylesheet" />
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
- <script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
- <script src="js/util/Timer.js"></script>
- <script src="js/util/OffsetBuffer.js"></script>
- <script src="js/util/Color.js"></script>
- <script src="js/util/Rectangle.js"></script>
- <script src="js/Sprite.js"></script>
- <script src="js/Reporter.js"></script>
- <script src="js/Stage.js"></script>
- <script src="js/sound/WAVFile.js"></script>
- <script src="js/sound/SoundDecoder.js"></script>
- <script src="js/sound/SoundBank.js"></script>
- <script src="js/sound/NotePlayer.js"></script>
- <script src="soundbank/Instr.js"></script>
- <script src="js/IO.js"></script>
- <script src="js/primitives/VarListPrims.js"></script>
- <script src="js/primitives/MotionAndPenPrims.js"></script>
- <script src="js/primitives/LooksPrims.js"></script>
- <script src="js/primitives/SensingPrims.js"></script>
- <script src="js/primitives/SoundPrims.js"></script>
- <script src="js/primitives/Primitives.js"></script>
- <script src="js/Interpreter.js"></script>
- <script src="js/Runtime.js"></script>
- <script src="js/Scratch.js"></script>
- <script type="text/javascript">
- if (window.location.hash) {
- var project_id = parseInt(window.location.hash.substr(1));
- } else {
- var project_id = 10000160; // Default project for display
- }
- </script>
- <script>
- var flashLog = null;
- $(function() {
- // The flashvars tell flash about the project data (and autostart=true)
- var flashvars = {
- server: encodeURIComponent('scratch.mit.edu'),
- debugOps: true,
- debugOpCmd: 'debugFlash',
- project_id: project_id
- };
+<meta charset=utf-8>
+<title>Scratch HTML5 vs. Flash</title>
- var params = {
- allowscriptaccess: 'always',
- allowfullscreen: 'false',
- wmode: 'direct',
- menu: 'false'
- };
+<link rel=stylesheet href=player.css>
+<link rel=stylesheet href=compare.css>
- var flashPlayer = null;
- //var swf_url = "http://cdn.scratch.mit.edu/scratchr2/static/Scratch.swf";
- var swf_url = "http://jiggler.media.mit.edu/shanemc/scratchr2/static/Scratch.swf";
- swfobject.embedSWF(swf_url, "flashScratch", "482", "402", "10.2.0",
- "http://cdn.scratch.mit.edu/scratchr2/static/expressInstall.swf",
- flashvars, params, null, function(e) {
- $('#flashScratch').css('visibility', 'visible');
- if (e.success) flashPlayer = e.ref;
- });
+<script src=//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script>
+<script src=//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js></script>
- $('#trigger_green_flag, #greenSlide').click(function() {
- flashPlayer.ASstartRunning();
- });
+<script src=js/util/Timer.js></script>
+<script src=js/util/OffsetBuffer.js></script>
+<script src=js/util/Color.js></script>
+<script src=js/util/Rectangle.js></script>
+<script src=js/Sprite.js></script>
+<script src=js/Reporter.js></script>
+<script src=js/Stage.js></script>
+<script src=js/sound/WAVFile.js></script>
+<script src=js/sound/SoundDecoder.js></script>
+<script src=js/sound/SoundBank.js></script>
+<script src=js/sound/NotePlayer.js></script>
+<script src=soundbank/Instr.js></script>
+<script src=js/IO.js></script>
+<script src=js/primitives/VarListPrims.js></script>
+<script src=js/primitives/MotionAndPenPrims.js></script>
+<script src=js/primitives/LooksPrims.js></script>
+<script src=js/primitives/SensingPrims.js></script>
+<script src=js/primitives/SoundPrims.js></script>
+<script src=js/primitives/Primitives.js></script>
+<script src=js/Interpreter.js></script>
+<script src=js/Runtime.js></script>
+<script src=js/Scratch.js></script>
- // Stop button behavior
- $('#trigger_stop').click(function() {
- flashPlayer.ASstopRunning();
- });
+<script>
+ var project_id = location.hash && parseInt(location.hash.substr(1)) || 10000160;
+</script>
- flashLog = $('#flashDebug');
- var jsLog = $('#jsDebug');
- interp.debugOps = true;
- interp.debugFunc = function(opCount, opName, args) {
- var text = opCount + ': '+opName+'('+args.join(', ')+')';
- jsLog.val(jsLog.val() + text + "\n");
- }
+<script>
+ var flashLog = null;
+ $(function() {
+ // The flashvars tell flash about the project data (and autostart=true)
+ var flashvars = {
+ server: encodeURIComponent('scratch.mit.edu'),
+ debugOps: true,
+ debugOpCmd: 'debugFlash',
+ project_id: project_id
+ };
- // Setup synchronized scrolling
- flashLog.scroll(function() {
- jsLog.scrollTop(flashLog.scrollTop());
- });
+ var params = {
+ allowscriptaccess: 'always',
+ allowfullscreen: 'false',
+ wmode: 'direct',
+ menu: 'false'
+ };
- jsLog.scroll(function() {
- flashLog.scrollTop(jsLog.scrollTop());
- });
+ var flashPlayer = null;
+ //var swf_url = "http://cdn.scratch.mit.edu/scratchr2/static/Scratch.swf";
+ var swf_url = "http://jiggler.media.mit.edu/shanemc/scratchr2/static/Scratch.swf";
+ swfobject.embedSWF(swf_url, "flash-scratch", "482", "402", "10.2.0",
+ "http://cdn.scratch.mit.edu/scratchr2/static/expressInstall.swf",
+ flashvars, params, null, function(e) {
+ $('#flash-scratch').css('visibility', 'visible');
+ if (e.success) flashPlayer = e.ref;
});
- function debugFlash(opCount, opName, args) {
- var text = opCount + ': '+opName+'('+args.join(', ')+')';
- flashLog.val(flashLog.val() + text + "\n");
- }
- </script>
- </head>
- <body>
- <div class="playerContainer">
- <div id="up">▲</div>
- <div id="ui-top">
- <div id="info">Loading…</div>
- <button id="trigger_stop">■</button>
- <button id="trigger_green_flag">⚑</button>
- <div class="clearer"></div>
+ $('#trigger-green-flag, #overlay').click(function() {
+ flashPlayer.ASstartRunning();
+ });
+
+ // Stop button behavior
+ $('#trigger-stop').click(function() {
+ flashPlayer.ASstopRunning();
+ });
+
+ flashLog = $('#flash-debug');
+ var jsLog = $('#js-debug');
+ interp.debugOps = true;
+ interp.debugFunc = function(opCount, opName, args) {
+ var text = opCount + ': ' + opName + '(' + args.join(', ') + ')';
+ jsLog.val(jsLog.val() + text + "\n");
+ };
+
+ // Setup synchronized scrolling
+ flashLog.scroll(function() {
+ jsLog.scrollTop(flashLog.scrollTop());
+ });
+
+ jsLog.scroll(function() {
+ flashLog.scrollTop(jsLog.scrollTop());
+ });
+ });
+
+ function debugFlash(opCount, opName, args) {
+ var text = opCount + ': '+opName+'('+args.join(', ')+')';
+ flashLog.val(flashLog.val() + text + "\n");
+ }
+</script>
+
+<div class=container>
+ <div id=player-container>
+ <div class="arrow vertical" id=up></div>
+ <div class="arrow vertical" id=down></div>
+ <div class="arrow horizontal" id=left></div>
+ <div class="arrow horizontal" id=right></div>
+ <div id=player-header>
+ <div id=player-header-preload></div>
+ <div id=player-header-version>HTML5</div>
+ <button id=toggle-fullscreen tabindex=1></button>
+ <button id=trigger-stop tabindex=3></button>
+ <button id=trigger-green-flag tabindex=2></button>
</div>
- <div id="left">◀</div>
- <div id="overContainer">
- <div id="greenSlide"><div id="greenSlideFg"><img src="img/greenflag.png"></div></div>
- <div id="container"></div>
+ <div id=player-content>
+ <div id=container></div>
+ <div id=overlay></div>
+ <div id=preloader>
+ <div id=preloader-progress><div id=preloader-progress-bar></div></div>
+ <div id=preloader-caption>Loading project…</div>
+ <div id=preloader-details></div>
+ </div>
</div>
- <div id="right">▶</div>
- <div id="ui-bottom">
- <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'>→</button></div>
- <div id="down">▼</div>
- <textarea id="jsDebug"></textarea>
</div>
- <div class="playerContainer">
- <div id="flashScratch" style="text-align:center;visibility:hidden;">
- <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>
- <a href="http://www.adobe.com/go/getflashplayer">
- <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" target="_blank" />
- </a>
- </div>
- <textarea id="flashDebug"></textarea>
+ <textarea id=js-debug readonly></textarea>
+ <div id=project-picker>
+ <span id=address-hint>http://scratch.mit.edu/projects/</span><input id=project-id placeholder=10000160><button id=go-project>→</button>
</div>
- </body>
-</html>
+</div><div class=container>
+ <div id=flash-scratch>
+ <p>Oh Noes! Scratch project cannot display.<br>Flash player is disabled, missing, or less than version 10.2.</p>
+ <a href=http://www.adobe.com/go/getflashplayer>
+ <img src=http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif alt="Get Adobe Flash player" target=_blank>
+ </a>
+ </div>
+ <textarea id=flash-debug readonly></textarea>
+</div>
diff --git a/img/fullScreenOff.png b/img/fullScreenOff.png
new file mode 100644
index 0000000000000000000000000000000000000000..28e4b20a23f1b0f02d3af231dd9ae48fde6cc950
GIT binary patch
literal 523
zcmV+m0`&cfP)<h;3K|Lk000e1NJLTq000>P000yS1^@s6cz2e)00004b3#c}2nYxW
zd<bNS00009a7bBm000W`000W`0Ya=am;e9(9CSrkbW?9;ba!ELWdK2BZ(?O2Mrm?o
zcW-iQb09-gGnm#!0{{R37IZ~ebVG7wVRUJ4ZXi@?ZDjy4FfTGSFEKJ`d=$X|00Co3
zL_t(IjosC;Yt&Ex$MH|DvEVtRgG)OJU0f8zy-VY&e}ni3bc%&;A{|NwH#_<#sBmNI
zR0mxO4i17sXK{E6mY$_?Xim;Y(z~A5#UEtI?-zdG_mY?QlB}p|-Fl9VQ06D+JR>Wr
z6}-ibmbgyw4GVaQD`Vjz-sAK<K%*nP!ZLm}-YIV4Zju$%JM=@D-<qQALduHjA$EJt
zX0b4DK%=Wj(vA__#@Y;}A48eHiOp6B?&IkUkO5jD*KsZKzs~@GuhD%Uiz%Myp3%Q*
z51VNy^B0!{5X$_ZuIq!|WdX+Z|3K2LsJ8GSl=)!Z<ylePS$e#8uZL|sit<@^fOwUz
zV`pTBC>-JhiRm^-&NkQM$oq+5*Z(oVmkUDr_|z7(LPD7z;&96Hi5ji0;k*hX9idK|
zlkqe5{r$oFcoxche^OIcRLj`Kk1_ktp*4D4tIZYbbpxNIB|PZJ>fh)8Q_lC7|NQ^}
N002ovPDHLkV1nsS=sf@c
literal 0
HcmV?d00001
diff --git a/img/fullScreenOn.png b/img/fullScreenOn.png
new file mode 100644
index 0000000000000000000000000000000000000000..36b580fded0a44d14646a4ff9a751b9a6cfa950a
GIT binary patch
literal 285
zcmeAS@N?(olHy`uVBq!ia0vp^Qa~)i!3HEJJLv8MQj#UE5hcO-X(i=}MX3yqDfvmM
z3ZA)%>8U}fi7AzZCsS>JiuQZDIEGZ*N=k5G{<F0DQDcR@z-!|Pj19m3HGf&$ZJZdm
zn&AkagU$g5*8@i!)E&&bBN`q?_NzT}U@aECa5k0k5u1(RY5pZV9VUMc9?zTJ?(y+X
zL*7K@X-60i@i**XnD2by0HZ?L5mBWcmPuK*nqrK#Pb`Xp?yhhZNsXwLd3uZ0h&y!6
zv&K&sS!6QrGisGL+~DC}x^Wi!rVPeeiF^jF2WmbFddR96Zwc^bTad_oagX2BPkb49
hk25|k<6_`2V7M=15Kyrw^El8e44$rjF6*2UngBu5YD)kB
literal 0
HcmV?d00001
diff --git a/img/greenFlagOff.png b/img/greenFlagOff.png
new file mode 100644
index 0000000000000000000000000000000000000000..e8a389106cf77f3cefe084a2ec9169c6779e25be
GIT binary patch
literal 3104
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
literal 0
HcmV?d00001
diff --git a/img/greenFlagOn.png b/img/greenFlagOn.png
new file mode 100644
index 0000000000000000000000000000000000000000..b62d0851a0b6d79094b9d4cad389077d91091fc7
GIT binary patch
literal 3110
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
AqW}N^
literal 0
HcmV?d00001
diff --git a/img/greenflag.png b/img/playerStartFlag.png
similarity index 100%
rename from img/greenflag.png
rename to img/playerStartFlag.png
diff --git a/img/stopOff.png b/img/stopOff.png
new file mode 100644
index 0000000000000000000000000000000000000000..16237b3bf31db1e35934d508dd7cb2fb6a5c7be7
GIT binary patch
literal 2942
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
literal 0
HcmV?d00001
diff --git a/img/stopOn.png b/img/stopOn.png
new file mode 100644
index 0000000000000000000000000000000000000000..8ff30513014c6e67d70b6e0d1276fe8cb0b8528f
GIT binary patch
literal 2938
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
literal 0
HcmV?d00001
diff --git a/index.css b/index.css
new file mode 100644
index 0000000..220985e
--- /dev/null
+++ b/index.css
@@ -0,0 +1,8 @@
+body {
+ width: 578px;
+ padding: 16px;
+ margin: 0 auto;
+ background: #fff;
+ font-family: sans-serif;
+ color: #000;
+}
diff --git a/index.html b/index.html
index 3fa4be0..8f25615 100755
--- a/index.html
+++ b/index.html
@@ -1,77 +1,70 @@
<!DOCTYPE html>
-<html>
- <head>
- <title>Scratch HTML5</title>
- <meta charset="utf-8">
- <!-- iPad properties: set width, disable pinch zoom -->
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="viewport" content="user-scalable=no, width=540" />
- <meta name="apple-mobile-web-app-status-bar-style" content="black">
- <link href="player.css" type="text/css" rel="stylesheet" />
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
- <script src="js/util/Timer.js"></script>
- <script src="js/util/OffsetBuffer.js"></script>
- <script src="js/util/Color.js"></script>
- <script src="js/util/Rectangle.js"></script>
- <script src="js/Sprite.js"></script>
- <script src="js/Reporter.js"></script>
- <script src="js/Stage.js"></script>
- <script src="js/sound/WAVFile.js"></script>
- <script src="js/sound/SoundDecoder.js"></script>
- <script src="js/sound/SoundBank.js"></script>
- <script src="js/sound/NotePlayer.js"></script>
- <script src="soundbank/Instr.js"></script>
- <script src="js/IO.js"></script>
- <script src="js/primitives/VarListPrims.js"></script>
- <script src="js/primitives/MotionAndPenPrims.js"></script>
- <script src="js/primitives/LooksPrims.js"></script>
- <script src="js/primitives/SensingPrims.js"></script>
- <script src="js/primitives/SoundPrims.js"></script>
- <script src="js/primitives/Primitives.js"></script>
- <script src="js/Interpreter.js"></script>
- <script src="js/Runtime.js"></script>
- <script src="js/Scratch.js"></script>
- <script type="text/javascript">
- if (window.location.hash) {
- var project_id = parseInt(window.location.hash.substr(1));
- } else {
- var project_id = 10000160; // Default project for display
- }
- </script>
- <script type="text/javascript">
- $(function() {
- $("#project_id").keyup(function(){
- // Eventually, this will xhr to /projects/{{this.value}}/ and
- // change color based on whether the response is 404 or 200.
- if (isNaN(this.value)) {
- this.style.backgroundColor = "#FDD";
- } else {
- this.style.backgroundColor = "#DFD";
- }
- })
- });
- </script>
- </head>
- <body>
- <div id="wrapper">
- <h1>Scratch HTML5 player</h1>
- <div id="up">▲</div>
- <div id="ui-top">
- <div id="info">Loading…</div>
- <button id="trigger_stop">■</button>
- <button id="trigger_green_flag">⚑</button>
- <div class="clearer"></div>
- </div>
- <div id="left">◀</div>
- <div id="overContainer">
- <div id="greenSlide"><div id="greenSlideFg"><img src="img/greenflag.png"></div></div>
- <div id="container"></div>
- </div>
- <div id="right">▶</div>
- <div id="ui-bottom">
- <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'>→</button></div>
- <div id="down">▼</div>
- <p>The Scratch HTML5 player is still in development. Feedback is welcome! Please report any bugs (or differences from the Flash player) <a href="https://github.com/LLK/scratch-html5">on Github</a>.
+<meta charset=utf-8>
+<title>Scratch HTML5</title>
+
+<!-- iPad properties: set width, disable pinch zoom -->
+<meta name=apple-mobile-web-app-capable content=yes>
+<meta name=viewport content="user-scalable=no, width=540">
+<meta name=apple-mobile-web-app-status-bar-style content=black>
+
+<link rel=stylesheet href=player.css>
+<link rel=stylesheet href=index.css>
+
+<script src=//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script>
+
+<script src=js/util/Timer.js></script>
+<script src=js/util/OffsetBuffer.js></script>
+<script src=js/util/Color.js></script>
+<script src=js/util/Rectangle.js></script>
+<script src=js/Sprite.js></script>
+<script src=js/Reporter.js></script>
+<script src=js/Stage.js></script>
+<script src=js/sound/WAVFile.js></script>
+<script src=js/sound/SoundDecoder.js></script>
+<script src=js/sound/SoundBank.js></script>
+<script src=js/sound/NotePlayer.js></script>
+<script src=soundbank/Instr.js></script>
+<script src=js/IO.js></script>
+<script src=js/primitives/VarListPrims.js></script>
+<script src=js/primitives/MotionAndPenPrims.js></script>
+<script src=js/primitives/LooksPrims.js></script>
+<script src=js/primitives/SensingPrims.js></script>
+<script src=js/primitives/SoundPrims.js></script>
+<script src=js/primitives/Primitives.js></script>
+<script src=js/Interpreter.js></script>
+<script src=js/Runtime.js></script>
+<script src=js/Scratch.js></script>
+
+<script>
+ var project_id = location.hash && parseInt(location.hash.substr(1)) || 10000160;
+</script>
+
+<div id=player-container>
+ <div class="arrow vertical" id=up></div>
+ <div class="arrow vertical" id=down></div>
+ <div class="arrow horizontal" id=left></div>
+ <div class="arrow horizontal" id=right></div>
+ <div id=player-header>
+ <div id=player-header-preload></div>
+ <div id=player-header-version>HTML5</div>
+ <button id=toggle-fullscreen tabindex=1></button>
+ <button id=trigger-stop tabindex=3></button>
+ <button id=trigger-green-flag tabindex=2></button>
</div>
- </body>
-</html>
\ No newline at end of file
+ <div id=player-content>
+ <div id=container></div>
+ <div id=overlay></div>
+ <div id=preloader>
+ <div id=preloader-progress><div id=preloader-progress-bar></div></div>
+ <div id=preloader-caption>Loading project…</div>
+ <div id=preloader-details></div>
+ </div>
+ </div>
+</div>
+
+<div id=project-picker>
+ <span id=address-hint>http://scratch.mit.edu/projects/</span><input id=project-id placeholder=10000160><button id=go-project>→</button>
+</div>
+
+<h1>Scratch HTML5 player</h1>
+<p>The Scratch HTML5 player is still in development. Feedback is welcome! Please report any bugs (or differences from the Flash player) <a href=https://github.com/LLK/scratch-html5>on Github</a>.</p>
diff --git a/js/Runtime.js b/js/Runtime.js
index 8a64f22..4bf603f 100644
--- a/js/Runtime.js
+++ b/js/Runtime.js
@@ -70,7 +70,7 @@ Runtime.prototype.loadStart = function() {
setTimeout(function(runtime) { runtime.loadStart(); }, 50, this);
return;
}
- $('#info').html("Loaded!");
+ $('#preloader').css('display', 'none');
setInterval(this.step, 33);
this.projectLoaded = true;
};
diff --git a/js/Scratch.js b/js/Scratch.js
index d08ca06..fbabf3d 100644
--- a/js/Scratch.js
+++ b/js/Scratch.js
@@ -37,22 +37,43 @@ $(function() {
});
// Update the project ID field
- $('#project_id').val(project_id);
+ $('#project-id').val(project_id);
+
+ // Validate project ID field
+ $('#project-id').keyup(function() {
+ var n = this.value;
+
+ // Allow URL pasting
+ var e = /projects\/(\d+)/.exec(n);
+ if (e) {
+ n = this.value = e[1];
+ }
+
+ // Eventually, this will xhr to /projects/{{this.value}}/ and
+ // change color based on whether the response is 404 or 200.
+ $('#project-id, #address-hint').toggleClass('error', isNaN(n));
+ });
+
+ // Focus the actual input when the user clicks on the URL hint
+ $('#address-hint').click(function() {
+ $('#project-id').select();
+ });
// Go project button behavior
- $('#go_project').click(function() {
- window.location = "#" + parseInt($('#project_id').val());
+ $('#go-project').click(function() {
+ window.location = '#' + parseInt($('#project-id').val());
window.location.reload(true);
});
// Green flag behavior
- $('#trigger_green_flag, #greenSlide').click(function() {
- $('#greenSlide').css('display', 'none');
+ $('#trigger-green-flag, #overlay').click(function() {
+ if (!runtime.projectLoaded) return;
+ $('#overlay').css('display', 'none');
runtime.greenFlag()
});
// Stop button behavior
- $('#trigger_stop').click(function() {
+ $('#trigger-stop').click(function() {
runtime.stopAll();
});
diff --git a/player.css b/player.css
index d8797e6..a8be2e9 100644
--- a/player.css
+++ b/player.css
@@ -1,28 +1,13 @@
-body {
- background: #fff;
- color: #333;
- margin: 0;
- padding: 0px;
- font-family: sans-serif;
-}
/* Wrapper wraps the entire player, and the text below and above. Ideally,
all CSS selectors would be descendants of #wrapper so that the player
is embeddable.
*/
- #wrapper {
- width: 540px;
- height: 420px;
- margin: auto;
-}
-/* Container is the Stage */
- #container {
- border: none;
- cursor: default;
- width: 480px;
- height: 360px;
- overflow: hidden;
+#player-container {
position: relative;
- float: left;
+ width: 482px;
+ padding: 48px;
+ margin: 0 auto;
+ font-family: sans-serif;
/* Before, we accomplished this with e.preventDefault
* on the context div. But, we'd like to use those click events
* for some things like reporter sliders.
@@ -34,102 +19,251 @@ body {
-ms-user-select: none;
user-select: none;
}
-/* The pane over a project with the green flag on startup. */
- #greenSlide {
- position: absolute;
- float: left;
- z-index: 500;
- /* Hmm, will this break after the 501st sprite? */
- margin-left: 30px;
-}
-#greenSlideFg {
- background-color: rgba(0,0,0,0.4);
- padding: 140px 202px;
-}
-/* iPad arrow key frame */
-/* This is the frame around the stage with various buttons. */
- #ui-top {
- width: 540px;
- height: 30px;
- clear: both;
- background-color: #eee;
+/* Control bar above the stage */
+#player-header {
+ width: 480px;
+ height: 38px;
+ position: relative;
+ background: linear-gradient(#fff, #e6e6e6);
+ border: 1px solid #d1d1d1;
+ border-bottom: 0;
+ border-radius: 7px 7px 0 0;
}
-#up {
- padding-top: 10px;
- width: 540px;
- height: 30px;
- clear: both;
- background-color: #eee;
- border-top-left-radius: 10px;
- border-top-right-radius: 10px;
+
+/* Button styling */
+#player-header button {
+ border: 0;
+ background: center center no-repeat;
+ width: 33px;
+ height: 38px;
+ float: right;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+#player-header-preload {
+ width: 1px;
+ height: 1px;
+ position: absolute;
+ top: -1px;
+ left: -1px;
+ background: url(img/fullScreenOn.png), url(img/greenFlagOn.png), url(img/stopOn.png);
+}
+button#toggle-fullscreen {
+ background-image: url(img/fullScreenOff.png);
+ background-position: 10px 8px;
+ width: 40px;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+button#trigger-green-flag {
+ background-image: url(img/greenFlagOff.png);
+}
+button#trigger-green-flag:hover {
+ background-image: url(img/greenFlagOn.png);
+}
+button#trigger-stop {
+ background-image: url(img/stopOff.png);
+}
+button#trigger-stop:hover {
+ background-image: url(img/stopOn.png);
+}
+
+/* Version number */
+#player-header-version {
+ position: absolute;
+ top: 28px;
+ left: 0;
+ width: 45px;
text-align: center;
- color: #ccc;
+ color: rgba(0, 0, 0, .4);
+ font: 9px sans-serif;
}
-#left {
- float: left;
- width: 30px;
+
+/* Wrapper for the Stage */
+#player-content {
+ position: relative;
+ border: 1px solid #d1d1d1;
+ border-top: 0;
+ width: 480px;
height: 360px;
- background-color: #eee;
- line-height: 360px;
- color: #ccc;
+}
+
+/* The Stage */
+#container {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 480px;
+ height: 360px;
+ cursor: default;
+ overflow: hidden;
+}
+
+/* Pane over the Stage with the green flag on startup */
+#overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 480px;
+ height: 360px;
+ z-index: 10000;
+ background: url(img/playerStartFlag.png) rgba(0, 0, 0, .26) center center no-repeat;
+}
+
+/* Preloader */
+#preloader {
+ position: absolute;
+ z-index: 10001;
+ top: 50%;
+ left: 50%;
+ margin-left: -156px;
+ margin-top: -61px;
+ width: 309px;
+ height: 119px;
+ border: 1px solid rgb(208, 209, 210);
+ background: #fff;
+ border-radius: 12px;
+ box-shadow: 4px 4px 6px rgba(0, 0, 0, .5);
+ cursor: default;
+}
+#preloader-progress {
+ margin: 24px 30px 14px 29px;
+ background: rgb(185, 187, 189);
+ border-radius: 5px;
+ height: 22px;
+}
+#preloader-progress-bar {
+ height: 22px;
+ background: rgb(0, 161, 216);
+ border-radius: 5px;
+ width: 0;
+}
+#preloader-caption,
+#preloader-details {
+ margin: 14px 0 0 8px;
text-align: center;
+ font-size: 18px;
+ color: rgba(0, 0, 0, .65);
+}
+#preloader-details {
+ margin: 6px 0 0 4px;
+ font-size: 12px;
+}
+
+/* iPad arrow key frame */
+.arrow {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 578px;
+ height: 400px;
+ text-align: center;
+ font: 24px/48px sans-serif;
+ color: rgba(0, 0, 0, .2);
+ cursor: default;
+}
+.arrow.vertical {
+ height: 48px;
+}
+.arrow.horizontal {
+ width: 48px;
+ top: 48px;
+ line-height: 400px;
}
#right {
- float: left;
- width: 30px;
- height: 360px;
- background-color: #eee;
- line-height: 360px;
- color: #ccc;
- text-align: center;
+ left: 530px;
}
#down {
- padding-top: 10px;
- width: 540px;
- height: 30px;
- background-color: #eee;
+ top: 448px;
+}
+#up::before {
+ content: '\25b2';
+}
+#down::before {
+ content: '\25bc';
+}
+#left::before {
+ content: '\25c0';
+}
+#right::before {
+ content: '\25b6';
+}
+
+/* Panel for project ID input */
+#project-picker {
+ margin: 16px 0;
text-align: center;
- border-bottom-left-radius: 10px;
- border-bottom-right-radius: 10px;
- color: #ccc;
+ font-size: 16px;
+ line-height: 18px;
}
-#ui-bottom {
- width: 480px;
- height: 30px;
- background-color: #eee;
- padding-left: 30px;
- padding-right: 30px;
- clear: both;
- text-align: right;
+#project-id,
+#address-hint {
+ border: 1px solid #aaa;
+ padding: 6px;
}
-.playerContainer {
- display: inline-block;
- text-align: center;
+#project-id {
+ box-shadow: inset 0 3px 3px -3px rgba(0, 0, 0, .3);
+ background: 0;
+ padding-left: 0;
+ border-left: 0;
+ margin: 0;
+ font: inherit;
+ width: 6em;
}
+#project-id.error {
+ background: #fee;
+ box-shadow: inset 0 3px 3px -3px rgba(100, 0, 0, .3);
+}
+#address-hint {
+ box-shadow: inset 3px 3px 3px -3px rgba(0, 0, 0, .3);
+ padding-right: 0;
+ border-right: 0;
+}
+#address-hint.error {
+ background: #fee;
+ box-shadow: inset 3px 3px 3px -3px rgba(100, 0, 0, .3);
+}
+#go-project {
+ padding: 6px;
+ margin: 0;
+ border: 1px solid #aaa;
+ border-left: 0;
+ font: inherit;
+ background: linear-gradient(#fff, #ddd);
+ box-shadow: inset 0 -1px rgba(255, 255, 255, .2);
+ cursor: pointer;
+}
+#go-project:active {
+ background: linear-gradient(#ddd, #eee);
+ box-shadow: inset 0 1px rgba(255, 255, 255, .3), inset 0 2px 5px rgba(0, 0, 0, .1);
+}
+
+
/* Reporter styles */
- .reporter-normal {
+.reporter-normal {
display: inline-block;
- padding: 2px 5px 2px 5px;
+ padding: 2px 7px 3px 5px;
background-color: rgb(193, 196, 199);
- border: 1px solid rgb(130, 126, 126);
- border-radius: 4px;
- font-family: sans-serif;
- font-size: 11px;
- font-weight: bold;
+ border: 1px solid rgb(148, 145, 145);
+ border-radius: 6px;
+ font: bold 11px/15px sans-serif;
color: #000;
position: absolute;
}
.reporter-inset {
display: inline-block;
- min-width: 40px;
- margin-left: 5px;
+ vertical-align: top;
+ min-width: 38px;
+ margin-left: 6px;
padding: 1px;
border: 1px solid #fff;
- border-radius: 4px;
- -webkit-box-shadow: inset 0 0 3px #fff;
- box-shadow: inset 0 0 3px #fff;
+ border-radius: 6px;
+ -webkit-box-shadow: inset -1px -1px 3px rgba(255, 255, 255, 0.7), inset 1px 1px 2px rgba(0, 0, 0, 0.35);
+ box-shadow: inset -1px -1px 3px rgba(255, 255, 255, 0.7), inset 1px 1px 2px rgba(0, 0, 0, 0.35);
text-align: center;
+ font: bold 9px/11px sans-serif;
color: #fff;
}
.reporter-large {
@@ -139,9 +273,7 @@ body {
border-radius: 4px;
-webkit-box-shadow: 0 -3px 3px -3px #fff inset, -3px 0 3px -3px #fff inset, 0 3px 3px -3px #000 inset, 3px 0 3px -3px #000 inset;
box-shadow: 0 -3px 3px -3px #fff inset, -3px 0 3px -3px #fff inset, 0 3px 3px -3px #000 inset, 3px 0 3px -3px #000 inset;
- font-family: sans-serif;
- font-size: 15px;
- font-weight: bold;
+ font-family: bold 15px sans-serif;
text-align: center;
color: #fff;
position: absolute;
@@ -271,83 +403,3 @@ body {
height: 19px;
background: url(img/think-bottom.png) transparent no-repeat;
}
-
-#info {
- float: left;
- margin-left: 30px;
- height: 24px;
- padding: 3px;
- color: #aaa;
- font-size: 12px;
-}
-/* Button styling */
- button {
- background-color: #ddd;
- border-radius: 3px;
- cursor: pointer;
- border-style: none;
- font-family: sans-serif;
- width: 24px;
- padding: 3px;
- margin: 3px;
- margin-top: 0px;
- height: 24px;
- background: -webkit-gradient(linear, top left, bottom left, from(#ddd), to(#ccc));
- background: -webkit-linear-gradient(#ddd, #ccc);
- background: linear-gradient(#ddd, #ccc);
-}
-button:hover {
- background-color: #ccc;
- background: -webkit-gradient(linear, top left, bottom left, from(#ccc), to(#bbb));
- background: -webkit-linear-gradient(#ccc, #bbb);
- background: linear-gradient(#ccc, #bbb);
-}
-#trigger_green_flag, #trigger_stop {
- padding-top: 0px;
- font-size: 20px;
- width: 24px;
- margin: 3px;
- float: right;
-}
-#trigger_green_flag {
- color: #050;
-}
-#trigger_stop {
- color: #F33;
- margin-right: 30px;
- margin-left: 0px;
-}
-#clearer {
- clear: both;
-}
-input[type=text] {
- display: inline-block;
- border-style: none;
- border-radius: 4px;
- font-family: sans-serif;
- background-color: #ddd;
- font-size: 14px;
- padding: 3px;
- height: 18px;
- margin: 3px;
- width: 100px;
-}
-input[type=text]:focus {
- outline: none;
- background-color: #ccc;
-}
-#project_id {
- text-align: center;
-}
-#address-hint {
- font-size: 12px;
-}
-#go_project {
- display: table-cell;
- height: 24px;
- padding: 0px;
- margin-right: 0px;
- margin-left: 0px;
- margin-top: 3px;
- margin-bottom: 0px;
-}
\ No newline at end of file