SideView example viewer finished.

This commit is contained in:
photonstorm 2013-10-23 02:14:51 +01:00
parent e5c3ca27c5
commit cab3b53cf0
12 changed files with 442 additions and 12 deletions

View file

@ -8,7 +8,7 @@
$buildLog = "Building version $version \n\n";
$header = "";
$js = file(dirname(__FILE__) . '/../examples/phaser-debug-js.php');
$js = file(dirname(__FILE__) . 'config.php');
$output = "";
for ($i = 0; $i < count($js); $i++)

123
build/config.php Normal file
View file

@ -0,0 +1,123 @@
<?php
// All JS files in build order.
// Much easier for debugging re: line numbers
?>
<script src="../src/Intro.js"></script>
<script src="../src/pixi/Pixi.js"></script>
<script src="../src/Phaser.js"></script>
<script src="../src/utils/Utils.js"></script>
<script src="../src/pixi/core/Matrix.js"></script>
<script src="../src/pixi/core/Point.js"></script>
<script src="../src/pixi/core/Rectangle.js"></script>
<script src="../src/pixi/display/DisplayObject.js"></script>
<script src="../src/pixi/display/DisplayObjectContainer.js"></script>
<script src="../src/pixi/display/Sprite.js"></script>
<script src="../src/pixi/display/Stage.js"></script>
<script src="../src/pixi/extras/CustomRenderable.js"></script>
<script src="../src/pixi/extras/Strip.js"></script>
<script src="../src/pixi/extras/Rope.js"></script>
<script src="../src/pixi/extras/TilingSprite.js"></script>
<script src="../src/pixi/filters/FilterBlock.js"></script>
<script src="../src/pixi/filters/MaskFilter.js"></script>
<script src="../src/pixi/primitives/Graphics.js"></script>
<script src="../src/pixi/renderers/canvas/CanvasGraphics.js"></script>
<script src="../src/pixi/renderers/canvas/CanvasRenderer.js"></script>
<script src="../src/pixi/renderers/webgl/WebGLBatch.js"></script>
<script src="../src/pixi/renderers/webgl/WebGLGraphics.js"></script>
<script src="../src/pixi/renderers/webgl/WebGLRenderer.js"></script>
<script src="../src/pixi/renderers/webgl/WebGLRenderGroup.js"></script>
<script src="../src/pixi/renderers/webgl/WebGLShaders.js"></script>
<script src="../src/pixi/text/BitmapText.js"></script>
<script src="../src/pixi/text/Text.js"></script>
<script src="../src/pixi/textures/BaseTexture.js"></script>
<script src="../src/pixi/textures/Texture.js"></script>
<script src="../src/pixi/textures/RenderTexture.js"></script>
<script src="../src/pixi/utils/EventTarget.js"></script>
<script src="../src/pixi/utils/Polyk.js"></script>
<script src="../src/core/Camera.js"></script>
<script src="../src/core/State.js"></script>
<script src="../src/core/StateManager.js"></script>
<script src="../src/core/LinkedList.js"></script>
<script src="../src/core/Signal.js"></script>
<script src="../src/core/SignalBinding.js"></script>
<script src="../src/core/Plugin.js"></script>
<script src="../src/core/PluginManager.js"></script>
<script src="../src/core/Stage.js"></script>
<script src="../src/core/Group.js"></script>
<script src="../src/core/World.js"></script>
<script src="../src/core/Game.js"></script>
<script src="../src/input/Input.js"></script>
<script src="../src/input/Key.js"></script>
<script src="../src/input/Keyboard.js"></script>
<script src="../src/input/Mouse.js"></script>
<script src="../src/input/MSPointer.js"></script>
<script src="../src/input/Pointer.js"></script>
<script src="../src/input/Touch.js"></script>
<script src="../src/input/InputHandler.js"></script>
<script src="../src/gameobjects/Events.js"></script>
<script src="../src/gameobjects/GameObjectFactory.js"></script>
<script src="../src/gameobjects/Sprite.js"></script>
<script src="../src/gameobjects/TileSprite.js"></script>
<script src="../src/gameobjects/Text.js"></script>
<script src="../src/gameobjects/BitmapText.js"></script>
<script src="../src/gameobjects/Button.js"></script>
<script src="../src/gameobjects/Graphics.js"></script>
<script src="../src/gameobjects/RenderTexture.js"></script>
<script src="../src/system/Canvas.js"></script>
<script src="../src/system/StageScaleMode.js"></script>
<script src="../src/system/Device.js"></script>
<script src="../src/system/RequestAnimationFrame.js"></script>
<script src="../src/math/RandomDataGenerator.js"></script>
<script src="../src/math/Math.js"></script>
<script src="../src/math/QuadTree.js"></script>
<script src="../src/geom/Circle.js"></script>
<script src="../src/geom/Point.js"></script>
<script src="../src/geom/Rectangle.js"></script>
<script src="../src/net/Net.js"></script>
<script src="../src/tween/TweenManager.js"></script>
<script src="../src/tween/Tween.js"></script>
<script src="../src/tween/Easing.js"></script>
<script src="../src/time/Time.js"></script>
<script src="../src/animation/AnimationManager.js"></script>
<script src="../src/animation/Animation.js"></script>
<script src="../src/animation/Frame.js"></script>
<script src="../src/animation/FrameData.js"></script>
<script src="../src/animation/AnimationParser.js"></script>
<script src="../src/loader/Cache.js"></script>
<script src="../src/loader/Loader.js"></script>
<script src="../src/loader/LoaderParser.js"></script>
<script src="../src/sound/Sound.js"></script>
<script src="../src/sound/SoundManager.js"></script>
<script src="../src/utils/Debug.js"></script>
<script src="../src/utils/Color.js"></script>
<script src="../src/physics/arcade/ArcadePhysics.js"></script>
<script src="../src/physics/arcade/Body.js"></script>
<script src="../src/particles/Particles.js"></script>
<script src="../src/particles/arcade/ArcadeParticles.js"></script>
<script src="../src/particles/arcade/Emitter.js"></script>
<script src="../src/tilemap/Tile.js"></script>
<script src="../src/tilemap/Tilemap.js"></script>
<script src="../src/tilemap/TilemapLayer.js"></script>
<script src="../src/tilemap/TilemapParser.js"></script>
<script src="../src/tilemap/Tileset.js"></script>
<script src="../src/PixiPatch.js"></script>

