diff --git a/compare.html b/compare.html
index 19b1eff..54961e8 100644
--- a/compare.html
+++ b/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">
diff --git a/index.html b/index.html
index 5275ca3..3fa4be0 100755
--- a/index.html
+++ b/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>
\ No newline at end of file
diff --git a/js/IO.js b/js/IO.js
index 5671e2f..29e40dd 100644
--- a/js/IO.js
+++ b/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/';
diff --git a/js/Sprite.js b/js/Sprite.js
index 48a1a64..e9eb141 100644
--- a/js/Sprite.js
+++ b/js/Sprite.js
@@ -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,
diff --git a/player.css b/player.css
index f2b13ae..d8797e6 100644
--- a/player.css
+++ b/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;
+}
\ No newline at end of file