diff --git a/.nojekyll b/.nojekyll new file mode 100644 index 0000000..e69de29 diff --git a/README.md b/README.md index 7e33940..daff89f 100644 --- a/README.md +++ b/README.md @@ -52,16 +52,16 @@ Basé sur une idée originale de Léo Ducas Mathieu Jouhet & Nicolas Pelletier #### Inria -* *Coordination :* Service communication du centre de recherche Inria Paris - Rocquencourt -* *Référents médiation :* Thierry Vieville et Laurent Viennot -* *Référent scientifique :* Léo Ducas +* **Coordination :** Service communication du centre de recherche Inria Paris - Rocquencourt +* **Référents médiation :** Thierry Vieville et Laurent Viennot +* **Référent scientifique :** Léo Ducas #### Digital Cuisine -* *Directeur Artistique :* Mathieu Jouhet ([@daformat](https://twitter.com/daformat)) -* *Graphiste :* Nicolas Pelletier -* *Game engine :* Vincent Mézino -* *Intégration html, développement javascript:* Mathieu Jouhet -* *Test :* Olivier Lance, Pierre-Jean Quilleré +* **Directeur Artistique :** Mathieu Jouhet ([@daformat](https://twitter.com/daformat)) +* **Graphiste :** Nicolas Pelletier +* **Game engine :** Vincent Mézino +* **Intégration html, développement javascript:** Mathieu Jouhet +* **Test :** Olivier Lance, Pierre-Jean Quilleré ___ diff --git a/bonus.html b/bonus.html index 08cdcaf..9f6f2ff 100644 --- a/bonus.html +++ b/bonus.html @@ -133,6 +133,14 @@

Quelques ressources supplémentaires pour mieux comprendre la cryptographie

+ +
+

Logiciel pour chiffrer ses emails

+

Pourquoi et comment utiliser openPGP ?
+ http://openpgp.vie-privee.org/

+
+ +

Cryptographie asymétrique

