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 y=0; y<this.rows; y++) {
for (let x=0; x<this.columns; x++) { for (let x=0; x<this.columns; x++) {
if (this.table.rows[y].cells[x].classList != "trail-animation") 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) let blocksPosition = this.piece.minoesPosition[this.piece.facing].translate(this.piece.center)
if (blocksPosition.some(position => position.y >= 4)) { if (blocksPosition.some(position => position.y >= 4)) {
blocksPosition.forEach(position => { 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) this.drawMino(position, this.piece.className)
}) })
return true return true

33
css/classic.css
View File

@ -81,6 +81,19 @@
border-bottom-color: #ad1936; 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 { .locking.mino {
filter: saturate(50%) brightness(200%); filter: saturate(50%) brightness(200%);
box-shadow: -1px -1px 4px rgba(128, 128, 128, 25%), box-shadow: -1px -1px 4px rgba(128, 128, 128, 25%),
@ -89,11 +102,17 @@
1px 1px 4px rgba(128, 128, 128, 25%); 1px 1px 4px rgba(128, 128, 128, 25%);
} }
.ghost.mino { @keyframes locked-animation {
background: rgba(0, 0, 0, 10%) !important; from {
border: 3px solid rgba(128, 128, 128, 25%) !important; filter: saturate(50%) brightness(400%);
box-shadow: -2px -2px 6px rgba(128, 128, 128, 25%), box-shadow: -1px -1px 4px rgba(255, 255, 255, 25%),
-2px 2px 6px rgba(128, 128, 128, 25%), -1px 1px 4px rgba(255, 255, 255, 25%),
2px -2px 6px rgba(128, 128, 128, 25%), 1px -1px 4px rgba(255, 255, 255, 25%),
2px 2px 6px rgba(128, 128, 128, 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; border-color: #ffadad;
} }
.ghost.mino {
filter: brightness(150%) blur(2px);
opacity: 50%;
}
.moving.mino {
filter: brightness(120%);
}
.locking.mino { .locking.mino {
border-color: white; border-color: white;
filter: blur(2px); filter: blur(2px);
} }
.ghost.mino { @keyframes locked-animation {
filter: brightness(150%) blur(2px); 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 { .ghost.mino {
opacity: 50%; opacity: 50%;
}
.locked.mino {
animation: none;
} }