Some cleaning 😢

server/controllers/before-begin/index.js

@@ -0,0 +1,9 @@
+module.exports.index = function(req, res) {
+
+    res.setHeader('Content-Type', 'text/html');
+
+    res.render('index.jade', res.locals, function(err, result) {
+        res.send(result);
+    });
+};
+

server/controllers/before-begin/urls.js

@@ -0,0 +1,3 @@
+module.exports = {
+    '/before-begin': 'index',
+};

server/controllers/before-begin/views/index.jade

@@ -0,0 +1,24 @@
+extends ../../../views/base.jade
+
+block content
+    h1 Now, things are getting serious
+    p.
+        You have successfully completed the tutorial ! Congratulations ! Now, things are getting
+        serious.
+    p.
+        You will be prompted with three successive scenes, each of which
+        containing 8 red coins. Your mission is simple: you have to collect the
+        8 red coins.
+    p.
+        There may be recommendations like the ones you saw in the tutorial :
+        they are here to help you navigate in the scene. Use them or ignore
+        them at your convenience.
+
+    button#next.btn.btn-success.navbar-btn(style={'margin-right':'10px', 'margin-bottom':'10px'})
+        span Go to the next step
+    script.
+        document.getElementById('next').onclick = function() {
+            document.getElementById('next').disabled = true;
+            window.location = '/prototype/play';
+        }
+

server/controllers/bouncing/index.js

@@ -0,0 +1,7 @@
+module.exports.index = function(req, res) {
+    res.setHeader('Content-Type', 'text/html');
+
+    res.render('index.jade', res.locals, function(err, result) {
+        res.send(result);
+    });
+};

server/controllers/bouncing/urls.js

@@ -0,0 +1,3 @@
+module.exports = {
+    '/bouncing' : 'index'
+};

server/controllers/bouncing/views/index.jade

@@ -0,0 +1,13 @@
+extends ../../../views/withjs
+block title
+    title #{title} - Bouncing cube
+
+block extrajs
+    script(src="/static/js/bouncing.min.js")
+
+block content
+    h2 Bouncing cube
+
+    p Click on the cube to make it jump !
+
+    #container

server/controllers/feedback/index.js

@@ -0,0 +1,12 @@
+var db = require('../prototype/dbrequests.js');
+
+module.exports.index = function(req, res) {
+    db.verifyUser(req.session.userId, function() {});
+
+    res.setHeader('Content-Type', 'text/html');
+
+    res.render('index.jade', res.locals, function(err, result) {
+        res.send(result);
+    });
+};
+

server/controllers/feedback/urls.js

@@ -0,0 +1,3 @@
+module.exports = {
+    '/feedback': 'index',
+};

server/controllers/feedback/views/index.jade

@@ -0,0 +1,85 @@
+extends ../../../views/base.jade
+
+mixin message
+    span(style={'margin-bottom':'10px', 'margin-right': '10px'})
+        block
+        br
+
+mixin question(id, qu, info)
+    label(for="#{id}", style={'margin-right':'10px'}) #{qu}
+    if (info !== undefined)
+        span.glyphicon.glyphicon-question-sign(type='button', data-toggle='tooltip', data-placement='top', title='#{info}')
+    input.form-control(name="answer#{id}", type="text", placeholder="Answer")
+
+mixin rate(id, qu, info)
+    div
+        label(for="anwser#{id}", style={'margin-right':'10px'}) #{qu}
+        if (info !== undefined)
+            span.glyphicon.glyphicon-question-sign(type='button', data-toggle='tooltip', data-placement='top', title='#{info}')
+                //-input.rating(id="answer#{id}", name="answer#{id}", type="number", min='0', max='5', step='1', default='3')
+
+        br
+        input(type='radio', name='answerItem#{id}', value='1', style={'margin-right':'10px'})
+        +message Very easy
+        input(type='radio', name='answerItem#{id}', value='2', style={'margin-right':'10px'})
+        +message Easy
+        input(type='radio', name='answerItem#{id}', value='3', style={'margin-right':'10px'})
+        +message Medium
+        input(type='radio', name='answerItem#{id}', value='4', style={'margin-right':'10px'})
+        +message Hard
+        input(type='radio', name='answerItem#{id}', value='5', style={'margin-right':'10px'})
+        +message Very hard
+        div(style={'margin-bottom':'10px'})
+
+block extrahead
+    link(rel="stylesheet", href="/static/css/feedback.css")
+    link(rel="stylesheet", href="/static/css/star-rating.min.css")
+
+//-block extrajs
+    script(src="/static/js/star-rating.min.js")
+    script $(function () { $('[data-toggle="tooltip"]').tooltip() })
+    script.
+        var liste = [1,2];
+        for (var i = 0; i < liste.length; i++) {
+            $("#answer" + liste[i]).rating({showClear: false, showCaption: false, size:'xs'});
+            $("#answer" + liste[i]).rating('update', 3);
+        }
+
+block content
+    script.
+        function checkForm() {
+            var allAnswered = true;
+            $("input:radio").each(function(){
+                var name = $(this).attr("name");
+                if($("input:radio[name="+name+"]:checked").length == 0)
+                {
+                    allAnswered = false;
+                }
+            });
+            $("input:text").each(function(){
+                if ($(this).val().length === 0) {
+                    allAnswered = false;
+                }
+            });
+            if (!allAnswered) {
+                alert('You did not answer all the questions');
+                return false;
+            }
+        }
+
+    form.form-signin(method="POST", action='/feedback-target', onsubmit='return checkForm()')
+        h2 Please give us your feedback
+
+        +rate(1, "What was the difficulty level WITHOUT recommendation ?")
+        +rate(2, "What was the difficulty level WITH recommendation ?")
+        +question(3, "Did the recommendations help you to find the coins ?")
+        +question(4, "Did the recommendations help you to browse the scene ?")
+        +question(5, "Do you think recommendations can be helpful ?")
+        +question(6, "Which recommendation style do you prefer and why ?")
+        +question(7, "Did you enjoy this ?")
+
+        //-label(for='input1') Did you have trouble to find the coins during the first step ?
+        //-input#input1.form-control(name="input1", type="text", placeholder='Id')
+
+        button.btn.btn-lg.btn-primary.btn-block(type='submit') Submit
+

