adrien/quatuor
adrien/quatuor
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update style on moving and locked

Browse Source
This commit is contained in:
Adrien MALINGREY 2023-06-16 00:23:08 +02:00
parent d615b6b72b
commit e6f238629a
4 changed files with 51 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app.js
View File

@ -244,7 +244,7 @@ class Matrix extends MinoesTable {
for (let y=0; y<this.rows; y++) {
for (let x=0; x<this.columns; x++) {
if (this.table.rows[y].cells[x].classList != "trail-animation")
this.drawMino([x, y], "locked " + this.blocks[y][x] || "")
this.drawMino([x, y], this.blocks[y][x] || "")
}
}
}
@ -253,7 +253,7 @@ class Matrix extends MinoesTable {
let blocksPosition = this.piece.minoesPosition[this.piece.facing].translate(this.piece.center)
if (blocksPosition.some(position => position.y >= 4)) {
blocksPosition.forEach(position => {
this.blocks[position.y][position.x] = this.piece.className
this.blocks[position.y][position.x] = "locked " + this.piece.className
this.drawMino(position, this.piece.className)
})
return true

33
css/classic.css
View File

@ -81,6 +81,19 @@
border-bottom-color: #ad1936;
}
.ghost.mino {
background: rgba(0, 0, 0, 10%) !important;
border: 3px solid rgba(128, 128, 128, 25%) !important;
box-shadow: -2px -2px 6px rgba(128, 128, 128, 25%),
-2px 2px 6px rgba(128, 128, 128, 25%),
2px -2px 6px rgba(128, 128, 128, 25%),
2px 2px 6px rgba(128, 128, 128, 25%);
}
.moving.mino {
filter: saturate(80%) brightness(150%);
}
.locking.mino {
filter: saturate(50%) brightness(200%);
box-shadow: -1px -1px 4px rgba(128, 128, 128, 25%),
@ -89,11 +102,17 @@
1px 1px 4px rgba(128, 128, 128, 25%);
}
.ghost.mino {
background: rgba(0, 0, 0, 10%) !important;
border: 3px solid rgba(128, 128, 128, 25%) !important;
box-shadow: -2px -2px 6px rgba(128, 128, 128, 25%),
-2px 2px 6px rgba(128, 128, 128, 25%),
2px -2px 6px rgba(128, 128, 128, 25%),
2px 2px 6px rgba(128, 128, 128, 25%);
@keyframes locked-animation {
from {
filter: saturate(50%) brightness(400%);
box-shadow: -1px -1px 4px rgba(255, 255, 255, 25%),
-1px 1px 4px rgba(255, 255, 255, 25%),
1px -1px 4px rgba(255, 255, 255, 25%),
1px 1px 4px rgba(255, 255, 255, 25%);
}
}
.locked.mino {
animation: locked-animation;
animation-duration: 0.2s;
}

21
css/pop.css
View File

@ -51,11 +51,28 @@ body {
border-color: #ffadad;
}
.ghost.mino {
filter: brightness(150%) blur(2px);
opacity: 50%;
}
.moving.mino {
filter: brightness(120%);
}
.locking.mino {
border-color: white;
filter: blur(2px);
}
.ghost.mino {
filter: brightness(150%) blur(2px);
@keyframes locked-animation {
from {
background: white;
border-color: white;
}
}
.locked.mino {
animation: locked-animation;
animation-duration: 0.2s;
}

4
css/retro.css
View File

@ -114,4 +114,8 @@ td {
.ghost.mino {
opacity: 50%;
}
.locked.mino {
animation: none;
}