diff --git a/css/index.css b/css/index.css index 97462dc..3f726b4 100644 --- a/css/index.css +++ b/css/index.css @@ -21,7 +21,7 @@ body { h1 { font-size: 3em; - margin: 40px 20px 20px 20px; + margin: 20px; text-shadow: 3px 2px rgb(153, 145, 175); text-align: center; } @@ -35,20 +35,14 @@ button { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 20px; - margin: 40px auto; + margin: 80px auto; width: 700px; justify-items: left; } -.cookie { - margin: 40px 0 0 0; - font-size: 0.8em; - justify-self: center; - width: auto; - grid-column: 1 / 5; -} - .play { - grid-column: 2 / 4; + grid-column: 2 / 4; justify-self: center; + width: 70%; + margin: 40px; } diff --git a/index.html b/index.html index a60c80a..e0d84f2 100644 --- a/index.html +++ b/index.html @@ -4,23 +4,13 @@ Webtris +

WEBTRIS

-
GAUCHE
-
DROITE
-
CHUTE LENTE
-
CHUTE RAPIDE
-
ROTATION HORAIRE
-
ROTATION INVERSE
-
GARDE
-
PAUSE
-
- - -
+
diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..f5d6e8b --- /dev/null +++ b/js/index.js @@ -0,0 +1,57 @@ +const actionLabel = [ + {name: "moveLeft", label: "GAUCHE"}, + {name: "moveRight", label: "DROITE"}, + {name: "softDrop", label: "CHUTE LENTE"}, + {name: "hardDrop", label: "CHUTE RAPIDE"}, + {name: "rotateCW", label: "ROTATION HORAIRE"}, + {name: "rotateCCW:", label: "ROTATE INVERSE"}, + {name: "hold", label: "GARDE"}, + {name: "pause", label: "PAUSE"} +] +const actionsDefaultKeys = { + moveLeft: "ArrowLeft", + moveRight: "ArrowRight", + softDrop: "ArrowDown", + hardDrop: " ", + rotateCW: "ArrowUp", + rotateCCW: "z", + hold: "c", + pause: "Escape", +} +var selectedButton = null +var selectedAction = "" + +function getKey(action) { + key = localStorage.getItem(action) || actionsDefaultKeys[action] + if (key == ' ') + return "Space" + else + return key +} + +function loadButtons() { + document.open() + document.write( + actionLabel.map(action => `
${action.label}
+ +`).join("\n") + ) + document.close() +} + +function changeKey(button, action) { + button.innerHTML = "Touche ?" + selectedButton = button + selectedAction = action + button.blur() +} + +function keyUpHandler(e) { + if (selectedButton) { + localStorage.setItem(selectedAction, e.key) + selectedButton.innerHTML = (e.key == " ") ? "Space" : e.key + selectedButton = null + } +} + +addEventListener("keyup", keyUpHandler, false) \ No newline at end of file