server/controllers/index/index.js

@@ -0,0 +1,7 @@
+module.exports.index = function(req, res) {
+    res.setHeader('Content-Type', 'text/html');
+
+    res.render('index.jade', res.locals, function(err, out) {
+        res.send(out);
+    });
+};

server/controllers/index/urls.js

@@ -0,0 +1,3 @@
+module.exports = {
+    '/': 'index'
+};

server/controllers/index/views/index.jade

@@ -0,0 +1,41 @@
+extends ../../../views/main
+
+block title
+    title #{title} - Index
+
+block content
+    h2 Index
+    ul
+        li
+            a(href="#{urls.bouncing}") A bouncing cube that jumps when you click on it
+            p.
+                Jumps and bounce when you click on it.
+
+        li
+            a(href="#{urls.multisphere}") Sphere with multi-resolution
+            p.
+                Lots of obj files loaded and displayed. When you click
+                somewhere, the current obj is hidden and the next one, with a
+                better resolution is shown.
+
+        li
+            a(href="#{urls.prototype}") A proto of the real thing
+            p.
+                You can move the camera with the arrow keys and move the angle of
+                the camera with 2, 4, 6 and 8 (the arrows of the numpad), or you
+                can do a drag-and-drop like (click on the mouse to grap the scene,
+                and move the mouse to rotate the camera). You can also select a
+                camera by clicking on the red part of it, and get back to the free
+                camera by clicking again.  You can also select a camera by simply
+                clicking on the object you want to see. The program will choose the
+                camera that you want, and move to it progressively.
+
+        li
+            a(href="#{urls.stream}") Sphere streaming
+            p.
+                Streaming of 3D obj model of sphere
+
+        li
+            a(href="#{urls.sponza}") Sponza streaming
+            p.
+                If you like streaming big models !

server/controllers/intro/index.js

@@ -0,0 +1,12 @@
+module.exports.index = function(req, res) {
+
+    req.session.workerId = req.params.workerId;
+    req.session.save();
+
+    res.setHeader('Content-Type', 'text/html');
+
+    res.render('index.jade', res.locals, function(err, result) {
+        res.send(result);
+    });
+};
+

server/controllers/intro/urls.js

@@ -0,0 +1,4 @@
+module.exports = {
+    '/intro': 'index',
+    '/intro/:workerId': 'index',
+};

server/controllers/intro/views/index.jade

@@ -0,0 +1,20 @@
+extends ../../../views/base.jade
+
+block content
+    h1 Welcome !
+    p This study consists in four consecutive steps :
+        ol
+            li Enter some personal information that we will use for statistics purposes
+            li Complete a tutorial to learn how to use the 3D navigation interface
+            li Play a game in which you have to find coins hidden in a 3D world. You need to play the game in 3 different scenes.
+            li Complete a short questionnaire to give us feedback on the 3D navigation interface
+    h2#start
+
+block extrajs
+    script.
+        var isOpera = window.navigator.userAgent.indexOf("OPR") > -1 || window.navigator.userAgent.indexOf("Opera") > -1;
+        if (($.browser.chrome || $.browser.mozilla) && !isOpera) {
+            $('#start').html('You can now <a href="/user-study">start when you are ready</a>');
+        } else {
+            $('#start').html('Sorry, your browser is not compatible... please try again with Firefox or Chrome');
+        }

