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

Compare commits

base: adrien:0f1093541e83f1018cf00942dce2ffeb12482a91
Branches Tags
adrien:master
..
compare: adrien:master
Branches Tags
adrien:master

5 Commits
0f1093541e ... master

Author SHA1 Message Date
adrien
c3a3e45c18 css animation 2020-11-18 02:58:29 +01:00
adrien
958ba01f6b display credits on game over 2020-11-09 12:29:43 +01:00
adrien
ccd85b6bd8 back to back bonus 2020-11-09 02:44:58 +01:00
adrien
a161826a37 v2 2020-11-09 02:20:43 +01:00
adrien
5d7795b3da v2 2020-11-09 02:20:26 +01:00
13 changed files with 844 additions and 747 deletions
Expand all files Collapse all files

787
webtris.js → app.js
View File

File diff suppressed because it is too large Load Diff

167
index.php
View File

@ -1,13 +1,13 @@
<?php
$actions = [
"moveLeft" => ["label"=>"Gauche", "defaultKey"=>"ArrowLeft"],
"moveRight" => ["label"=>"Droite", "defaultKey"=>"ArrowRight"],
"softDrop" => ["label"=>"Chute lente", "defaultKey"=>"ArrowDown"],
"hardDrop" => ["label"=>"Chute rapide", "defaultKey"=>"Space"],
"rotateCW" => ["label"=>"Rotation horaire", "defaultKey"=>"ArrowUp"],
"rotateCCW" => ["label"=>"Rotation anti-horaire", "defaultKey"=>"z"],
"hold" => ["label"=>"Garde", "defaultKey"=>"c"],
"pause" => ["label"=>"Pause/Reprise", "defaultKey"=>"Escape"]
"moveLeft" => ["label"=>"Gauche", "defaultKey"=>"ArrowLeft"],
"moveRight" => ["label"=>"Droite", "defaultKey"=>"ArrowRight"],
"softDrop" => ["label"=>"Chute lente", "defaultKey"=>"ArrowDown"],
"hardDrop" => ["label"=>"Chute rapide", "defaultKey"=>"Space"],
"rotateCW" => ["label"=>"Rotation horaire", "defaultKey"=>"ArrowUp"],
"rotateCCW" => ["label"=>"Rotation anti-horaire", "defaultKey"=>"z"],
"hold" => ["label"=>"Garde", "defaultKey"=>"c"],
"pauseResume" => ["label"=>"Pause/Reprise", "defaultKey"=>"Escape"]
];
function echoTable($id, $invisibleRows, $visibleRows, $columns) {
@ -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,43 +35,13 @@
<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>
<body id="body" style="display:none">
<header id="header">
<h1>WEBTRIS</h1>
</header>
<section id="settingsSection">
<fieldset>
<legend>Clavier</legend>
@ -79,8 +49,8 @@
<?php
foreach($actions as $action=>$parameters) {
?>
<label for='<?=$action?>SetKeyButton'><?=$parameters["label"]?></label>
<button id='<?=$action?>SetKeyButton' type='button' onclick="waitKey(this, '<?=$action?>')"><?=$parameters["defaultKey"]?></button>
<label for='<?=$action?>'><?=$parameters["label"]?></label>
<button id='<?=$action?>' type='button' onclick="settings.waitKey(this)"><?=$parameters["defaultKey"]?></button>
<?php
}
?>
@ -90,16 +60,16 @@
<legend>Répétition automatique</legend>
<div>
<label id="autorepeatDelayRangeLabel" for="autorepeatDelayRange">Délai initial : 300ms</label>
<input id="autorepeatDelayRange" type="range" oninput="autorepeatDelayChanged()" min="100" max="500" step="10" />
<input id="autorepeatDelayRange" type="range" oninput="this.previousElementSibling.innerText = `Délai initial : ${this.value}ms`" value="300" min="100" max="500" step="10"/>
<label id="autorepeatPeriodRangeLabel" for="autorepeatPeriodRange">Période : 10ms</label>
<input id="autorepeatPeriodRange" type="range" id="autorepeatPeriodRange" oninput="autorepeatPeriodChanged()" min="2" max="50" step="2" />
<input id="autorepeatPeriodRange" type="range" id="autorepeatPeriodRange" oninput="this.previousElementSibling.innerText = `Période : ${autorepeatPeriodRange.value}ms`" value="10" min="2" max="50" step="2"/>
</div>
</fieldset>
<fieldset>
<legend>Thème</legend>
<legend>Style</legend>
<div>
<div></div>
<select id="themeSelect" onchange="themeChanged()">
<label for="themeSelect">Thème</label>
<select id="themeSelect" oninput="settings.applyTheme()" value="default">
<?php
foreach(array_slice(scandir("themes"), 2) as $theme) {
if (is_dir(pathinfo($theme)['dirname']))
@ -107,20 +77,97 @@
}
?>
</select>
<?php
echoTable("themePreviewTable", 2, 0, 3);
?>
<div>
<input id="showGhostCheckbox" type="checkbox" checked onchange="showGhostChanged()"/>
<label for="showGhostCheckbox">Afficher le fantôme</label>
</div>
<label for="showGhostCheckbox">Afficher le fantôme</label>
<input id="showGhostCheckbox" type="checkbox" checked/>
<table id="themePreviewTable" class="minoes-table">
<tbody>
<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>
</tbody>
</table>
</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))">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://www.tetriseffect.game/">Tetris Effect</a>
</div>
</footer>
</body>
</html>

