From 6be68e5b1cee78f62b273b55610607769412c7fa Mon Sep 17 00:00:00 2001 From: Shikiryu Date: Sun, 25 Jan 2015 00:40:30 +0100 Subject: [PATCH] Hello world To clean, it comes from a personal side project --- .gitignore | 8 +++ const.js | 18 ++++++ index.html | 29 ++++++++++ script.js | 167 +++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 151 ++++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 373 insertions(+) create mode 100644 const.js create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css 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