server/controllers/list/index.js

@@ -0,0 +1,7 @@
+module.exports.index = function(req, res) {
+    res.setHeader('Content-Type', 'text/html');
+
+    res.render('index.jade', res.locals, function(err, out) {
+        res.send(out);
+    });
+};

server/controllers/list/urls.js

@@ -0,0 +1,3 @@
+module.exports = {
+    '/list': 'index'
+};

server/controllers/list/views/index.jade

@@ -0,0 +1,10 @@
+extends ../../../views/main
+
+block title
+    title #{title} - Test
+
+block extrajs
+    script(src='/static/js/ListTest.min.js')
+
+block content
+    Hello

server/controllers/logout/index.js

@@ -0,0 +1,7 @@
+module.exports.index = function(req, res) {
+
+    req.session = null;
+    res.locals.session = null;
+    res.redirect('/');
+
+};

server/controllers/logout/urls.js

@@ -0,0 +1,3 @@
+module.exports = {
+    '/logout': 'index'
+};

server/controllers/multisphere/index.js

@@ -0,0 +1,7 @@
+module.exports.index = function(req, res) {
+    res.setHeader('Content-Type', 'text/html');
+
+    res.render('index.jade', res.locals, function(err, result) {
+        res.send(result);
+    });
+};

server/controllers/multisphere/urls.js

@@ -0,0 +1,3 @@
+module.exports = {
+    '/multisphere': 'index'
+};

server/controllers/multisphere/views/index.jade

@@ -0,0 +1,19 @@
+extends ../../../views/main.jade
+
+block title
+    title #{title} - Multi-sphere
+
+block extrajs
+    script(src="/static/js/three.min.js")
+    script(src="/static/js/l3d.min.js")
+    script(src="/static/js/multisphere.min.js")
+
+block content
+    h2 Multiresolution sphere
+
+    p.
+        This is the first test of multi-resolution. In fact, it's not really one
+        multi-resolution sphere but many spheres with different resolutions. You
+        can change resolution by clicking on the canvas.
+
+    #container

server/controllers/prototype/index.js

