1
0
mirror of https://github.com/Chouchen/motsmeles.git synced 2018-06-07 06:04:38 +02:00

workspace cleaning

This commit is contained in:
Shikiryu 2015-01-25 23:53:42 +01:00
parent 6be68e5b1c
commit 0973f4b95b
8 changed files with 89 additions and 181 deletions

35
Gruntfile.js Normal file
View 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' ]);
};

View File

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

View File

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

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