135 lines
6.8 KiB
Plaintext
135 lines
6.8 KiB
Plaintext
extends ../../../views/withjs
|
|
|
|
block title
|
|
title #{title} - Prototype
|
|
|
|
block extrajs
|
|
script(src="/static/js/prototype/ArrowCamera.js")
|
|
script(src="/static/js/prototype/FixedCamera.js")
|
|
script(src="/static/js/prototype/OldFixedCamera.js")
|
|
script(src="/static/js/prototype/ReverseCamera.js")
|
|
script(src="/static/js/prototype/initScene.js")
|
|
script(src="/static/js/prototype/raycasterTools.js")
|
|
script(src="/static/js/prototype/Previewer.js")
|
|
script(src="/static/js/prototype/ButtonManager.js")
|
|
script(src="/static/js/prototype/Coin.js")
|
|
script(src="/static/js/Logger.js")
|
|
|
|
if cameraStyle == 'replay'
|
|
script var params = params || {}; params.get = params.get || {}; params.get.id = #{id};
|
|
script(src="/static/js/ReplayCamera.js")
|
|
script(src="/static/js/prototype/replay.js")
|
|
else
|
|
if cameraStyle == 'arrows'
|
|
script RecommendedCamera = FixedCamera;
|
|
else if cameraStyle == 'viewports'
|
|
script RecommendedCamera = OldFixedCamera;
|
|
else if cameraStyle == 'reverse'
|
|
script RecommendedCamera = ReverseCamera
|
|
|
|
script(src="/static/js/prototype/main.js")
|
|
|
|
script document.getElementById('music').volume = 0.5;
|
|
|
|
block extrahead
|
|
link(rel="stylesheet" href="/static/css/prototype.css")
|
|
|
|
block content
|
|
#main-div.panel-group(style={'margin-top':'10px', 'margin-bottom':'10px'})
|
|
if cameraStyle != 'replay'
|
|
#instructions.panel.panel-default
|
|
.panel-heading
|
|
h4.panel-title
|
|
a(href="#", data-target="#collapseInstructions", data-toggle="collapse",onclick="setTimeout(onWindowResize,500);") Instructions
|
|
|
|
.panel-collapse.collapse.in#collapseInstructions
|
|
.panel-body
|
|
p
|
|
| This is the prototype of a 3D interface. You can move
|
|
| the camera with the arrow keys of your keyboard (or
|
|
| WASD if you like FPS-games, and by the way, if you
|
|
| use azerty keyboard, you can also use ZQSD instead),
|
|
| and change the angle of the camera by dragging and
|
|
| dropping the scene around it (you can also use your
|
|
| numpad, 2 to look lower, 8 to look higher, 4 to look
|
|
| on the left and 6 to look on the right, but if you're
|
|
| more comfortable with non-numpad keys, you can also
|
|
| use i for up, j for left, k for down, and l for
|
|
| right).
|
|
|
|
p
|
|
| This is a re-creation of the Bob-omb Battlefield
|
|
| level from Super Mario 64, and with its 8 red coins.
|
|
| You can click on them to get them, and once you got
|
|
| them all, you get... well you get nothing but the
|
|
| sound of the star is played (but the star doesn't
|
|
| appear... sorry guys)
|
|
|
|
p
|
|
| It contains <em>recommended views</em> : 3D objects
|
|
| here to guide you through this coin search.
|
|
|
|
if cameraStyle == 'arrows'
|
|
|
|
p
|
|
| Recommended views are displayed with a
|
|
| transparent blue arrow. They disappear when you
|
|
| come closer to them, and shows the motion between
|
|
| your current position and the recommendation.
|
|
|
|
else if cameraStyle == 'viewports'
|
|
|
|
p
|
|
| Recommended views are displayed with a
|
|
| transparent red rectangle and some lines.
|
|
| Basically, it represents the position of a camera
|
|
| (the point at the extramities of the lines
|
|
| represents the optical center, and the red
|
|
| rectangle represents the image plane).
|
|
|
|
else if cameraStyle == 'reverse'
|
|
|
|
p
|
|
| Recommended views are displayed with a strange
|
|
| blue object. Basically, the curve at the
|
|
| begining of this weird object shows the motion
|
|
| that starts from where you are and leads to the
|
|
| recommended view, and the extremity is in fact an
|
|
| object representing a camera.
|
|
|
|
p
|
|
| You can click on a recommendation to move to the
|
|
| recommended viewpoint. The recommendation will become
|
|
| more and more transparent as you come closer, and
|
|
| will disappear when you reach it.
|
|
|
|
p
|
|
| You may now <a href="#" data-target="#collapseInstructions" data-toggle="collapse" onclick="setTimeout(onWindowResize,500);">hide this panel</a> and start playing !
|
|
|
|
button#full.btn.btn-primary(style={'margin-right': '10px', 'margin-bottom': '10px'}) Fullscreen
|
|
button#reset.btn.btn-primary(style={'margin-right': '10px', 'margin-bottom':'10px'}) Reset camera
|
|
|
|
button#undo.btn.btn-default(style={'margin-right': '10px', 'margin-bottom': '10px'})
|
|
span.glyphicon.glyphicon-triangle-left('aria-hidden'="true")
|
|
|
|
button#redo.btn.btn-default(style={'margin-right': '10px', 'margin-bottom':'10px'})
|
|
span.glyphicon.glyphicon-triangle-right('aria-hidden'="true")
|
|
|
|
input#fullarrow(type="checkbox", style={'margin-right': '10px', 'margin-bottom': '10px'})
|
|
label(for="fullarrow" style={'margin-right':'10px'}) Full arrow
|
|
|
|
input#collisions(type="checkbox", style={'margin-right': '10px', 'margin-bottom': '10px'}, checked)
|
|
label(for="collisions" style={'margin-right':'10px'}) Collisions
|
|
|
|
input#showarrows(type="checkbox", style={'margin-right': '10px', 'margin-bottom': '10px'}, checked)
|
|
label(for="showarrows" style={'margin-right':'10px'}) Show arrows
|
|
|
|
input#recommendation(type="checkbox", style={'margin-right': '10px', 'margin-bottom': '10px'})
|
|
label(for="recommendation" style={'margin-right':'10px'}) Fixed prev
|
|
|
|
audio#music(controls, volume=0.5)
|
|
source(src="/static/data/music/bobomb.ogg")
|
|
source(src="/static/data/music/bobomb.mp3")
|
|
|
|
#container(style={'padding': '0px', 'margin': '0px'}, tabindex="1")
|