Browse Source

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

generator_simple
Shikiryu 4 years ago
parent
commit
656ffabd32

+ 37
- 18
Gruntfile.js View File

@@ -7,45 +7,64 @@ module.exports = function(grunt) {
7 7
             options: {
8 8
                 banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
9 9
             },
10
-            build: {
11
-                src: 'src/js/*.js',
12
-                dest: 'dist/js/<%= pkg.name %>.min.js'
10
+            game: {
11
+                files: {
12
+                    'dist/js/<%= pkg.name %>.game.min.js': ['src/game/js/*.js']
13
+                }
14
+            },
15
+            generator: {
16
+                files: {
17
+                    'dist/js/<%= pkg.name %>.generator.min.js': ['src/generator/js/*.js']
18
+                }
13 19
             }
14 20
         },
15 21
         cssmin: {
16 22
             target: {
17 23
                 files: {
18
-                    'dist/css/<%= pkg.name %>.css': 'src/css/*.css'
24
+                    'dist/css/<%= pkg.name %>.generator.css': 'src/generator/css/*.css',
25
+                    'dist/css/<%= pkg.name %>.game.css': 'src/game/css/*.css'
19 26
                 }
20 27
             }
21 28
         },
22 29
         jshint: {
23
-            all: ['src/js/*.js']
30
+            all: ['src/game/js/*.js', 'src/generator/js/*.js']
24 31
         },
25 32
         copy: {
26 33
             main: {
27 34
                 files: [
28
-                    {expand: true, cwd: 'src/', src: '*.html', dest: 'dist/', filter: 'isFile'},
29
-                    {expand: true, cwd: 'vendor/', src: '*.min.js', dest: 'dist/js/', filter: 'isFile'}
30
-                ]
35
+                    {expand: true, flatten: true, src: ['src/game/*.html', 'src/generator/*.html'], dest: 'dist/', filter: 'isFile'}
36
+                ],
37
+                options: {
38
+                    process: function (content, srcpath) {
39
+                        return content.replace(/(game.css|generator.css)/g, "motsmeles.$1");
40
+                        //return content.replace(/(\.\.\/\.\.\/vendor\/fabric\.1\.4\.0\.min\.js)/g,"js/fabric.1.4.0.min.js");
41
+                    }
42
+                }
31 43
             },
32 44
             dev: {
33 45
                 files: [
34
-                    {expand: true, cwd: 'src/', src: '*.html', dest: 'dist/', filter: 'isFile'},
35
-                    {expand: true, cwd: 'vendor/', src: '*.min.js', dest: 'dist/js/', filter: 'isFile'},
36
-                    {expand: true, cwd: 'src/js/', src: '*.js', dest: 'dist/js/', filter: 'isFile'},
37
-                    {expand: true, cwd: 'src/css/', src: '*.js', dest: 'dist/js/', filter: 'isFile'}
46
+                    {expand: true, flatten: true, src: ['src/game/*.html', 'src/generator/*.html'], dest: 'dist/', filter: 'isFile'},
47
+                    {expand: true, cwd: 'src/game/css/', src: '*.css', dest: 'dist/css/', filter: 'isFile'},
48
+                    {expand: true, cwd: 'src/generator/css/', src: '*.css', dest: 'dist/css/', filter: 'isFile'},
38 49
                 ]
50
+            },
51
+            vendor: {
52
+                files: [{expand: true, cwd: 'vendor/', src: '*.min.js', dest: 'dist/js/', filter: 'isFile'}]
39 53
             }
40 54
         },
41 55
         concat: {
42
-            dist: {
43
-                src: ['src/js/*.js'],
44
-                dest: 'dist/js/<%= pkg.name %>.min.js'
56
+            game: {
57
+                src: ['src/game/js/*.js'],
58
+                dest: 'dist/js/<%= pkg.name %>.game.min.js'
59
+            },
60
+            generator: {
61
+                src: ['src/generator/js/*.js'],
62
+                dest: 'dist/js/<%= pkg.name %>.generator.min.js'
45 63
             }
46 64
         },
47 65
         clean: {
48
-            dist: ['dist/js','dist/css','index.html']
66
+            dist: ['dist'],
67
+            force: true
49 68
         }
50 69
     });
51 70
 
@@ -56,7 +75,7 @@ module.exports = function(grunt) {
56 75
     grunt.loadNpmTasks('grunt-contrib-copy');
57 76
     grunt.loadNpmTasks('grunt-contrib-concat');
58 77
 
59
-    grunt.registerTask('default', ['clean:dist', 'jshint', 'uglify', 'cssmin', 'copy:main']);
60
-    grunt.registerTask('dev', ['clean:dist', 'jshint', 'concat', 'copy:dev']);
78
+    grunt.registerTask('default', ['clean:dist', 'jshint', 'uglify', 'cssmin', 'copy:main', 'copy:vendor']);
79
+    grunt.registerTask('dev', ['clean:dist', 'jshint', 'concat', 'copy:dev', 'copy:vendor']);
61 80
 
62 81
 };

