mirror of
https://github.com/Chouchen/motsmeles.git
synced 2018-06-07 06:04:38 +02:00
workspace cleaning
This commit is contained in:
parent
6be68e5b1c
commit
0973f4b95b
35
Gruntfile.js
Normal file
35
Gruntfile.js
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
module.exports = function(grunt) {
|
||||||
|
|
||||||
|
// Project configuration.
|
||||||
|
grunt.initConfig({
|
||||||
|
pkg: grunt.file.readJSON('package.json'),
|
||||||
|
uglify: {
|
||||||
|
options: {
|
||||||
|
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
|
||||||
|
},
|
||||||
|
build: {
|
||||||
|
src: 'src/js/*.js',
|
||||||
|
dest: 'dist/js/<%= pkg.name %>.min.js'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
cssmin: {
|
||||||
|
target: {
|
||||||
|
files: {
|
||||||
|
'dist/css/<%= pkg.name %>.css': 'src/css/*.css'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
jshint: {
|
||||||
|
all: ['src/js/*.js']
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Load the plugin that provides the "uglify" task.
|
||||||
|
grunt.loadNpmTasks('grunt-contrib-uglify');
|
||||||
|
grunt.loadNpmTasks('grunt-contrib-jshint');
|
||||||
|
grunt.loadNpmTasks('grunt-contrib-cssmin');
|
||||||
|
|
||||||
|
// Default task(s).
|
||||||
|
grunt.registerTask('default', ['jshint', 'uglify','cssmin' ]);
|
||||||
|
|
||||||
|
};
|
||||||
29
index.html
29
index.html
@ -1,29 +0,0 @@
|
|||||||
<!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>
|
|
||||||
11
package.json
Normal file
11
package.json
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"name": "motsmeles",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"description": "a simple 'mots mélés' game",
|
||||||
|
"author": "Shikiryu",
|
||||||
|
"devDependencies": {
|
||||||
|
"grunt-contrib-cssmin": "^0.11.0",
|
||||||
|
"grunt-contrib-jshint": "^0.11.0",
|
||||||
|
"grunt-contrib-uglify": "^0.7.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
19
src/css/style.css
Normal file
19
src/css/style.css
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
body {
|
||||||
|
font-family: Helvetica, Arial, sans-serif;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
width: 600px;
|
||||||
|
text-align: center;
|
||||||
|
margin: 15px auto;
|
||||||
|
z-index: 10;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #6C9BD9;
|
||||||
|
font-size: 50px;
|
||||||
|
}
|
||||||
|
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;}
|
||||||
|
#playground {background: url(feuille-de-papier.jpg) top left no-repeat; display: block; width: 600px; height:600px; margin: 0 auto;}
|
||||||
23
src/index.html
Normal file
23
src/index.html
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
<!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="js/const.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Mots Mélés</h1>
|
||||||
|
<div id="playground">
|
||||||
|
<div id="firstGame">
|
||||||
|
<canvas id="c"></canvas>
|
||||||
|
|
||||||
|
<ul id="words">
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="js/script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -12,7 +12,7 @@
|
|||||||
var LabeledRect = fabric.util.createClass(fabric.Rect, {
|
var LabeledRect = fabric.util.createClass(fabric.Rect, {
|
||||||
type: 'labeledRect',
|
type: 'labeledRect',
|
||||||
initialize: function(options) {
|
initialize: function(options) {
|
||||||
options || (options = { });
|
options = options || {};
|
||||||
this.callSuper('initialize', options);
|
this.callSuper('initialize', options);
|
||||||
this.set('label', options.label || '');
|
this.set('label', options.label || '');
|
||||||
},
|
},
|
||||||
151
style.css
151
style.css
@ -1,151 +0,0 @@
|
|||||||
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