@@ -0,0 +1,278 @@
+var tools = require('../../lib/filterInt');
+var pg = require('pg');
+var pgc = require('../../private');
+var db = require('./dbrequests');
+
+module.exports.index = function(req, res) {
+    res.setHeader('Content-Type', 'text/html');
+
+    res.render('index.jade', res.locals, function(err, result) {
+        res.send(result);
+    });
+};
+
+var sceneToFunction = function(scene) {
+    switch (scene) {
+        case 2:
+            return 'L3D.initBobomb';
+        case 3:
+            return 'L3D.initMountain';
+        case 4:
+            return 'L3D.initWhomp';
+        default:
+            return 'L3D.initPeach';
+    }
+};
+
+module.exports.game = function(req, res) {
+
+    req.session.experiments = req.session.experiments || [];
+    req.session.save();
+
+    db.checkUserId(req.session.userId, function(ok) {
+
+        if (ok) {
+
+            db.createExp(
+                req.session.userId,
+                req.session.experiments,
+                function(expId, sceneId, coinCombinationId, recommendationStyle, coins) {
+
+                    // if (expId === undefined) {
+
+                    //     req.session.finished = true;
+                    //     req.session.save();
+                    //     return;
+
+                    // }
+
+                    // req.session.expId = expId;
+                    // req.session.save();
+
+                    // res.locals.scene = sceneToFunction(sceneId);
+                    // res.locals.recommendationStyle = recommendationStyle;
+                    // res.locals.coins = coins;
+
+                    // res.setHeader('Content-Type','text/html');
+                    // res.send("Ok");
+                });
+
+        } else {
+
+
+        }
+
+    });
+};
+
+module.exports.play = function(req, res) {
+
+    req.session.counter = req.session.counter === undefined ? 0 : req.session.counter + 1;
+    req.session.save();
+
+    if (req.session.counter > 2) {
+
+        res.redirect('/feedback');
+        return;
+
+    }
+
+    req.session.experiments = req.session.experiments || [];
+
+    db.getLastExp(req.session.userId, function(expId, sceneId, coinId, recoStyle, coins) {
+
+        // if (coinId === undefined) {
+        //     console.log("=== ERROR : COIN_ID IS UNDEFINED ===");
+        //     process.exit(-1)
+        // }
+
+        res.locals.scene = sceneToFunction(sceneId);
+        res.locals.recommendationStyle = recoStyle;
+        res.locals.coins = coins;
+
+        // var elt = req.session.experiments.find(function(elt) {
+        //     return elt.coinCombinationId === coinId;
+        // });
+
+        // if (elt !== undefined) {
+        //     console.log("=== ERROR DETECTED === user " + req.session.userId);
+        //     console.log(req.session.experiments);
+        //     console.log(coinId);
+        //     process.exit(-1)
+        // }
+
+        req.session.experiments.push({
+            sceneId: sceneId,
+            recommendationStyle: recoStyle,
+            coinCombinationId : coinId
+        });
+
+        req.session.expId = expId;
+        req.session.save();
+
+        // Prepare next experiment
+        module.exports.game(req, null);
+
+        res.setHeader('Content-Type', 'text/html');
+        res.render('prototype_recommendation.jade', res.locals, function(err, result) {
+            res.send(result);
+        });
+    });
+
+};
+
+module.exports.sponza = function(req, res) {
+    res.setHeader('Content-Type', 'text/html');
+
+    res.render('sponza.jade', res.locals, function(err, result) {
+        res.send(result);
+    });
+};
+
+module.exports.replayInfo = function(req, res) {
+    res.setHeader('Content-Type', 'text/plain');
+
+    // Parse id
+    var id = tools.filterInt(req.params.id);
+
+    db.getInfo(id, function(results) {
+        res.send(JSON.stringify(results));
+    });
+};
+
+module.exports.replay = function(req, res, next) {
+    // Get id parameter
+    res.locals.id = tools.filterInt(req.params.id);
+
+    if (res.locals.id <= 0) {
+        var err = new Error("This replay does not exist");
+        err.status = 404;
+        next(err);
+        return;
+    }
+
+    db.checkExpId(res.locals.id, function(sceneId) {
+        if (sceneId === null) {
+            var err = new Error("This replay does not exist");
+            err.status = 404;
+            next(err);
+        } else {
+            res.locals.initjs = sceneToFunction(sceneId);
+            res.setHeader('Content-Type', 'text/html');
+            res.render('prototype_replays.jade', res.locals, function(err, result) {
+                res.send(result);
+            });
+        }
+    });
+};
+
+module.exports.replayIndex = function(req, res, next) {
+    db.getAllExps(function(result) {
+        res.locals.users = result;
+
+        res.setHeader('Content-Type', 'text/html');
+        res.render("replay_index.jade", res.locals, function(err, result) {
+            res.send(result);
+        });
+    });
+};
+
+module.exports.tutorial = function(req, res) {
+
+    if (req.session.tutorialDone) {
+
+        res.redirect('/before-begin');
+        return;
+
+    }
+
+    db.checkUserId(req.session.userId, function(ok) {
+
+        if (ok) {
+
+            // 1 is the ID of peach scene
+            db.createTutorial(req.session.userId, function(id, coins) {
+
+                // Generate next experiment
+                module.exports.game(req, null);
+
+                req.session.tutorialDone = true;
+                req.session.expId = id;
+                res.locals.coins = coins;
+                req.session.save();
+
+                res.setHeader('Content-Type', 'text/html');
+                res.render('tutorial.jade', res.locals, function(err, result) {
+                    res.send(result);
+                });
+            });
+
+        } else {
+
+            res.redirect('/');
+
+        }
+
+    });
+
+};
+
+function editorHelper(templateName) {
+
+    return function(req, res, next) {
+
+        var scene = req.params.scene;
+
+        switch (scene) {
+
+            case 'peach':            res.locals.scene = "L3D.initPeach";    break;
+            case 'coolcoolmountain': res.locals.scene = "L3D.initMountain"; break;
+            case 'whomp':            res.locals.scene = "L3D.initWhomp";    break;
+            case 'bobomb':           res.locals.scene = "L3D.initBobomb";   break;
+            default:
+                // 404
+                var err = new Error('Incorrect scene');
+                err.status = 404;
+                next(err);
+                break;
+
+        }
+
+        res.setHeader('Content-Type', 'text/html');
+        res.render(templateName, res.locals, function(err, result) {
+            res.send(result);
+        });
+
+    };
+
+}
+
+module.exports.clicker = editorHelper('prototype_clicker.jade');
+module.exports.viewer = editorHelper('prototype_viewer.jade');
+module.exports.checker = editorHelper('prototype_checker.jade');
+
+module.exports.userstudy = function(req, res) {
+
+    if (req.session.userId !== undefined) {
+
+        res.redirect('/prototype/tutorial');
+        return;
+
+    }
+
+    res.locals.identificationFailed = req.session.identificationFailed;
+    req.session.identificationFailed = false;
+    req.session.save();
+
+    res.locals.workerId = req.session.workerId;
+
+    res.setHeader('Content-Type', 'text/html');
+    res.render('user_study.jade', res.locals, function(err, result) {
+        res.send(result);
+    });
+
+};
+
+module.exports.next = function(req, res) {
+    res.redirect('/prototype/game');
+};

