diff --git a/app.js b/app.js index 278fd92..e967330 100644 --- a/app.js +++ b/app.js @@ -95,7 +95,7 @@ const actionsDefaultKeys = { pause: "Escape", } const RETRIES = 3 -const DEFAULT_THEME = "light-relief" +const DEFAULT_THEME = "default" var theme = null @@ -296,15 +296,15 @@ class Matrix extends MinoesTable { this.drawPiece(ghost) } - this.drawPiece(this.piece) - // trail if (this.trail.height) { this.trail.minoesPos.forEach(pos => { - for (var y = pos.y; y < pos.y + this.trail.height; y++) + for (var y = pos.y; y < pos.y + this.trail.height - 1; y++) this.drawMino(pos.x, y, CLASSNAME.TRAIL) }) } + + this.drawPiece(this.piece) } } diff --git a/index.php b/index.php index a911de7..87ef36d 100644 --- a/index.php +++ b/index.php @@ -36,6 +36,7 @@ Webtris +
diff --git a/leaderboard.js b/leaderboard.js new file mode 100644 index 0000000..611ba4f --- /dev/null +++ b/leaderboard.js @@ -0,0 +1,16 @@ +const DEFAULT_THEME = "default" + +function loadTheme() { + var link = document.createElement('link') + link.id = "theme"; + link.rel = 'stylesheet' + link.type = 'text/css' + link.href = 'themes/' + themeName + '/style.css' + link.media = 'all' + document.head.appendChild(link); +} + +window.onload = function() { + themeName = localStorage.getItem("themeName") || DEFAULT_THEME + loadTheme() +} diff --git a/leaderboard.php b/leaderboard.php index efba78d..42d5cf3 100644 --- a/leaderboard.php +++ b/leaderboard.php @@ -4,7 +4,7 @@ Meilleurs scores - Webtris - +
@@ -28,8 +28,8 @@ $db = null; ?> -
+
+ diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..fb87a7e --- /dev/null +++ b/manifest.json @@ -0,0 +1,32 @@ +{ + "short_name": "Webtris", + "name": "Webtris", + "description": "Falling blocks", + "icons": [ + { + "src": "favicon.png", + "type": "image/png", + "sizes": "16x16" + } + ], + "start_url": "index.php", + "background_color": "#222", + "display": "standalone", + "scope": ".", + "theme_color": "#222", + "shortcuts": [ + { + "name": "Webtris", + "short_name": "Webtris", + "description": "Falling blocks", + "url": "index.php", + "icons": [ + { + "src": "favicon.png", + "type": "image/png", + "sizes": "16x16" + } + ] + } + ] +} diff --git a/themes/Effect/fonts/ShareTech.woff2 b/themes/Effect/fonts/ShareTech.woff2 new file mode 100644 index 0000000..25cc921 Binary files /dev/null and b/themes/Effect/fonts/ShareTech.woff2 differ diff --git a/themes/Effect/fonts/ShareTechMono.woff2 b/themes/Effect/fonts/ShareTechMono.woff2 new file mode 100644 index 0000000..cee230d Binary files /dev/null and b/themes/Effect/fonts/ShareTechMono.woff2 differ diff --git a/themes/Effect/images/bg.jpg b/themes/Effect/images/bg.jpg new file mode 100644 index 0000000..b88d8e6 Binary files /dev/null and b/themes/Effect/images/bg.jpg differ diff --git a/themes/Effect/style.css b/themes/Effect/style.css new file mode 100644 index 0000000..f1dbee0 --- /dev/null +++ b/themes/Effect/style.css @@ -0,0 +1,243 @@ +@font-face { + font-family: 'Share Tech'; + font-style: normal; + font-weight: 400; + src: local('Share Tech Regular'), local('ShareTech-Regular'), url(fonts/ShareTech.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +@font-face { + font-family: 'Share Tech Mono'; + font-style: normal; + font-weight: 400; + src: local('Share Tech Mono Regular'), local('ShareTechMono-Regular'), url(fonts/ShareTechMono.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +body { + font-family: 'Share Tech'; + font-size: 1em; + text-align: center; + color: white; + background-color: #0D111D; + background-image: url("images/bg.jpg"); + background-size: cover; + background-attachment: fixed; +} + +h1 { + text-align: center; +} + +section { + margin: 1em; +} + +div { + display: flex; + justify-content: center; + align-items: center; +} + +#settingsSection { + width: auto; +} + +fieldset { + border: 1px white solid; + border-radius: 4px; + align-items: center; + margin: 1vmin auto; + width: 80%; +} + +legend, label { + color: white; +} + +fieldset > div { + display: grid; + grid-template-columns: 3fr 2fr 3fr 2fr; + grid-column-gap: 2em; + grid-row-gap: 1em; + justify-items: right; + align-items: center; +} + +fieldset > div > * { + width: 100%; +} + +label { + text-align: right; +} + +#themePreviewTable { + grid-column: 3 / 5; + width: auto; +} + +fieldset input[type="checkbox"] { + width: auto; +} + +#showGhostDiv { + grid-row: 2; + grid-column: 1/5; + width: 100%; +} + +#gameSection div { + display: grid; + grid-gap: 3vmin; + margin: -6vmin 0 auto 0; +} + +#holdTable { + grid-column: 1; + grid-row: 1; + justify-self: end; +} + +#matrixTable { + grid-column: 2; + grid-row: 1 / 4; +} + +#messageSpan { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: rgba(255, 255, 255, 0.8); + font-size: 4vmin; + text-shadow: 1px 1px rgba(0, 0, 0, 0.8); + text-align: center; + font-weight: bold; +} + +#nextTable { + grid-column: 3; + grid-row: 1 / 4; +} + + +.minoes-table { + table-layout: fixed; + border-spacing: 0; + margin: auto; +} + +th, td { + font-weight: normal; + padding: 0; + border-width: 1px; + border-style: solid; + border-color: transparent; + height: 3vmin; + width: 3vmin; +} + +th { + background: transparent; + border: 1px solid transparent; +} + +td { + background: transparent; + border: 1px inset rgba(128, 128, 128, 0.3); +} + +.mino { + background: rgba(127, 229, 255, 0.3); + border: 1px solid rgba(127, 229, 255, 0.7); + border-radius: 0.3vmin; +} + +.locked-mino { + background: rgba(242, 255, 255, 0.5); + border-color: rgba(242, 255, 255, 0.7); +} + +.cleared-line { + background: white; +} + +.trail { + background: rgba(255, 255, 255, 0.2); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 0.3vmin; +} + +.ghost { + background: rgba(255, 255, 255, 0.2); + border: 1px solid rgba(255, 255, 255, 0.4); + border-radius: 0.3vmin; +} + +#statsTable { + grid-column: 1; + grid-row: 3; + height: 0; + justify-self: end; + margin: 0 auto; +} + +#statsTable td { + text-align: center; + font-weight: bold; + border: 0; +} + +footer { + position: absolute; + left: 50%; + bottom: 1em; + transform: translateX(-50%); +} + +a { + text-decoration: none; + font-size: 1em; + color: white; +} + +a:hover { + color: lightcyan; +} + +#credits { + font-size: 0.8em; + gap: 0.8em; +} + + + +#leaderboard { + min-width: 25%; + margin: auto; + text-align: center; + border-top: 1px solid white; + caption-side: top; +} + +#leaderboard caption { + color: white; +} + +#leaderboard td { + font-family: 'Share Tech'; + text-align: center; + font-size: 2.5vmin; + color: white; + border: 0; +} + +#leaderboard td:first-child{ + text-align: left; +} + +#leaderboard td:last-child { + text-align: right; +} + diff --git a/themes/Kubow/style.css b/themes/Kubow/style.css index 2f6dacc..5987dcd 100644 --- a/themes/Kubow/style.css +++ b/themes/Kubow/style.css @@ -46,7 +46,7 @@ div { width: auto; } -fieldset, #statsTable { +fieldset, #statsTable, #leaderboard { margin-top: 1rem; background: #f0f0f0; background-image: linear-gradient(#d0d0d0, #f0f0f0); @@ -56,7 +56,7 @@ fieldset, #statsTable { color: #85796b; } -legend { +legend, #leaderboard caption { font-size: 0.9em; color: #d8edea; transform: translate(0, -0.6em); @@ -287,3 +287,21 @@ a { font-size: 0.8em; gap: 0.8em; } + +#leaderboard { + margin: auto; +} + +#leaderboard td { + margin: auto; + padding-left: 1rem; + text-align: center; +} + +#leaderboard td:first-child{ + text-align: left; +} + +#leaderboard td:last-child { + text-align: right; +} diff --git a/themes/Manjaro/style.css b/themes/Manjaro/style.css deleted file mode 100644 index 5ff6383..0000000 --- a/themes/Manjaro/style.css +++ /dev/null @@ -1,216 +0,0 @@ -body { - margin: 0; - font-family: open sans,sans-serif; - font-size: 14px; - letter-spacing: .01em; - color: white; - background: #222; - width: 100%; - height: 100%; -} - -h1 { - text-align: center; -} - -section { - margin: 1em; -} - -div { - display: flex; - justify-content: center; - align-items: center; -} - -#settingsSection { - width: auto; -} - -fieldset { - border: 0; - font-size: 14px; -} - -legend { - font-size: 0.9em; - color: #AAA; -} - -fieldset > div { - display: grid; - grid-template-columns: 3fr 2fr 3fr 2fr; - grid-column-gap: 2em; - grid-row-gap: 1em; - justify-items: right; - align-items: center; -} - -fieldset > div > * { - width: 100%; -} - -label { - text-align: right; -} - -#themePreviewTable { - grid-column: 3 / 5; - width: auto; -} - -fieldset input[type="checkbox"] { - width: auto; -} - -#showGhostDiv { - grid-row: 2; - grid-column: 1/5; - width: 100%; -} - -#gameSection div { - display: grid; - grid-gap: 3vmin; - margin: -3vmin 0 auto 0; -} - -#holdTable { - grid-column: 1; - grid-row: 1; - justify-self: end; -} - -#matrixTable { - grid-column: 2; - grid-row: 1 / 4; -} - -#messageSpan { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - color: rgba(255, 255, 255, 0.8); - font-size: 4vmin; - text-shadow: 1px 1px rgba(0, 0, 0, 0.8); - text-align: center; - font-weight: bold; -} - -#nextTable { - grid-column: 3; - grid-row: 1 / 4; -} - - -.minoes-table { - table-layout: fixed; - border-spacing: 0; - margin: auto; -} - -th, td { - font-weight: normal; - padding: 0; - height: 3vmin; - width: 3vmin; -} - -th { - border: 1px solid transparent; -} - -td { - border: 1px solid #444; -} - -.mino { - border: 1px solid; - border-radius: 1px; -} - -.I { /* cyan */ - background: #99d9ea; - border-color: #d1edf5; -} - -.J { /* blue */ - background: #7f92ff; - border-color: #c2cbff; -} - -.L { /* orange */ - background: #ffb27f; - border-color: #ffe1cd; -} - -.O { /* yellow */ - background: #ffe97f; - border-color: #fff5ca; -} - -.S { /* green */ - background: #7fff8e; - border-color: #ccffd2; -} - -.T { /* magenta */ - background: #d67fff; - border-color: #edc9ff; -} - -.Z { /* red */ - background: #ff7f7f; - border-color: #ffdada; -} - -.locked-mino, .cleared-line { - background: #AAA; - border: 1px solid #CCC; - border-radius: 1px; -} - -.trail { - background: #333; - border: 1px solid #444; - border-radius: 1px; -} - -.ghost { - background: #555; - border: 1px solid #666; - border-radius: 1px; -} - - -#statsTable { - grid-column: 1; - grid-row: 3; - height: 0; - justify-self: end; - margin: 0 auto; -} - -#statsTable td { - text-align: center; - font-weight: bold; - border: 0; -} - -footer { - position: absolute; - left: 50%; - bottom: 1em; - transform: translateX(-50%); -} - -a { - text-decoration: none; - color: lightblue; -} - -#credits { - font-size: 0.8em; - gap: 0.8em; -} diff --git a/themes/default/style.css b/themes/default/style.css index cf41b7d..1c37d88 100644 --- a/themes/default/style.css +++ b/themes/default/style.css @@ -3,8 +3,6 @@ body { font-family: sans-serif; color: white; background: #222; - width: 100%; - height: 100%; } h1 { @@ -208,6 +206,34 @@ a { } #credits { + width: max-content; font-size: 0.8em; gap: 0.8em; } + +#leaderboard { + min-width: 25%; + margin: auto; + text-align: center; + border-top: 1px solid white; + caption-side: top; +} + +#leaderboard caption { + color: white; +} + +#leaderboard td { + border: 0 !important; +} + + +#leaderboard td:first-child { + text-align: left; +} + +#leaderboard td:last-child { + text-align: right; +} + +