diff --git a/css/jstris-skin.css b/css/jstris-skin.css new file mode 100644 index 0000000..96a1556 --- /dev/null +++ b/css/jstris-skin.css @@ -0,0 +1,55 @@ +:root { + --cell-size: 24px; + --sprite-size: calc(100% / 8); + --skin-url: url(https://i.imgur.com/HqGYC5G.png); +} + +.mino { + width: var(--cell-size); + height: var(--cell-size); + background-image: var(--skin-url); + background-size: cover; + background-repeat: no-repeat; + background-position-x: calc(var(--sprite-pos) * var(--sprite-size)); +} + +.I { + --sprite-pos: 6; +} + +.J { + --sprite-pos: 7; +} + +.L { + --sprite-pos: 3; +} + +.O { + --sprite-pos: 4; +} + +.S { + --sprite-pos: 5; +} + +.T { + --sprite-pos: 8; +} + +.Z { + --sprite-pos: 2; +} + +.ghost { + --sprite-pos: 0; + opacity: 50%; +} + +.disabled { + --sprite-pos: 1; +} + +.locking.mino { + filter: saturate(60%) brightness(180%); +} diff --git a/css/custom.css b/css/tetrio-skin.css similarity index 58% rename from css/custom.css rename to css/tetrio-skin.css index 2a8c220..3edd5dd 100644 --- a/css/custom.css +++ b/css/tetrio-skin.css @@ -2,31 +2,6 @@ --cell-size: 30px; --sprite-size: calc(100% / 11); --skin-url: url(https://you.have.fail/ed/at/tetrioplus/data/content/skin/Haley%20Halcyon/tetrio_gameboy_plus.svg); - --bg-url: url(); -} - -body { - background-image: var(--bg-url) fixed; - background-size: cover; - background-position: center; -} - -#matrixTable tr:last-child td { - position: relative; - overflow: visible; -} - -#matrixTable tr:last-child td:after { - position: absolute; - content: ""; - width: inherit; - height: inherit; - top: var(--cell-size); - left: 0; - background-image: var(--skin-url); - background-size: repeat; - background-position-x: calc(var(--sprite-pos) * var(--sprite-size)); - --sprite-pos: 10; } .mino { diff --git a/index.html b/index.html index 1e29579..ebe8f93 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,8 @@ - + + @@ -81,7 +82,7 @@