server/controllers/prototype/urls.js

@@ -0,0 +1,15 @@
+module.exports = {
+    '/prototype': 'index',
+    '/prototype/game': 'game',
+    '/prototype/replay': 'replayIndex',
+    '/prototype/replay/:id': 'replay',
+    '/prototype/replay-info/:id': 'replayInfo',
+    '/prototype/tutorial': 'tutorial',
+    '/prototype/sponza': 'sponza',
+    '/prototype/coin-creator/:scene': 'clicker',
+    '/prototype/coin-viewer/:scene': 'viewer',
+    '/prototype/coin-checker/:scene': 'checker',
+    '/user-study': 'userstudy',
+    '/prototype/next': 'next',
+    '/prototype/play': 'play'
+};

server/controllers/prototype/views/index.jade

@@ -0,0 +1,17 @@
+extends ../../../views/main
+
+block title
+    title #{title} - Prototype
+
+block content
+    h2 Index
+    p The tutorial is available <a href="#{urls.tutorial}">here</a>.
+    p There are three prototypes here :
+        ul
+            li
+                a(href="arrows/") Arrows
+            li
+                a(href="reverse/") Reversed arrows looking like funnel
+            li
+                a(href="viewports/") Viewports
+    p You can also watch replays of previous experiences <a href="#{urls.replayIndex}">here</a>.

server/controllers/prototype/views/prototype.jade

@@ -0,0 +1,54 @@
+extends ../../../views/withjs
+
+block title
+    title #{title} - Prototype
+
+block extrajs
+    script(src="/static/js/l3dp.min.js")
+    block configjs
+    block mainjs
+    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'})
+        block description
+        #alert-placeholder
+        .progress
+            .progress-bar.progress-bar-striped.active(role='progress-bar', aria-valuenow='0',aria-valuemin="0", aria-valuemax="100", style={width:'0%'})
+                #percentage 0%
+
+        div(style="margin:5px")
+        #container(style={'padding': '0px', 'margin': '0px'}, tabindex="1")
+
+        nav.navbar.navbar-default.navbar-fixed-bottom
+            .container
+                button#reset.btn.btn-primary.navbar-btn(style={'margin-right': '10px', 'margin-bottom':'10px'}) Reset camera
+                block extrabutton
+
+                button#undo.btn.btn-default.navbar-btn(style={'margin-right': '10px', 'margin-bottom': '10px'})
+                    span.glyphicon.glyphicon-triangle-left('aria-hidden'="true")
+
+                button#redo.btn.btn-default.navbar-btn(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#lock(type="checkbox", style={'zoom':'1.7'}, checked)
+                label(for="lock" style={'margin-right':'10px', 'zoom': '1.7'}) Pointer lock
+
+                input#showarrows(type="checkbox", style={'margin-right': '10px', 'margin-bottom': '10px', 'display':'none'}, checked)
+                label(for="showarrows" style={'margin-right':'10px', 'display': 'none'}) Show arrows
+
+                block lastbutton
+
+                //-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")
+

server/controllers/prototype/views/prototype_checker.jade

@@ -0,0 +1,15 @@
+extends ./prototype
+
+block title
+    title #{title} - Prototype
+
+block mainjs
+    script initMainScene = #{scene};
+    script Recommendation = L3D.ArrowRecommendation;
+
+    script(src="/static/js/coinchecker.min.js")
+
+block extrabutton
+    //-button#save.btn.btn-primary.navbar-btn(style={'margin-right': '10px', 'margin-bottom':'10px'}, onclick="saveCoins();") Save coins
+    button#coins-remaining.btn.btn-primary.navbar-btn(style={'margin-right':'10px', 'margin-bottom':'10px'}) Lol coins remaining
+

server/controllers/prototype/views/prototype_clicker.jade

@@ -0,0 +1,14 @@
+extends ./prototype
+
+block title
+    title #{title} - Prototype
+
+block mainjs
+    script initMainScene = #{scene};
+    script Recommendation = L3D.ArrowRecommendation;
+
+    script(src="/static/js/coincreator.min.js")
+
+block extrabutton
+    button#save.btn.btn-primary.navbar-btn(style={'margin-right': '10px', 'margin-bottom':'10px'}, onclick="saveCoins();") Save coins
+

server/controllers/prototype/views/prototype_interactive.jade

@@ -0,0 +1,53 @@
+extends ./prototype
+
+block title
+    title #{title} - Prototype
+
+block mainjs
+    script initMainScene = #{scene};
+    script locked = #{session.locked === undefined ? 'true' : session.locked};
+    script(src="/static/js/prototypeinteractive.min.js")
+
+block description
+    //-#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.
+
+                block preciseDescription
+
+                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 !

