Evrything works. Generator is ugly (but who cares?) Grunt and folders modified.

This commit is contained in:
Shikiryu 2015-02-21 22:56:45 +01:00
parent 921015d0a5
commit 656ffabd32
13 changed files with 161 additions and 125 deletions

View File

@ -7,45 +7,64 @@ module.exports = function(grunt) {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/js/*.js',
dest: 'dist/js/<%= pkg.name %>.min.js'
game: {
files: {
'dist/js/<%= pkg.name %>.game.min.js': ['src/game/js/*.js']
}
},
generator: {
files: {
'dist/js/<%= pkg.name %>.generator.min.js': ['src/generator/js/*.js']
}
}
},
cssmin: {
target: {
files: {
'dist/css/<%= pkg.name %>.css': 'src/css/*.css'
'dist/css/<%= pkg.name %>.generator.css': 'src/generator/css/*.css',
'dist/css/<%= pkg.name %>.game.css': 'src/game/css/*.css'
}
}
},
jshint: {
all: ['src/js/*.js']
all: ['src/game/js/*.js', 'src/generator/js/*.js']
},
copy: {
main: {
files: [
{expand: true, cwd: 'src/', src: '*.html', dest: 'dist/', filter: 'isFile'},
{expand: true, cwd: 'vendor/', src: '*.min.js', dest: 'dist/js/', filter: 'isFile'}
]
{expand: true, flatten: true, src: ['src/game/*.html', 'src/generator/*.html'], dest: 'dist/', filter: 'isFile'}
],
options: {
process: function (content, srcpath) {
return content.replace(/(game.css|generator.css)/g, "motsmeles.$1");
//return content.replace(/(\.\.\/\.\.\/vendor\/fabric\.1\.4\.0\.min\.js)/g,"js/fabric.1.4.0.min.js");
}
}
},
dev: {
files: [
{expand: true, cwd: 'src/', src: '*.html', dest: 'dist/', filter: 'isFile'},
{expand: true, cwd: 'vendor/', src: '*.min.js', dest: 'dist/js/', filter: 'isFile'},
{expand: true, cwd: 'src/js/', src: '*.js', dest: 'dist/js/', filter: 'isFile'},
{expand: true, cwd: 'src/css/', src: '*.js', dest: 'dist/js/', filter: 'isFile'}
{expand: true, flatten: true, src: ['src/game/*.html', 'src/generator/*.html'], dest: 'dist/', filter: 'isFile'},
{expand: true, cwd: 'src/game/css/', src: '*.css', dest: 'dist/css/', filter: 'isFile'},
{expand: true, cwd: 'src/generator/css/', src: '*.css', dest: 'dist/css/', filter: 'isFile'},
]
},
vendor: {
files: [{expand: true, cwd: 'vendor/', src: '*.min.js', dest: 'dist/js/', filter: 'isFile'}]
}
},
concat: {
dist: {
src: ['src/js/*.js'],
dest: 'dist/js/<%= pkg.name %>.min.js'
game: {
src: ['src/game/js/*.js'],
dest: 'dist/js/<%= pkg.name %>.game.min.js'
},
generator: {
src: ['src/generator/js/*.js'],
dest: 'dist/js/<%= pkg.name %>.generator.min.js'
}
},
clean: {
dist: ['dist/js','dist/css','index.html']
dist: ['dist'],
force: true
}
});
@ -56,7 +75,7 @@ module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['clean:dist', 'jshint', 'uglify', 'cssmin', 'copy:main']);
grunt.registerTask('dev', ['clean:dist', 'jshint', 'concat', 'copy:dev']);
grunt.registerTask('default', ['clean:dist', 'jshint', 'uglify', 'cssmin', 'copy:main', 'copy:vendor']);
grunt.registerTask('dev', ['clean:dist', 'jshint', 'concat', 'copy:dev', 'copy:vendor']);
};

View File

@ -1 +0,0 @@
body{font-family:Helvetica,Arial,sans-serif;font-size:20px;font-weight:700}h1{width:600px;text-align:center;margin:15px auto;z-index:10;font-weight:700;color:#6C9BD9;font-size:50px}ul{list-style:none;float:left;margin:50px 30px;line-height:20px;font-size:16px}ul li.validate{color:green;font-weight:700;text-decoration:line-through}ul li.validate:before{content:'\2713 ';color:green;font-weight:700}.canvas-container{float:left;margin:50px 30px}#playground{display:block;width:600px;height:600px;margin:0 auto}

14
dist/index.html vendored
View File

@ -4,14 +4,14 @@
<title>Mot mélés</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/fabric.1.4.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/motsmeles.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/game.css" media="screen" />
</head>
<body>
<h1>Mots Mélés</h1>
<div id="playground">
<canvas id="c"></canvas>
<ul id="words"></ul>
</div>
<script src="js/motsmeles.min.js"></script>
<h1>Mots Mélés</h1>
<div id="playground">
<canvas id="c"></canvas>
<ul id="words"></ul>
</div>
<script src="js/motsmeles.game.min.js"></script>
</body>
</html>

View File

@ -1,2 +0,0 @@
/*! motsmeles 2015-01-29 */
var SIZE=30,NUMCASE=10,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"]],words=["AIX","APT","ARLES","AUBAGNE","AUPS","AVIGNON","BANDOL","CANNES","CASSIS","DIGNE","FREJUS","HYERES","LUNEL","MIRAMAS","NICE","ORANGE","SALON","SORGUES","TOULON","VENCE"],reponse="BA";!function(a,b,c,d,e,f,g){var h,i,j,k,l=new a.Canvas("c",{selection:!1}),m=[],n=[],o=!1;l.setDimensions({width:c*d+d,height:c*d+d});var p=a.util.createClass(a.Rect,{type:"labeledRect",initialize:function(a){a=a||{},this.callSuper("initialize",a),this.set("label",a.label||"")},toObject:function(){return a.util.object.extend(this.callSuper("toObject"),{label:this.get("label")})},_render:function(a){this.callSuper("_render",a),a.font="20px Helvetica",a.fillStyle="#333",a.fillText(this.label,-this.width/2+5,-this.height/2+20)}}),q=function(){var a,b,c,d=-1,f=m[0]===n[0],h=m[1]===n[1],i=Math.abs(m[0]-n[0])===Math.abs(m[1]-n[1]),j="";if(f){for(b=Math.min(m[1],n[1]),c=Math.max(m[1],n[1]),a=b;c>=a;a++)j+=e[m[0]][a];return Math.max(g.indexOf(j),g.indexOf(j.split("").reverse().join("")))}if(h){for(b=Math.min(m[0],n[0]),c=Math.max(m[0],n[0]),a=b;c>=a;a++)j+=e[a][m[1]];return Math.max(g.indexOf(j),g.indexOf(j.split("").reverse().join("")))}if(i){for(var k=m[0]-n[0]<0,l=m[1]-n[1]<0,o=0,p=Math.abs(m[0]-n[0]);p>=o;o++)j+=e[k?m[0]+o:m[0]-o][l?m[1]+o:m[1]-o];return Math.max(g.indexOf(j),g.indexOf(j.split("").reverse().join("")))}return d},r=function(a){var c=b.getElementById("words").getElementsByTagName("li"),d=c.length;for(j=0;d>j;j++)if(c[j].textContent===a){c[j].className="validate";break}};for(h=0;d>h;h++)for(i=0;d>i;i++){var s=new p({left:h*c,top:i*c,fill:"white",stroke:"black",width:c,height:c,label:e[i][h],selectable:!1});l.add(s)}for(var t=0;t<g.length;t++){var u=b.createElement("li");u.innerHTML=g[t].toUpperCase(),b.getElementById("words").appendChild(u)}l.on("mouse:down",function(b){o=!0;var d=l.getPointer(b.e),e=[d.x,d.y,d.x,d.y];m=[Math.floor(e[1]/c),Math.floor(e[0]/c)],k=new a.Line(e,{stroke:"black",strokeLineCap:"round",strokeWidth:c/6,strokeDashArray:[c/6,c/6],originX:"center",originY:"center"}),l.add(k)}),l.on("mouse:move",function(a){if(o){var b=l.getPointer(a.e);k.set({x2:b.x,y2:b.y}),l.renderAll()}}),l.on("mouse:up",function(b){o=!1;var d=l.getPointer(b.e),e=[d.x,d.y];if(n=[Math.floor(e[1]/c),Math.floor(e[0]/c)],l.remove(k),m[0]!==n[0]||m[1]!==n[1]){var f=q();if(-1!==f){var h=g[f];h=m.reverse().join("").concat(n.reverse().join("")).split(""),h=h.map(function(a){return a*c+c/2});var i=new a.Line(h,{stroke:"black",strokeLineCap:"round",strokeWidth:c/6,originX:"center",originY:"center",selectable:!1});r(g[f]),g.splice(f,1),l.add(i),0===g.length&&v()}}m=[],n=[]});var v=function(){}}(fabric,document,SIZE,NUMCASE,GRID,reponse,words);

17
src/game/index.html Normal file
View File

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<title>Mot mélés</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/fabric.1.4.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/game.css" media="screen" />
</head>
<body>
<h1>Mots Mélés</h1>
<div id="playground">
<canvas id="c"></canvas>
<ul id="words"></ul>
</div>
<script src="js/motsmeles.game.min.js"></script>
</body>
</html>

View File

@ -1,64 +0,0 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="../vendor/fabric.1.4.0.min.js"></script>
<title>mots mélés generator</title>
<style>
.inputGrid { width: 10px; height: 10px; float:left;}
.clearboth {
clear: both;
}
html, body {
display: block;
height: 100%;
width: 100%;
overflow: hidden;
}
header {
height: 50px;
display: block;
position: absolute;
right: 0;
top: 0;
left: 0;
background-color: #6C9BD9;
box-shadow: 0 8px 6px -6px black;
}
h3 {margin: 5px;}
body>div {
padding-top: 50px;
display: block;
width: 100%;
height: 100%;
}
textarea {
width: 500px;
height: 300px;
box-shadow: inset 0 0 10px #000000;
}
</style>
</head>
<body>
<header>
<h3>Current mode : <span id="currentMode">nothing</span></h3>
</header>
<div id="grid">
<aside id="generator-options">
<label for="grid-width"><input type="number" id="grid-width" min="1" max="20" step="1" name="grid-width" value="1"/></label>
<label for="grid-height"><input type="number" id="grid-height" min="1" max="20" step="1" name="grid-height" value="1"/></label>
</aside>
<section id="generator-grid"></section>
<button id="validateGrid">Validate</button>
</div>
<div id="wordsList">
<canvas id="c"></canvas>
<ul id="words"></ul>
<button id="validateWord">Validate</button>
</div>
<div id="validate">
<textarea></textarea>
</div>
</body>
<script src="js/generator.js"></script>
</html>

View File

@ -0,0 +1,32 @@
.inputGrid { width: 10px; height: 10px; float:left;}
.clearboth {
clear: both;
}
html, body {
display: block;
height: 100%;
width: 100%;
overflow: hidden;
}
header {
height: 50px;
display: block;
position: absolute;
right: 0;
top: 0;
left: 0;
background-color: #6C9BD9;
box-shadow: 0 8px 6px -6px black;
}
h3 {margin: 5px;}
section#step {
padding-top: 50px;
display: block;
width: 100%;
height: 100%;
}
textarea {
width: 500px;
height: 300px;
box-shadow: inset 0 0 10px #000000;
}

