--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/web/choix.html Tue Dec 11 19:48:24 2012 +0100
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="fr">
+ <head>
+ <meta charset="utf-8">
+ <title>The End - @todo</title>
+
+ <meta name="description" content="@todo">
+
+ <!-- Mobile Specific Metas -->
+ <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+
+ <link rel="stylesheet" href="static/res/css/style_1024.css" />
+ <!-- stylesheet for ipad 3
+ <link rel="stylesheet" href="static/res/css/style_2048.css" />
+ -->
+
+ </head>
+ <body>
+ <!-- div content - site takes the full height of browser -->
+ <div id="content" class="full_screen">
+ <!--this div empty allows the element content_vcentering to be vertically aligned -->
+ <div class="strut"></div><!--
+ this comment corrects the white-space (display: inline);
+ --><section id="bg_mosaic" class="fullScreen_vcentering">
+ <canvas id="mosaic" width="100" height="100"></canvas>
+ </section>
+ <section id="choix" class="container_vcentering choix">
+ <!--this div empty allows the element content_vcentering to be vertically aligned -->
+ <div class="strut"></div><!--
+ this comment corrects the white-space (display: inline);
+ --><div class="fullScreen_vcentering box_vcentering blue big_txt">
+ <p><a id="mot1" onClick="incChoice.selectWord(0);">Famille</a></p>
+ <p><a id="mot2" onClick="incChoice.selectWord(1);">Amour</a></p>
+ <p><a id="mot3" onClick="incChoice.selectWord(2);">Travail</a></p>
+ <p><a id="mot4" onClick="incChoice.selectWord(3);">International</a></p>
+ <p><a id="mot5" onClick="incChoice.selectWord(4);">Dieu</a></p>
+ <p><a id="mot6" onClick="incChoice.selectWord(5);">Président</a></p>
+ </div>
+ </section>
+ </div>
+
+ <!-- Metanav FranceTV -->
+ <script src="http://static.francetv.fr/js/jquery.metanav-min.js" charset="utf-8"></script>
+ <!-- JavaScript -->
+ <script src="static/res/js/jquery-1.8.2.min.js"></script>
+ <script src="static/res/js/jquery.cookie.js"></script>
+ <script src="static/res/js/ease.js"></script>
+ <script src="static/res/js/incresize.js"></script>
+ <script src="static/res/js/incmosaic.js"></script>
+ <script src="static/res/js/incchoice.js"></script>
+ <script>
+ $(function() {
+ // Init the resize object
+ incResize.init("content", null, "mosaic", null, null, 130, 1920/809, null, incMosaic.registerPostNewCanvasSize);
+
+ // Set the mosaic effect
+ incChoice.setMosaicEffect(["choix1fond1.jpg", "choix1fond2.jpg", "choix1fond3.jpg"],
+ ["choix2fond1.jpg", "choix2fond2.jpg", "choix2fond3.jpg"],
+ "choix_2.html");
+ incChoice.currentWorldIndex = 0;
+ });
+ </script>
+ </body>
+</html>
\ No newline at end of file
--- a/web/choix_1.html Tue Dec 11 17:39:04 2012 +0100
+++ b/web/choix_1.html Tue Dec 11 19:48:24 2012 +0100
@@ -23,12 +23,12 @@
this comment corrects the white-space (display: inline);
--><section class="fullScreen_vcentering container_vcentering choix">
<div id="choix1" class="box_vcentering blue big_txt">
- <p><a onClick="incChoice.selectWord('famille');">Famille</a></p>
- <p><a onClick="incChoice.selectWord('amour');">Amour</a></p>
- <p><a onClick="incChoice.selectWord('travail');">Travail</a></p>
- <p><a onClick="incChoice.selectWord('international');">International</a></p>
- <p><a onClick="incChoice.selectWord('dieu');">Dieu</a></p>
- <p><a onClick="incChoice.selectWord('president');">Président</a></p>
+ <p><a id="mot1" onClick="incChoice.selectWord(1);">Famille</a></p>
+ <p><a id="mot2" onClick="incChoice.selectWord(2);">Amour</a></p>
+ <p><a id="mot3" onClick="incChoice.selectWord(3);">Travail</a></p>
+ <p><a id="mot4" onClick="incChoice.selectWord(4);">International</a></p>
+ <p><a id="mot5" onClick="incChoice.selectWord(5);">Dieu</a></p>
+ <p><a id="mot6" onClick="incChoice.selectWord(6);">Président</a></p>
</div>
</section>
@@ -53,11 +53,11 @@
// Init the resize object
incResize.init("content", null, "mosaic", null, null, 130, 1920/809, null, incMosaic.registerPostNewCanvasSize);
+ // Set the choice logic
+ incChoice.setWords(0);
+
// Set the mosaic effect
- incChoice.setMosaicEffect(["choix1fond1.jpg", "choix1fond2.jpg", "choix1fond3.jpg"],
- ["choix2fond1.jpg", "choix2fond2.jpg", "choix2fond3.jpg"],
- "choix_2.html");
- incChoice.currentWorldIndex = 0;
+ incChoice.setMosaicEffect(["choix1fond1.jpg", "choix1fond2.jpg", "choix1fond3.jpg"], ["choix2fond1.jpg", "choix2fond2.jpg", "choix2fond3.jpg"]);
});
</script>
</body>
--- a/web/choix_2.html Tue Dec 11 17:39:04 2012 +0100
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,64 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
- <head>
- <meta charset="utf-8">
- <title>The End - @todo</title>
-
- <meta name="description" content="@todo">
-
- <!-- Mobile Specific Metas -->
- <meta name="viewport" content="initial-scale=1.0, width=device-width" />
-
- <link rel="stylesheet" href="static/res/css/style_1024.css" />
- <!-- stylesheet for ipad 3
- <link rel="stylesheet" href="static/res/css/style_2048.css" />
- -->
-
- </head>
- <body>
- <!-- div content - site takes the full height of browser -->
- <div id="content" class="full_screen">
- <!--this div empty allows the element content_vcentering to be vertically aligned -->
- <div class="strut"></div><!--
- this comment corrects the white-space (display: inline);
- --><section class="fullScreen_vcentering container_vcentering choix">
- <div id="choix2" class="box_vcentering white big_txt">
- <p><a onClick="incChoice.selectWord('actif');">Actif</a></p>
- <p><a onClick="incChoice.selectWord('passif');">Passif</a></p>
- <p><a onClick="incChoice.selectWord('corps');">Corps</a></p>
- <p><a onClick="incChoice.selectWord('charité');">Charité</a></p>
- <p><a onClick="incChoice.selectWord('patrie');">Patrie</a></p>
- <p><a onClick="incChoice.selectWord('politique');">Politique</a></p>
- </div>
- </section>
-
- <!-- il faut regler comment on nome ici les id. j'aimerai changer id="main" mais je ne sai pas si je peux
- -->
- <section id="main" class="mosaic_choice">
- <canvas id="mosaic" width="100" height="100"></canvas>
- </section>
- </div>
-
- <!-- Metanav FranceTV -->
- <script src="http://static.francetv.fr/js/jquery.metanav-min.js" charset="utf-8"></script>
- <!-- JavaScript -->
- <script src="static/res/js/jquery-1.8.2.min.js"></script>
- <script src="static/res/js/jquery.cookie.js"></script>
- <script src="static/res/js/ease.js"></script>
- <script src="static/res/js/incresize.js"></script>
- <script src="static/res/js/incmosaic.js"></script>
- <script src="static/res/js/incchoice.js"></script>
- <script>
- $(function() {
- // Init the resize object
- incResize.init("content", null, "mosaic", null, null, 130, 1920/809, null, incMosaic.registerPostNewCanvasSize);
-
- // Set the mosaic effect
- incChoice.setMosaicEffect(["choix2fond1.jpg", "choix2fond2.jpg", "choix2fond3.jpg"],
- ["choix3fond1.jpg", "choix3fond2.jpg", "choix3fond3.jpg"],
- "choix_3.html");
- incChoice.currentWorldIndex = 1;
- });
- </script>
- </body>
-</html>
\ No newline at end of file
--- a/web/choix_3.html Tue Dec 11 17:39:04 2012 +0100
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,66 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
- <head>
- <meta charset="utf-8">
- <title>The End - @todo</title>
-
- <meta name="description" content="@todo">
-
- <!-- Mobile Specific Metas -->
- <meta name="viewport" content="initial-scale=1.0, width=device-width" />
-
- <link rel="stylesheet" href="static/res/css/style_1024.css" />
- <!-- stylesheet for ipad 3
- <link rel="stylesheet" href="static/res/css/style_2048.css" />
- -->
-
- </head>
- <body>
- <!-- div content - site takes the full height of browser -->
- <div id="content" class="full_screen">
- <!--this div empty allows the element content_vcentering to be vertically aligned -->
- <div class="strut"></div><!--
- this comment corrects the white-space (display: inline);
- --><section class="fullScreen_vcentering container_vcentering choix">
- <div id="choix3" class="box_vcentering red big_txt">
- <p><a onClick="incChoice.selectWord('spleen');">Spleen</a></p>
- <p><a onClick="incChoice.selectWord('ideal');">Idéal</a></p>
- <p><a onClick="incChoice.selectWord('origines');">Origines</a></p>
- <p><a onClick="incChoice.selectWord('peur');">Peur</a></p>
- <p><a onClick="incChoice.selectWord('desir');">Désir</a></p>
- <p><a onClick="incChoice.selectWord('bonheur');">Bonheur</a></p>
- </div>
- </section>
-
- <!-- il faut regler comment on nome ici les id. j'aimerai changer id="main" mais je ne sai pas si je peux
- -->
- <section id="main" class="mosaic_choice">
- <canvas id="mosaic" width="100" height="100"></canvas>
- </section>
- </div>
-
- <!-- Metanav FranceTV -->
- <script src="http://static.francetv.fr/js/jquery.metanav-min.js" charset="utf-8"></script>
- <!-- JavaScript -->
- <script src="static/res/js/jquery-1.8.2.min.js"></script>
- <script src="static/res/js/jquery.cookie.js"></script>
- <script src="static/res/js/ease.js"></script>
- <script src="static/res/js/incresize.js"></script>
- <script src="static/res/js/incmosaic.js"></script>
- <script src="static/res/js/incchoice.js"></script>
- <script>
- $(function() {
- // Init the resize object
- incResize.init("content", null, "mosaic", null, null, 130, 1920/809, null, incMosaic.registerPostNewCanvasSize);
-
- // Set the mosaic effect
- incChoice.setMosaicEffect(["choix3fond1.jpg", "choix3fond2.jpg", "choix3fond3.jpg"],
- ["choix1fond1.jpg", "choix1fond2.jpg", "choix1fond3.jpg"],
- "niv1_videoplayer.html");
- incChoice.currentWorldIndex = 2;
- console.log(incChoice.getCookie("world0"));
- console.log(incChoice.getCookie("world1"));
- });
- </script>
- </body>
-</html>
\ No newline at end of file
--- a/web/static/res/js/incchoice.js Tue Dec 11 17:39:04 2012 +0100
+++ b/web/static/res/js/incchoice.js Tue Dec 11 19:48:24 2012 +0100
@@ -2,10 +2,10 @@
function IncChoice()
{
- this.currentWorldIndex = -1;
- this.lastWorldIndex = -1;
+ this.currentWorldIndex = 0;
+ this.canSelectWord = true;
- this.setMosaicEffect = function(images1, images2, nextUrl)
+ this.setMosaicEffect = function(images1, images2)
{
// Choose 2 image for the effect
var image1 = images1[incMosaic.randomInt(0, images1.length)];
@@ -14,16 +14,46 @@
incMosaic.addImageUrl("static/res/img/" + image2);
// Start mosaic effect
- incMosaic.start("mosaic", effectSpeed, 9, 5, false, true, function() { location.href = nextUrl;});
+ incMosaic.start("mosaic", effectSpeed, 9, 5, false, true, function() {incChoice.effectIsDone();});
};
- this.selectWord = function(word)
+ this.setWords = function(choiceIndex)
{
- if (this.currentWorldIndex == this.lastWorldIndex) {
+ if (choiceIndex == 0) {
+ $("#mot1").html("famille");
+ $("#mot2").html("amour");
+ $("#mot3").html("travail");
+ $("#mot4").html("international");
+ $("#mot5").html("dieu");
+ $("#mot6").html("president");
+
+ } else if (choiceIndex == 1) {
+ $("#mot1").html("actif");
+ $("#mot2").html("passif");
+ $("#mot3").html("corps");
+ $("#mot4").html("charité");
+ $("#mot5").html("patrie");
+ $("#mot6").html("politique");
+
+ } else {
+ $("#mot1").html("spleen");
+ $("#mot2").html("ideal");
+ $("#mot3").html("origines");
+ $("#mot4").html("peur");
+ $("#mot5").html("desir");
+ $("#mot6").html("bonheur");
+ }
+ };
+
+ this.selectWord = function(wordIndex)
+ {
+ if (!this.canSelectWord) {
// Don't set the word 2 times
return;
}
+ this.canSelectWord = false;
+
// Start the mosaic effect
incMosaic.goEffect();
@@ -31,11 +61,26 @@
$('.big_txt').animate({opacity: 0}, 20000 * 1 / effectSpeed);
// Save the word
- this.setCookie("niv1_world" + this.currentWorldIndex, word);
- this.lastWorldIndex = this.currentWorldIndex;
- //++this.currentWorldIndex;
+ this.setCookie("niv1_world" + this.currentWorldIndex, $("#mot" + wordIndex).html());
};
+ this.effectIsDone = function()
+ {
+ this.canSelectWord = true;
+ ++this.currentWorldIndex;
+
+ // Change list of words
+ this.setWords(this.currentWorldIndex);
+
+ // Fade the text
+ $('.big_txt').animate({opacity: 1}, 20000 * 1 / effectSpeed);
+
+ if (this.currentWorldIndex == 3) {
+ // The 3 words get choosen
+ location.href = "niv1_videoplayer.html";
+ }
+ }
+
this.setCookie = function(name, value)
{
$.removeCookie(name);
--- a/web/static/res/js/incmosaic.js Tue Dec 11 17:39:04 2012 +0100
+++ b/web/static/res/js/incmosaic.js Tue Dec 11 19:48:24 2012 +0100
@@ -215,6 +215,7 @@
} else if (this.endEffecFunc != undefined && this.endEffecFunc != null) {
// Call the end callback
this.endEffecFunc();
+ this.endEffecFunc = null;
}
}
};