Compare commits
3 Commits
0f1093541e
...
ccd85b6bd8
| Author | SHA1 | Date | |
|---|---|---|---|
| ccd85b6bd8 | |||
| a161826a37 | |||
| 5d7795b3da |
@ -29,12 +29,12 @@ const THEME = {
|
||||
PIECE_POSITION: [1, 1]
|
||||
}
|
||||
const CLASSNAME = {
|
||||
EMPTY_CELL: "empty-cell",
|
||||
EMPTY_CELL: "",
|
||||
MINO: "mino",
|
||||
LOCKED: "locked-mino",
|
||||
TRAIL: "trail",
|
||||
LOCKED: "locked",
|
||||
TRAIL: "mino trail",
|
||||
GHOST: "ghost",
|
||||
CLEARED_LINE: "mino cleared-line"
|
||||
CLEARED_LINE: "cleared-line"
|
||||
}
|
||||
const DELAY = {
|
||||
LOCK: 500,
|
||||
@ -95,7 +95,9 @@ const actionsDefaultKeys = {
|
||||
pause: "Escape",
|
||||
}
|
||||
const RETRIES = 3
|
||||
const DEFAULT_THEME = "light-relief"
|
||||
const DEFAULT_THEME = "default"
|
||||
|
||||
var theme = null
|
||||
|
||||
|
||||
// Classes
|
||||
@ -246,7 +248,7 @@ class HoldQueue extends MinoesTable {
|
||||
|
||||
draw() {
|
||||
this.clearTable()
|
||||
if (this.piece && state != STATE.PAUSED)
|
||||
if (this.piece)
|
||||
this.drawPiece(this.piece)
|
||||
}
|
||||
}
|
||||
@ -277,37 +279,32 @@ class Matrix extends MinoesTable {
|
||||
|
||||
draw() {
|
||||
// grid
|
||||
if (state == STATE.PAUSED) {
|
||||
this.clearTable()
|
||||
} else {
|
||||
for (var y = 0; y < this.rows; y++) {
|
||||
for (var x = 0; x < this.columns; x++) {
|
||||
if (this.clearedLines.includes(y))
|
||||
var className = CLASSNAME.CLEARED_LINE
|
||||
else
|
||||
var className = this.lockedMinoes[y][x] || CLASSNAME.EMPTY_CELL
|
||||
this.drawMino(x, y, className)
|
||||
}
|
||||
}
|
||||
|
||||
// ghost
|
||||
if (showGhost && !this.piece.locked && state != STATE.GAME_OVER) {
|
||||
for (var ghost = this.piece.ghost; this.spaceToMove(ghost.minoesAbsPos); ghost.pos.y++) {}
|
||||
ghost.pos.y--
|
||||
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++)
|
||||
if (this.table.rows[y].cells[pos.x].className == CLASSNAME.EMPTY_CELL)
|
||||
this.drawMino(pos.x, y, CLASSNAME.TRAIL)
|
||||
})
|
||||
for (var y = 0; y < this.rows; y++) {
|
||||
for (var x = 0; x < this.columns; x++) {
|
||||
if (this.clearedLines.includes(y))
|
||||
var className = CLASSNAME.CLEARED_LINE
|
||||
else
|
||||
var className = this.lockedMinoes[y][x] || CLASSNAME.EMPTY_CELL
|
||||
this.drawMino(x, y, className)
|
||||
}
|
||||
}
|
||||
|
||||
// ghost
|
||||
if (showGhostCheckbox.value && !this.piece.locked && state != STATE.GAME_OVER) {
|
||||
for (var ghost = this.piece.ghost; this.spaceToMove(ghost.minoesAbsPos); ghost.pos.y++) {}
|
||||
ghost.pos.y--
|
||||
this.drawPiece(ghost)
|
||||
}
|
||||
|
||||
// trail
|
||||
if (this.trail.height) {
|
||||
this.trail.minoesPos.forEach(pos => {
|
||||
for (var y = pos.y; y < pos.y + this.trail.height - 1; y++)
|
||||
this.drawMino(pos.x, y, CLASSNAME.TRAIL)
|
||||
})
|
||||
}
|
||||
|
||||
this.drawPiece(this.piece)
|
||||
}
|
||||
}
|
||||
|
||||
@ -323,17 +320,7 @@ class NextQueue extends MinoesTable {
|
||||
|
||||
draw() {
|
||||
this.clearTable()
|
||||
if (state != STATE.PAUSED) {
|
||||
this.pieces.forEach(piece => this.drawPiece(piece))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
class ThemePreview extends MinoesTable {
|
||||
constructor() {
|
||||
super("themePreviewTable")
|
||||
this.piece = new Tetromino(THEME.PIECE_POSITION, "T")
|
||||
this.pieces.forEach(piece => this.drawPiece(piece))
|
||||
}
|
||||
}
|
||||
|
||||
@ -361,6 +348,7 @@ class Stats {
|
||||
this.combo = -1
|
||||
this.lockDelay = DELAY.LOCK
|
||||
this.fallPeriod = DELAY.FALL
|
||||
this.b2bSequence = false
|
||||
}
|
||||
|
||||
get score() {
|
||||
@ -392,7 +380,8 @@ class Stats {
|
||||
lockDown(tSpin, clearedLines) {
|
||||
var patternName = []
|
||||
var patternScore = 0
|
||||
var combo_score = 0
|
||||
var b2bScore = 0
|
||||
var comboScore = 0
|
||||
|
||||
if (tSpin)
|
||||
patternName.push(tSpin)
|
||||
@ -410,18 +399,30 @@ class Stats {
|
||||
this.goalCell.innerText = this.goal
|
||||
patternName = patternName.join("\n")
|
||||
}
|
||||
if (this.combo >= 1)
|
||||
combo_score = (clearedLines == 1 ? 20 : 50) * this.combo * this.level
|
||||
|
||||
if (patternScore || combo_score)
|
||||
this.score += patternScore + combo_score
|
||||
if (this.b2bSequence) {
|
||||
if ((clearedLines == 4) || (tSpin && clearedLines)) {
|
||||
b2bScore = patternScore / 2
|
||||
} else if ((0 < clearedLines) && (clearedLines < 4) && !tSpin) {
|
||||
this.b2bSequence = false
|
||||
}
|
||||
} else if ((clearedLines == 4) || (tSpin && clearedLines)) {
|
||||
this.b2bSequence = true
|
||||
}
|
||||
|
||||
if (this.combo >= 1)
|
||||
comboScore = (clearedLines == 1 ? 20 : 50) * this.combo * this.level
|
||||
|
||||
if (patternScore) {
|
||||
var messages = [patternName, patternScore]
|
||||
if (combo_score)
|
||||
messages.push(`COMBO x${this.combo}`, combo_score)
|
||||
printTempTexts(messages.join("<br/>"))
|
||||
if (b2bScore)
|
||||
messages.push(`BACK TO BACK BONUS`, b2bScore)
|
||||
if (comboScore)
|
||||
messages.push(`COMBO x${this.combo}`, comboScore)
|
||||
printTempTexts(messages.join("<br/>"))
|
||||
}
|
||||
|
||||
this.score += patternScore + comboScore + b2bScore
|
||||
}
|
||||
}
|
||||
|
||||
@ -440,7 +441,6 @@ function newGame(startLevel) {
|
||||
startSection.style.display = "none"
|
||||
gameSection.style.display = "block"
|
||||
settingsSection.style.display = "none"
|
||||
leaderboardLinkSection.style.display = "none"
|
||||
|
||||
state = STATE.PLAYING
|
||||
pressedKeys = new Set()
|
||||
@ -611,8 +611,7 @@ function gameOver() {
|
||||
}
|
||||
request.open('POST', 'publish.php')
|
||||
request.send(fd)
|
||||
}
|
||||
} else {
|
||||
} else
|
||||
alert(info)
|
||||
}
|
||||
}
|
||||
@ -632,7 +631,6 @@ function gameOver() {
|
||||
startSection.style.display = "block"
|
||||
gameSection.style.display = "block"
|
||||
settingsSection.style.display = "none"
|
||||
leaderboardLinkSection.style.display = "block"
|
||||
}
|
||||
|
||||
function autorepeat() {
|
||||
@ -848,29 +846,8 @@ function loadSettings() {
|
||||
autorepeatPeriodRangeLabel.innerText = `Période : ${autorepeatPeriod}ms`
|
||||
|
||||
themeSelect.value=themeName;
|
||||
themePreview.drawPiece(themePreview.piece)
|
||||
|
||||
showGhostCheckbox.checked = showGhost
|
||||
|
||||
/*startSection.style.display = "grid"
|
||||
gameSection.style.display = "grid"
|
||||
settingsSection.style.display = "block"
|
||||
settingsButtonSection.style.display = "flex"
|
||||
|
||||
switch(state) {
|
||||
case STATE.WAITING:
|
||||
document.getElementById("start").style.display = "block"
|
||||
document.getElementById("hideSettingsButton").style.display = "none"
|
||||
break
|
||||
case STATE.GAME_OVER:
|
||||
document.getElementById("start").style.display = "block"
|
||||
document.getElementById("hideSettingsButton").style.display = "flex"
|
||||
break
|
||||
case STATE.PAUSED:
|
||||
document.getElementById("start").style.display = "none"
|
||||
document.getElementById("hideSettingsButton").style.display = "flex"
|
||||
|
||||
}*/
|
||||
}
|
||||
|
||||
function waitKey(button, action) {
|
||||
@ -907,14 +884,13 @@ function themeChanged() {
|
||||
}
|
||||
|
||||
function loadTheme() {
|
||||
theme = document.getElementById("theme")
|
||||
if (theme) document.head.removeChild(theme)
|
||||
var link = document.createElement('link')
|
||||
link.id = "theme";
|
||||
link.rel = 'stylesheet'
|
||||
link.type = 'text/css'
|
||||
link.href = 'themes/' + themeName+ '/style.css'
|
||||
link.media = 'all'
|
||||
if (theme) document.head.removeChild(theme)
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
|
||||
@ -945,7 +921,6 @@ window.onload = function() {
|
||||
stats = new Stats()
|
||||
matrix = new Matrix()
|
||||
nextQueue = new NextQueue()
|
||||
themePreview = new ThemePreview()
|
||||
|
||||
applySettings()
|
||||
loadSettings()
|
||||
128
index.php
128
index.php
@ -15,7 +15,7 @@
|
||||
for ($y = 0; $y < $invisibleRows; $y++) {
|
||||
echo " <tr>";
|
||||
for ($x = 0; $x < $columns; $x++) {
|
||||
echo "<th class=empty-cell></td>";
|
||||
echo "<th></td>";
|
||||
}
|
||||
echo "</tr>\n";
|
||||
}
|
||||
@ -35,44 +35,12 @@
|
||||
<meta charset="utf-8" />
|
||||
<title>Webtris</title>
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<link id="theme" rel="stylesheet" type="text/css" href="themes/default/style.css" />
|
||||
<script type="text/javascript" src="webtris.js"></script>
|
||||
<script type="text/javascript" src="app.js"></script>
|
||||
<link rel="manifest" href="manifest.json">
|
||||
</head>
|
||||
<body>
|
||||
<section id="gameSection" style="display: none">
|
||||
<div>
|
||||
<?php
|
||||
echoTable("holdTable", 6, 0, 6);
|
||||
echoTable("matrixTable", 4, 20, 10);
|
||||
echoTable("nextTable", 24, 0, 6);
|
||||
?>
|
||||
<table id="statsTable">
|
||||
<tr><th class="name" colspan=2>SCORE</th></tr>
|
||||
<tr><td class="value" id="score" colspan=2>0</td></tr>
|
||||
<tr><th class="name" colspan=2>RECORD</th></tr>
|
||||
<tr><td class="value" id="highScore" colspan=2>0</td></tr>
|
||||
<tr><th class="name" colspan=2>TEMPS</th></tr>
|
||||
<tr><td class="value" id="time" colspan=2>00:00</td></tr>
|
||||
<tr><td colspan=2><br/></td class="name"></tr>
|
||||
<tr><th class="name">NIVEAU</th><td class="value" id="level">0</td></tr>
|
||||
<tr><th class="name">OBJECTIF</th><td class="value" id="goal">0</td></tr>
|
||||
<tr><th class="name">LIGNES</th><td class="value" id="clearedLines">0</td></tr>
|
||||
</table>
|
||||
<span id="messageSpan"></span>
|
||||
</div>
|
||||
</section>
|
||||
<section id="startSection">
|
||||
<fieldset>
|
||||
<legend>Nouvelle partie</legend>
|
||||
<div>
|
||||
<div></div>
|
||||
<button id="startButton" type="button" onclick="newGame(Number(startLevelInput.value))" disabled>JOUER</button>
|
||||
<label for="startLevel">Niveau</label>
|
||||
<input type="number" id="startLevelInput" min="1" max="15" step="1">
|
||||
</div>
|
||||
</fieldset>
|
||||
</section>
|
||||
<section id="settingsSection">
|
||||
<h1>WEBTRIS</h1>
|
||||
<fieldset>
|
||||
<legend>Clavier</legend>
|
||||
<div>
|
||||
@ -107,20 +75,98 @@
|
||||
}
|
||||
?>
|
||||
</select>
|
||||
<?php
|
||||
echoTable("themePreviewTable", 2, 0, 3);
|
||||
?>
|
||||
<div>
|
||||
<table id="themePreviewTable" class=minoes-table>
|
||||
<tr>
|
||||
<th class="mino I"></th>
|
||||
<th></th>
|
||||
<th class="mino J"></th>
|
||||
<th class="mino J"></th>
|
||||
<th class="mino J"></th>
|
||||
<th></th>
|
||||
<th class="mino S"></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="mino I"></th>
|
||||
<th class="mino O"></th>
|
||||
<th class="mino O"></th>
|
||||
<th></th>
|
||||
<th class="mino J"></th>
|
||||
<th class="mino Z"></th>
|
||||
<th class="mino S"></th>
|
||||
<th class="mino S"></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="mino I"></th>
|
||||
<th class="mino O"></th>
|
||||
<th class="mino O"></th>
|
||||
<th class="mino L"></th>
|
||||
<th class="mino Z"></th>
|
||||
<th class="mino Z"></th>
|
||||
<th class="mino T"></th>
|
||||
<th class="mino S"></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="mino I"></th>
|
||||
<th class="mino L"></th>
|
||||
<th class="mino L"></th>
|
||||
<th class="mino L"></th>
|
||||
<th class="mino Z"></th>
|
||||
<th class="mino T"></th>
|
||||
<th class="mino T"></th>
|
||||
<th class="mino T"></th>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="showGhostDiv">
|
||||
<input id="showGhostCheckbox" type="checkbox" checked onchange="showGhostChanged()"/>
|
||||
<label for="showGhostCheckbox">Afficher le fantôme</label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</section>
|
||||
<section id="leaderboardLinkSection">
|
||||
<section id="gameSection" style="display: none">
|
||||
<div>
|
||||
<?php
|
||||
echoTable("holdTable", 6, 0, 6);
|
||||
echoTable("matrixTable", 4, 20, 10);
|
||||
echoTable("nextTable", 24, 0, 6);
|
||||
?>
|
||||
<table id="statsTable">
|
||||
<tr><th colspan=2>SCORE</th></tr>
|
||||
<tr><td id="score" colspan=2>0</td></tr>
|
||||
<tr><th colspan=2>RECORD</th></tr>
|
||||
<tr><td id="highScore" colspan=2>0</td></tr>
|
||||
<tr><th colspan=2>TEMPS</th></tr>
|
||||
<tr><td id="time" colspan=2>00:00</td></tr>
|
||||
<tr><td colspan=2><br/></td></tr>
|
||||
<tr><th>NIVEAU</th><td id="level">0</td></tr>
|
||||
<tr><th>OBJECTIF</th><td id="goal">0</td></tr>
|
||||
<tr><th>LIGNES</th><td id="clearedLines">0</td></tr>
|
||||
</table>
|
||||
<span id="messageSpan"></span>
|
||||
</div>
|
||||
</section>
|
||||
<section id="startSection">
|
||||
<fieldset>
|
||||
<legend>Nouvelle partie</legend>
|
||||
<div>
|
||||
<label for="startLevel">Niveau</label>
|
||||
<input type="number" id="startLevelInput" min="1" max="15" step="1" value="1">
|
||||
<div></div>
|
||||
<button id="startButton" type="button" onclick="newGame(Number(startLevelInput.value))" disabled>JOUER</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
</section>
|
||||
<footer id="footer">
|
||||
<div>
|
||||
<a href="leaderboard.php" target="_blank">TABLEAU DE SCORE</a>
|
||||
</div>
|
||||
<div id="credits">
|
||||
Sources d'inspiration des thèmes :
|
||||
<a href="https://github.com/kubowania/Tetris">Ania Kubow</a>
|
||||
<a href="https://manjaro.org/">Manjaro</a>
|
||||
<a href="https://www.tetriseffect.game/">Tetris Effect</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
16
leaderboard.js
Normal file
16
leaderboard.js
Normal file
@ -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()
|
||||
}
|
||||
@ -4,7 +4,7 @@
|
||||
<meta charset="utf-8" />
|
||||
<title>Meilleurs scores - Webtris</title>
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||
<script type="text/javascript" src="leaderboard.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
@ -28,8 +28,8 @@
|
||||
$db = null;
|
||||
?>
|
||||
</table>
|
||||
<div class="flex-container">
|
||||
<footer>
|
||||
<button onclick="window.close()">Fermer</button>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
32
manifest.json
Normal file
32
manifest.json
Normal file
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
BIN
themes/Effect/fonts/ShareTech.woff2
Normal file
BIN
themes/Effect/fonts/ShareTech.woff2
Normal file
Binary file not shown.
BIN
themes/Effect/fonts/ShareTechMono.woff2
Normal file
BIN
themes/Effect/fonts/ShareTechMono.woff2
Normal file
Binary file not shown.
BIN
themes/Effect/images/bg.jpg
Normal file
BIN
themes/Effect/images/bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 368 KiB |
243
themes/Effect/style.css
Normal file
243
themes/Effect/style.css
Normal file
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user