mirror of
https://github.com/Chouchen/motsmeles.git
synced 2018-06-07 06:04:38 +02:00
Hello world
To clean, it comes from a personal side project
This commit is contained in:
Shikiryu
parent
eff98bb377
commit
6be68e5b1c
8
.gitignore
vendored
8
.gitignore
vendored
@ -41,3 +41,11 @@ $RECYCLE.BIN/
|
|||||||
Network Trash Folder
|
Network Trash Folder
|
||||||
Temporary Items
|
Temporary Items
|
||||||
.apdisk
|
.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
|
||||||
|
|||||||
18
const.js
Normal file
18
const.js
Normal file
@ -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';
|
||||||
29
index.html
Normal file
29
index.html
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Mot mélés</title>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
|
||||||
|
<script src="const.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Mots Mélés</h1>
|
||||||
|
<div id="playground" class="flip-container">
|
||||||
|
|
||||||
|
<div class="flipper">
|
||||||
|
<div class="front">
|
||||||
|
<div id="firstGame">
|
||||||
|
<canvas id="c"></canvas>
|
||||||
|
|
||||||
|
<ul id="words">
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
167
script.js
Normal file
167
script.js
Normal file
@ -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);
|
||||||
151
style.css
Normal file
151
style.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user