server/controllers/prototype/views/prototype_recommendation.jade

@@ -0,0 +1,18 @@
+extends ./prototype_interactive
+
+block title
+    title #{title} - Prototype - Arrows
+
+block configjs
+    script Recommendation = #{recommendationStyle}; coinsId = [#{coins}];
+
+block lastbutton
+    button#next.btn.btn-success.navbar-btn(style={'margin-right':'10px', 'margin-bottom':'10px', 'display':'none'})
+        span Go to the next step
+
+//-block preciseDescription
+    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.

server/controllers/prototype/views/prototype_replays.jade

@@ -0,0 +1,21 @@
+extends ../../../views/withjs
+
+block title
+    title #{title} - Prototype
+
+block prepend js
+    script DB_DISABLED = true;
+
+block extrajs
+    script Recommendation = L3D.ArrowRecommendation;
+    script var params = params || {}; params.get = params.get || {}; params.get.id = #{id};
+    script initMainScene = #{initjs}
+    script(src="/static/js/l3dp.min.js")
+    script(src="/static/js/replay.min.js")
+
+block extrahead
+    link(rel="stylesheet" href="/static/css/prototype.css")
+
+block content
+    #main-div.panel-group(style={'margin-top':'10px', 'margin-bottom':'10px'})
+        #container(style={'padding': '0px', 'margin': '0px'}, tabindex="1")

server/controllers/prototype/views/prototype_reverse.jade

@@ -0,0 +1,17 @@
+extends ./prototype_interactive
+
+block title
+    title #{title} - Prototype - Reverse
+
+block configjs
+    script Recommendation = L3D.ReverseRecommendation;
+
+//-block preciseDescription
+    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.
+

server/controllers/prototype/views/prototype_viewer.jade

@@ -0,0 +1,14 @@
+extends ./prototype
+
+block title
+    title #{title} - Prototype
+
+block mainjs
+    script initMainScene = #{scene};
+    script Recommendation = L3D.ArrowRecommendation;
+
+    script(src="/static/js/coinviewer.min.js")
+
+block extrabutton
+    button#save.btn.btn-primary.navbar-btn(style={'margin-right': '10px', 'margin-bottom':'10px'}, onclick="saveCoins();") Save coins
+

server/controllers/prototype/views/replay_index.jade

@@ -0,0 +1,13 @@
+extends ../../../views/main
+
+block title
+    title #{title} - Prototype - Replays
+
+block content
+    h2 Replays available
+    if users.length == 0
+        p Sorry, there are no replays available... try later or do an experiment !
+    else
+        ol
+            each elt in users
+                li <a href="/prototype/replay/#{elt.expId}">User <em>#{elt.username} (#{elt.userId})</em> for scene <em>#{elt.scenename}</em></a>

server/controllers/prototype/views/sponza.jade

@@ -0,0 +1,22 @@
+extends ./prototype_interactive
+
+block title
+    title #{title} - Prototype - Arrows
+
+block prepend js
+    script window.DB_DISABLED = true;
+
+block mainjs
+    script locked = false;
+    script(src="/static/js/prototypeinteractive.min.js")
+    script initMainScene = L3D.initSponza
+
+block configjs
+    script Recommendation = L3D.ArrowRecommendation;
+
+//-block preciseDescription
+    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.

server/controllers/prototype/views/tutorial.jade

