Compare commits
2 Commits
b8b743871e
...
6706d60086
| Author | SHA1 | Date | |
|---|---|---|---|
|
6706d60086
|
|||
|
040dc5d5e9
|
+25
-20
@@ -11,7 +11,7 @@ body {
|
||||
|
||||
@supports (backdrop-filter: blur()) {
|
||||
.modal::before {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
@@ -31,7 +31,7 @@ body {
|
||||
}
|
||||
|
||||
#matrixCard {
|
||||
background-image: radial-gradient(#222, #25292d)
|
||||
background-image: radial-gradient(#222, #25292d);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
@@ -54,7 +54,7 @@ td#timeCell {
|
||||
|
||||
.minoes-table {
|
||||
--piece-column: 0;
|
||||
--piece-row : 0;
|
||||
--piece-row: 0;
|
||||
table-layout: fixed;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
@@ -71,7 +71,7 @@ td#timeCell {
|
||||
}
|
||||
}
|
||||
.hard-dropped-table-animation {
|
||||
animation: hard-dropped-table-animation ease-in-out .2s;
|
||||
animation: hard-dropped-table-animation ease-in-out 0.2s;
|
||||
}
|
||||
|
||||
tr.buffer-zone td:not(.mino) {
|
||||
@@ -79,9 +79,9 @@ tr.buffer-zone td:not(.mino) {
|
||||
}
|
||||
|
||||
tr.matrix td:not(.mino) {
|
||||
border-left : 1px solid #333;
|
||||
border-right : 1px solid #333;
|
||||
border-top : 1px solid #303030;
|
||||
border-left: 1px solid #333;
|
||||
border-right: 1px solid #333;
|
||||
border-top: 1px solid #303030;
|
||||
border-bottom: 1px solid #303030;
|
||||
}
|
||||
|
||||
@@ -113,26 +113,32 @@ td {
|
||||
}
|
||||
|
||||
td.trail-animation {
|
||||
animation: trail-animation ease-out .3s;
|
||||
animation: trail-animation ease-out 0.3s;
|
||||
}
|
||||
|
||||
@keyframes cleared-line-animation {
|
||||
from {
|
||||
background-color: white;
|
||||
filter: saturate(50%) brightness(300%);
|
||||
box-shadow: 0 0 0 #adb5bd, 0 0 0 #adb5bd;
|
||||
box-shadow:
|
||||
0 0 0 #adb5bd,
|
||||
0 0 0 #adb5bd;
|
||||
}
|
||||
60% {
|
||||
box-shadow: -60px 0 2px #adb5bd66, 60px 0 2px #adb5bd66;
|
||||
box-shadow:
|
||||
-60px 0 2px #adb5bd66,
|
||||
60px 0 2px #adb5bd66;
|
||||
}
|
||||
to {
|
||||
background-color: transparent;
|
||||
box-shadow: -100px 0 5px transparent, 100px 0 5px transparent;
|
||||
box-shadow:
|
||||
-100px 0 5px transparent,
|
||||
100px 0 5px transparent;
|
||||
}
|
||||
}
|
||||
|
||||
tr.cleared-line-animation {
|
||||
animation: cleared-line-animation ease-out .3s;
|
||||
animation: cleared-line-animation ease-out 0.3s;
|
||||
}
|
||||
|
||||
#holdTable .J,
|
||||
@@ -193,7 +199,6 @@ tr.cleared-line-animation {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
line-height: var(--bs-body-line-height);
|
||||
|
||||
}
|
||||
30% {
|
||||
opacity: 1;
|
||||
@@ -213,13 +218,13 @@ tr.cleared-line-animation {
|
||||
|
||||
@keyframes rotate-in-animation {
|
||||
0% {
|
||||
opacity:0;
|
||||
transform:rotate(200deg);
|
||||
opacity: 0;
|
||||
transform: rotate(200deg);
|
||||
line-height: var(--bs-body-line-height);
|
||||
}
|
||||
30% {
|
||||
opacity:1;
|
||||
transform:translateZ(0);
|
||||
opacity: 1;
|
||||
transform: translateZ(0);
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
80% {
|
||||
@@ -236,14 +241,14 @@ tr.cleared-line-animation {
|
||||
|
||||
#messagesSpan div.rotate-in-animation {
|
||||
animation-name: rotate-in-animation;
|
||||
animation-timing-function: cubic-bezier(.25,.46,.45,.94);
|
||||
animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
#messagesSpan div.zoom-in-animation {
|
||||
animation-name: zoom-in-animation;
|
||||
animation-timing-function: cubic-bezier(.25,.46,.45,.94);
|
||||
transform-origin:center;
|
||||
animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
transform-origin: center;
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
|
||||
+9
-8
@@ -1,9 +1,9 @@
|
||||
body {
|
||||
background-image: url("electro/bg.jpg");
|
||||
background-image: url('electro/bg.jpg');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
body[data-bs-theme="dark"] {
|
||||
body[data-bs-theme='dark'] {
|
||||
--bs-body-bg: #2125296b;
|
||||
}
|
||||
|
||||
@@ -16,7 +16,7 @@ body[data-bs-theme="dark"] {
|
||||
}
|
||||
|
||||
tr.matrix td:not(.mino) {
|
||||
border-left : none;
|
||||
border-left: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
@@ -30,19 +30,20 @@ tr.matrix td:not(.mino) {
|
||||
}
|
||||
|
||||
.mino:not(.ghost):not(.locking):before {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
inset: 0;
|
||||
margin: 1px 1px 0px 0px;
|
||||
padding: 2px;
|
||||
border-radius: 4px;
|
||||
--glint-x: calc(50% + 50% * (var(--piece-column) - var(--column))/10);
|
||||
--glint-y: calc(50% + 50% * (var(--piece-row) - var(--row))/25);
|
||||
--glint-x: calc(50% + 50% * (var(--piece-column) - var(--column)) / 10);
|
||||
--glint-y: calc(50% + 50% * (var(--piece-row) - var(--row)) / 25);
|
||||
background: radial-gradient(
|
||||
at var(--glint-x) var(--glint-y),
|
||||
rgba(204, 238, 247, 0.9) 0%,
|
||||
rgba(10, 159, 218, 0.9) 150%);
|
||||
rgba(10, 159, 218, 0.9) 150%
|
||||
);
|
||||
mask:
|
||||
linear-gradient(#666 0 0) content-box,
|
||||
linear-gradient(#fff 0 0);
|
||||
@@ -52,7 +53,7 @@ tr.matrix td:not(.mino) {
|
||||
|
||||
.ghost.mino {
|
||||
background: rgba(242, 255, 255, 10%);
|
||||
border : 2px solid rgba(255, 255, 255, 0.3);
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 3px;
|
||||
box-shadow: 0px 0px 10px rgba(242, 255, 255, 75%);
|
||||
}
|
||||
|
||||
+24
-28
@@ -7,7 +7,7 @@ body {
|
||||
gap: 0 !important;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .1em;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
#screenRow {
|
||||
@@ -26,7 +26,7 @@ body {
|
||||
}
|
||||
|
||||
.card-header,
|
||||
.card-header th{
|
||||
.card-header th {
|
||||
background: transparent;
|
||||
font-weight: 400 !important;
|
||||
font-size: 1.3em;
|
||||
@@ -40,12 +40,8 @@ body {
|
||||
.minoes-table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
filter:
|
||||
drop-shadow(-2px 0 0 white)
|
||||
drop-shadow(2px 0 0 white)
|
||||
drop-shadow(0 -2px 0 white)
|
||||
drop-shadow(0 2px 0 white)
|
||||
drop-shadow(5px 8px 0 rgba(9, 9, 9, 22%));
|
||||
filter: drop-shadow(-2px 0 0 white) drop-shadow(2px 0 0 white) drop-shadow(0 -2px 0 white)
|
||||
drop-shadow(0 2px 0 white) drop-shadow(5px 8px 0 rgba(9, 9, 9, 22%));
|
||||
}
|
||||
|
||||
.minoes-table tr {
|
||||
@@ -128,45 +124,45 @@ tr.matrix td:not(.mino) {
|
||||
}
|
||||
|
||||
.I.mino {
|
||||
background-color: #42AFE1;
|
||||
border-color: #6CEAFF;
|
||||
--box-shadow-color: #6CEAFF;
|
||||
background-color: #42afe1;
|
||||
border-color: #6ceaff;
|
||||
--box-shadow-color: #6ceaff;
|
||||
}
|
||||
|
||||
.J.mino {
|
||||
background-color: #1165B5;
|
||||
border-color: #339BFF;
|
||||
--box-shadow-color: #339BFF;
|
||||
background-color: #1165b5;
|
||||
border-color: #339bff;
|
||||
--box-shadow-color: #339bff;
|
||||
}
|
||||
|
||||
.L.mino {
|
||||
background-color: #F38927;
|
||||
border-color: #FFBA59;
|
||||
--box-shadow-color: #FFBA59;
|
||||
background-color: #f38927;
|
||||
border-color: #ffba59;
|
||||
--box-shadow-color: #ffba59;
|
||||
}
|
||||
|
||||
.O.mino {
|
||||
background-color: #F6D03C;
|
||||
border-color: #FFFF7F;
|
||||
--box-shadow-color: #FFFF7F;
|
||||
background-color: #f6d03c;
|
||||
border-color: #ffff7f;
|
||||
--box-shadow-color: #ffff7f;
|
||||
}
|
||||
|
||||
.S.mino {
|
||||
background-color: #32ee3e;
|
||||
border-color: #84F880;
|
||||
--box-shadow-color: #84F880;
|
||||
border-color: #84f880;
|
||||
--box-shadow-color: #84f880;
|
||||
}
|
||||
|
||||
.T.mino {
|
||||
background-color: #9739A2;
|
||||
border-color: #D958E9;
|
||||
--box-shadow-color: #D958E9;
|
||||
background-color: #9739a2;
|
||||
border-color: #d958e9;
|
||||
--box-shadow-color: #d958e9;
|
||||
}
|
||||
|
||||
.Z.mino {
|
||||
background-color: #EB4F65;
|
||||
border-color: #FF7F79;
|
||||
--box-shadow-color: #FF7F79;
|
||||
background-color: #eb4f65;
|
||||
border-color: #ff7f79;
|
||||
--box-shadow-color: #ff7f79;
|
||||
}
|
||||
|
||||
.ghost.mino {
|
||||
|
||||
+3
-3
@@ -46,7 +46,7 @@ tr.matrix td:not(.mino) {
|
||||
|
||||
.L.mino {
|
||||
background-color: #fa9b23;
|
||||
--box-shadow-color: #FFBA59;
|
||||
--box-shadow-color: #ffba59;
|
||||
}
|
||||
|
||||
.O.mino {
|
||||
@@ -56,7 +56,7 @@ tr.matrix td:not(.mino) {
|
||||
|
||||
.S.mino {
|
||||
background-color: #01a493;
|
||||
--box-shadow-color: #03e7d3;;
|
||||
--box-shadow-color: #03e7d3;
|
||||
}
|
||||
|
||||
.T.mino {
|
||||
@@ -66,7 +66,7 @@ tr.matrix td:not(.mino) {
|
||||
|
||||
.Z.mino {
|
||||
background-color: #ee2b58;
|
||||
--box-shadow-color: #fd4487;;
|
||||
--box-shadow-color: #fd4487;
|
||||
}
|
||||
|
||||
.ghost.mino {
|
||||
|
||||
+3
-17
@@ -1,6 +1,6 @@
|
||||
:root {
|
||||
--cell-size: 24px;
|
||||
--sprite-size: calc(100% / 8);
|
||||
--sprite-size: round(100% / 8, 1px);
|
||||
--skin-url: url(https://i.imgur.com/HqGYC5G.png);
|
||||
}
|
||||
|
||||
@@ -75,21 +75,7 @@ tr.matrix td:not(.mino) {
|
||||
box-shadow: 4px 4px 10px #0002;
|
||||
}
|
||||
|
||||
.option {
|
||||
display: inline-block;
|
||||
.preview {
|
||||
--cell-size: 24px;
|
||||
height: var(--cell-size);
|
||||
}
|
||||
|
||||
.result {
|
||||
--nb-sprites: 9;
|
||||
}
|
||||
|
||||
.select2-container:not(.select2-container--disabled) .selection {
|
||||
--nb-sprites: 4;
|
||||
--sprite-pos: 4;
|
||||
width: calc(var(--nb-sprites) * var(--cell-size));
|
||||
background-position-x: calc(-1 * var(--sprite-pos) * var(--cell-size));
|
||||
background-image: var(--skin-url);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
+17
-21
@@ -5,12 +5,8 @@
|
||||
.minoes-table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
filter:
|
||||
drop-shadow(-2px 0 0 white)
|
||||
drop-shadow(2px 0 0 white)
|
||||
drop-shadow(0 -2px 0 white)
|
||||
drop-shadow(0 2px 0 white)
|
||||
drop-shadow(5px 8px 0 rgba(9, 9, 9, 22%));
|
||||
filter: drop-shadow(-2px 0 0 white) drop-shadow(2px 0 0 white) drop-shadow(0 -2px 0 white)
|
||||
drop-shadow(0 2px 0 white) drop-shadow(5px 8px 0 rgba(9, 9, 9, 22%));
|
||||
}
|
||||
|
||||
.minoes-table tr {
|
||||
@@ -41,38 +37,38 @@ tr.matrix td:not(.mino) {
|
||||
}
|
||||
|
||||
.I.mino {
|
||||
--background-color: #42AFE1;
|
||||
--box-shadow-color: #6CEAFF;
|
||||
--background-color: #42afe1;
|
||||
--box-shadow-color: #6ceaff;
|
||||
}
|
||||
|
||||
.J.mino {
|
||||
--background-color: #1165B5;
|
||||
--box-shadow-color: #339BFF;
|
||||
--background-color: #1165b5;
|
||||
--box-shadow-color: #339bff;
|
||||
}
|
||||
|
||||
.L.mino {
|
||||
--background-color: #F38927;
|
||||
--box-shadow-color: #FFBA59;
|
||||
--background-color: #f38927;
|
||||
--box-shadow-color: #ffba59;
|
||||
}
|
||||
|
||||
.O.mino {
|
||||
--background-color: #F6D03C;
|
||||
--box-shadow-color: #FFFF7F;
|
||||
--background-color: #f6d03c;
|
||||
--box-shadow-color: #ffff7f;
|
||||
}
|
||||
|
||||
.S.mino {
|
||||
--background-color: #51B84D;
|
||||
--box-shadow-color: #84F880;
|
||||
--background-color: #51b84d;
|
||||
--box-shadow-color: #84f880;
|
||||
}
|
||||
|
||||
.T.mino {
|
||||
--background-color: #9739A2;
|
||||
--box-shadow-color: #D958E9;
|
||||
--background-color: #9739a2;
|
||||
--box-shadow-color: #d958e9;
|
||||
}
|
||||
|
||||
.Z.mino {
|
||||
--background-color: #EB4F65;
|
||||
--box-shadow-color: #FF7F79;
|
||||
--background-color: #eb4f65;
|
||||
--box-shadow-color: #ff7f79;
|
||||
}
|
||||
|
||||
.ghost.mino {
|
||||
@@ -87,7 +83,7 @@ tr.matrix td:not(.mino) {
|
||||
|
||||
.locking.mino {
|
||||
--background-color: white;
|
||||
--box-shadow-color: #DDD;
|
||||
--box-shadow-color: #ddd;
|
||||
}
|
||||
|
||||
.locked.mino {
|
||||
|
||||
+34
-19
@@ -4,12 +4,12 @@
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Early GameBoy";
|
||||
src: url("old-school/Early GameBoy.ttf");
|
||||
font-family: 'Early GameBoy';
|
||||
src: url('old-school/Early GameBoy.ttf');
|
||||
}
|
||||
|
||||
#screenRow {
|
||||
background-image: url("old-school/bg.png");
|
||||
background-image: url('old-school/bg.png');
|
||||
background-size: 10px;
|
||||
padding: 40px 20px;
|
||||
border: 3px inset black;
|
||||
@@ -21,9 +21,9 @@
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #8D8E04;
|
||||
background: #8d8e04;
|
||||
border-radius: 0;
|
||||
border-image-source: url("old-school/border-sm.png");
|
||||
border-image-source: url('old-school/border-sm.png');
|
||||
border-image-slice: 25;
|
||||
border-image-width: 13px;
|
||||
border-image-repeat: repeat;
|
||||
@@ -33,12 +33,12 @@
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background: #8D8E04;
|
||||
background: #8d8e04;
|
||||
}
|
||||
|
||||
#matrixCard {
|
||||
background: #808302;
|
||||
border-image-source: url("old-school/border-lg.png");
|
||||
border-image-source: url('old-school/border-lg.png');
|
||||
border-image-slice: 30;
|
||||
border-image-width: 15px;
|
||||
border-image-outset: 15px;
|
||||
@@ -48,16 +48,18 @@
|
||||
.card,
|
||||
.card-header,
|
||||
#messagesSpan div {
|
||||
font-family: "Early GameBoy", monospace;
|
||||
font-family: 'Early GameBoy', monospace;
|
||||
font-smooth: never;
|
||||
-webkit-font-smoothing: none;
|
||||
color: #254806;
|
||||
text-shadow: -1px -1px 3px rgba(0, 0, 0, 40%), 1px 1px 1px rgba(0, 0, 0, 40%);
|
||||
text-shadow:
|
||||
-1px -1px 3px rgba(0, 0, 0, 40%),
|
||||
1px 1px 1px rgba(0, 0, 0, 40%);
|
||||
}
|
||||
|
||||
#statsTable {
|
||||
font-size: .7em;
|
||||
letter-spacing: -.1em;
|
||||
font-size: 0.7em;
|
||||
letter-spacing: -0.1em;
|
||||
}
|
||||
|
||||
#statsTable tr {
|
||||
@@ -68,7 +70,7 @@
|
||||
#statsTable th,
|
||||
#statsTable td {
|
||||
border: 0;
|
||||
padding: 0 .2rem;
|
||||
padding: 0 0.2rem;
|
||||
}
|
||||
|
||||
#statsTable td {
|
||||
@@ -77,7 +79,11 @@
|
||||
}
|
||||
|
||||
#messagesSpan {
|
||||
text-shadow: -2px -2px #808302, -2px 2px #808302, 2px -2px #808302, 2px 2px #808302;
|
||||
text-shadow:
|
||||
-2px -2px #808302,
|
||||
-2px 2px #808302,
|
||||
2px -2px #808302,
|
||||
2px 2px #808302;
|
||||
}
|
||||
|
||||
.minoes-table td {
|
||||
@@ -85,9 +91,11 @@
|
||||
}
|
||||
|
||||
.mino {
|
||||
box-shadow: -2px -2px 5px rgba(0, 0, 0, 40%), 1px 1px 2px rgba(0, 0, 0, 40%);
|
||||
box-shadow:
|
||||
-2px -2px 5px rgba(0, 0, 0, 40%),
|
||||
1px 1px 2px rgba(0, 0, 0, 40%);
|
||||
background-size: cover;
|
||||
background-image: url("old-school/sprites.png");
|
||||
background-image: url('old-school/sprites.png');
|
||||
background-position: calc(var(--sprite-pos) * var(--sprite-size)) 0px;
|
||||
}
|
||||
|
||||
@@ -139,18 +147,25 @@
|
||||
}
|
||||
|
||||
.hard-dropped-table-animation {
|
||||
animation: hard-dropped-table-animation steps(1) .2s;
|
||||
animation: hard-dropped-table-animation steps(1) 0.2s;
|
||||
}
|
||||
|
||||
@keyframes cleared-line-animation {
|
||||
10%, 30%, 50%, 70%, 90% {
|
||||
10%,
|
||||
30%,
|
||||
50%,
|
||||
70%,
|
||||
90% {
|
||||
opacity: 0;
|
||||
}
|
||||
20%, 40%, 60%, 80% {
|
||||
20%,
|
||||
40%,
|
||||
60%,
|
||||
80% {
|
||||
opacity: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
tr.cleared-line-animation {
|
||||
animation: cleared-line-animation ease-out .4s;
|
||||
animation: cleared-line-animation ease-out 0.4s;
|
||||
}
|
||||
+15
-15
@@ -7,7 +7,7 @@ body {
|
||||
gap: 0 !important;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .1em;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
#screenRow {
|
||||
@@ -22,7 +22,7 @@ body {
|
||||
}
|
||||
|
||||
.card-header,
|
||||
.card-header th{
|
||||
.card-header th {
|
||||
background: transparent;
|
||||
font-weight: 400 !important;
|
||||
font-size: 1.3em;
|
||||
@@ -95,38 +95,38 @@ td#timeCell {
|
||||
}
|
||||
|
||||
.I.mino {
|
||||
background-color: #42AFE1;
|
||||
border-color: #6CEAFF;
|
||||
background-color: #42afe1;
|
||||
border-color: #6ceaff;
|
||||
}
|
||||
|
||||
.J.mino {
|
||||
background-color: #1165B5;
|
||||
border-color: #339BFF;
|
||||
background-color: #1165b5;
|
||||
border-color: #339bff;
|
||||
}
|
||||
|
||||
.L.mino {
|
||||
background-color: #F38927;
|
||||
border-color: #FFBA59;
|
||||
background-color: #f38927;
|
||||
border-color: #ffba59;
|
||||
}
|
||||
|
||||
.O.mino {
|
||||
background-color: #F6D03C;
|
||||
border-color: #FFFF7F;
|
||||
background-color: #f6d03c;
|
||||
border-color: #ffff7f;
|
||||
}
|
||||
|
||||
.S.mino {
|
||||
background-color: #32ee3e;
|
||||
border-color: #84F880;
|
||||
border-color: #84f880;
|
||||
}
|
||||
|
||||
.T.mino {
|
||||
background-color: #9739A2;
|
||||
border-color: #D958E9;
|
||||
background-color: #9739a2;
|
||||
border-color: #d958e9;
|
||||
}
|
||||
|
||||
.Z.mino {
|
||||
background-color: #EB4F65;
|
||||
border-color: #FF7F79;
|
||||
background-color: #eb4f65;
|
||||
border-color: #ff7f79;
|
||||
}
|
||||
|
||||
.ghost.mino {
|
||||
|
||||
+92
-44
@@ -6,8 +6,10 @@
|
||||
}
|
||||
|
||||
body {
|
||||
background-image: url(stereo/bg.jpg),
|
||||
radial-gradient(circle at center,
|
||||
background-image:
|
||||
url(stereo/bg.jpg),
|
||||
radial-gradient(
|
||||
circle at center,
|
||||
#39444f 0%,
|
||||
#2c323b 25%,
|
||||
#293036 28%,
|
||||
@@ -18,7 +20,8 @@ body {
|
||||
#151519 63%,
|
||||
#141418 65%,
|
||||
#0f0f12 74%,
|
||||
#0a0c0d 100%);
|
||||
#0a0c0d 100%
|
||||
);
|
||||
background-repeat: space;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
@@ -37,7 +40,8 @@ body {
|
||||
--light-rX: calc(-1 * var(--rY) / 30);
|
||||
--light-rY: calc(var(--rX) / 20);
|
||||
display: block;
|
||||
transform: translateZ(var(--tZ)) rotateX(calc((var(--rX)) * 1deg)) rotateY(calc((var(--rY)) * 1deg));
|
||||
transform: translateZ(var(--tZ)) rotateX(calc((var(--rX)) * 1deg))
|
||||
rotateY(calc((var(--rY)) * 1deg));
|
||||
}
|
||||
|
||||
#sceneDiv,
|
||||
@@ -68,7 +72,7 @@ body {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
#screenRow .card>* {
|
||||
#screenRow .card > * {
|
||||
transform: translateZ(var(--cell-size));
|
||||
}
|
||||
|
||||
@@ -79,8 +83,7 @@ body {
|
||||
|
||||
.card,
|
||||
.card-header {
|
||||
text-shadow:
|
||||
calc(-0.3px * var(--rY)) calc(0.4px * var(--rX)) 5px #0008;
|
||||
text-shadow: calc(-0.3px * var(--rY)) calc(0.4px * var(--rX)) 5px #0008;
|
||||
}
|
||||
|
||||
#holdTable .mino {
|
||||
@@ -160,11 +163,7 @@ tr.cleared-line-animation td::after {
|
||||
/* Front face */
|
||||
.mino,
|
||||
td.trail-animation {
|
||||
--light: calc(
|
||||
1
|
||||
+ (var(--light-y) * 0.3)
|
||||
+ (var(--light-x) * 0.2)
|
||||
);
|
||||
--light: calc(1 + (var(--light-y) * 0.3) + (var(--light-x) * 0.2));
|
||||
--center-x: calc(35% + var(--light-x) * 10%);
|
||||
--center-y: calc(35% + var(--light-y) * 10%);
|
||||
background: radial-gradient(
|
||||
@@ -182,11 +181,7 @@ td.trail-animation {
|
||||
td.trail-animation::before,
|
||||
tr.cleared-line-animation td::before,
|
||||
.mino + .mino::before {
|
||||
--light: calc(
|
||||
1.1
|
||||
+ (var(--light-x) * -0.2)
|
||||
+ (var(--light-y) * 0.15)
|
||||
);
|
||||
--light: calc(1.1 + (var(--light-x) * -0.2) + (var(--light-y) * 0.15));
|
||||
transform: var(--t3d) rotateY(-90deg);
|
||||
transform-origin: left;
|
||||
}
|
||||
@@ -196,11 +191,7 @@ tr.cleared-line-animation td::before,
|
||||
.right .mino + .mino::before,
|
||||
.right td.trail-animation::before,
|
||||
.right tr.cleared-line-animation td::before {
|
||||
--light: calc(
|
||||
0.85
|
||||
+ (var(--light-x) * -0.2)
|
||||
+ (var(--light-y) * -0.15)
|
||||
);
|
||||
--light: calc(0.85 + (var(--light-x) * -0.2) + (var(--light-y) * -0.15));
|
||||
--center-x: calc(65% + var(--light-x) * 10%);
|
||||
--center-y: calc(35% + var(--light-y) * 10%);
|
||||
filter: saturate(0.95);
|
||||
@@ -217,10 +208,7 @@ tr.cleared-line-animation td::before,
|
||||
.mino::after,
|
||||
td.trail-animation::after,
|
||||
tr.cleared-line-animation td::after {
|
||||
--light: calc(
|
||||
1.5
|
||||
+ (var(--light-y) * 0.2)
|
||||
);
|
||||
--light: calc(1.5 + (var(--light-y) * 0.2));
|
||||
transform: var(--t3d) rotateX(90deg);
|
||||
transform-origin: top;
|
||||
}
|
||||
@@ -229,10 +217,7 @@ tr.cleared-line-animation td::after {
|
||||
.bottom .mino::after,
|
||||
.bottom td.trail-animation::after,
|
||||
.bottom tr.cleared-line-animation td::after {
|
||||
--light: calc(
|
||||
1.1
|
||||
+ (var(--light-y) * -0.3)
|
||||
);
|
||||
--light: calc(1.1 + (var(--light-y) * -0.3));
|
||||
--center-x: calc(65% + var(--light-x) * 10%);
|
||||
--center-y: calc(65% + var(--light-y) * 10%);
|
||||
filter: saturate(0.95);
|
||||
@@ -240,17 +225,77 @@ tr.cleared-line-animation td::after {
|
||||
transform-origin: bottom;
|
||||
}
|
||||
|
||||
.J, .J + :not(.mino) { --h: 210deg; --s: 78%; --l: 52%; --a: 0.75; }
|
||||
.L, .L + :not(.mino) { --h: 28deg; --s: 85%; --l: 52%; --a: 0.75; }
|
||||
.O, .O + :not(.mino) { --h: 48deg; --s: 88%; --l: 52%; --a: 0.75; }
|
||||
.I, .I + :not(.mino) { --h: 200deg; --s: 70%; --l: 52%; --a: 0.75; }
|
||||
.S, .S + :not(.mino) { --h: 118deg; --s: 45%; --l: 52%; --a: 0.75; }
|
||||
.T, .T + :not(.mino) { --h: 293deg; --s: 48%; --l: 52%; --a: 0.75; }
|
||||
.Z, .Z + :not(.mino) { --h: 352deg; --s: 75%; --l: 52%; --a: 0.75; }
|
||||
.J,
|
||||
.J + :not(.mino) {
|
||||
--h: 210deg;
|
||||
--s: 78%;
|
||||
--l: 52%;
|
||||
--a: 0.75;
|
||||
}
|
||||
.L,
|
||||
.L + :not(.mino) {
|
||||
--h: 28deg;
|
||||
--s: 85%;
|
||||
--l: 52%;
|
||||
--a: 0.75;
|
||||
}
|
||||
.O,
|
||||
.O + :not(.mino) {
|
||||
--h: 48deg;
|
||||
--s: 88%;
|
||||
--l: 52%;
|
||||
--a: 0.75;
|
||||
}
|
||||
.I,
|
||||
.I + :not(.mino) {
|
||||
--h: 200deg;
|
||||
--s: 70%;
|
||||
--l: 52%;
|
||||
--a: 0.75;
|
||||
}
|
||||
.S,
|
||||
.S + :not(.mino) {
|
||||
--h: 118deg;
|
||||
--s: 45%;
|
||||
--l: 52%;
|
||||
--a: 0.75;
|
||||
}
|
||||
.T,
|
||||
.T + :not(.mino) {
|
||||
--h: 293deg;
|
||||
--s: 48%;
|
||||
--l: 52%;
|
||||
--a: 0.75;
|
||||
}
|
||||
.Z,
|
||||
.Z + :not(.mino) {
|
||||
--h: 352deg;
|
||||
--s: 75%;
|
||||
--l: 52%;
|
||||
--a: 0.75;
|
||||
}
|
||||
|
||||
.ghost.mino, .ghost.mino + :not(.mino) { --h: 0deg; --s: 0%; --l: 55%; --a: 0.40; }
|
||||
.locking.mino, .locking.mino + :not(.mino) { --h: 0deg; --s: 0%; --l: 92%; --a: 0.72; }
|
||||
.disabled.mino, .disabled.mino + :not(.mino) { --h: 0deg; --s: 0%; --l: 45%; --a: 0.72; }
|
||||
.ghost.mino,
|
||||
.ghost.mino + :not(.mino) {
|
||||
--h: 0deg;
|
||||
--s: 0%;
|
||||
--l: 55%;
|
||||
--a: 0.4;
|
||||
}
|
||||
.locking.mino,
|
||||
.locking.mino + :not(.mino) {
|
||||
--h: 0deg;
|
||||
--s: 0%;
|
||||
--l: 92%;
|
||||
--a: 0.72;
|
||||
}
|
||||
.disabled.mino,
|
||||
.disabled.mino + :not(.mino) {
|
||||
--h: 0deg;
|
||||
--s: 0%;
|
||||
--l: 45%;
|
||||
--a: 0.72;
|
||||
}
|
||||
|
||||
#holdTable .J + :not(.mino),
|
||||
#holdTable .L + :not(.mino),
|
||||
@@ -278,12 +323,15 @@ tr.cleared-line-animation td::after {
|
||||
|
||||
td.trail-animation::before,
|
||||
td.trail-animation::after {
|
||||
animation: trail-animation ease-out .3s;
|
||||
animation: trail-animation ease-out 0.3s;
|
||||
}
|
||||
|
||||
@keyframes locked-animation {
|
||||
from {
|
||||
--h: 0deg; --s: 0%; --l: 100%; --a: 1;
|
||||
--h: 0deg;
|
||||
--s: 0%;
|
||||
--l: 100%;
|
||||
--a: 1;
|
||||
box-shadow: 0 0 10px hsla(180, 100%, 100%, 0.2);
|
||||
}
|
||||
}
|
||||
@@ -291,7 +339,7 @@ td.trail-animation::after {
|
||||
.locked.mino::before,
|
||||
.locked.mino::after {
|
||||
animation: locked-animation;
|
||||
animation-duration: .2s;
|
||||
animation-duration: 0.2s;
|
||||
}
|
||||
|
||||
@keyframes cleared-line-animation {
|
||||
@@ -307,7 +355,7 @@ td.trail-animation::after {
|
||||
|
||||
tr.cleared-line-animation td::before,
|
||||
tr.cleared-line-animation td::after {
|
||||
animation: cleared-line-animation ease-out .3s;
|
||||
animation: cleared-line-animation ease-out 0.3s;
|
||||
}
|
||||
|
||||
@keyframes show-level-animation {
|
||||
|
||||
+3
-3
@@ -3,7 +3,7 @@ body {
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
body[data-bs-theme="dark"] {
|
||||
body[data-bs-theme='dark'] {
|
||||
--bs-body-bg: #2125296b;
|
||||
}
|
||||
|
||||
@@ -79,8 +79,8 @@ body[data-bs-theme="dark"] {
|
||||
}
|
||||
|
||||
.Z {
|
||||
--color: #E67D8666;
|
||||
--border: #E67D86;
|
||||
--color: #e67d8666;
|
||||
--border: #e67d86;
|
||||
}
|
||||
|
||||
.ghost {
|
||||
|
||||
+1
-17
@@ -62,23 +62,7 @@ tr.matrix td:not(.mino) {
|
||||
box-shadow: 4px 4px 10px #0002;
|
||||
}
|
||||
|
||||
.option {
|
||||
.preview {
|
||||
--cell-size: 24px;
|
||||
display: inline-block;
|
||||
height: var(--cell-size);
|
||||
}
|
||||
|
||||
.result {
|
||||
--nb-sprites: 9;
|
||||
}
|
||||
|
||||
.select2-container:not(.select2-container--disabled) .selection {
|
||||
--padded-cell-size: calc(var(--cell-size) + 1px);
|
||||
--nb-sprites: 4;
|
||||
--sprite-pos: 2;
|
||||
width: calc(var(--nb-sprites) * var(--padded-cell-size) - 1px);
|
||||
background-position-x: calc(-1 * var(--sprite-pos) * var(--padded-cell-size));
|
||||
background-image: var(--skin-url);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
+53
-6
@@ -93,7 +93,7 @@
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<select name="skinURL" id="skinURLSelect" class="form-select"
|
||||
oninput="document.documentElement.style.setProperty('--skin-url', `url(${encodeURI(this.value)})`)">
|
||||
oninput="document.documentElement.style.setProperty('--skin-url', `url(${this.value})`)">
|
||||
</select>
|
||||
</div>
|
||||
<label for="skinURLSelect" class="col-2 col-form-label">Sample</label>
|
||||
@@ -247,11 +247,58 @@
|
||||
<img src="favicons/T-0.png"/><img src="favicons/T-1.png"/><img src="favicons/T-2.png"/><img src="favicons/T-3.png"/>
|
||||
<img src="favicons/Z-0.png"/><img src="favicons/Z-1.png"/><img src="favicons/Z-2.png"/><img src="favicons/Z-3.png"/>
|
||||
|
||||
<audio id="wallSound" src="sounds/808K_A.wav" preload="auto" type="audio/wav"></audio>
|
||||
<audio id="hardDropSound" src="sounds/909S.wav" preload="auto" type="audio/wav"></audio>
|
||||
<audio id="lineClearSound" src="sounds/808COW.wav" preload="auto" type="audio/wav"></audio>
|
||||
<audio id="tSpinSound" src="sounds/78GUIR.wav" preload="auto" type="audio/wav"></audio>
|
||||
<audio id="quatuorSound" src="sounds/BRRDC1.wav" preload="auto" type="audio/wav"></audio>
|
||||
<audio id = "btb_1" src = "snd/btb_1.ogg" preload = "auto" type = "audio/ogg"></audio>
|
||||
<audio id = "btb_2" src = "snd/btb_2.ogg" preload = "auto" type = "audio/ogg"></audio>
|
||||
<audio id = "btb_3" src = "snd/btb_3.ogg" preload = "auto" type = "audio/ogg"></audio>
|
||||
<audio id = "btb_break" src = "snd/btb_break.ogg" preload = "auto" type = "audio/ogg"></audio>
|
||||
<audio id = "clearbtb" src = "snd/clearbtb.ogg" preload = "auto" type = "audio/ogg"></audio>
|
||||
<audio id = "clearline" src = "snd/clearline.ogg" preload = "auto" type = "audio/ogg"></audio>
|
||||
<audio id = "clearquad" src = "snd/clearquad.ogg" preload = "auto" type = "audio/ogg"></audio>
|
||||
<audio id = "clearspin" src = "snd/clearspin.ogg" preload = "auto" type = "audio/ogg"></audio>
|
||||
<audio id = "combo_1_power" src = "snd/combo_1_power.mp3" preload = "auto" type = "audio/mp3"></audio>
|
||||
<audio id = "combo_1" src = "snd/combo_1.mp3" preload = "auto" type = "audio/mp3"></audio>
|
||||
<audio id = "combo_10_power" src = "snd/combo_10_power.mp3" preload = "auto" type = "audio/mp3"></audio>
|
||||
<audio id = "combo_10" src = "snd/combo_10.mp3" preload = "auto" type = "audio/mp3"></audio>
|
||||
<audio id = "combo_11_power" src = "snd/combo_11_power.mp3" preload = "auto" type = "audio/mp3"></audio>
|
||||
<audio id = "combo_11" src = "snd/combo_11.mp3" preload = "auto" type = "audio/mp3"></audio>
|
||||
<audio id = "combo_12_power" src = "snd/combo_12_power.mp3" preload = "auto" type = "audio/mp3"></audio>
|
||||
<audio id = "combo_12" src = "snd/combo_12.mp3" preload = "auto" type = "audio/mp3"></audio>
|
||||
<audio id = "combo_13_power" src = "snd/combo_13_power.mp3" preload = "auto" type = "audio/mp3"></audio>
|
||||
<audio id = "combo_13" src = "snd/combo_13.mp3" preload = "auto" type = "audio/mp3"></audio>
|
||||
<audio id = "combo_14_power" src = "snd/combo_14_power.mp3" preload = "auto" type = "audio/mp3"></audio>
|
||||
<audio id = "combo_14" src = "snd/combo_14.mp3" preload = "auto" type = "audio/mp3"></audio>
|
||||
<audio id = "combo_15_power" src = "snd/combo_15_power.mp3" preload = "auto" type = "audio/mp3"></audio>
|
||||
<audio id = "combo_15" src = "snd/combo_15.mp3" preload = "auto" type = "audio/mp3"></audio>
|
||||
<audio id = "combo_16_power" src = "snd/combo_16_power.ogg" preload = "auto" type = "audio/ogg"></audio>
|
||||
<audio id = "combo_16" src = "snd/combo_16.ogg" preload = "auto" type = "audio/ogg"></audio>
|
||||
<audio id = "combo_2_power" src = "snd/combo_2_power.mp3" preload = "auto" type = "audio/mp3"></audio>
|
||||
<audio id = "combo_2" src = "snd/combo_2.mp3" preload = "auto" type = "audio/mp3"></audio>
|
||||
<audio id = "combo_3_power" src = "snd/combo_3_power.mp3" preload = "auto" type = "audio/mp3"></audio>
|
||||
<audio id = "combo_3" src = "snd/combo_3.mp3" preload = "auto" type = "audio/mp3"></audio>
|
||||
<audio id = "combo_4_power" src = "snd/combo_4_power.mp3" preload = "auto" type = "audio/mp3"></audio>
|
||||
<audio id = "combo_4" src = "snd/combo_4.mp3" preload = "auto" type = "audio/mp3"></audio>
|
||||
<audio id = "combo_5_power" src = "snd/combo_5_power.mp3" preload = "auto" type = "audio/mp3"></audio>
|
||||
<audio id = "combo_5" src = "snd/combo_5.mp3" preload = "auto" type = "audio/mp3"></audio>
|
||||
<audio id = "combo_6_power" src = "snd/combo_6_power.mp3" preload = "auto" type = "audio/mp3"></audio>
|
||||
<audio id = "combo_6" src = "snd/combo_6.mp3" preload = "auto" type = "audio/mp3"></audio>
|
||||
<audio id = "combo_7_power" src = "snd/combo_7_power.mp3" preload = "auto" type = "audio/mp3"></audio>
|
||||
<audio id = "combo_7" src = "snd/combo_7.mp3" preload = "auto" type = "audio/mp3"></audio>
|
||||
<audio id = "combo_8_power" src = "snd/combo_8_power.mp3" preload = "auto" type = "audio/mp3"></audio>
|
||||
<audio id = "combo_8" src = "snd/combo_8.mp3" preload = "auto" type = "audio/mp3"></audio>
|
||||
<audio id = "combo_9_power" src = "snd/combo_9_power.mp3" preload = "auto" type = "audio/mp3"></audio>
|
||||
<audio id = "combo_9" src = "snd/combo_9.mp3" preload = "auto" type = "audio/mp3"></audio>
|
||||
<audio id = "combobreak" src = "snd/combobreak.mp3" preload = "auto" type = "audio/mp3"></audio>
|
||||
<audio id = "floor" src = "snd/floor.ogg" preload = "auto" type = "audio/ogg"></audio>
|
||||
<audio id = "harddrop" src = "snd/harddrop.ogg" preload = "auto" type = "audio/ogg"></audio>
|
||||
<audio id = "hit" src = "snd/hit.mp3" preload = "auto" type = "audio/mp3"></audio>
|
||||
<audio id = "hold" src = "snd/hold.ogg" preload = "auto" type = "audio/ogg"></audio>
|
||||
<audio id = "hyperalert" src = "snd/hyperalert.mp3" preload = "auto" type = "audio/mp3"></audio>
|
||||
<audio id = "menuconfirm" src = "snd/menuconfirm.mp3" preload = "auto" type = "audio/mp3"></audio>
|
||||
<audio id = "menuhover" src = "snd/menuhover.ogg" preload = "auto" type = "audio/ogg"></audio>
|
||||
<audio id = "move" src = "snd/move.ogg" preload = "auto" type = "audio/ogg"></audio>
|
||||
<audio id = "rotate" src = "snd/rotate.ogg" preload = "auto" type = "audio/ogg"></audio>
|
||||
<audio id = "shatter" src = "snd/shatter.mp3" preload = "auto" type = "audio/mp3"></audio>
|
||||
<audio id = "spin" src = "snd/spin.ogg" preload = "auto" type = "audio/ogg"></audio>
|
||||
</span>
|
||||
|
||||
<script src="js/game_logic.js" language="Javascript" type="text/javascript"></script>
|
||||
|
||||
@@ -32,6 +32,7 @@ function pauseSettings() {
|
||||
document.onkeydown = null;
|
||||
|
||||
settings.show();
|
||||
playSound(menuhover)
|
||||
}
|
||||
|
||||
function newGame(event) {
|
||||
@@ -82,6 +83,8 @@ function resume(event) {
|
||||
|
||||
if (matrix.piece) scheduler.setInterval(fall, stats.fallPeriod);
|
||||
else generate();
|
||||
|
||||
playSound(menuconfirm)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -103,19 +106,19 @@ function generate(piece) {
|
||||
}
|
||||
|
||||
let playerActions = {
|
||||
moveLeft: () => matrix.piece.move(TRANSLATION.LEFT),
|
||||
moveLeft: () => matrix.piece.move(TRANSLATION.LEFT)? playSound(move) : playSound(hit),
|
||||
|
||||
moveRight: () => matrix.piece.move(TRANSLATION.RIGHT),
|
||||
moveRight: () => matrix.piece.move(TRANSLATION.RIGHT)? playSound(move) : playSound(hit),
|
||||
|
||||
rotateClockwise: () => matrix.piece.rotate(ROTATION.CW),
|
||||
rotateClockwise: () => matrix.piece.rotate(ROTATION.CW)? playSound(rotate) : playSound(hit),
|
||||
|
||||
rotateCounterclockwise: () => matrix.piece.rotate(ROTATION.CCW),
|
||||
rotateCounterclockwise: () => matrix.piece.rotate(ROTATION.CCW)? playSound(rotate) : playSound(hit),
|
||||
|
||||
softDrop: () => matrix.piece.move(TRANSLATION.DOWN) && ++stats.score,
|
||||
softDrop: () => (matrix.piece.move(TRANSLATION.DOWN) && ++stats.score)? playSound(move) : playSound(floor),
|
||||
|
||||
hardDrop: function () {
|
||||
scheduler.clearTimeout(lockDown);
|
||||
playSound(hardDropSound);
|
||||
playSound(harddrop);
|
||||
while (matrix.piece.move(TRANSLATION.DOWN, ROTATION.NONE, true)) stats.score += 2;
|
||||
matrixCard.classList.remove('hard-dropped-table-animation');
|
||||
matrixCard.offsetHeight;
|
||||
@@ -128,6 +131,7 @@ let playerActions = {
|
||||
if (matrix.piece.holdEnabled) {
|
||||
scheduler.clearInterval(fall);
|
||||
scheduler.clearTimeout(lockDown);
|
||||
playSound(hold)
|
||||
|
||||
let piece = matrix.piece;
|
||||
piece.facing = FACING.NORTH;
|
||||
@@ -318,14 +322,19 @@ sceneDiv.onwheel = function (event) {
|
||||
screenRow.style.setProperty('--tZ', tZ + 'px');
|
||||
};
|
||||
|
||||
const ImageURLPattern = /^(https?:\/\/.*\.(?:png|jpg|jpeg|gif|bmp|webp|svg))$/i
|
||||
$.fn.select2.defaults.set("templateResult", (state) =>
|
||||
state.id
|
||||
? $(`<img class="option result" src="${state.id}" title="${state.text}" loading="lazy"/>`)
|
||||
? $(`<img class="preview" src="${state.id}" title="${state.text}" loading="lazy"/>`)
|
||||
: state.text
|
||||
)
|
||||
$.fn.select2.defaults.set("templateSelection", (state) =>
|
||||
state.id
|
||||
? $(`<span class="option selection" style="--skin-url: url(${state.id})" title="${state.text}" alt="${state.id}" loading="lazy"></span>`)
|
||||
? $(`
|
||||
<table class="minoes-table preview" style="--skin-url: url(${state.id});">
|
||||
<tr><td class="Z mino"></td><td class="O mino"></td><td class="T mino"></td><td class="I mino"></td></tr>
|
||||
</table>
|
||||
`)
|
||||
: state.text
|
||||
)
|
||||
$.fn.select2.defaults.set("theme", "bootstrap-5")
|
||||
@@ -336,7 +345,7 @@ $.fn.select2.defaults.set("placeholder", "URL de l'image")
|
||||
$.fn.select2.defaults.set("tags", true)
|
||||
$.fn.select2.defaults.set("createTag", function (params) {
|
||||
const url = encodeURI(params.term);
|
||||
if (/^(https?:\/\/.*\.(?:png|jpg|jpeg|gif|bmp|webp|svg))$/i.test(url)) {
|
||||
if (ImageURLPattern.test(url)) {
|
||||
return {
|
||||
id: url,
|
||||
text: 'Source externe',
|
||||
@@ -349,6 +358,7 @@ stylesheetSelect.oninput = function (event) {
|
||||
selectedStyleSheet.href = this.value;
|
||||
|
||||
$("#skinURLSelect").empty();
|
||||
|
||||
switch (this.value) {
|
||||
case 'css/jstris-skin.css':
|
||||
skinURLSelect.disabled = false;
|
||||
@@ -362,7 +372,7 @@ stylesheetSelect.oninput = function (event) {
|
||||
text: group,
|
||||
children: json[group].map(skin => ({
|
||||
id: skin.link,
|
||||
text: `${skin.name} (${skin.author})\n${skin.description}`,
|
||||
text: `${skin.name} (${skin.author})`,
|
||||
})),
|
||||
};
|
||||
data.push(groupData);
|
||||
@@ -371,6 +381,7 @@ stylesheetSelect.oninput = function (event) {
|
||||
$('#skinURLSelect').select2({data: data});
|
||||
});
|
||||
break;
|
||||
|
||||
case 'css/tetrio-skin.css':
|
||||
skinURLSelect.disabled = false;
|
||||
|
||||
@@ -381,10 +392,11 @@ stylesheetSelect.oninput = function (event) {
|
||||
.filter((item) => (item.type == "skin" && item.format == "tetrioraster"))
|
||||
.map((skin) => {
|
||||
return {
|
||||
id: `https://you.have.fail/tetrioplus/data/${skin.path}`,
|
||||
text:`${skin.name} (${skin.author})`
|
||||
id: encodeURI(`https://you.have.fail/tetrioplus/data/${skin.path}`),
|
||||
text:`${skin.name} (${skin.author})\n${skin.description}`
|
||||
}
|
||||
})
|
||||
.filter((option) => ImageURLPattern.test(option.id))
|
||||
$('#skinURLSelect').select2({data: data});
|
||||
})
|
||||
break;
|
||||
|
||||
+4
-4
@@ -17,7 +17,7 @@ const T_SPIN = {
|
||||
T_SPIN: "PIROUETTE"
|
||||
}
|
||||
|
||||
// score = AWARDED_LINE_CLEARS[tSpin][nbClearedLines]
|
||||
// score = AWARDED_LINE_CLEARS[tSpin][clearedLines]
|
||||
const AWARDED_LINE_CLEARS = {
|
||||
[T_SPIN.NONE]: [0, 1, 3, 5, 8],
|
||||
[T_SPIN.MINI]: [1, 2],
|
||||
@@ -282,18 +282,18 @@ class Matrix extends MinoesTable {
|
||||
}
|
||||
|
||||
clearLines() {
|
||||
let nbClearedLines = 0
|
||||
let clearedLines = 0
|
||||
for (let y=0; y<this.rows; y++) {
|
||||
let row = this.blocks[y]
|
||||
if (row.filter(lockedMino => lockedMino).length == this.columns) {
|
||||
nbClearedLines++
|
||||
clearedLines++
|
||||
this.blocks.splice(y, 1)
|
||||
this.blocks.unshift(Array(matrix.columns))
|
||||
this.table.rows[y].classList.add("cleared-line-animation")
|
||||
}
|
||||
}
|
||||
this.redraw()
|
||||
return nbClearedLines
|
||||
return clearedLines
|
||||
}
|
||||
}
|
||||
Matrix.prototype.init_center = [4, 4]
|
||||
|
||||
+60
-18
@@ -144,8 +144,8 @@ class Stats {
|
||||
levelInput.value = localStorage['startLevel'] || 1;
|
||||
this.score = 0;
|
||||
this.goal = 0;
|
||||
this.combo = 0;
|
||||
this.b2b = 0;
|
||||
this.combo = -1;
|
||||
this.b2b = -1;
|
||||
this.startTime = new Date();
|
||||
this.lockDelay = DELAY.LOCK;
|
||||
this.totalClearedLines = 0;
|
||||
@@ -231,23 +231,23 @@ class Stats {
|
||||
return new Date() - this.startTime;
|
||||
}
|
||||
|
||||
lockDown(tSpin, nbClearedLines) {
|
||||
this.totalClearedLines += nbClearedLines;
|
||||
if (nbClearedLines == 4) this.nbQuatuors++;
|
||||
lockDown(tSpin, clearedLines) {
|
||||
this.totalClearedLines += clearedLines;
|
||||
if (clearedLines == 4) this.nbQuatuors++;
|
||||
if (tSpin == T_SPIN.T_SPIN) this.nbTSpin++;
|
||||
|
||||
// Cleared lines & T-Spin
|
||||
let awardedLineClears = AWARDED_LINE_CLEARS[tSpin][nbClearedLines];
|
||||
let awardedLineClears = AWARDED_LINE_CLEARS[tSpin][clearedLines];
|
||||
let patternScore = 100 * this.level * awardedLineClears;
|
||||
if (tSpin)
|
||||
messagesSpan.addNewChild('div', {
|
||||
className: 'rotate-in-animation',
|
||||
innerHTML: tSpin,
|
||||
});
|
||||
if (nbClearedLines)
|
||||
if (clearedLines)
|
||||
messagesSpan.addNewChild('div', {
|
||||
className: 'zoom-in-animation',
|
||||
innerHTML: CLEARED_LINES_NAMES[nbClearedLines],
|
||||
innerHTML: CLEARED_LINES_NAMES[clearedLines],
|
||||
});
|
||||
if (patternScore) {
|
||||
messagesSpan.addNewChild('div', {
|
||||
@@ -259,10 +259,10 @@ class Stats {
|
||||
}
|
||||
|
||||
// Combo
|
||||
if (nbClearedLines) {
|
||||
if (clearedLines) {
|
||||
this.combo++;
|
||||
if (this.combo >= 1) {
|
||||
let comboScore = (nbClearedLines == 1 ? 20 : 50) * this.combo * this.level;
|
||||
let comboScore = (clearedLines == 1 ? 20 : 50) * this.combo * this.level;
|
||||
if (this.combo == 1) {
|
||||
messagesSpan.addNewChild('div', {
|
||||
className: 'zoom-in-animation',
|
||||
@@ -279,11 +279,12 @@ class Stats {
|
||||
this.score += comboScore;
|
||||
}
|
||||
} else {
|
||||
if (this.combo >= 1) playSound(combobreak)
|
||||
this.combo = -1;
|
||||
}
|
||||
|
||||
// Back to back sequence
|
||||
if (nbClearedLines == 4 || (tSpin && nbClearedLines)) {
|
||||
if (clearedLines == 4 || (tSpin && clearedLines)) {
|
||||
this.b2b++;
|
||||
if (this.b2b >= 1) {
|
||||
let b2bScore = patternScore / 2;
|
||||
@@ -302,23 +303,64 @@ class Stats {
|
||||
}
|
||||
this.score += b2bScore;
|
||||
}
|
||||
} else if (nbClearedLines && !tSpin) {
|
||||
} else if (clearedLines && !tSpin) {
|
||||
if (this.b2b >= 1) {
|
||||
messagesSpan.addNewChild('div', {
|
||||
className: 'zoom-in-animation',
|
||||
style: 'animation-delay: .4s',
|
||||
innerHTML: `FIN DU BOUT À BOUT`,
|
||||
});
|
||||
playSound(btb_break)
|
||||
}
|
||||
this.b2b = -1;
|
||||
}
|
||||
|
||||
// Sound
|
||||
if (sfxVolumeRange.value) {
|
||||
if (nbClearedLines == 4) playSound(quatuorSound, this.combo);
|
||||
else if (nbClearedLines) playSound(lineClearSound, this.combo);
|
||||
if (tSpin) playSound(tSpinSound, this.combo);
|
||||
}
|
||||
// Sounds
|
||||
if (clearedLines == 4 || (tSpin && clearedLines)) {
|
||||
if (this.b2b >= 1) switch(this.b2b) {
|
||||
case 1: playSound(btb_1); break
|
||||
case 2: playSound(btb_2); break
|
||||
default: playSound(btb_3)
|
||||
} else if (this.combo >= 1) switch(this.combo) {
|
||||
case 1: playSound(combo_1_power); break
|
||||
case 2: playSound(combo_2_power); break
|
||||
case 3: playSound(combo_3_power); break
|
||||
case 4: playSound(combo_4_power); break
|
||||
case 5: playSound(combo_5_power); break
|
||||
case 6: playSound(combo_6_power); break
|
||||
case 7: playSound(combo_7_power); break
|
||||
case 8: playSound(combo_8_power); break
|
||||
case 9: playSound(combo_9_power); break
|
||||
case 10: playSound(combo_10_power); break
|
||||
case 11: playSound(combo_11_power); break
|
||||
case 12: playSound(combo_12_power); break
|
||||
case 13: playSound(combo_13_power); break
|
||||
case 14: playSound(combo_14_power); break
|
||||
case 15: playSound(combo_15_power); break
|
||||
default: playSound(combo_16_power)
|
||||
} else if (clearedLines == 4) playSound(clearbtb);
|
||||
else playSound(clearspin);
|
||||
} else if (this.combo >= 1) switch(this.combo) {
|
||||
case 1: playSound(combo_1); break
|
||||
case 2: playSound(combo_2); break
|
||||
case 3: playSound(combo_3); break
|
||||
case 4: playSound(combo_4); break
|
||||
case 5: playSound(combo_5); break
|
||||
case 6: playSound(combo_6); break
|
||||
case 7: playSound(combo_7); break
|
||||
case 8: playSound(combo_8); break
|
||||
case 9: playSound(combo_9); break
|
||||
case 10: playSound(combo_10); break
|
||||
case 11: playSound(combo_11); break
|
||||
case 12: playSound(combo_12); break
|
||||
case 13: playSound(combo_13); break
|
||||
case 14: playSound(combo_14); break
|
||||
case 15: playSound(combo_15); break
|
||||
default: playSound(combo_16)
|
||||
} else if (tSpin) {
|
||||
if (clearedLines) playSound(clearspin);
|
||||
else playSound(spin);
|
||||
} else if (clearedLines) playSound(clearline);
|
||||
|
||||
this.goal -= awardedLineClears;
|
||||
if (this.goal <= 0) this.level++;
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Reference in New Issue
Block a user