Merge c4b883f72a into fda87985c7
This commit is contained in:
Cythral
GitHub
commit
7785ef2b7b
4 changed files with 208 additions and 192 deletions
262
compare.html
262
compare.html
|
|
@ -1,139 +1,153 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Scratch HTML5 vs. Flash</title>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Scratch HTML5 vs Flash</title>
|
||||
|
||||
<link rel=stylesheet href=player.css>
|
||||
<link rel=stylesheet href=compare.css>
|
||||
<!-- 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">
|
||||
|
||||
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script>
|
||||
<script src=http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js></script>
|
||||
<!-- Stylesheets -->
|
||||
<link rel=stylesheet href="player.css">
|
||||
<link rel=stylesheet href="compare.css">
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
|
||||
<script src="js/util/Timer.js" defer></script>
|
||||
<script src="js/util/OffsetBuffer.js" defer></script>
|
||||
<script src="js/util/Color.js" defer></script>
|
||||
<script src="js/util/Rectangle.js" defer></script>
|
||||
<script src="js/Sprite.js" defer></script>
|
||||
<script src="js/Reporter.js" defer></script>
|
||||
<script src="js/Stage.js" defer></script>
|
||||
<script src="js/sound/WAVFile.js" defer></script>
|
||||
<script src="js/sound/SoundDecoder.js" defer></script>
|
||||
<script src="js/sound/SoundBank.js" defer></script>
|
||||
<script src="js/sound/NotePlayer.js" defer></script>
|
||||
<script src="soundbank/Instr.js" defer></script>
|
||||
<script src="js/IO.js" defer></script>
|
||||
<script src="js/primitives/VarListPrims.js" defer></script>
|
||||
<script src="js/primitives/MotionAndPenPrims.js" defer></script>
|
||||
<script src="js/primitives/LooksPrims.js" defer></script>
|
||||
<script src="js/primitives/SensingPrims.js" defer></script>
|
||||
<script src="js/primitives/SoundPrims.js" defer></script>
|
||||
<script src="js/primitives/Primitives.js" defer></script>
|
||||
<script src="js/Interpreter.js" defer></script>
|
||||
<script src="js/Runtime.js" defer></script>
|
||||
<script src="js/Scratch.js" defer></script>
|
||||
<script src="js/init.js" defer></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
var flashLog = null;
|
||||
var project_id = location.hash && parseInt(location.hash.substr(1)) || 10000160;
|
||||
$(function() {
|
||||
// The flashvars tell flash about the project data (and autostart=true)
|
||||
var flashvars = {
|
||||
server: encodeURIComponent('scratch.mit.edu'),
|
||||
debugOps: true,
|
||||
debugOpCmd: 'debugFlash',
|
||||
project_title: '',
|
||||
project_id: project_id
|
||||
};
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
var project_id = location.hash && parseInt(location.hash.substr(1)) || 10000160;
|
||||
var scratch = new Scratch(project_id);
|
||||
});
|
||||
</script>
|
||||
var params = {
|
||||
allowscriptaccess: 'always',
|
||||
allowfullscreen: 'false',
|
||||
wmode: 'direct',
|
||||
menu: 'false'
|
||||
};
|
||||
|
||||
<script>
|
||||
var flashLog = null;
|
||||
var project_id = location.hash && parseInt(location.hash.substr(1)) || 10000160;
|
||||
$(function() {
|
||||
// The flashvars tell flash about the project data (and autostart=true)
|
||||
var flashvars = {
|
||||
server: encodeURIComponent('scratch.mit.edu'),
|
||||
debugOps: true,
|
||||
debugOpCmd: 'debugFlash',
|
||||
project_title: '',
|
||||
project_id: project_id
|
||||
};
|
||||
var flashPlayer = null;
|
||||
var swf_url = "http://cdn.scratch.mit.edu/scratchr2/static/Scratch.swf?brkCache="+project_id;
|
||||
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;
|
||||
});
|
||||
|
||||
var params = {
|
||||
allowscriptaccess: 'always',
|
||||
allowfullscreen: 'false',
|
||||
wmode: 'direct',
|
||||
menu: 'false'
|
||||
};
|
||||
$('#trigger-green-flag, #overlay').click(function() {
|
||||
flashPlayer.ASstartRunning();
|
||||
});
|
||||
|
||||
var flashPlayer = null;
|
||||
var swf_url = "http://cdn.scratch.mit.edu/scratchr2/static/Scratch.swf?brkCache="+project_id;
|
||||
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;
|
||||
// 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());
|
||||
});
|
||||
});
|
||||
|
||||
$('#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=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>
|
||||
function debugFlash(opCount, opName, args) {
|
||||
var text = opCount + ': '+opName+'('+args.join(', ')+')';
|
||||
flashLog.val(flashLog.val() + text + "\n");
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<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="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>
|
||||
<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>
|
||||
</div>
|
||||
<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 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>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
|
|
|
|||
132
index.html
132
index.html
|
|
@ -1,75 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Scratch HTML5</title>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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>
|
||||
<!-- 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>
|
||||
<!-- Stylesheets -->
|
||||
<link rel=stylesheet href="player.css">
|
||||
<link rel=stylesheet href="index.css">
|
||||
|
||||
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
var project_id = location.hash && parseInt(location.hash.substr(1)) || 10000160;
|
||||
var scratch = new Scratch(project_id);
|
||||
});
|
||||
</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>
|
||||
<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>
|
||||
<!-- Scripts -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
|
||||
<script src="js/util/Timer.js" defer></script>
|
||||
<script src="js/util/OffsetBuffer.js" defer></script>
|
||||
<script src="js/util/Color.js" defer></script>
|
||||
<script src="js/util/Rectangle.js" defer></script>
|
||||
<script src="js/Sprite.js" defer></script>
|
||||
<script src="js/Reporter.js" defer></script>
|
||||
<script src="js/Stage.js" defer></script>
|
||||
<script src="js/sound/WAVFile.js" defer></script>
|
||||
<script src="js/sound/SoundDecoder.js" defer></script>
|
||||
<script src="js/sound/SoundBank.js" defer></script>
|
||||
<script src="js/sound/NotePlayer.js" defer></script>
|
||||
<script src="soundbank/Instr.js" defer></script>
|
||||
<script src="js/IO.js" defer></script>
|
||||
<script src="js/primitives/VarListPrims.js" defer></script>
|
||||
<script src="js/primitives/MotionAndPenPrims.js" defer></script>
|
||||
<script src="js/primitives/LooksPrims.js" defer></script>
|
||||
<script src="js/primitives/SensingPrims.js" defer></script>
|
||||
<script src="js/primitives/SoundPrims.js" defer></script>
|
||||
<script src="js/primitives/Primitives.js" defer></script>
|
||||
<script src="js/Interpreter.js" defer></script>
|
||||
<script src="js/Runtime.js" defer></script>
|
||||
<script src="js/Scratch.js" defer></script>
|
||||
<script src="js/init.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<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=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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<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" src="js/Scratch.js"></script>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
4
js/init.js
Normal file
4
js/init.js
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
$(document).ready(function() {
|
||||
var project_id = location.hash && parseInt(location.hash.substr(1)) || 10000160;
|
||||
var scratch = new Scratch(project_id);
|
||||
});
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
},
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"jasmine-jquery": "~1.3.3",
|
||||
"jasmine-jquery": "~2.0.5",
|
||||
"jscs": "~1.3.0",
|
||||
"karma": "~0.10",
|
||||
"karma-html2js-preprocessor": "~0.1.0",
|
||||
|
|
|
|||
Reference in a new issue