From c4b2652c12233cf614f120830edc86af730189e9 Mon Sep 17 00:00:00 2001 From: Nathan Dinsmore Date: Thu, 14 Nov 2013 20:08:52 -0500 Subject: [PATCH 1/2] 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 @@ - - - - Scratch HTML5 vs. Flash - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - $('#trigger_green_flag, #greenSlide').click(function() { - flashPlayer.ASstartRunning(); - }); + + + + + + + + + + + + + + + + + + + + + + - // Stop button behavior - $('#trigger_stop').click(function() { - flashPlayer.ASstopRunning(); - }); + - 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"); - } + - - -
-
▲
-
-
Loading…
- - -
+ $('#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"); + } + + +
+
+
+
+
+ +
+
+
HTML5
+ + +
-
◀
-
-
-
+
+
+
+
+
+
Loading project…
+
+
- -
- http://scratch.mit.edu/projects/
-
▼
-
-
- - + +
+ http://scratch.mit.edu/projects/
- - +
+
+

Oh Noes! Scratch project cannot display.
Flash player is disabled, missing, or less than version 10.2.

+ + Get Adobe Flash player + +
+ +
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)P000yS1^@s6cz2e)00004b3#c}2nYxW zdWr z6}-ibmbgyw4GVaQD`Vjz-sAK-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 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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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 - - - Scratch HTML5 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Scratch HTML5 player

-
▲
-
-
Loading…
- - -
-
-
◀
-
-
-
-
- -
- http://scratch.mit.edu/projects/
-
▼
-

The Scratch HTML5 player is still in development. Feedback is welcome! Please report any bugs (or differences from the Flash player) on Github. + +Scratch HTML5 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+
+
+
+ +
+
+
HTML5
+ + +
- - \ No newline at end of file +
+
+
+
+
+
Loading project…
+
+
+
+
+ +
+ http://scratch.mit.edu/projects/ +
+ +

Scratch HTML5 player

+

The Scratch HTML5 player is still in development. Feedback is welcome! Please report any bugs (or differences from the Flash player) on Github.

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 From f115c42b529a19b1c9c29d6f0ac4f9c696e94948 Mon Sep 17 00:00:00 2001 From: Nathan Dinsmore Date: Thu, 14 Nov 2013 20:21:04 -0500 Subject: [PATCH 2/2] Prefixed --- player.css | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/player.css b/player.css index a8be2e9..bb824a0 100644 --- a/player.css +++ b/player.css @@ -25,6 +25,11 @@ width: 480px; height: 38px; position: relative; + background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e6e6e6)); + background: -webkit-linear-gradient(#fff, #e6e6e6); + background: -moz-linear-gradient(#fff, #e6e6e6); + background: -ms-linear-gradient(#fff, #e6e6e6); + background: -o-linear-gradient(#fff, #e6e6e6); background: linear-gradient(#fff, #e6e6e6); border: 1px solid #d1d1d1; border-bottom: 0; @@ -125,6 +130,7 @@ button#trigger-stop:hover { border: 1px solid rgb(208, 209, 210); background: #fff; border-radius: 12px; + -webkit-box-shadow: 4px 4px 6px rgba(0, 0, 0, .5); box-shadow: 4px 4px 6px rgba(0, 0, 0, .5); cursor: default; } @@ -204,6 +210,7 @@ button#trigger-stop:hover { padding: 6px; } #project-id { + -webkit-box-shadow: inset 0 3px 3px -3px rgba(0, 0, 0, .3); box-shadow: inset 0 3px 3px -3px rgba(0, 0, 0, .3); background: 0; padding-left: 0; @@ -214,15 +221,18 @@ button#trigger-stop:hover { } #project-id.error { background: #fee; + -webkit-box-shadow: inset 0 3px 3px -3px rgba(100, 0, 0, .3); box-shadow: inset 0 3px 3px -3px rgba(100, 0, 0, .3); } #address-hint { + -webkit-box-shadow: inset 3px 3px 3px -3px rgba(0, 0, 0, .3); box-shadow: inset 3px 3px 3px -3px rgba(0, 0, 0, .3); padding-right: 0; border-right: 0; } #address-hint.error { background: #fee; + -webkit-box-shadow: inset 3px 3px 3px -3px rgba(100, 0, 0, .3); box-shadow: inset 3px 3px 3px -3px rgba(100, 0, 0, .3); } #go-project { @@ -231,12 +241,24 @@ button#trigger-stop:hover { border: 1px solid #aaa; border-left: 0; font: inherit; + background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd)); + background: -webkit-linear-gradient(#fff, #ddd); + background: -moz-linear-gradient(#fff, #ddd); + background: -ms-linear-gradient(#fff, #ddd); + background: -o-linear-gradient(#fff, #ddd); background: linear-gradient(#fff, #ddd); + -webkit-box-shadow: inset 0 -1px rgba(255, 255, 255, .2); box-shadow: inset 0 -1px rgba(255, 255, 255, .2); cursor: pointer; } #go-project:active { + background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#eee)); + background: -webkit-linear-gradient(#ddd, #eee); + background: -moz-linear-gradient(#ddd, #eee); + background: -ms-linear-gradient(#ddd, #eee); + background: -o-linear-gradient(#ddd, #eee); background: linear-gradient(#ddd, #eee); + -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, .3), inset 0 2px 5px rgba(0, 0, 0, .1); box-shadow: inset 0 1px rgba(255, 255, 255, .3), inset 0 2px 5px rgba(0, 0, 0, .1); }