diff options
| -rw-r--r-- | index.css | 6 | ||||
| -rw-r--r-- | index.js | 175 |
2 files changed, 176 insertions, 5 deletions
@@ -77,6 +77,12 @@ td { background:#ff5500; } +.letter { + background:#f3e797; +} +.placed { + color:red; +} .selected { background:orange; } @@ -1,3 +1,5 @@ +'use strict'; + var CW = function(){ // 0 point : blanches × 2. // 1 point : E ×15, A ×9, I ×8, N ×6, O ×6, R ×6, S ×6, T ×6, U ×6, L ×5 @@ -30,7 +32,7 @@ var CW = function(){ "J", "Q", "K", "W", "X", "Y", "Z" ] const points = { - ' ': 0, + " ": 0, E:1, A:1, I:1, N:1, O:1, R:1, S:1, T:1, U:1, L:1, D:2, G:2, M:2, B:3, C:3, P:3, @@ -39,8 +41,167 @@ var CW = function(){ K:10, W:10, X:10, Y:10, Z:10 }; var cursor = undefined; + var placed = []; var selected = undefined; + function makeBoardTileOnCLick(x, y) { + return function() { + var me = document.getElementById(["s", y, "_", x].join("")); + var dst = undefined; + var oth = undefined; + var l = me.innerHTML; + var n; + var i; + if (l === "") { + if (selected === undefined) { + moveCursor(x, y); + } else { + // place the selected letter + me.classList.add("letter"); + me.classList.add("placed"); + me.innerHTML = selected.letter; + dst = document.getElementById(["l", selected.index].join("")); + dst.classList.replace("selected", "letter"); + dst.classList.add("placed"); + placed.push({x:x, y:y, index:selected.index, letter: selected.letter}); + selected = undefined; + } + } else if (me.classList.contains("placed")) { + for(n=placed.length-1; n>=0; n--) { + if (placed[n].x === x && placed[n].y === y) { + break; + } + } + // return the placed letter to the rack + dst = document.getElementById(["l", placed[n].index].join("")); + dst.classList.remove("placed"); + if (selected === undefined) { + // simply remove from the board + me.innerHTML = ""; + me.classList.remove("placed"); + me.classList.remove("letter"); + placed.splice(n, 1); + } else { + // place the selected letter in its place on the board + me.innerHTML = selected.letter; + oth = document.getElementById(["l", selected.index].join("")); + oth.classList.replace("selected", "letter"); + oth.classList.add("placed"); + i = placed[n].index; + placed.splice(n, 1, { x: x, y: y, index: selected.index, letter: selected.letter }); + // select the letter that was returned to the rack + selected = { index: i, letter: dst.innerHTML }; + dst.classList.replace("letter", "selected"); + } + } else if (cursor !== undefined && cursor.x == x && cursor.y == y) { + if (cursor.direction === "right") { + cursor.direction = "down"; + me.innerHTML = "▼"; + } else { + cursor = undefined; + me.innerHTML = ""; + } + } + }; + } + + function makeRackTileOnClick(i) { + return function() { + var n = 0; + var me = document.getElementById(["l", i].join("")); + var dst = undefined; + var cur = undefined; + var l = me.innerHTML; + if (me.classList.contains("placed")) { + if (selected === undefined) { + // we return the letter to the rack + for(n=placed.length-1; n>=0; n--) { + if (placed[n].index === i) { + break; + } + } + dst = document.getElementById(["s", placed[n].y, "_", placed[n].x].join("")); + dst.innerHTML = ""; + dst.classList.remove("letter"); + dst.classList.remove("placed"); + me.classList.remove("placed"); + moveCursor(placed[n].x, placed[n].y) + // clean the placed array + placed.splice(n, 1); + } else { + // We do nothing, we do move the rack position of a placed letter + } + } else { + if (selected === undefined) { + if (cursor === undefined) { + selected = { index: i, letter: l }; + me.classList.replace("letter", "selected"); + } else { + // Place the letter on the cursor's position + dst = document.getElementById(["s", cursor.y, "_", cursor.x].join("")); + dst.innerHTML = me.innerHTML; + dst.classList.add("letter"); + dst.classList.add("placed"); + me.classList.add("placed"); + placed.push({x: cursor.x, y: cursor.y, index:i, letter: me.innerHTML}); + // Move the cursor if possible + while(cursor.x < 15 && cursor.y < 15) { + if (cursor.direction === "right") { + cursor.x++; + } else { + cursor.y++; + } + dst = document.getElementById(["s", cursor.y, "_", cursor.x].join("")); + if (dst === null || dst.innerHTML === "") { + break; + } + } + if (cursor.x >= 15 || cursor.y >= 15) { + cursor = undefined; + } else { + if (cursor.direction === "right") { + dst.innerHTML = "▶"; + } else { + dst.innerHTML = "▼"; + } + } + } + } else if (selected.index === i) { + selected = undefined; + me.classList.replace("selected", "letter"); + } else { + dst = document.getElementById(["l", selected.index].join("")); + dst.innerHTML = l; + me.innerHTML = selected.letter; + dst.classList.replace("selected", "letter"); + selected = undefined; + } + } + }; + } + + function moveCursor(x, y) { + var me = document.getElementById(["s", y, "_", x].join("")); + var dst = undefined; + if (cursor === undefined) { + cursor = { x: x, y: y}; + } else { + // Move the cursor + dst = document.getElementById(["s", cursor.y, "_", cursor.x].join("")); + dst.innerHTML = ""; + cursor.x = x; + cursor.y = y; + } + // try to guess word direction if several letters are already placed + if (placed.length >= 2 && placed[0].x === placed[1].x) { + cursor.direction = "down"; + me.innerHTML = "▼"; + } else { + cursor.direction = "right"; + me.innerHTML = "▶"; + } + } + return { init: function() { var elt = undefined; @@ -55,20 +216,24 @@ var CW = function(){ letter = line[x]; elt = document.getElementById(['s', y, '_', x].join('')); if (letter !== "") { - elt.innerHTML = [letter, '<div class="points">', points[letter], '</div>'].join(''); + elt.className = "letter"; + elt.innerHTML = [letter, '<div class="points">', points[letter], "</div>"].join(""); // we also remove the letter from the pool idx = letters.findIndex(function(elt) { return elt === letter; }); if (idx != -1) { letters.splice(idx, 1); } } + elt.onclick = makeBoardTileOnCLick(x, y); } } // populate the rack for (x=0; x<CWDATA.letters.length; x++) { letter = CWDATA.letters[x]; - elt = document.getElementById(['l', x].join('')); - elt.innerHTML = [letter, '<div class="points">', points[letter], '</div>'].join(''); + elt = document.getElementById(["l", x].join("")); + elt.className = "letter"; + elt.innerHTML = [letter, '<div class="points">', points[letter], "</div>"].join(""); + elt.onclick = makeRackTileOnClick(x); // we also remove the letter from the pool idx = letters.findIndex(function(elt) { return elt === letter; }); if (idx != -1) { @@ -76,7 +241,7 @@ var CW = function(){ } } // initialize buttons - document.getElementById('validate').disabled = true; + document.getElementById("validate").disabled = true; // populate remaining letters var letters_left = [ "Lettres restantes: ", letters.length, "<br>" ]; var prev = undefined; |