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
|
||||
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
|
||||
|
||||
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