+ 0
- 1
dist/css/motsmeles.css
File diff suppressed because it is too large
View File


+ 7
- 7
dist/index.html View File

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

+ 0
- 2
dist/js/motsmeles.min.js
File diff suppressed because it is too large
View File


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


+ 17
- 0
src/game/index.html View File

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

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


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


+ 0
- 64
src/generator.html View File

@@ -1,64 +0,0 @@
1
-<!DOCTYPE html>
2
-<html>
3
-<head lang="en">
4
-    <meta charset="UTF-8">
5
-    <script src="../vendor/fabric.1.4.0.min.js"></script>
6
-    <title>mots mélés generator</title>
7
-    <style>
8
-        .inputGrid { width: 10px; height: 10px; float:left;}
9
-        .clearboth {
10
-            clear: both;
11
-        }
12
-        html, body {
13
-            display: block;
14
-            height: 100%;
15
-            width: 100%;
16
-            overflow: hidden;
17
-        }
18
-        header {
19
-            height: 50px;
20
-            display: block;
21
-            position: absolute;
22
-            right: 0;
23
-            top: 0;
24
-            left: 0;
25
-            background-color: #6C9BD9;
26
-            box-shadow: 0 8px 6px -6px black;
27
-        }
28
-        h3 {margin: 5px;}
29
-        body>div {
30
-            padding-top: 50px;
31
-            display: block;
32
-            width: 100%;
33
-            height: 100%;
34
-        }
35
-        textarea {
36
-            width: 500px;
37
-            height: 300px;
38
-            box-shadow: inset 0 0 10px #000000;
39
-        }
40
-    </style>
41
-</head>
42
-<body>
43
-    <header>
44
-        <h3>Current mode : <span id="currentMode">nothing</span></h3>
45
-    </header>
46
-    <div id="grid">
47
-        <aside id="generator-options">
48
-            <label for="grid-width"><input type="number" id="grid-width" min="1" max="20" step="1" name="grid-width" value="1"/></label>
49
-            <label for="grid-height"><input type="number" id="grid-height" min="1" max="20" step="1" name="grid-height" value="1"/></label>
50
-        </aside>
51
-        <section id="generator-grid"></section>
52
-        <button id="validateGrid">Validate</button>
53
-    </div>
54
-    <div id="wordsList">
55
-        <canvas id="c"></canvas>
56
-        <ul id="words"></ul>
57
-        <button id="validateWord">Validate</button>
58
-    </div>
59
-    <div id="validate">
60
-        <textarea></textarea>
61
-    </div>
62
-</body>
63
-<script src="js/generator.js"></script>
64
-</html>

+ 32
- 0
src/generator/css/generator.css View File

@@ -0,0 +1,32 @@
1
+.inputGrid { width: 10px; height: 10px; float:left;}
2
+.clearboth {
3
+    clear: both;
4
+}
5
+html, body {
6
+    display: block;
7
+    height: 100%;
8
+    width: 100%;
9
+    overflow: hidden;
10
+}
11
+header {
12
+    height: 50px;
13
+    display: block;
14
+    position: absolute;
15
+    right: 0;
16
+    top: 0;
17
+    left: 0;
18
+    background-color: #6C9BD9;
19
+    box-shadow: 0 8px 6px -6px black;
20
+}
21
+h3 {margin: 5px;}
22
+section#step {
23
+    padding-top: 50px;
24
+    display: block;
25
+    width: 100%;
26
+    height: 100%;
27
+}
28
+textarea {
29
+    width: 500px;
30
+    height: 300px;
31
+    box-shadow: inset 0 0 10px #000000;
32
+}

+ 17
- 0
src/generator/generator.html View File

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

src/js/generator.js → src/generator/js/generator.js View File

@@ -4,8 +4,8 @@ var width = 1;
4 4
 var height= 1;
5 5
 var SIZE = 30;
6 6
 var currentModeText = document.getElementById('currentMode');
