Shikiryu
/
motsmeles
mirror of https://github.com/Chouchen/motsmeles.git
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

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

generator_simple
Shikiryu 7 years ago
parent
921015d0a5
commit
656ffabd32
13 changed files with 161 additions and 125 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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. 64
      src/generator.html
  10. 32
      src/generator/css/generator.css
  11. 17
      src/generator/generator.html
  12. 67
      src/generator/js/generator.js
  13. 17
      src/index.html

55
Gruntfile.js
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']);
};

1
dist/css/motsmeles.css
View File

File diff suppressed because one or more lines are too long

14
dist/index.html
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>

2
dist/js/motsmeles.min.js
View File

File diff suppressed because one or more lines are too long

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

17
src/game/index.html
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>

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

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

64
src/generator.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>

32
src/generator/css/generator.css
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;
}

17
src/generator/generator.html
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>

67
src/js/generator.js → src/generator/js/generator.js
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 = '';
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];
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) {
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 = '[';

17
src/index.html
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>
Write Preview
Loading…
Cancel
Save