Merge pull request from Hardmath123/master

Cleaner UI
This commit is contained in:
Shane M. Clements 2013-11-05 09:15:24 -08:00
commit 01e38ecfc7
5 changed files with 215 additions and 84 deletions

View file

@ -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">&nbsp;</div>
<div id="left">&nbsp;</div>
<div id="overContainer">
<div id="greenSlide"><div id="greenSlideFg"><img src="img/greenflag.png"></div></div>
<div id="container"></div>
<div id="up">&#x25B2;</div>
<div id="ui-top">
<div id="info">Loading&hellip;</div>
<button id="trigger_stop">&#9632;</button>
<button id="trigger_green_flag">&#9873;</button>
<div class="clearer"></div>
</div>
<div id="right">&nbsp;</div>
<div id="down">&nbsp;</div>
<div id="left">&#x25c0;</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">&#x25b6;</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'>&rarr;</button></div>
<div id="down">&#x25BC;</div>
<textarea id="jsDebug"></textarea>
</div>
<div class="playerContainer">

View file

@ -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">&nbsp;</div>
<div id="left">&nbsp;</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">&#x25B2;</div>
<div id="ui-top">
<div id="info">Loading&hellip;</div>
<button id="trigger_stop">&#9632;</button>
<button id="trigger_green_flag">&#9873;</button>
<div class="clearer"></div>
</div>
<div id="left">&#x25c0;</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">&#x25b6;</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'>&rarr;</button></div>
<div id="down">&#x25BC;</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">&nbsp;</div>
<div id="down">&nbsp;</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>

View file

@ -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/';

View file

@ -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,

View file

@ -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;
}