commit
01e38ecfc7
5 changed files with 215 additions and 84 deletions
35
compare.html
35
compare.html
|
@ -7,13 +7,6 @@ header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
|
|||
<head>
|
||||
<title>Scratch HTML5 vs. Flash</title>
|
||||
<meta charset="utf-8">
|
||||
<style type="text/css">
|
||||
body {
|
||||
background: #222;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<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>
|
||||
|
@ -109,21 +102,23 @@ header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
|
|||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<div id="info">Loading...</div>
|
||||
<button id="trigger_green_flag">Green flag</button>
|
||||
<button id="trigger_stop">Stop</button>
|
||||
<input type="text" name="project_id" id="project_id" /><button id='go_project'>Go!</button>
|
||||
</div>
|
||||
<div class="playerContainer">
|
||||
<div id="up"> </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="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="right"> </div>
|
||||
<div id="down"> </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>
|
||||
<textarea id="jsDebug"></textarea>
|
||||
</div>
|
||||
<div class="playerContainer">
|
||||
|
|
57
index.html
57
index.html
|
@ -7,15 +7,8 @@
|
|||
<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">
|
||||
<style type="text/css">
|
||||
body {
|
||||
background: #222;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<link href="player.css" type="text/css" rel="stylesheet" />
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
|
||||
<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>
|
||||
|
@ -45,22 +38,40 @@
|
|||
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="up"> </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="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>.
|
||||
</div>
|
||||
<div id="right"> </div>
|
||||
<div id="down"> </div>
|
||||
|
||||
<div id="info">Loading...</div>
|
||||
|
||||
<button id="trigger_green_flag">Green flag</button>
|
||||
<button id="trigger_stop">Stop</button>
|
||||
|
||||
<input type="text" name="project_id" id="project_id" /><button id='go_project'>Go!</button>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
1
js/IO.js
1
js/IO.js
|
@ -27,6 +27,7 @@ var IO = function() {
|
|||
// In production, simply use the local path (no proxy)
|
||||
// since we won't be hampered by the same-origin policy.
|
||||
this.base = 'proxy.php?resource=internalapi/';
|
||||
//this.base = 'http://scratch.mit.edu/internalapi/'; // Final base
|
||||
this.project_base = this.base + 'project/';
|
||||
this.project_suffix = '/get/';
|
||||
this.asset_base = this.base + 'asset/';
|
||||
|
|
|
@ -196,9 +196,10 @@ Sprite.prototype.updateCostume = function() {
|
|||
|
||||
Sprite.prototype.onClick = function(evt) {
|
||||
// TODO - needs work!!
|
||||
var boxOffset = $('#container').offset();
|
||||
var mouseX = runtime.mousePos[0] + 240 + boxOffset.left;
|
||||
var mouseY = 180 - runtime.mousePos[1] + boxOffset.top;
|
||||
|
||||
// We don't need boxOffset anymore.
|
||||
var mouseX = runtime.mousePos[0] + 240;
|
||||
var mouseY = 180 - runtime.mousePos[1];
|
||||
|
||||
if (this.mesh.src.indexOf('.svg') == -1) {
|
||||
// HACK - if the image SRC doesn't indicate it's an SVG,
|
||||
|
|
199
player.css
199
player.css
|
@ -1,4 +1,21 @@
|
|||
#container {
|
||||
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;
|
||||
|
@ -15,80 +32,118 @@
|
|||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#greenSlide {
|
||||
/* 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 */
|
||||
#up { width: 540px; height: 30px; clear: both; background-color: #333; }
|
||||
#left { float: left; width: 30px; height: 360px; background-color: #333; }
|
||||
#right { float: left; width: 30px; height: 360px; background-color: #333; }
|
||||
#down { width: 540px; height: 30px; clear: both; background-color: #333; }
|
||||
|
||||
/* This is the frame around the stage with various buttons. */
|
||||
#ui-top {
|
||||
width: 540px;
|
||||
height: 30px;
|
||||
clear: both;
|
||||
background-color: #eee;
|
||||
}
|
||||
#up {
|
||||
padding-top: 10px;
|
||||
width: 540px;
|
||||
height: 30px;
|
||||
clear: both;
|
||||
background-color: #eee;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
text-align: center;
|
||||
color: #ccc;
|
||||
}
|
||||
#left {
|
||||
float: left;
|
||||
width: 30px;
|
||||
height: 360px;
|
||||
background-color: #eee;
|
||||
line-height: 360px;
|
||||
color: #ccc;
|
||||
text-align: center;
|
||||
}
|
||||
#right {
|
||||
float: left;
|
||||
width: 30px;
|
||||
height: 360px;
|
||||
background-color: #eee;
|
||||
line-height: 360px;
|
||||
color: #ccc;
|
||||
text-align: center;
|
||||
}
|
||||
#down {
|
||||
padding-top: 10px;
|
||||
width: 540px;
|
||||
height: 30px;
|
||||
background-color: #eee;
|
||||
text-align: center;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
color: #ccc;
|
||||
}
|
||||
#ui-bottom {
|
||||
width: 480px;
|
||||
height: 30px;
|
||||
background-color: #eee;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
clear: both;
|
||||
text-align: right;
|
||||
}
|
||||
.playerContainer {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Reporter styles */
|
||||
.reporter-normal {
|
||||
.reporter-normal {
|
||||
display: inline-block;
|
||||
padding: 2px 5px 2px 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;
|
||||
color: #000;
|
||||
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.reporter-inset {
|
||||
display: inline-block;
|
||||
min-width: 40px;
|
||||
margin-left: 5px;
|
||||
padding: 1px;
|
||||
|
||||
border: 1px solid #fff;
|
||||
border-radius: 4px;
|
||||
|
||||
-webkit-box-shadow: inset 0 0 3px #fff;
|
||||
box-shadow: inset 0 0 3px #fff;
|
||||
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.reporter-large {
|
||||
display: inline-block;
|
||||
min-width: 40px;
|
||||
padding: 2px 5px 1px 5px;
|
||||
|
||||
border-radius: 4px;
|
||||
|
||||
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;
|
||||
|
||||
-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;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
@ -182,49 +237,117 @@
|
|||
}
|
||||
|
||||
/* Say/think bubble styles */
|
||||
.bubble-container {
|
||||
.bubble-container {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
max-width: 120px;
|
||||
min-width: 40px;
|
||||
padding: 6px 11px 6px 11px;
|
||||
|
||||
border: 3px solid rgb(160, 160, 160);
|
||||
border-radius: 10px;
|
||||
|
||||
background: #fff;
|
||||
|
||||
font-family: sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bubble-say {
|
||||
position: absolute;
|
||||
|
||||
margin-top: -3px;
|
||||
margin-left: 8px;
|
||||
width: 44px;
|
||||
height: 18px;
|
||||
|
||||
background: url(img/say-bottom.png) transparent no-repeat;
|
||||
}
|
||||
|
||||
.bubble-think {
|
||||
position: absolute;
|
||||
|
||||
margin-top: 0px;
|
||||
margin-left: 8px;
|
||||
width: 44px;
|
||||
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;
|
||||
}
|
Reference in a new issue