Browse Source

Hello world

To clean, it comes from a personal side project
nettoyage_css_et_html
Shikiryu 7 years ago
parent
commit
6be68e5b1c
  1. 8
      .gitignore
  2. 18
      const.js
  3. 29
      index.html
  4. 167
      script.js
  5. 151
      style.css

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

18
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';

29
index.html

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

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

@ -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…
Cancel
Save