adrien/Webtris
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

index change key

Browse Source
This commit is contained in:
Adrien MALINGREY 2019-10-27 22:19:37 +01:00
parent 8796d5b604
commit 88ab307384
3 changed files with 64 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
css/index.css
View File

@ -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;
}

14
index.html
View File

@ -4,23 +4,13 @@
<meta charset="utf-8" />
<title>Webtris</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<h1>WEBTRIS</h1>
<form action="webtris.html" method="post">
<div class="actions">
<div>GAUCHE</div><button type="button">ArrowLeft</button>
<div>DROITE</div><button type="button">ArrowRight</button>
<div>CHUTE LENTE</div><button type="button">ArrowDown</button>
<div>CHUTE RAPIDE</div><button type="button">Space</button>
<div>ROTATION HORAIRE</div><button type="button">ArrowUp</button>
<div>ROTATION INVERSE</div><button type="button">z</button>
<div>GARDE</div><button type="button">c</button>
<div>PAUSE</div><button type="button">Escape</button>
<div class="cookie">
<input type="checkbox" id="cookie" name="cookie">
<label for="cookie">Utiliser un cookie pour enregistrer les préférences sur cet ordinateur ?</label>
</div>
<script>loadButtons()</script>
<button type="submit" class="play">PLAY</button>
</div>
</form>

57
js/index.js Normal file
View File

@ -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 => `<div>${action.label}</div>
<button type="button" onclick="changeKey(this, '${action.name}')">${getKey(action.name)}</button>
`).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)