@@ -0,0 +1,15 @@
+extends ./prototype
+
+block append extrahead
+    link(rel="stylesheet", href="/static/css/tutorial.css")
+
+block title
+    title #{title} - Prototype - Tutorial
+
+block configjs
+    script Recommendation = L3D.ArrowRecommendation; coinsId = [#{coins}];
+    script(src="/static/js/tutorial.min.js")
+
+block lastbutton
+    button#next.btn.btn-success.navbar-btn(style={'margin-right':'10px', 'margin-bottom':'10px', 'display':'none'})
+        span Go to the next step

server/controllers/prototype/views/user_study.jade

@@ -0,0 +1,107 @@
+extends ../../../views/base.jade
+
+block extrahead
+    link(rel="stylesheet", href="/static/css/signin.css")
+    link(rel="stylesheet", href="/static/css/star-rating.min.css")
+
+block extrajs
+    script(src="/static/js/star-rating.min.js")
+    script.
+        $('#3dgames').rating({
+            showClear: false,
+            showCaption: false,
+            size: 'xs'
+        });
+        $('#3dgames').rating('update', 3);
+    script $(function () { $('[data-toggle="tooltip"]').tooltip() })
+
+block extrabody
+    if identificationFailed
+        .container
+            .alert.alert-danger.alert-dismissible(role="alert", style={'margin-top':'20px'})
+                button.close(type="button", data-dismiss="alert", aria-label="Close")
+                    span(aria-hidden="true") ×
+                <strong>Error</strong> : this id is already used !
+
+block content
+    script.
+        function validateForm() {
+            if (document.getElementById('sel1').selectedIndex === -1) {
+                alert('Select a correct age please');
+                return false;
+            }
+            if (document.getElementById('sel2').selectedIndex === -1) {
+                alert('Select a correct date for the last time you played please');
+                return false;
+            }
+            return true;
+        }
+    form#form.form-signin(method="POST", action='/identification')
+        h2 Please sign in
+        label(for='inputId').sr-only Id
+        if (workerId === undefined)
+            input#inputId.form-control(name="inputId", type="text", placeholder='Id', required, autofocus)
+        else
+            input#inputId.form-control(name="inputId", type="text", placeholder='Id', required, autofocus, disabled, value="#{workerId}")
+
+        .form-group
+            label Gender
+            .form-group
+                label.radio-inline
+                    input(type='radio', name='inputGender', value="male", checked)
+                    | Male
+                label.radio-inline
+                    input(type='radio', name='inputGender', value="female")
+                    | Female
+
+        .form-group
+            label(for='sel1') How old are you ?
+            select.form-control#sel1(name="inputAge")
+                option(value='-15') Less than 15
+                option(value='15-20') Between 15 and 18
+                option(value='18-25') Between 18 and 25
+                option(value='25-30') Between 25 and 30
+                option(value='30-35') Between 30 and 35
+                option(value='35-40') Between 35 and 40
+                option(value='40-45') Between 40 and 45
+                option(value='45-50') Between 45 and 50
+                option(value='50-55') Between 50 and 55
+                option(value='55-60') Between 55 and 60
+                option(value='60-') More than 60
+                script.
+                    document.getElementById('sel1').selectedIndex = -1;
+
+
+        .form-group
+            label(for='se21', style={'margin-right':'10px'}) When is the last time you played a 3D video game ?
+            span.glyphicon.glyphicon-question-sign(type='button', data-toggle='tooltip', data-placement='top', title='Any game will count (PC or console, old or recent)')
+            select.form-control#sel2(name="inputLastTime")
+                option(value='3') This week
+                option(value='2') This month
+                option(value='1') This year
+                option(value='0') I never played a 3D video game
+                script.
+                    document.getElementById('sel2').selectedIndex = -1;
+
+        label(for='3dgames', style={'margin-right':'10px'}) Rate your 3D game skills
+
+        ul
+            li 1 star if you never play video games
+            li 2 stars if you rarely play games
+            li 3 stars if you are used to play console (PlayStation, Xbox, Nintendo, portable devices included)
+            li 4 stars if you are used to play first-person-view games
+            li 5 stars if you are good at first-person-view games
+
+        input#3dgames(type='number', class='rating', min='0', max='5', step='1', default='3', name='input3dskills')
+
+        button#submitButton.btn.btn-lg.btn-primary.btn-block(type='submit') Sign in
+        script.
+            document.getElementById('submitButton').onclick = function(event) {
+                event.preventDefault();
+                document.getElementById('submitButton').disabled = true;
+                if (validateForm()) {
+                    document.getElementById('form').submit();
+                } else {
+                    document.getElementById('submitButton').disabled = false;
+                }
+            }

server/controllers/stream/index.js

@@ -0,0 +1,25 @@
+var tools = require('../../lib/filterInt');
+
+module.exports.index = function(req, res, next) {
+
+    // Parse get argument res
+    res.locals.resolution = req.params.res;
+
+    if (res.locals.resolution === undefined) {
+        res.locals.resolution = 5;
+    } else {
+        res.locals.resolution = tools.filterInt(res.locals.resolution);
+    }
+
+    if (isNaN(res.locals.resolution) || res.locals.resolution < 1 || res.locals.resolution > 25) {
+        var error = new Error("Resolution was not set properly");
+        error.status = 404;
+        next(error);
+        return;
+    }
+
+    res.setHeader('Content-Type', 'text/html');
+    res.render('index.jade', res.locals, function(err, result) {
+        res.send(result);
+    });
+};

server/controllers/stream/urls.js

@@ -0,0 +1,3 @@
+module.exports = {
+    '/stream/:res?': 'index'
+};

server/controllers/stream/views/index.jade

@@ -0,0 +1,48 @@
+extends ../../../views/main
+
+block title
+    title #{title} - Sphere streaming
+
+block extrajs
+    script params = {}; params.get= {}; params.get.res = #{resolution}
+    script(src="/static/js/three.min.js")
+    script(src="/static/js/socket.io.min.js")
+    script(src="/static/js/l3d.min.js")
+    script(src="/static/js/streamingsimulator.min.js")
+    script(type='text/javascript').
+        $(function() {
+            var filterInt = function (value) {
+                if(/^(\-|\+)?([0-9]+|Infinity)$/.test(value))
+                    return Number(value);
+                        return NaN;
+            }
+
+            $('#form').submit(function(e) {
+                e.preventDefault();
+                var val = filterInt(document.getElementById('num').value);
+                window.location.href = "/stream/" + val;
+            });
+        });
+
+block content
+    h2 Sphere streaming
+
+    p.
+        <s>In fact, it's not really streaming. The sphere is fully preloaded
+        and then, a mesh is created and vertices and faces are dynamically
+        added to this mesh as time goes by.</s>
+
+    p.
+        In fact, it is acutally streaming. If you web browser supports
+        WebSocket, you'll connect to the server and the mesh will be streamed
+        onto the socket and the faces will be displayed as soon as you receive
+        them.
+
+    form.form-inline#form
+        .form-group
+            label Try another resolution (between 1 and 25)
+            input#num(type='number', min=1, max=25, value=5, style={"margin-left":"10px"})
+        .form-group
+            button#submit.btn.btn-primary(type='submit', style={"margin-left":"10px"}) Go
+
+    #container

server/controllers/thankyou/index.js

@@ -0,0 +1,25 @@
+var db = require('../prototype/dbrequests.js');
+var vcode = require('../../lib/vcode.js');
+
+module.exports.index = function(req, res) {
+
+    // If not micro-worker
+    if (req.session.workerId === undefined) {
+
+        res.setHeader('Content-Type', 'text/html');
+
+        res.render('normal.jade', res.locals, function(err, result) {
+            res.send(result);
+        });
+
+        return;
+    }
+
+    res.setHeader('Content-Type', 'text/html');
+
+    res.render('vcode.jade', res.locals, function(err, result) {
+        res.send(result);
+    });
+
+};
+

server/controllers/thankyou/urls.js

@@ -0,0 +1,3 @@
+module.exports = {
+    '/thankyou': 'index',
+};

server/controllers/thankyou/views/normal.jade

@@ -0,0 +1,8 @@
+extends ../../../views/base.jade
+
+block content
+    h1 Thank you for everything !
+    audio(autoplay)
+        source(src="/static/data/music/thankyou.ogg")
+        source(src="/static/data/music/thankyou.mp3")
+

server/controllers/thankyou/views/vcode.jade

@@ -0,0 +1,36 @@
+extends ../../../views/base.jade
+
+block content
+    h1 Thank you for everything !
+    audio(autoplay)
+        source(src="/static/data/music/thankyou.ogg")
+        source(src="/static/data/music/thankyou.mp3")
+
+    p We are verifying that the experiment was correctly done...
+        #vcode
+
+    script.
+        function tryVcode() {
+            var xhr = new XMLHttpRequest();
+            xhr.open('GET', '/vcode', true);
+            xhr.onreadystatechange = function (aEvt) {
+                if (xhr.readyState == 4) {
+                    if(xhr.status == 200) {
+                        changeHtml(xhr.responseText);
+                    }
+                }
+            };
+            xhr.send(null);
+        }
+
+        function changeHtml(vcode) {
+            if (vcode === 'not ready') {
+                setTimeout(tryVcode, 1000);
+            } else if (vcode === 'no vcode') {
+                $('#vcode').html('Sorry, the experiment has not been correctly done ! You have no vcode.');
+            } else {
+                $('#vcode').html('Your vcode is ' + vcode);
+            }
+        }
+
+        tryVcode();

server/controllers/vcode/index.js

@@ -0,0 +1,39 @@
+var db = require('../prototype/dbrequests.js');
+var vcode = require('../../lib/vcode.js');
+
+module.exports.index = function(req, res) {
+
+    // If not micro-worker
+    if (req.session.workerId === undefined) {
+
+        res.setHeader('Content-Type', 'text/html');
+
+        res.send(null);
+
+        return;
+    }
+
+    // Else, check that exp was correctly done
+    db.getUser(req.session.userId, function(workerId, ok) {
+
+        res.setHeader('Content-Type', 'text/html');
+
+        if (ok === true) {
+
+            var code = vcode(req.session.workerId);
+            res.send(code);
+
+        } else if (ok === false) {
+
+            res.send('no vcode');
+
+        } else {
+
+            res.send('not ready');
+
+        }
+
+    });
+
+};
+

server/controllers/vcode/urls.js

@@ -0,0 +1,3 @@
+module.exports = {
+    '/vcode': 'index',
+};