Définition et explication de la cryptographie asymétrique sur Wikipédia
diff --git a/css/cryptris.css b/css/cryptris.css index 6a0f45f..679eec5 100644 --- a/css/cryptris.css +++ b/css/cryptris.css @@ -724,7 +724,7 @@ border: 1px solid #0091BB; } .share .encrypted-message .social-actions p{ - margin: 28px; + margin: 11px; } .share .encrypted-message .message-spinner{ @@ -754,7 +754,7 @@ border: 1px solid #0091BB; } /* Disclaimer */ -.share .warning{ +.share p.warning, .share div.warning{ display: inline-block; background-color: #000; @@ -805,8 +805,102 @@ border: 1px solid #0091BB; } +/*modal screen */ +.modal{ + position: absolute; + z-index: 1000; + background-color: rgba(0,0,0,0.75); + display: block; + height: 0; + width: 0; + overflow: hidden; + min-height: 0; + min-width: 0; + + -webkit-transition: opacity ease 0.35s; + -moz-transition: opacity ease 0.35s; + transition: opacity ease 0.35s; + + opacity: 0; +} + +.modal.visible{ + display: table; + height: 100%; + width: 100%; + opacity: 1; + +} + +.modal .window{ + position: relative; + padding: 50px; + width: auto; + height: auto; + opacity: 1; + max-width: 600px; + + display: inline-block; + -webkit-transition: all ease 0.3s; + -moz-transition: all ease 0.3s; + transition: all ease 0.3s; + + -webkit-transform-origin: center; + -moz-transform-origin: center; + transform-origin: center; + + -webkit-transform: scale(0); + -moz-transform: scale(0); + transform: scale(0); + +} +.modal h1, .modal h2, .modal h3, .modal h4, .modal h5, .modal h6{ + margin-top: 0px; +} + +.modal .window.visible{ + -webkit-transform: scale(1); + -moz-transform: scale(1); + transform: scale(1); +} + +.modal .window .header{ + position: absolute; + width: 100%; + height: 0px; + top: 0; +} +.modal .window .header .btn-close{ + position: absolute; + top: -28px; + right: 23px; +} + +.modal .window{ + background-color: rgba(0,0,0,0.75); + + border-radius: 8px; + + border: 1px solid rgba(175, 238, 247, 0.5); + -webkit-box-shadow: 0 0 10px rgba(15, 231, 255, 0.75); + box-shadow: 0 0 10px rgba(15, 231, 255, 0.75); + + text-align: center; + +} + +.modal .window input, .modal .window textarea{ + border: 1px solid rgba(175, 238, 247, 0.5); + background-color: rgba(0, 0, 0, 0); + color: #80C9C3; + text-align: center; + width: 550px; + padding: 8px 6px; + font-size: 1em; + font-family: Inconsolata; +} /* New login screen */ diff --git a/docs/cryptis1.mp3 b/docs/cryptis1.mp3 new file mode 100644 index 0000000..6a9dbab Binary files /dev/null and b/docs/cryptis1.mp3 differ diff --git a/docs/cryptis2.mp3 b/docs/cryptis2.mp3 new file mode 100644 index 0000000..76e49af Binary files /dev/null and b/docs/cryptis2.mp3 differ diff --git a/docs/cryptis3.mp3 b/docs/cryptis3.mp3 new file mode 100644 index 0000000..cfd8f86 Binary files /dev/null and b/docs/cryptis3.mp3 differ diff --git a/docs/fiche-pedagogique.odt b/docs/fiche-pedagogique.odt new file mode 100644 index 0000000..8063e07 Binary files /dev/null and b/docs/fiche-pedagogique.odt differ diff --git a/docs/fiche-pedagogique.pdf b/docs/fiche-pedagogique.pdf new file mode 100644 index 0000000..03a6136 Binary files /dev/null and b/docs/fiche-pedagogique.pdf differ diff --git a/img/.DS_Store b/img/.DS_Store deleted file mode 100644 index 1761877..0000000 Binary files a/img/.DS_Store and /dev/null differ diff --git a/img/icn-ml-large.png b/img/icn-ml-large.png new file mode 100644 index 0000000..256eb58 Binary files /dev/null and b/img/icn-ml-large.png differ diff --git a/img/icn-ml-large@2x.png b/img/icn-ml-large@2x.png new file mode 100644 index 0000000..61cc22c Binary files /dev/null and b/img/icn-ml-large@2x.png differ diff --git a/img/icn-ml.png b/img/icn-ml.png new file mode 100644 index 0000000..a03dc2c Binary files /dev/null and b/img/icn-ml.png differ diff --git a/img/icn-ml@2x.png b/img/icn-ml@2x.png new file mode 100644 index 0000000..eb9499d Binary files /dev/null and b/img/icn-ml@2x.png differ diff --git a/index.html b/index.html index 69cf7d8..8788335 100644 --- a/index.html +++ b/index.html @@ -156,6 +156,9 @@ ▶Nouvelle partie◀

  • + ▶Comprendre◀ +
    • +
  • ▶Arcade◀
  • @@ -185,9 +188,10 @@ - + --> + - + --> - + -->
    • + + +
    +
    +
    + +
    + +

    Partager par email

    +

    Copiez-collez cette adresse pour partager le jeu par email :

    + +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + +
    +
    +
    +
    +
    +
    + +
    + +
    + + +
    +

    Documents introductifs au jeu

    + +
    + +
    + +
    + +
    + + + + + + + + diff --git a/js/count-characters-left.js b/js/count-characters-left.js index eb3cb07..9a0334e 100644 --- a/js/count-characters-left.js +++ b/js/count-characters-left.js @@ -5,9 +5,10 @@ */ $(function(){ - var $textarea = $("#share textarea"), - $counter = $(".characters-left .count"), - $text = $(".characters-left .text"); + var maxChars = cryptrisSettings.socialEncryptedMessageMaxLength || 140, + $textarea = $("#share textarea"), + $counter = $(".characters-left .count"), + $text = $(".characters-left .text"); /** * CountCharactersLeft: waits for a small amount of time, then fires a change event on the textarea @@ -68,7 +69,7 @@ $(function(){ var $t = $(this), v = $t.val(); - updateCount(140-v.length); + updateCount(maxChars-v.length); }); }) \ No newline at end of file diff --git a/js/cryptris-settings.js b/js/cryptris-settings.js index 5dbaa43..c3a94db 100644 --- a/js/cryptris-settings.js +++ b/js/cryptris-settings.js @@ -1,7 +1,6 @@ /** * Cryptris configuration file * Please create a backup before modifying anything here - * and Read The Fucking Manual! (Well, comments) * More settings can be found in game_engine/global.js * The file prototype-additions.js must be included BEFORE this file */ @@ -17,14 +16,15 @@ cryptrisSettings.appUrl = "http://daformat.github.io/cryptris" /** * Pseudo-prompt animation, displays a text character by character. * This sets the delay to wait before displaying the next character - * Used for any non-player dialog, and during the intro. + * Used during the intro. + * (we deactivated the effect on dialogs as it was too slow on ffox) */ cryptrisSettings.animateTextDelayBetweenLetters = 20; /** - * Delay between scenes when a reading delay is needed + * Delay between scenes where a pause is needed * (mostly the two initial pseudo-prompt animations) */ @@ -47,10 +47,14 @@ cryptrisSettings.boardSymbols = [" ", "0","1","2","3","4","5","6","7","8","9", "A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z", ";", ".", ",","!","?","&","#","'","\\","\"","(",")","+","-","*","/","|","□"]; +/** + * Maximum length of the message one can share on social networks + */ +cryptrisSettings.socialEncryptedMessageMaxLength = 140; /** - * Cryptography settings, adjust public key generation and message encyrption + * Cryptography settings, used to adjust public key generation and message encryption */ cryptrisSettings.crypto = cryptrisSettings.crypto || {} diff --git a/js/game_engine/message_columns.js b/js/game_engine/message_columns.js index 8b144d4..35da320 100644 --- a/js/game_engine/message_columns.js +++ b/js/game_engine/message_columns.js @@ -1,4 +1,13 @@ -function levelMessage(director, x, y, number, container, boxOption) { + +/** + * a levelMessage is the animated value of the current operation that we draw + * ontop of the column that got hit. This value slowly moves up and fades out + * + */ + +function levelMessage(director, x, y, number, container, boxOption, column) { + console.log(arguments); + this.isVisible = true; this.container = container; this.msg = new CAAT.Foundation.ActorContainer(); @@ -40,6 +49,7 @@ function levelMessage(director, x, y, number, container, boxOption) { } } + this.msg.paint = function(director, time) { var clearTime = object.clearTime; @@ -51,12 +61,18 @@ function levelMessage(director, x, y, number, container, boxOption) { return; } var signe = ""; - if (number > 0) { + + if (column.type === COLUMN_TYPE_1) { signe = "+"; + } else if (column.type === COLUMN_TYPE_2) { + signe = "-"; } var ctx = director.ctx; if (object.delta <= clearTime) { + + // draw the animated current operation value + ctx.globalAlpha = 1 - object.delta / clearTime; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; @@ -76,6 +92,11 @@ function levelMessage(director, x, y, number, container, boxOption) { } } + + +/********/ + + function blockToDestroy(director, msgType, keyType, x, y, squareNumber, keyNumber, msgNumber, container, boxOption) { this.director = director; this.x = x; @@ -388,6 +409,7 @@ function MessageColumn(director, type, initialNumber, container, boxOption) { } this.addSquares = function(column) { + console.log('\nAdding squares...\n--------------------'); if (column.squareNumber > 0) { var y = 0; if (this.type === COLUMN_TYPE_3) { @@ -401,7 +423,8 @@ function MessageColumn(director, type, initialNumber, container, boxOption) { } if (this.levelMsg === null) { - this.levelMsg = new levelMessage(this.director, this.column.x, y - this.boxOption.SPACE_HEIGHT, column.squareNumber, this.container, this.boxOption); + console.log('message column:', this, '\n\nKey column:', column, '\n'); + this.levelMsg = new levelMessage(this.director, this.column.x, y - this.boxOption.SPACE_HEIGHT, column.squareNumber, this.container, this.boxOption, column); } this.blurSquareNumber = 0; @@ -409,8 +432,9 @@ function MessageColumn(director, type, initialNumber, container, boxOption) { } this.subSquares = function(keyColumn) { + console.log('\nSubstracting squares...\n--------------------'); newSquareNumber = this.squareNumber - keyColumn.squareNumber; - var diffNumber = -1 * keyColumn.squareNumber; + var number = keyColumn.squareNumber; if (newSquareNumber < 0) { this.keySquareNumber = this.squareNumber; @@ -435,7 +459,8 @@ function MessageColumn(director, type, initialNumber, container, boxOption) { } if (this.levelMsg === null) { - this.levelMsg = new levelMessage(this.director, this.column.x, keyColumn.column.y - this.boxOption.SPACE_HEIGHT, diffNumber, this.container, this.boxOption); + console.log('message column:', this, '\n\nKey column:', keyColumn, '\n'); + this.levelMsg = new levelMessage(this.director, this.column.x, keyColumn.column.y - this.boxOption.SPACE_HEIGHT, number, this.container, this.boxOption, keyColumn); } } diff --git a/js/game_engine/share.js b/js/game_engine/share.js index 7c4a503..cf7a729 100644 --- a/js/game_engine/share.js +++ b/js/game_engine/share.js @@ -1,4 +1,11 @@ +var timeouts = [], + clearTimeouts = function () { + $.each(timeouts, function(i){ + clearTimeout(timeouts[i]) + }); + timeouts = []; + }; var currentGame = new game(); function resizeMiniBoard(director, playScene) { @@ -169,11 +176,10 @@ function createMiniBoard(current_length, crypted_message) { initGame(currentGame.director, current_length, crypted_message); } -// -var href = cryptrisSettings.appUrl; -//var hrefPath = href.substr(0, href.lastIndexOf('/') + 1); -var hrefPath = href + '/'; -var baseHtml = hrefPath + 'decrypter.html'; +// Prepare url for sharing +var href = cryptrisSettings.appUrl, + hrefPath = href + '/', + baseHtml = hrefPath + 'decrypter.html'; function keyInfoCrypt(message) { var cipher = ""; @@ -259,7 +265,7 @@ function createCryptedMessage() { /** - * SHARING + * SHARING options */ var hrefPath = url, @@ -286,21 +292,37 @@ function createCryptedMessage() { var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); - // facebook - doesn't work because the url is too long :/ + // facebook - using feed dialog for customization purposes var fbBase = "https://www.facebook.com/dialog/feed?&app_id=525890597495827&display=popup"; var fbUrl = fbBase+"&caption=" + title + "&description=" + text + code + "&link=" + url + "&picture=" + preview_xl + "&redirect_uri="+cryptrisSettings.appUrl+"/merci.html"; $('#share-fb').attr('onclick', "javascript:window.open('"+fbUrl+"', '', 'toolbar=0,status=0,width=626,height=436');"); + $('#share-url').val(url); } $(document).ready(function() { $("#share").submit(function() { - setTimeout(createCryptedMessage, 500); + + // when the form is submited we check if the length is valid (less than 140 chars) + var $t = $(this).find('textarea'), + v = $t.val(); + + if(v.length <= cryptrisSettings.socialEncryptedMessageMaxLength){ + // if it is, we can create our crypted message, but we add some delay + // for the transition to be completed before we start doing anything + setTimeout(createCryptedMessage, 500); + } + return false; }); + + $("#edit-message").bind('click', function() { + // If the user decides to edit back his message, fade out everything but the spinner + // so we are ready for the next encryption round + currentGame.director.easeInOut( currentGame.director.getSceneIndex(currentGame.scenes.waiting_scene), CAAT.Foundation.Scene.prototype.EASE_SCALE, CAAT.Foundation.Actor.ANCHOR_CENTER, @@ -317,4 +339,35 @@ $(document).ready(function() { $('#spinner-img').fadeIn(100); }, 1000); }); + + + /** + * Share via email + */ + + // close modals (the only modal we use is for sharing via email) + + $(".window .btn-close").click(function(){ + $(this).closest('.window').removeClass('visible'); + clearTimeouts(); + timeouts.push(window.setTimeout(function(){ + $('.modal').removeClass('visible'); + }, 200)) + }); + + function showModal(){ + $('.modal').addClass('visible'); + + clearTimeouts(); + timeouts.push(window.setTimeout(function(){ + $('.window').addClass('visible'); + }, 100)) + } + + // setup handlers + + $('#share-em').click(showModal); + $('#share-url').click(function(){ + this.select() + }); }); diff --git a/js/index.js b/js/index.js index 0b9dcc9..d4e928e 100644 --- a/js/index.js +++ b/js/index.js @@ -29,4 +29,44 @@ $(function(){ var fbUrl = fbBase+"&caption=" + title + "&description=" + text + "&link=" + url + "&picture=" + preview_xl + "&redirect_uri="+cryptrisSettings.appUrl+"/merci.html"; $('#share-fb').attr('onclick', "javascript:window.open('"+fbUrl+"', '', 'toolbar=0,status=0,width=626,height=436');"); + + /** + * Share via email + */ + var timeouts = [], + clearTimeouts = function () { + $.each(timeouts, function(i){ + clearTimeout(timeouts[i]) + }); + + timeouts = []; + }; + + $('#share-url').val(cryptrisSettings.appUrl); + + // close modals (the only modal we use is for sharing via email) + + $(".window .btn-close").click(function(){ + $(this).closest('.window').removeClass('visible'); + clearTimeouts(); + timeouts.push(window.setTimeout(function(){ + $('.modal').removeClass('visible'); + }, 200)) + }); + + function showModal(){ + $('.modal').addClass('visible'); + + clearTimeouts(); + timeouts.push(window.setTimeout(function(){ + $('.window').addClass('visible'); + }, 100)) + } + + // setup handlers + + $('#share-em').click(showModal); + $('#share-url').click(function(){ + this.select() + }); }) diff --git a/js/share-animate-steps.js b/js/share-animate-steps.js index 28d201f..777b6e7 100644 --- a/js/share-animate-steps.js +++ b/js/share-animate-steps.js @@ -4,15 +4,42 @@ */ $(function(){ - - // Move step1 out and animate step2 in + var $t = $('#share textarea'), + timeouts = [], + clearTimeouts = function () { + $.each(timeouts, function(i){ + clearTimeout(timeouts[i]) + }); + + timeouts = []; + }; + + $t.jrumble({ + x: 16, + y: 0, + rotation: 0, + speed: 1 + }); + + // Move step1 out and animate step2 in only if the message length + // is less than cryptrisSettings.socialEncryptedMessageMaxLength value $("#share").submit(function(){ - $("#step1").animate({marginLeft: "-200%"}); - $("#step2").animate({marginLeft: "0%"}); + var v = $t.val(); + clearTimeouts(); - // log to google analytics - ga('send', 'event', 'Partager', 'Chiffrer le message', $("textarea").val()); + if(v.length <= cryptrisSettings.socialEncryptedMessageMaxLength){ + $("#step1").animate({marginLeft: "-200%"}); + $("#step2").animate({marginLeft: "0%"}); + // log to google analytics + ga('send', 'event', 'Partager', 'Chiffrer le message', $("textarea").val()); + + } else { + $t.trigger('startRumble'); + timeouts.push(window.setTimeout(function(){ + $('#share textarea').trigger('stopRumble') + }, 1000)); + } return false; }); @@ -23,5 +50,4 @@ $(function(){ $("#step2").animate({marginLeft: "200%"}); }); - }); \ No newline at end of file diff --git a/merci.html b/merci.html index d4c75cc..6cdaf4a 100644 --- a/merci.html +++ b/merci.html @@ -51,7 +51,7 @@

    Merci!

    -

    Votre message a été partagé

    fermer cette fenêtre

    + fermer cette fenêtre

    diff --git a/partager.html b/partager.html index f5d68f0..bd61c11 100644 --- a/partager.html +++ b/partager.html @@ -65,11 +65,7 @@ - - - - - + @@ -89,6 +85,12 @@ + + + + + + @@ -134,6 +136,7 @@

    Partager le jeu

    +
    @@ -157,6 +160,9 @@

    Partager le jeu

    + + +

    Partager par email

    Partager sur facebook

    Partager sur twitter

    @@ -174,16 +180,33 @@

    Partager le jeu

    Partager sur google plus

    + +
    -

    Modifier mon message

    +

    +

    Modifier mon message

    + +
    +
    +
    + +
    + +

    Partager par email

    +

    Copiez-collez cette adresse pour partager votre message par email :

    + +
    +
    +
    +