16
leaderboard.js Normal file
View File

@ -0,0 +1,16 @@
const DEFAULT_THEME = "default"
function applyTheme() {
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()
}

6
leaderboard.php
View File

@ -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
View 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
View File

Binary file not shown.

BIN
themes/Effect/fonts/ShareTechMono.woff2 Normal file
View File

Binary file not shown.

BIN
themes/Effect/images/bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 368 KiB

231
themes/Effect/style.css Normal file
View File

@ -0,0 +1,231 @@
@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: repeat(4, 1fr);
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: 1 / 5;
width: auto;
margin: auto;
}
#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: -6vmin 0 auto 0;
}
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 > * {
margin: 1em auto;
width: 100%;
}
a {
text-decoration: none;
font-size: 1em;
color: white;
}
a:hover {
color: lightcyan;
}
#credits {
width: 100%;
font-size: 0.8em;
gap: 0.8em;
}
#leaderboard {
min-width: 25%;
margin: auto;
text-align: center;
border-top: 1px solid white;
caption-side: top;
border-spacing: 1em 0.2em;
}
#leaderboard caption {
color: white;
}
#leaderboard tr,
#leaderboard td {
border: 0 !important;
margin: auto 10em;
}
#leaderboard td:first-child {
text-align: left;
}
#leaderboard td:last-child {
text-align: right;
}

39
themes/Kubow/style.css
View File

@ -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);
@ -64,7 +64,7 @@ legend {
fieldset > div {
display: grid;
grid-template-columns: 3fr 2fr 3fr 2fr;
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 1em;
grid-row-gap: 1em;
justify-items: right;
@ -143,20 +143,10 @@ select:hover {
}
#themePreviewTable {
grid-column: 3 / 5;
grid-column: 1 / 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;
@ -276,6 +266,7 @@ footer {
left: 50%;
bottom: 1em;
transform: translateX(-50%);
display: none;
}
a {
@ -287,3 +278,23 @@ 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;
}

216
themes/Manjaro/style.css
View File

@ -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;
}

97
themes/default/style.css
View File

@ -1,18 +1,17 @@
body {
margin: 0;
margin: auto;
font-family: sans-serif;
color: white;
background: #222;
width: 100%;
height: 100%;
width: max-content;
}
h1 {
text-align: center;
text-align: center;
}
section {
margin: 1em;
margin: 1em auto;
}
div {
@ -21,12 +20,9 @@ div {
align-items: center;
}
#settingsSection {
width: auto;
}
fieldset {
border: 1px solid #444;
margin: 0.5em;
}
legend {
@ -36,7 +32,7 @@ legend {
fieldset > div {
display: grid;
grid-template-columns: 3fr 2fr 3fr 2fr;
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 2em;
grid-row-gap: 1em;
justify-items: right;
@ -52,18 +48,9 @@ label {
}
#themePreviewTable {
grid-column: 3 / 5;
grid-column: 1 / 5;
width: auto;
}
fieldset input[type="checkbox"] {
width: auto;
}
#showGhostDiv {
grid-row: 2;
grid-column: 1/5;
width: 100%;
margin: auto;
}
#gameSection div {
@ -94,6 +81,13 @@ fieldset input[type="checkbox"] {
text-align: center;
font-weight: bold;
}
@keyframes message-fade-out {
from {opacity: 1;}
to {opacity: 0;}
}
.messageSpan-fade-out {
animation: message-fade-out 500ms 500ms;
}
#nextTable {
grid-column: 3;
@ -104,7 +98,7 @@ fieldset input[type="checkbox"] {
.minoes-table {
table-layout: fixed;
border-spacing: 0;
margin: auto;
margin: -6vmin 0 auto 0;
}
th, td {
@ -162,16 +156,27 @@ td {
border-color: #ffdada;
}
.locked-mino, .cleared-line {
.locked-mino {
background: #AAA;
border: 1px solid #CCC;
border-radius: 1px;
}
@keyframes mino-fade-out {
from {
background: rgba(170, 170, 170, 1);
border: 1px solid #CCC;
}
to {
background: rgba(170, 170, 170, 0);
border: 1px solid #444;
}
}
.cleared-line,
.trail {
background: #333;
animation: mino-fade-out 200ms;
background: transparent;
border: 1px solid #444;
border-radius: 1px;
}
.ghost {
@ -195,19 +200,47 @@ td {
border: 0;
}
footer {
position: absolute;
left: 50%;
bottom: 1em;
transform: translateX(-50%);
}
a {
text-decoration: none;
color: lightblue;
}
footer > * {
margin: 1em auto;
width: 100%;
}
#credits {
width: 100%;
font-size: 0.8em;
gap: 0.8em;
}
#leaderboard {
min-width: 25%;
margin: auto;
text-align: center;
border-top: 1px solid white;
caption-side: top;
border-spacing: 1em 0.2em;
}
#leaderboard caption {
color: white;
}
#leaderboard tr,
#leaderboard td {
border: 0 !important;
margin: auto 10em;
}
#leaderboard td:first-child {
text-align: left;
}
#leaderboard td:last-child {
text-align: right;
}

BIN
thumbnail.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB