diff --git a/.gitignore b/.gitignore
index 96374c4..300e192 100644
--- a/.gitignore
+++ b/.gitignore
@@ -41,3 +41,11 @@ $RECYCLE.BIN/
Network Trash Folder
Temporary Items
.apdisk
+.idea/.name
+.idea/encodings.xml
+.idea/misc.xml
+.idea/modules.xml
+.idea/motmeles.iml
+.idea/scopes/scope_settings.xml
+.idea/vcs.xml
+.idea/workspace.xml
diff --git a/const.js b/const.js
new file mode 100644
index 0000000..bf20618
--- /dev/null
+++ b/const.js
@@ -0,0 +1,18 @@
+var SIZE = 30;
+var NUMCASE = 10;
+var GRID = [
+ ['S','S','S','A','U','B','A','G','N','E'],
+ ['E','P','A','A','M','V','E','N','C','E'],
+ ['L','U','L','M','I','R','A','M','A','S'],
+ ['R','A','O','G','E','X','A','C','O','E'],
+ ['A','L','N','E','G','N','A','R','O','R'],
+ ['T','O','U','L','O','N','G','L','R','E'],
+ ['N','D','S','T','N','U','E','I','E','Y'],
+ ['I','N','P','E','E','N','I','L','D','H'],
+ ['C','A','S','S','U','J','E','R','F','L'],
+ ['E','B','E','L','S','I','S','S','A','C']
+];
+
+var words = ['AIX','APT','ARLES','AUBAGNE','AUPS','AVIGNON','BANDOL','CANNES','CASSIS','DIGNE','FREJUS','HYERES','LUNEL','MIRAMAS','NICE','ORANGE','SALON','SORGUES','TOULON','VENCE'];
+
+var reponse = 'BA';
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..3ca7470
--- /dev/null
+++ b/index.html
@@ -0,0 +1,29 @@
+
+
+
+ Mot mélés
+
+
+
+
+
+
+Mots Mélés
+
+
+
+
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..4e0a92b
--- /dev/null
+++ b/script.js
@@ -0,0 +1,167 @@
+(function(fabric, document, SIZE, NUMCASE, GRID, reponse, words){
+ var canvas = new fabric.Canvas('c', { selection: false });
+ var i;
+ var j;
+ var k;
+ var l;
+ var origin = [];
+ var end = [];
+ var isDragging = false;
+ var drawingLine;
+ canvas.setDimensions({width: SIZE*NUMCASE + NUMCASE, height: SIZE*NUMCASE + NUMCASE});
+ var LabeledRect = fabric.util.createClass(fabric.Rect, {
+ type: 'labeledRect',
+ initialize: function(options) {
+ options || (options = { });
+ this.callSuper('initialize', options);
+ this.set('label', options.label || '');
+ },
+ toObject: function() {
+ return fabric.util.object.extend(this.callSuper('toObject'), {
+ label: this.get('label')
+ });
+ },
+ _render: function(ctx) {
+ this.callSuper('_render', ctx);
+ ctx.font = '20px Helvetica';
+ ctx.fillStyle = '#333';
+ ctx.fillText(this.label, -this.width/2 + 5, -this.height/2 + 20);
+ }
+ });
+
+ var isCrossedWordAValidWord = function isCrossedWordAValidWord() {
+ var result = -1;
+ var isHorizontal = origin[0] === end[0];
+ var isVertical = origin[1] === end[1];
+ var x;
+ var first;
+ var last;
+ var word = '';
+ if(isHorizontal) {
+ first = Math.min(origin[1], end[1]);
+ last = Math.max(origin[1], end[1]);
+ for( x=first;x<=last; x++ ) {
+ word += GRID[origin[0]][x];
+ }
+ return Math.max(words.indexOf(word), words.indexOf(word.split('').reverse().join('')));
+ }else if (isVertical) {
+ first = Math.min(origin[0], end[0]);
+ last = Math.max(origin[0], end[0]);
+ for( x=first;x<=last; x++ ) {
+ word += GRID[x][origin[1]];
+ }
+ return Math.max(words.indexOf(word), words.indexOf(word.split('').reverse().join('')));
+ }
+ return result;
+ };
+
+ var crossFoundWord = function crossFoundWord(w) {
+ var liWord = document.getElementById('words').getElementsByTagName('li');
+ var liWordLength = liWord.length;
+ for ( l = 0; l < liWordLength; l++ ) {
+ if( liWord[l].textContent === w ) {
+ liWord[l].className = "validate";
+ break;
+ }
+ }
+ };
+
+ // init grid
+ for (i = 0; i < NUMCASE; i++) {
+ for (j = 0; j < NUMCASE; j++) {
+ var rect = new LabeledRect({
+ left: i*SIZE,
+ top: j*SIZE,
+ fill: 'white',
+ stroke: 'black',
+ width: SIZE,
+ height: SIZE,
+ label: GRID[j][i],
+ selectable: false
+ });
+ canvas.add(rect);
+ }
+ }
+ // init words
+ // TODO eurk
+ for(var uno = 0; uno < words.length; uno++) {
+ var tmpLi = document.createElement('li');
+ tmpLi.innerHTML = words[uno].toUpperCase();
+ document.getElementById('words').appendChild(tmpLi);
+ }
+
+ canvas.on('mouse:down', function(options) {
+ isDragging = true;
+ var pointer = canvas.getPointer(options.e);
+ var points = [ pointer.x, pointer.y, pointer.x, pointer.y ];
+ origin = [Math.floor(points[1]/SIZE),Math.floor(points[0]/SIZE)];
+ drawingLine = new fabric.Line(points, {
+ stroke: 'black',
+ strokeLineCap: 'round',
+ strokeWidth: SIZE/2,
+ originX: 'center',
+ originY: 'center'
+ });
+ canvas.add(drawingLine);
+ });
+
+ canvas.on('mouse:move', function(options) {
+ if(isDragging) {
+ var pointer = canvas.getPointer(options.e);
+ drawingLine.set({ x2: pointer.x, y2: pointer.y });
+ canvas.renderAll();
+ }
+ });
+
+ canvas.on('mouse:up', function(options) {
+ isDragging = false;
+ var pointer = canvas.getPointer(options.e);
+ var position = [pointer.x, pointer.y];
+ end = [Math.floor(position[1]/SIZE),Math.floor(position[0]/SIZE)];
+ canvas.remove(drawingLine);
+ if(origin[0] !== end[0] || origin[1] !== end[1]) {
+ var isAWord = isCrossedWordAValidWord();
+ if(isAWord !== -1) {
+ var lineCoord = words[isAWord];
+ lineCoord = origin.reverse().join('').concat(end.reverse().join('')).split('');
+ lineCoord = lineCoord.map(function(map){return map*SIZE+SIZE/2;});
+ var line = new fabric.Line(lineCoord, {
+ stroke: 'black',
+ strokeLineCap: 'round',
+ strokeWidth: SIZE/2,
+ originX: 'center',
+ originY: 'center',
+ selectable: false
+ });
+ crossFoundWord(words[isAWord]);
+ words.splice(isAWord, 1);
+ canvas.add(line);
+ if(words.length === 0) {
+ nextStep();
+ }
+ }
+ }
+ origin = [];
+ end = [];
+ });
+
+ var nextStep = function nextStep() {
+ document.getElementById('answer-container').style.display = 'block';
+ document.getElementById('submit').addEventListener('click', answer, false);
+ document.getElementById('answer').addEventListener('keydown', answer, false);
+ };
+
+ var answer = function answer(evt) {
+ if(evt.type === 'keydown' && evt.keyCode === 13){
+ document.getElementById('submit').click();
+ }
+ var userAnswer = document.getElementById('answer').value;
+ if(userAnswer.toUpperCase() === reponse.toUpperCase()) {
+ finalStep();
+ }
+ };
+
+ var finalStep = function finalStep() {
+ document.getElementById("playground").classList.toggle("flip");
+ };
+})(fabric, document, SIZE, NUMCASE, GRID, reponse, words);
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..17a2b2e
--- /dev/null
+++ b/style.css
@@ -0,0 +1,151 @@
+body {
+ font-family: "SkipLegDay", Helvetica, Arial, sans-serif;
+ font-size: 20px;
+ font-weight: bold;
+ background: linear-gradient(180deg, #3F618C, #223A59);
+ background-size: 400% 400%;
+ -webkit-animation: AnimationName 10s ease infinite;
+ -moz-animation: AnimationName 10s ease infinite;
+ animation: AnimationName 10s ease infinite;
+
+ @-webkit-keyframes AnimationName {
+ 0% {
+ background-position: 51% 0%
+ }
+ 50% {
+ background-position: 50% 100%
+ }
+ 100% {
+ background-position: 51% 0%
+ }
+ }
+ @-moz-keyframes AnimationName {
+ 0% {
+ background-position: 51% 0%
+ }
+ 50% {
+ background-position: 50% 100%
+ }
+ 100% {
+ background-position: 51% 0%
+ }
+ }
+ @keyframes AnimationName {
+ 0% {
+ background-position: 51% 0%
+ }
+ 50% {
+ background-position: 50% 100%
+ }
+ 100% {
+ background-position: 51% 0%
+ }
+ }
+}
+h1, small {
+ width: 600px;
+ text-align: center;
+ margin: 0 auto;
+ z-index: 10;
+ font-weight: bold;
+ color: #6C9BD9;
+}
+h1 {
+ font-size: 50px;
+ margin-top: 15px;
+}
+small {
+ display: block;
+ font-size: 18px;
+ line-height: 20px;
+}
+ul {list-style: none; float: left; margin: 100px 0 50px 0; line-height: 28px;}
+ul li.validate {color: green; font-weight: bold; text-decoration : line-through;}
+ul li.validate:before {content: '\2713 '; color: green; font-weight: bold;}
+.canvas-container {float: left; margin: 100px 30px 30px 50px;}
+#answer-container {display: none; clear: both; text-align: center;}
+#answer-container input { }
+#playground {background: url(feuille-de-papier.jpg) top left no-repeat; display: block; width: 600px; height:600px; margin: 0 auto;}
+
+
+/* from http://davidwalsh.name/demo/css-flip.php */
+.flip-container, .front, .back {
+ width: 600;
+ height: 600px;
+}
+
+/* flip speed goes here */
+.flipper {
+ transition: 3s;
+ transform-style: preserve-3d;
+ position: relative;
+}
+
+
+/* entire container, keeps perspective */
+.flip-container {
+ perspective: 1000;
+ transform-style: preserve-3d;
+}
+/* UPDATED! flip the pane when hovered */
+.flip-container.flip .back {
+ transform: rotateY(0deg);
+}
+.flip-container.flip .front {
+ transform: rotateY(180deg);
+}
+
+/* hide back of pane during swap */
+.front, .back {
+ backface-visibility: hidden;
+ transition: 3s;
+ transform-style: preserve-3d;
+
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* front pane, placed above back */
+.front {
+ z-index: 2;
+ /* for firefox 31 */
+ transform: rotateY(0deg);
+}
+
+/* back, initially hidden pane */
+.back {
+ transform: rotateY(-180deg);
+}
+
+.button {
+ border-top: 1px solid #96d1f8;
+ background: #0f1926;
+ background: -webkit-gradient(linear, left top, left bottom, from(#0f1926), to(#0f1926));
+ background: -webkit-linear-gradient(top, #0f1926, #0f1926);
+ background: -moz-linear-gradient(top, #0f1926, #0f1926);
+ background: -ms-linear-gradient(top, #0f1926, #0f1926);
+ background: -o-linear-gradient(top, #0f1926, #0f1926);
+ padding: 11px 22px;
+ -webkit-border-radius: 27px;
+ -moz-border-radius: 27px;
+ border-radius: 27px;
+ -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
+ -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
+ box-shadow: rgba(0,0,0,1) 0 1px 0;
+ text-shadow: rgba(0,0,0,.4) 0 1px 0;
+ color: white;
+ font-size: 11px;
+ font-family: Helvetica, Arial, Sans-Serif;
+ text-decoration: none;
+ vertical-align: middle;
+}
+.button:hover {
+ border-top-color: #28597a;
+ background: #28597a;
+ color: #ccc;
+}
+.button:active {
+ border-top-color: #0f1926;
+ background: #0f1926;
+}
\ No newline at end of file