View file

@ -0,0 +1,84 @@
@font-face {
font-family: 'inconsolata';
src: url('../../_site/fonts/inconsolata.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
background: #e0e4f1;
margin: 0px;
font-family: 'inconsolata';
font-size: 15px;
overflow: hidden;
}
a {
text-decoration: none;
color: #1c99bb;
}
a:hover {
background-color: #e69b0b;
color: #fff;
}
h1 {
font-size: 25px;
font-weight: normal;
}
h2 {
font-size: 20px;
font-weight: normal;
}
#header {
background: url(../../_site/images/lite_header.jpg) no-repeat left top;
width: 300px;
height: 100px;
}
#panel {
background: url(../../_site/images/lite_header_2.jpg) no-repeat left top;
width: 300px;
overflow-x: hidden;
overflow-y: scroll;
}
#panel #examples-list {
padding: 10px 20px;
line-height: 18px;
}
#footer {
background: url(../../_site/images/lite_footer.jpg) no-repeat left top;
width: 300px;
height: 170px;
color: #000;
text-align: center;
}
#viewer {
position: absolute;
top: 0px;
left: 300px;
width: -webkit-calc(100% - 300px); /* Safari */
width: calc(100% - 300px);
height: 100%;
border: 0px;
}

View file

@ -1,5 +1,4 @@
<?php
// Global
$files = dirToArray(dirname(__FILE__));
$total = 0;
@ -33,7 +32,7 @@
function dirToArray($dir) {
$ignore = array('.', '..', 'html', 'assets', 'states');
$ignore = array('.', '..', '_site', 'assets', 'states');
$result = array();
$root = scandir($dir);
$dirs = array_diff($root, $ignore);

View file

@ -0,0 +1,46 @@
$(document).ready(function(){
$.getJSON("_site/examples.json")
.done(function(data) {
var i = 0;
var node = '';
$.each(data, function(dir, files)
{
node = '<h2>' + dir + '</h2>';
for (var e = 0; e < files.length; e++)
{
node += '<a href="_site/view_lite.html?d=' + dir + '&amp;f=' + files[e].file + '&amp;t=' + files[e].title + '" target="viewer">' + files[e].title + '</a><br />';
}
$("#examples-list").append(node);
i += files.length;
});
$("#total").append(i);
// Re-calc the viewer height
var height = $(window).height() - 270;
$("#panel").css('height', height + 'px');
})
.fail(function() {
var node = '<h1>Error!</h1>';
node += '<p>Unable to load <u>examples.json</u> data file</p>';
node += '<p>Did you open this html file locally?</p>';
node += '<p>It needs to be opened via a web server, or due to browser security permissions<br />it will be unable to load local resources such as images and json data.</p>';
node += '<p>Please see our <a href="#">Getting Started guide</a> for details.</p>';
$("#viewer").contents().find('body').append(node);
});
});

View file

@ -10,13 +10,37 @@ $(document).ready(function(){
$.getScript(dir + "/" + file)
.done(function(script, textStatus){
.done(function(script, textStatus) {
// $.get(dir + "/" + file, function(data) {
// console.log(typeof data);
// console.log(data);
// $("#sourcecode").text(data);
// });
$.ajax({ url: dir + "/" + file, dataType: "text" }).done(function(data) { $("#sourcecode").text(data); });
// Hook up the control panel
$(".pause-button").click(function() {
if (game.paused)
{
game.paused = false;
}
else
{
game.paused = true;
}
});
$(".mute-button").click(function() {
if (game.sound.mute)
{
game.sound.mute = false;
}
else
{
game.sound.mute = true;
}
});
$(".reset-button").click(function() {
document.location.reload(true);
});
})

View file

@ -121,7 +121,7 @@
<div class="box100 no-padding">
<div class="phaser-version">
<span>Phaser Version: 1.1</span>
<a href="" class="version-button">1.2 dev branch</a>
<a href="https://github.com/photonstorm/phaser/tree/dev" class="version-button">1.2 dev branch</a>
</div>
</div>
<div class="clear"></div>
@ -161,7 +161,6 @@
<div class="clear filler"></div>
<p class="centered px800">Source code:</p>
<pre id="sourcecode" class="code-block centered prettyprint"></pre>
</div>
<div class="clear"></div>
<div id="footer" class="footer">

View file

@ -0,0 +1,122 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>phaser</title>
<base href="../"></base>
<script src="_site/js/jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="_site/js/purl.js" type="text/javascript"></script>
<!--
If you're wondering why we embed each script separately, and not just the single-file phaser lib
it's because it makes debugging *significantly* easier for us. Feel free to replace all the below
with just a call to ../build/phaser.js instead if you prefer.
-->
<script src="../src/Intro.js"></script>
<script src="../src/pixi/Pixi.js"></script>
<script src="../src/Phaser.js"></script>
<script src="../src/utils/Utils.js"></script>
<script src="../src/pixi/core/Matrix.js"></script>
<script src="../src/pixi/core/Point.js"></script>
<script src="../src/pixi/core/Rectangle.js"></script>
<script src="../src/pixi/display/DisplayObject.js"></script>
<script src="../src/pixi/display/DisplayObjectContainer.js"></script>
<script src="../src/pixi/display/Sprite.js"></script>
<script src="../src/pixi/display/Stage.js"></script>
<script src="../src/pixi/extras/CustomRenderable.js"></script>
<script src="../src/pixi/extras/Strip.js"></script>
<script src="../src/pixi/extras/Rope.js"></script>
<script src="../src/pixi/extras/TilingSprite.js"></script>
<script src="../src/pixi/filters/FilterBlock.js"></script>
<script src="../src/pixi/filters/MaskFilter.js"></script>
<script src="../src/pixi/primitives/Graphics.js"></script>
<script src="../src/pixi/renderers/canvas/CanvasGraphics.js"></script>
<script src="../src/pixi/renderers/canvas/CanvasRenderer.js"></script>
<script src="../src/pixi/renderers/webgl/WebGLBatch.js"></script>
<script src="../src/pixi/renderers/webgl/WebGLGraphics.js"></script>
<script src="../src/pixi/renderers/webgl/WebGLRenderer.js"></script>
<script src="../src/pixi/renderers/webgl/WebGLRenderGroup.js"></script>
<script src="../src/pixi/renderers/webgl/WebGLShaders.js"></script>
<script src="../src/pixi/text/BitmapText.js"></script>
<script src="../src/pixi/text/Text.js"></script>
<script src="../src/pixi/textures/BaseTexture.js"></script>
<script src="../src/pixi/textures/Texture.js"></script>
<script src="../src/pixi/textures/RenderTexture.js"></script>
<script src="../src/pixi/utils/EventTarget.js"></script>
<script src="../src/pixi/utils/Polyk.js"></script>
<script src="../src/core/Camera.js"></script>
<script src="../src/core/State.js"></script>
<script src="../src/core/StateManager.js"></script>
<script src="../src/core/LinkedList.js"></script>
<script src="../src/core/Signal.js"></script>
<script src="../src/core/SignalBinding.js"></script>
<script src="../src/core/Plugin.js"></script>
<script src="../src/core/PluginManager.js"></script>
<script src="../src/core/Stage.js"></script>
<script src="../src/core/Group.js"></script>
<script src="../src/core/World.js"></script>
<script src="../src/core/Game.js"></script>
<script src="../src/input/Input.js"></script>
<script src="../src/input/Key.js"></script>
<script src="../src/input/Keyboard.js"></script>
<script src="../src/input/Mouse.js"></script>
<script src="../src/input/MSPointer.js"></script>
<script src="../src/input/Pointer.js"></script>
<script src="../src/input/Touch.js"></script>
<script src="../src/input/InputHandler.js"></script>
<script src="../src/gameobjects/Events.js"></script>
<script src="../src/gameobjects/GameObjectFactory.js"></script>
<script src="../src/gameobjects/Sprite.js"></script>
<script src="../src/gameobjects/TileSprite.js"></script>
<script src="../src/gameobjects/Text.js"></script>
<script src="../src/gameobjects/BitmapText.js"></script>
<script src="../src/gameobjects/Button.js"></script>
<script src="../src/gameobjects/Graphics.js"></script>
<script src="../src/gameobjects/RenderTexture.js"></script>
<script src="../src/system/Canvas.js"></script>
<script src="../src/system/StageScaleMode.js"></script>
<script src="../src/system/Device.js"></script>
<script src="../src/system/RequestAnimationFrame.js"></script>
<script src="../src/math/RandomDataGenerator.js"></script>
<script src="../src/math/Math.js"></script>
<script src="../src/math/QuadTree.js"></script>
<script src="../src/geom/Circle.js"></script>
<script src="../src/geom/Point.js"></script>
<script src="../src/geom/Rectangle.js"></script>
<script src="../src/net/Net.js"></script>
<script src="../src/tween/TweenManager.js"></script>
<script src="../src/tween/Tween.js"></script>
<script src="../src/tween/Easing.js"></script>
<script src="../src/time/Time.js"></script>
<script src="../src/animation/AnimationManager.js"></script>
<script src="../src/animation/Animation.js"></script>
<script src="../src/animation/Frame.js"></script>
<script src="../src/animation/FrameData.js"></script>
<script src="../src/animation/AnimationParser.js"></script>
<script src="../src/loader/Cache.js"></script>
<script src="../src/loader/Loader.js"></script>
<script src="../src/loader/LoaderParser.js"></script>
<script src="../src/sound/Sound.js"></script>
<script src="../src/sound/SoundManager.js"></script>
<script src="../src/utils/Debug.js"></script>
<script src="../src/utils/Color.js"></script>
<script src="../src/physics/arcade/ArcadePhysics.js"></script>
<script src="../src/physics/arcade/Body.js"></script>
<script src="../src/particles/Particles.js"></script>
<script src="../src/particles/arcade/ArcadeParticles.js"></script>
<script src="../src/particles/arcade/Emitter.js"></script>
<script src="../src/tilemap/Tile.js"></script>
<script src="../src/tilemap/Tilemap.js"></script>
<script src="../src/tilemap/TilemapLayer.js"></script>
<script src="../src/tilemap/TilemapParser.js"></script>
<script src="../src/tilemap/Tileset.js"></script>
<script src="../src/PixiPatch.js"></script>
<script src="_site/js/phaser-viewer.js" type="text/javascript"></script>
</head>
<body>
<div id="phaser-example"></div>
<textarea id="sourcecode" style="margin-top: 16px; width: 800px; height: 600px"></textarea>
</body>
</html>

View file

@ -12,7 +12,7 @@
<div class="box100 no-padding">
<div class="phaser-version">
<span>Phaser Version: 1.1</span>
<a href="" class="version-button">1.2 dev branch</a>
<a href="https://github.com/photonstorm/phaser/tree/dev" class="version-button">1.2 dev branch</a>
</div>
</div>
@ -36,7 +36,11 @@
</div>
</div>
<div class="clear clear25"></div>
<p>Some stuff here</p>
<div id="examples-list" class="line go-top border-bottom"></div>
<div class="clear"></div>
<div id="footer" class="footer">
<div class="main-container centered">

29
examples/sideview.html Normal file
View file

@ -0,0 +1,29 @@
<!doctype html>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>phaser examples</title>
<link href="_site/css/phaser-lite.css" media="screen" rel="stylesheet" type="text/css">
<script src="_site/js/jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="_site/js/phaser-sideview.js" type="text/javascript"></script>
</head>
<body>
<!--
sideview.html layout inspired / borrowed in part from the three.js examples viewer
-->
<div id="header"></div>
<div id="panel">
<div id="examples-list"></div>
</div>
<div id="footer">
<p id="total">Total examples: </p>
<p>Phaser version: 1.1</p>
<p><a href="index.html">Switch to Full View</a></p>
</div>
<iframe id="viewer"></iframe>
</body>
</html>