7
-var inputGrid = document.getElementById('generator-grid');
8
-var canvas = new fabric.Canvas('c', { selection: false });
7
+var inputGrid;
8
+var canvas;
9 9
 var LabeledRect = fabric.util.createClass(fabric.Rect, {
10 10
     type: 'labeledRect',
11 11
     initialize: function(options) {
@@ -25,8 +25,19 @@ var LabeledRect = fabric.util.createClass(fabric.Rect, {
25 25
         ctx.fillText(this.label, -this.width/2 + 5, -this.height/2 + 20);
26 26
     }
27 27
 });
28
+var stepSection = document.getElementById('step');
28 29
 
29 30
 var initGrid = function() {
31
+    stepSection.innerHTML = '<div id="grid">'+
32
+        '<aside id="generator-options">'+
33
+        '<label for="grid-width"><input type="number" id="grid-width" min="1" max="20" step="1" name="grid-width" value="1"/></label>'+
34
+        '<label for="grid-height"><input type="number" id="grid-height" min="1" max="20" step="1" name="grid-height" value="1"/></label>'+
35
+        '</aside>'+
36
+        '<section id="generator-grid"></section>'+
37
+        '<button id="validateGrid">Validate</button>'+
38
+        '</div>';
39
+    currentModeText.innerHTML = 'Fill the grid with letters';
40
+    inputGrid = document.getElementById('generator-grid');
30 41
     // grid
31 42
     var modifyGridSize = function modifyGridSize() {
32 43
         var currentWidth = width;//grid[0] ? grid[0].length : 0;
@@ -81,7 +92,7 @@ var initGrid = function() {
81 92
             default: nextCase = currentCase;
82 93
                 break;
83 94
         }
84
-        if(nextCase != undefined) {
95
+        if(nextCase !== undefined) {
85 96
             nextCase.focus();
86 97
         }
87 98
     };
@@ -107,7 +118,7 @@ var initGrid = function() {
107 118
     var isGridValid = function isGridValid() {
108 119
         for (var i = 0,l = height; i <l ; i++) {
109 120
             for (var j = 0, m = width; j<m; j++) {
110
-                if (document.querySelector('.inputGrid[data-x="'+j+'"][data-y="'+i+'"]').value == '') {
121
+                if (document.querySelector('.inputGrid[data-x="'+j+'"][data-y="'+i+'"]').value === '') {
111 122
                     return false;
112 123
                 }
113 124
             }
@@ -130,6 +141,13 @@ var initGrid = function() {
130 141
     }, false);
131 142
 };
132 143
 var initWords = function initWords() {
144
+    stepSection.innerHTML = '<div id="wordsList">'+
145
+        '<canvas id="c"></canvas>'+
146
+        '<ul id="words"></ul>'+
147
+        '<button id="validateWord">Validate</button>'+
148
+        '</div>';
149
+    currentModeText.innerHTML = 'Cross all your words';
150
+    canvas = new fabric.Canvas('c', { selection: false });
133 151
     var numHeight = grid.length;
134 152
     var numWidth = grid[0].length;
135 153
     var ulContent = document.createDocumentFragment();
@@ -210,21 +228,34 @@ var initWords = function initWords() {
210 228
         var isVertical = origin[1] === end[1];
211 229
         var isDiagonal = Math.abs(origin[0]-end[0]) === Math.abs(origin[1]-end[1]);
212 230
         var x;
213
-        var first;
214
-        var last;
231
+        var toGo = [];
215 232
         var word = '';
216
-        if(isHorizontal) {
217
-            first = Math.min(origin[1], end[1]);
218
-            last = Math.max(origin[1], end[1]);
219
-            for( x=first;x<=last; x++ ) {
220
-                word += grid[origin[0]][x];
233
+        var range = function range(origin, end) {
234
+            var matrix = [];
235
+            var plus;
236
+            plus = origin <= end;
237
+            if (plus) {
238
+                while (origin <= end) {
239
+                    matrix.push(origin);
240
+                    origin ++;
241
+                }
242
+            } else {
243
+                while (origin >= end) {
244
+                    matrix.push(origin);
245
+                    origin --;
246
+                }
221 247
             }
248
+            return matrix;
249
+        };
250
+
251
+        if(isHorizontal) {
252
+            range(origin[1], end[1]).forEach(function(elt) {
253
+                word += grid[origin[0]][elt];
254
+            });
222 255
         }else if (isVertical) {
223
-            first = Math.min(origin[0], end[0]);
224
-            last = Math.max(origin[0], end[0]);
225
-            for( x=first;x<=last; x++ ) {
226
-                word += grid[x][origin[1]];
227
-            }
256
+            range(origin[0], end[0]).forEach(function(elt) {
257
+                word += grid[elt][origin[1]];
258
+            });
228 259
         } else if(isDiagonal) {
229 260
             var xRight = origin[0] - end[0] < 0;
230 261
             var yDown = origin[1] - end[1] < 0;
@@ -243,6 +274,10 @@ var initWords = function initWords() {
243 274
     }, false);
244 275
 };
245 276
 var initSave = function initSave() {
277
+    currentModeText.innerHTML = 'Copy this in your game and that\'s it. :)';
278
+    stepSection.innerHTML = '<div id="validate">'+
279
+        '<textarea></textarea>'+
280
+        '</div>';
246 281
     // save
247 282
     var arrayToString = function arrayToString(array) {
248 283
         var result = '[';

+ 0
- 17
src/index.html View File

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

Loading…
Cancel
Save