Browse Source

Merge pull request #4 from Chouchen/generator_simple

Finally a working "generator". Well it simplified the process but doesn't "generate" something automatically.
master
Shikiryu 7 years ago
parent
commit
9e76b22681
  1. 55
      Gruntfile.js
  2. 1
      dist/css/motsmeles.css
  3. 14
      dist/index.html
  4. 2
      dist/js/motsmeles.min.js
  5. 0
      src/game/css/game.css
  6. 17
      src/game/index.html
  7. 0
      src/game/js/const.js
  8. 0
      src/game/js/script.js
  9. 32
      src/generator/css/generator.css
  10. 17
      src/generator/generator.html
  11. 298
      src/generator/js/generator.js
  12. 17
      src/index.html

55
Gruntfile.js

@ -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']);
};

1
dist/css/motsmeles.css

File diff suppressed because one or more lines are too long

14
dist/index.html

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

2
dist/js/motsmeles.min.js

File diff suppressed because one or more lines are too long

0
src/css/style.css → src/game/css/game.css

17
src/game/index.html

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

0
src/js/const.js → src/game/js/const.js

0
src/js/script.js → src/game/js/script.js

32
src/generator/css/generator.css

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

17
src/generator/generator.html

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

298
src/generator/js/generator.js

@ -0,0 +1,298 @@
var grid = [];
var words= [];
var width = 1;
var height= 1;
var SIZE = 30;
var currentModeText = document.getElementById('currentMode');
var inputGrid;
var canvas;
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 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;
var currentHeight = height;//grid.length;
console.log('grid size is ' + currentWidth + ' x ' + currentHeight);
var iHtml = '';
for(var i = 0,l = currentHeight; i <l ; i++) {
for (var j = 0, m = currentWidth; j<m; j++) {
iHtml += '<input type="text" class="inputGrid" data-x="'+j+'" data-y="'+i+'" maxlength="1"/>';
}
iHtml += '<div class="clearboth"></div>';
}
inputGrid.innerHTML = iHtml;
dynamicEvents();
};
document.getElementById('grid-width').addEventListener("change", function(evt){
width = evt.currentTarget.value;
modifyGridSize();
}, false);
document.getElementById('grid-height').addEventListener("change", function(evt){
height = evt.currentTarget.value;
modifyGridSize();
}, false);
var goToNextCase = function goToNextCase(sens) {
var currentCase = document.activeElement;
var currentX = currentCase.getAttribute('data-x');
var currentY = currentCase.getAttribute('data-y');
if (sens === 39) {
if (currentX == width-1) {
currentY++;
currentX = -1;
}
}
var nextCase;
// left = 37
// up = 38
// right = 39
// down = 40
switch( sens ) {
case 37:
nextCase = document.querySelector('.inputGrid[data-x="'+(+currentX-1)+'"][data-y="'+currentY+'"]');
break;
case 38:
nextCase = document.querySelector('.inputGrid[data-x="'+currentX+'"][data-y="'+(+currentY-1)+'"]');
break;
case 39:
nextCase = document.querySelector('.inputGrid[data-x="'+(+currentX+1)+'"][data-y="'+currentY+'"]');
break;
case 40:
nextCase = document.querySelector('.inputGrid[data-x="'+currentX+'"][data-y="'+(+currentY+1)+'"]');
break;
default: nextCase = currentCase;
break;
}
if(nextCase !== undefined) {
nextCase.focus();
}
};
var gridKeyup = function gridKeyup(evt) {
var typedKey = evt.keyCode;
var senses = [37,38,39,40];
if (senses.indexOf(typedKey) !== -1) {
goToNextCase(typedKey);
} else if (typedKey >= 65 && typedKey <= 90) {
evt.currentTarget.value = String.fromCharCode(typedKey).toUpperCase();
goToNextCase(39);
}
};
var dynamicEvents = function dynamicEvents() {
var inputs = document.getElementsByClassName('inputGrid');
var inputsLength = inputs.length;
for (var i = 0; i < inputsLength; i++) {
var input = inputs[i];
input.removeEventListener("keyup",gridKeyup);
input.addEventListener("keyup", gridKeyup.bind(this), false);
}
};
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 === '') {
return false;
}
}
}
return true;
};
document.getElementById('validateGrid').addEventListener('click', function(e) {
if (isGridValid()) {
for (var i = 0,l = height; i <l ; i++) {
grid[i] = [];
for (var j = 0, m = width; j<m; j++) {
grid[i][j] = document.querySelector('.inputGrid[data-x="'+j+'"][data-y="'+i+'"]').value;
}
}
console.log(grid);
location.href = '#wordsList';
initWords();
// gotonextstep
}
}, 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();
var tmpLi;
var i, isDragging, origin, drawingLine, end;
canvas.setDimensions({width: SIZE*numWidth + numWidth, height: SIZE*numHeight + numHeight});
for (i = 0; i < numWidth; i++) {
for (j = 0; j < numHeight; 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);
}
}
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/6,
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 newWord = addWord();
var newLi = document.createElement('li');
newLi.innerHTML = newWord;
document.getElementById('words').appendChild(newLi);
words.push(newWord);
var 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/6,
originX: 'center',
originY: 'center',
selectable: false
});
canvas.add(line);
}
origin = [];
end = [];
});
var addWord = function addWord() {
var result = -1;
var isHorizontal = origin[0] === end[0];
var isVertical = origin[1] === end[1];
var isDiagonal = Math.abs(origin[0]-end[0]) === Math.abs(origin[1]-end[1]);
var x;
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) {
range(origin[1], end[1]).forEach(function(elt) {
word += grid[origin[0]][elt];
});
}else if (isVertical) {
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;
var i = 0;
var loopTime = Math.abs(origin[0]-end[0]);
for (;i<=loopTime;i++) {
word += grid[xRight ? origin[0] + i : origin[0] - i][yDown ? origin[1] +i : origin[1] - i];
}
}
return word;
};
document.getElementById('validateWord').addEventListener('click', function(evt) {
location.href = '#validate';
initSave();
}, 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 = '[';
array.forEach(function(elt){
if (typeof elt === "object") {
result += arrayToString(elt) + ',';
} else {
result += "'" + ""+elt + "',";
}
});
result = result.slice(0, -1) + ']';
return result;
};
document.querySelector('textarea').innerHTML = 'var GRID = ' + arrayToString(grid) + '; var words = ' + arrayToString(words) + ';';
};
initGrid();

17
src/index.html

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