adrien/Webtris
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

style

Browse Source
This commit is contained in:
Adrien MALINGREY 2020-10-12 21:22:14 +02:00
parent 5ef94fcf73
commit 198ac07b84
3 changed files with 133 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
index.php
View File

@ -11,7 +11,7 @@
<header> <header>
<h1>WEBTRIS</h1> <h1>WEBTRIS</h1>
</header> </header>
<div id="game"> <section id="game">
<?php <?php
function echoTable($id, $invisibleRows, $visibleRows, $columns) { function echoTable($id, $invisibleRows, $visibleRows, $columns) {
echo " <table id='$id' class=minoes-table>\n"; echo " <table id='$id' class=minoes-table>\n";
@ -48,14 +48,15 @@
<tr><th class="name">LIGNES</th><td class="value" id="clearedLines">0</td></tr> <tr><th class="name">LIGNES</th><td class="value" id="clearedLines">0</td></tr>
</table> </table>
<div id="message"></div> <div id="message"></div>
</div> </section>
<div id="settings"> <section id="settings">
<fieldset id="keyboard"> <fieldset id="keyboard">
<legend>Clavier</legend> <legend>Clavier</legend>
<div class="settings">
<?php <?php
function addButton($action, $label) { function addButton($action, $label) {
echo " <label for='set-$action-key'>$label</label>\n"; echo " <label for='set-$action-key'>$label</label>\n";
echo " <button id='set-$action-key' type='button' onclick=\"waitKey(this, '$action')\">...</button>"; echo " <button id='set-$action-key' type='button' onclick=\"waitKey(this, '$action')\">...</button>";
} }
addButton("moveLeft", "Gauche"); addButton("moveLeft", "Gauche");
addButton("moveRight", "Droite"); addButton("moveRight", "Droite");
@ -66,49 +67,56 @@
addButton("hold", "Garde"); addButton("hold", "Garde");
addButton("pause", "Pause/Reprise"); addButton("pause", "Pause/Reprise");
?> ?>
</div>
</fieldset> </fieldset>
<fieldset> <fieldset>
<legend>Répétition automatique</legend> <legend>Répétition automatique</legend>
<label id="autorepeatDelayRangeLabel" for="autorepeatDelayRange">Délai initial</label> <div>
<input id="autorepeatDelayRange" type="range" oninput="autorepeatDelayChanged()" min="100" max="1000" step="10" /> <label id="autorepeatDelayRangeLabel" for="autorepeatDelayRange">Délai initial</label>
<label id="autorepeatPeriodRangeLabel" for="autorepeatPeriodRange">Période</label> <input id="autorepeatDelayRange" type="range" oninput="autorepeatDelayChanged()" min="100" max="1000" step="10" />
<input id="autorepeatPeriodRange" type="range" id="autorepeatPeriodRange" oninput="autorepeatPeriodChanged()" min="2" max="50" step="2" /> <label id="autorepeatPeriodRangeLabel" for="autorepeatPeriodRange">Période</label>
<input id="autorepeatPeriodRange" type="range" id="autorepeatPeriodRange" oninput="autorepeatPeriodChanged()" min="2" max="50" step="2" />
</div>
</fieldset> </fieldset>
<fieldset> <fieldset>
<legend>Thème</legend> <legend>Thème</legend>
<div></div> <div>
<select id="themeSelect" onchange="themeChanged()"> <div></div>
<select id="themeSelect" onchange="themeChanged()">
<?php <?php
foreach(scandir("themes") as $theme) { foreach(scandir("themes") as $theme) {
if (pathinfo ($theme, PATHINFO_EXTENSION) == "css") if (pathinfo ($theme, PATHINFO_EXTENSION) == "css")
echo " <option>" . pathinfo($theme, PATHINFO_FILENAME) . "</option>\n"; echo " <option>" . pathinfo($theme, PATHINFO_FILENAME) . "</option>\n";
} }
?> ?>
</select> </select>
<?php <?php
echoTable("themePreview", 2, 0, 3); echoTable("themePreview", 2, 0, 3);
?> ?>
<div id="showGhostDiv"> <div id="showGhostDiv">
<input id="showGhostCheckbox" type="checkbox" checked onchange="showGhostChanged()"/> <input id="showGhostCheckbox" type="checkbox" checked onchange="showGhostChanged()"/>
<label for="showGhostCheckbox">Afficher le fantôme</label> <label for="showGhostCheckbox">Afficher le fantôme</label>
</div> </div>
</div>
</fieldset> </fieldset>
<button id="hideSettingsButton" type="button" onclick="hideSettings()">RETOUR</button> <button id="hideSettingsButton" type="button" onclick="hideSettings()">RETOUR</button>
</div> </section>
<div id="start"> <section id="start">
<fieldset> <fieldset>
<legend>Nouvelle partie</legend> <legend>Nouvelle partie</legend>
<label for="startLevel">Niveau</label> <div>
<input type="number" id="startLevel" min="1" max="15" step="1"> <label for="startLevel">Niveau</label>
<div></div> <input type="number" id="startLevel" min="1" max="15" step="1">
<button id="startButton" type="button" onclick="newGame()" disabled>JOUER</button> <div></div>
<button id="startButton" type="button" onclick="newGame()" disabled>JOUER</button>
</div>
</fieldset> </fieldset>
</div> </section>
<div> <section>
<button id="settingsButton" type="button" onclick="showSettings()" disabled>OPTIONS</button> <button id="settingsButton" type="button" onclick="showSettings()" disabled>OPTIONS</button>
</div> </section>
<div id="leaderboardLink"> <footer id="leaderboardLink">
<a href="leaderboard.php" target="_blank">TABLEAU DE SCORE</a> <a href="leaderboard.php" target="_blank">TABLEAU DE SCORE</a>
</div> </footer>
</body> </body>
</html> </html>

33
style.css
View File

@ -37,30 +37,38 @@ h1 {
color: white; color: white;
} }
div { section, footer, div {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
fieldset { fieldset {
display: grid;
grid-template-columns: 3fr 2fr 3fr 2fr;
grid-gap: 1vmin;
margin: 1vmin;
border: 1px white solid; border: 1px white solid;
border-radius: 4px; border-radius: 4px;
align-items: center; align-items: center;
margin: 1vmin auto;
width: 60%;
} }
fieldset > legend, label { fieldset > div {
display: grid;
grid-template-columns: 3fr 2fr 3fr 2fr;
grid-gap: 1vmin;
}
fieldset legend, label {
color: white; color: white;
} }
fieldset > input, select, button { fieldset input, select, button {
width: 100%; width: 100%;
} }
input[type="checkbox"] {
width: auto;
}
button { button {
width: auto; width: auto;
} }
@ -99,16 +107,16 @@ th, td {
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
border-color: transparent; border-color: transparent;
height: 3vmin;
width: 3vmin; width: 3vmin;
} }
#game { #game {
position: relative;
display: none; display: none;
width: 72vmin; width: 72vmin;
grid-template-columns: 18vmin 30vmin 18vmin; grid-template-columns: 18vmin 30vmin 18vmin;
grid-gap: 3vmin; grid-gap: 3vmin;
margin: auto; margin: -8vmin auto 0 auto;
} }
#hold { #hold {
@ -119,7 +127,7 @@ th, td {
#stats { #stats {
grid-column: 1; grid-column: 1;
grid-row: 2; grid-row: 3;
height: 0; height: 0;
justify-self: end; justify-self: end;
margin: 0 auto; margin: 0 auto;
@ -131,7 +139,7 @@ th, td {
#matrix { #matrix {
grid-column: 2; grid-column: 2;
grid-row: 1 / 3; grid-row: 1 / 4;
} }
#message { #message {
@ -148,7 +156,7 @@ th, td {
#next { #next {
grid-column: 3; grid-column: 3;
grid-row: 1 / 3; grid-row: 1 / 4;
} }
a { a {
@ -198,3 +206,4 @@ caption {
font-size: 2.5vmin; font-size: 2.5vmin;
color: white; color: white;
} }

76
themes/arcade.css Normal file
View File

@ -0,0 +1,76 @@
.empty-cell {
background: transparent;
}
.invisible-grid > .empty-cell {
border: 1px solid transparent;
}
.visible-grid > .empty-cell {
border: 1px solid rgba(255, 255, 255, .4);
}
.mino {
border: 1px solid;
border-radius: 1px;
}
.I-mino {
/* cyan */
background: #99d9ea;
border-color: #d1edf5;
}
.J-mino {
/* blue */
background: #7f92ff;
border-color: #c2cbff;
}
.L-mino {
/* orange */
background: #ffb27f;
border-color: #ffe1cd;
}
.O-mino {
/* yellow */
background: #ffe97f;
border-color: #fff5ca;
}
.S-mino {
/* green */
background: #7fff8e;
border-color: #ccffd2;
}
.T-mino {
/* magenta */
background: #d67fff;
border-color: #edc9ff;
}
.Z-mino {
/* red */
background: #ff7f7f;
border-color: #ffdada;
}
.locked-mino, .cleared-line {
background: white;
border: 1px solid white;
border-radius: 1px;
}
.trail {
background: rgba(255, 255, 255, 0.2);
border: 1px solid white;
border-radius: 1px;
}
.ghost {
background: rgba(255, 255, 255, 0.4);
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 1px;
}