mirror of
https://github.com/Chouchen/motsmeles.git
synced 2018-06-07 06:04:38 +02:00
first generator
This commit is contained in:
Shikiryu
parent
ec918d7810
commit
e634521128
2
dist/js/motsmeles.min.js
vendored
2
dist/js/motsmeles.min.js
vendored
@ -1,2 +1,2 @@
|
||||
/*! 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);
|
||||
var SIZE=30,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"];!function(a,b,c,d){var e,f,g,h,i=new a.Canvas("c",{selection:!1}),j=[],k=[],l=!1,m=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)}}),n=function(){var a,b,e,f=-1,g=j[0]===k[0],h=j[1]===k[1],i=Math.abs(j[0]-k[0])===Math.abs(j[1]-k[1]),l="";if(g){for(b=Math.min(j[1],k[1]),e=Math.max(j[1],k[1]),a=b;e>=a;a++)l+=c[j[0]][a];return Math.max(d.indexOf(l),d.indexOf(l.split("").reverse().join("")))}if(h){for(b=Math.min(j[0],k[0]),e=Math.max(j[0],k[0]),a=b;e>=a;a++)l+=c[a][j[1]];return Math.max(d.indexOf(l),d.indexOf(l.split("").reverse().join("")))}if(i){for(var m=j[0]-k[0]<0,n=j[1]-k[1]<0,o=0,p=Math.abs(j[0]-k[0]);p>=o;o++)l+=c[m?j[0]+o:j[0]-o][n?j[1]+o:j[1]-o];return Math.max(d.indexOf(l),d.indexOf(l.split("").reverse().join("")))}return f},o=function(a){var b=document.getElementById("words").getElementsByTagName("li"),c=b.length;for(g=0;c>g;g++)if(b[g].textContent===a){b[g].className="validate";break}},p=function(){var a,b=1,d=c.length;if(0!==d&&c[0]){for(a=c[0].length;d>b;b++)if(c[b].length!==a)return!1;return!0}return!1},q=function(){if(!p())throw new Error("invalid grid");var a,g=c.length,h=c[0].length,j=document.createDocumentFragment();for(i.setDimensions({width:b*h+h,height:b*g+g}),e=0;h>e;e++)for(f=0;g>f;f++){var k=new m({left:e*b,top:f*b,fill:"white",stroke:"black",width:b,height:b,label:c[f][e],selectable:!1});i.add(k)}d.forEach(function(b){a=document.createElement("li"),a.innerHTML=b.toUpperCase(),j.appendChild(a)}),document.getElementById("words").appendChild(j)};i.on("mouse:down",function(c){l=!0;var d=i.getPointer(c.e),e=[d.x,d.y,d.x,d.y];j=[Math.floor(e[1]/b),Math.floor(e[0]/b)],h=new a.Line(e,{stroke:"black",strokeLineCap:"round",strokeWidth:b/6,originX:"center",originY:"center"}),i.add(h)}),i.on("mouse:move",function(a){if(l){var b=i.getPointer(a.e);h.set({x2:b.x,y2:b.y}),i.renderAll()}}),i.on("mouse:up",function(c){l=!1;var e=i.getPointer(c.e),f=[e.x,e.y];if(k=[Math.floor(f[1]/b),Math.floor(f[0]/b)],i.remove(h),j[0]!==k[0]||j[1]!==k[1]){var g=n();if(-1!==g){var m=d[g];m=j.reverse().join("").concat(k.reverse().join("")).split(""),m=m.map(function(a){return a*b+b/2});var p=new a.Line(m,{stroke:"black",strokeLineCap:"round",strokeWidth:b/6,originX:"center",originY:"center",selectable:!1});o(d[g]),d.splice(g,1),i.add(p),0===d.length&&r()}}j=[],k=[]});var r=function(){};q()}(fabric,SIZE,GRID,words);
|
||||
118
src/generator.html
Normal file
118
src/generator.html
Normal file
@ -0,0 +1,118 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title>mots mélés generator</title>
|
||||
<style>
|
||||
.inputGrid { width: 10px; height: 10px; float:left;}
|
||||
.clearboth {
|
||||
clear: both;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
</body>
|
||||
<script>
|
||||
var grid = [];
|
||||
var width = 1;
|
||||
var height= 1;
|
||||
var current = { word : '', start: [], end: [] };
|
||||
var sens;
|
||||
var isChoosingSens = false;
|
||||
var inputGrid = document.getElementById('generator-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" 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);
|
||||
|
||||
document.body.addEventListener("keydown", function(evt) {
|
||||
// left = 37
|
||||
// up = 38
|
||||
// right = 39
|
||||
// down = 40
|
||||
var senses = [37,38,39,40];
|
||||
if (isChoosingSens && senses.indexOf(evt.keyCode) !== -1 ) {
|
||||
sens = evt.keyCode;
|
||||
console.log("sens is " + sens);
|
||||
}
|
||||
}, false);
|
||||
|
||||
var chooseSens = function chooseSens() {
|
||||
isChoosingSens = true;
|
||||
console.log('choose a sens !');
|
||||
};
|
||||
|
||||
var validWord = function validWord() {
|
||||
console.log('todo validword');
|
||||
};
|
||||
|
||||
var goToNextCase = function goToNextCase() {
|
||||
console.log('todo gotonext');
|
||||
};
|
||||
|
||||
var gridFocus = function gridFocus(evt) {
|
||||
if(sens == undefined && !isChoosingSens) {
|
||||
chooseSens();
|
||||
}
|
||||
};
|
||||
|
||||
var gridKeydown = function gridKeydown(evt) {
|
||||
var typedKey = evt.keyCode;
|
||||
// left = 37
|
||||
// up = 38
|
||||
// right = 39
|
||||
// down = 40
|
||||
var senses = [37,38,39,40];
|
||||
if (isChoosingSens && senses.indexOf(evt.keyCode) !== -1 ) {
|
||||
sens = evt.keyCode;
|
||||
isChoosingSens = false;
|
||||
console.log("sens is " + sens);
|
||||
} else if (typedKey === 13) {
|
||||
validWord();
|
||||
sens = void 0;
|
||||
current.word = '';
|
||||
} else {
|
||||
current.word += typedKey;
|
||||
goToNextCase();
|
||||
}
|
||||
};
|
||||
|
||||
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("focus",gridFocus);
|
||||
input.removeEventListener("keydown",gridKeydown);
|
||||
|
||||
input.addEventListener("focus", gridFocus.bind(this), false);
|
||||
input.addEventListener("keydown", gridKeydown.bind(this), false);
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user