diff --git a/app.js b/app.js
index 27d77a4..36e893b 100644
--- a/app.js
+++ b/app.js
@@ -45,24 +45,28 @@ const FACING = {
WEST: 3,
}
-const KEY_NAMES = {
+const KEY_NAMES = new Proxy({
["ArrowLeft"] : "←",
- ["ArrowRight"] : "→",
- ["ArrowUp"] : "↑",
- ["ArrowDown"] : "↓",
- [" "] : "Espace",
- ["Escape"] : "Échap.",
- ["Backspace"] : "Ret. arrière",
- ["Enter"] : "Entrée",
["←"] : "ArrowLeft",
+ ["ArrowRight"] : "→",
["→"] : "ArrowRight",
+ ["ArrowUp"] : "↑",
["↑"] : "ArrowUp",
+ ["ArrowDown"] : "↓",
["↓"] : "ArrowDown",
+ [" "] : "Espace",
["Espace"] : " ",
+ ["Escape"] : "Échap.",
["Échap."] : "Escape",
+ ["Backspace"] : "Ret. arrière",
["Ret. arrière"]: "Backspace",
+ ["Enter"] : "Entrée",
["Entrée"] : "Enter",
-}
+}, {
+ get(obj, keyName) {
+ return keyName in obj? obj[keyName] : keyName
+ }
+})
/* Customize Array to be use as position */
Object.defineProperties(Array.prototype, {
@@ -494,7 +498,7 @@ class Settings {
getInputs() {
for (let input of this.form.querySelectorAll("input[type='text']")) {
- this[input.name] = KEY_NAMES[input.value] || input.value
+ this[input.name] = KEY_NAMES[input.value]
}
for (let input of this.form.querySelectorAll("input[type='number'], input[type='range']")) {
this[input.name] = input.valueAsNumber
@@ -519,7 +523,7 @@ function changeKey(input) {
input.value = ""
input.onkeydown = function (event) {
event.preventDefault()
- input.value = KEY_NAMES[event.key] || event.key
+ input.value = KEY_NAMES[event.key]
input.blur()
}
input.onblur = function (event) {
diff --git a/css/minimal.css b/css/minimal.css
new file mode 100644
index 0000000..5491435
--- /dev/null
+++ b/css/minimal.css
@@ -0,0 +1,104 @@
+.card {
+ background: #363941;
+}
+
+.minoes-table {
+ display: flex;
+ flex-direction: column;
+ filter: drop-shadow(5px 8px 0 rgba(9, 9, 9, 22%));
+}
+
+.minoes-table tr {
+ display: flex;
+ position: relative;
+ flex-direction: row;
+}
+
+tr.matrix td:not(.mino) {
+ border: 0;
+}
+
+.minoes-table td {
+ display: inline-block;
+ width: var(--cell-side);
+ height: var(--cell-side);
+ padding: 0 !important;
+}
+
+.mino {
+ content: "";
+ background: var(--background-color);
+ width: inherit;
+ height: inherit;
+ display: block;
+ z-index: calc(1000 - var(--row));
+ box-shadow: 0 -6px 0 var(--light-color);
+}
+
+.I.mino {
+ --background-color: #42AFE1;
+ --light-color: #6CEAFF;
+}
+
+.J.mino {
+ --background-color: #1165B5;
+ --light-color: #339BFF;
+}
+
+.L.mino {
+ --background-color: #F38927;
+ --light-color: #FFBA59;
+}
+
+.O.mino {
+ --background-color: #F6D03C;
+ --light-color: #FFFF7F;
+}
+
+.S.mino {
+ --background-color: #51B84D;
+ --light-color: #84F880;
+}
+
+.T.mino {
+ --background-color: #9739A2;
+ --light-color: #D958E9;
+}
+
+.Z.mino {
+ --background-color: #EB4F65;
+ --light-color: #FF7F79;
+}
+
+.ghost.mino {
+ --background-color: rgba(175, 175, 175, 80%);
+ box-shadow: none;
+}
+
+.moving.mino {
+ filter: saturate(80%) brightness(150%);
+}
+
+.locking.mino {
+ filter: saturate(50%) brightness(250%);
+}
+
+@keyframes locked-animation {
+ from {
+ filter: saturate(50%) brightness(500%);
+ }
+}
+
+.locked.mino {
+ animation: locked-animation;
+ animation-duration: 0.2s;
+}
+
+@keyframes cleared-line-animation {
+ from {
+ background-color: #eeeeee;
+ }
+ to {
+ background-color: transparent;
+ }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index eed8cd1..9059d60 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,7 @@
+
@@ -31,70 +32,28 @@