View File

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="js/fabric.1.4.0.min.js"></script>
<title>mots mélés generator</title>
<link rel="stylesheet" type="text/css" href="css/generator.css" media="screen" />
</head>
<body>
<header>
<h3>Instructions: <span id="currentMode">nothing</span></h3>
</header>
<section id="step">
</section>
</body>
<script src="js/motsmeles.generator.min.js"></script>
</html>

View File

@ -4,8 +4,8 @@ var width = 1;
var height= 1;
var SIZE = 30;
var currentModeText = document.getElementById('currentMode');
var inputGrid = document.getElementById('generator-grid');
var canvas = new fabric.Canvas('c', { selection: false });
var inputGrid;
var canvas;
var LabeledRect = fabric.util.createClass(fabric.Rect, {
type: 'labeledRect',
initialize: function(options) {
@ -25,8 +25,19 @@ var LabeledRect = fabric.util.createClass(fabric.Rect, {
ctx.fillText(this.label, -this.width/2 + 5, -this.height/2 + 20);
}
});
var stepSection = document.getElementById('step');
var initGrid = function() {
stepSection.innerHTML = '<div id="grid">'+
'<aside id="generator-options">'+
'<label for="grid-width"><input type="number" id="grid-width" min="1" max="20" step="1" name="grid-width" value="1"/></label>'+
'<label for="grid-height"><input type="number" id="grid-height" min="1" max="20" step="1" name="grid-height" value="1"/></label>'+
'</aside>'+
'<section id="generator-grid"></section>'+
'<button id="validateGrid">Validate</button>'+
'</div>';
currentModeText.innerHTML = 'Fill the grid with letters';
inputGrid = document.getElementById('generator-grid');
// grid
var modifyGridSize = function modifyGridSize() {
var currentWidth = width;//grid[0] ? grid[0].length : 0;
@ -81,7 +92,7 @@ var initGrid = function() {
default: nextCase = currentCase;
break;
}
if(nextCase != undefined) {
if(nextCase !== undefined) {
nextCase.focus();
}
};
@ -107,7 +118,7 @@ var initGrid = function() {
var isGridValid = function isGridValid() {
for (var i = 0,l = height; i <l ; i++) {
for (var j = 0, m = width; j<m; j++) {
if (document.querySelector('.inputGrid[data-x="'+j+'"][data-y="'+i+'"]').value == '') {
if (document.querySelector('.inputGrid[data-x="'+j+'"][data-y="'+i+'"]').value === '') {
return false;
}
}
@ -130,6 +141,13 @@ var initGrid = function() {
}, false);
};
var initWords = function initWords() {
stepSection.innerHTML = '<div id="wordsList">'+
'<canvas id="c"></canvas>'+
'<ul id="words"></ul>'+
'<button id="validateWord">Validate</button>'+
'</div>';
currentModeText.innerHTML = 'Cross all your words';
canvas = new fabric.Canvas('c', { selection: false });
var numHeight = grid.length;
var numWidth = grid[0].length;
var ulContent = document.createDocumentFragment();
@ -210,21 +228,34 @@ var initWords = function initWords() {
var isVertical = origin[1] === end[1];
var isDiagonal = Math.abs(origin[0]-end[0]) === Math.abs(origin[1]-end[1]);
var x;
var first;
var last;
var toGo = [];
var word = '';
var range = function range(origin, end) {
var matrix = [];
var plus;
plus = origin <= end;
if (plus) {
while (origin <= end) {
matrix.push(origin);
origin ++;
}
} else {
while (origin >= end) {
matrix.push(origin);
origin --;
}
}
return matrix;
};
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];
}
range(origin[1], end[1]).forEach(function(elt) {
word += grid[origin[0]][elt];
});
}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]];
}
range(origin[0], end[0]).forEach(function(elt) {
word += grid[elt][origin[1]];
});
} else if(isDiagonal) {
var xRight = origin[0] - end[0] < 0;
var yDown = origin[1] - end[1] < 0;
@ -243,6 +274,10 @@ var initWords = function initWords() {
}, false);
};
var initSave = function initSave() {
currentModeText.innerHTML = 'Copy this in your game and that\'s it. :)';
stepSection.innerHTML = '<div id="validate">'+
'<textarea></textarea>'+
'</div>';
// save
var arrayToString = function arrayToString(array) {
var result = '[';

View File

@ -1,17 +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="js/fabric.1.4.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/motsmeles.css" media="screen" />
</head>
<body>
<h1>Mots Mélés</h1>
<div id="playground">
<canvas id="c"></canvas>
<ul id="words"></ul>
</div>
<script src="js/motsmeles.min.js"></script>
</body>
</html>