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

format

Browse Source
This commit is contained in:
Adrien MALINGREY 2019-10-28 17:17:37 +01:00
parent 5697684ac0
commit 1d9e1d3442
4 changed files with 75 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
css/index.css
View File

@ -1,51 +0,0 @@
@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;
}
* {
color: white;
font-family: 'Share Tech';
font-size: 1.05em;
}
body {
background-image: url("../images/bg.jpg");
background-size: cover;
}
h1 {
font-size: 50px;
margin: 40px;
text-shadow: 3px 2px rgb(153, 145, 175);
text-align: center;
}
button {
color: black;
width: 100%;
}
a {
color: lightcyan;
text-decoration: none;
}
#actions {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
margin: 40px auto;
width: 700px;
justify-items: left;
}
#play {
text-align: center;
text-shadow: 2px 1px rgb(153, 145, 175);
font-size: 1.5em;
margin 40px;
}

73
css/webtris.css → css/style.css
View File

@ -5,6 +5,7 @@
src: local('Share Tech Regular'), local('ShareTech-Regular'), url(../fonts/ShareTech.woff2) format('woff2'); 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; 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-face {
font-family: 'Share Tech Mono'; font-family: 'Share Tech Mono';
font-style: normal; font-style: normal;
@ -14,10 +15,9 @@
} }
* { * {
padding: 0;
margin: 0;
color: white; color: white;
font-family: 'Share Tech'; font-family: 'Share Tech';
font-size: 1.05em;
} }
body { body {
@ -31,60 +31,71 @@ h1 {
text-shadow: 3px 2px rgb(153, 145, 175); text-shadow: 3px 2px rgb(153, 145, 175);
text-align: center; text-align: center;
} }
canvas { button {
display: block; color: black;
flex-shrink: 0; width: 100%;
} }
.flex-columns { a {
display: flex; text-decoration: none;
flex-direction: row;
justify-content: center;
margin: 0 auto;
} }
.flex-space { #actions {
flex-grow: 2; display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
margin: 40px auto;
width: 700px;
justify-items: left;
} }
.flex-rows { #play {
display: flex; color: lightcyan;
flex-direction: column; text-align: center;
margin: 5% 2%; font-weight: bold;
height: 400px; text-shadow: 2px 1px rgb(153, 145, 175);
width: 150px; font-size: 1.5em;
margin 40px;
}
#grid {
display: grid;
grid-template-columns: 2fr 3fr 10fr 6fr;
grid-gap: 20px;
margin: auto;
width: 550px;
} }
#hold { #hold {
grid-column: 1 / 3;
grid-row: 1;
width: 120px; width: 120px;
justify-content: right;
}
#stats {
display: flex;
flex-direction: row;
margin: 10% 0;
font-size: 1.2em;
} }
#stats-names { #stats-names {
grid-column: 1;
grid-row: 2;
font-family: 'Share Tech'; font-family: 'Share Tech';
text-align: left; text-align: left;
align-self: top;
} }
#stats-values { #stats-values {
grid-column: 2;
grid-row: 2;
text-align: right; text-align: right;
font-family: 'Share Tech Mono'; font-family: 'Share Tech Mono';
min-width: 90px; align-self: top;
} }
#matrix { #matrix {
margin: 5% 2%; grid-column: 3;
grid-row: 1 / 3;
border: 0.5px solid grey; border: 0.5px solid grey;
} }
#next { #next {
width: 120px; grid-column: 4;
margin: 5% 2%; grid-row: 1 / 3;
} }

26
index.php
View File

@ -3,34 +3,32 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Webtris</title> <title>Webtris</title>
<link rel="stylesheet" type="text/css" href="css/index.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/index.js"></script> <script type="text/javascript" src="js/index.js"></script>
</head> </head>
<body> <body>
<h1>WEBTRIS</h1> <h1>WEBTRIS</h1>
<div id="actions"> <div id="actions">
<?php <?php
$actionLabel = array( function addButton($action, $label) {
"moveLeft" => "GAUCHE",
"moveRight" => "DROITE",
"softDrop" => "CHUTE LENTE",
"hardDrop" => "CHUTE RAPIDE",
"rotateCW" => "ROTATION HORAIRE",
"rotateCCW" => "ROTATE INVERSE",
"hold" => "GARDE",
"pause" => "PAUSE",
);
foreach($actionLabel as $action => $label)
{
echo " <div>$label</div>\n"; echo " <div>$label</div>\n";
echo " <button type='button' onclick='changeKey(this, \"$action\")'>\n"; echo " <button type='button' onclick='changeKey(this, \"$action\")'>\n";
echo " <script>getKey(\"$action\")</script>\n"; echo " <script>getKey(\"$action\")</script>\n";
echo " </button>\n"; echo " </button>\n";
} }
addButton("moveLeft", "GAUCHE");
addButton("moveRight", "DROITE");
addButton("softDrop", "CHUTE LENTE");
addButton("hardDrop", "CHUTE RAPIDE");
addButton("rotateCW", "ROTATION HORAIRE");
addButton("rotateCCW", "ROTATE INVERSE");
addButton("hold", "GARDE");
addButton("pause", "PAUSE");
?> ?>
</div> </div>
<div id="play"> <div id="play">
<a href="webtris.html"><b>JOUER</b></a> <a href="webtris.html">JOUER</a>
</div> </div>
</body> </body>
</html> </html>

52
webtris.html
View File

@ -3,44 +3,34 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Webtris</title> <title>Webtris</title>
<link rel="stylesheet" type="text/css" href="css/webtris.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" />
<!--[if lt IE 9]><script type="text/javascript" src="js/excanvas.js"></script><![endif]--> <!--[if lt IE 9]><script type="text/javascript" src="js/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="js/webtris.js"></script> <script type="text/javascript" src="js/webtris.js"></script>
</head> </head>
<body> <body>
<h1>WEBTRIS</h1> <h1>WEBTRIS</h1>
<div class="flex-columns"> <div id="grid">
<div class="flex-rows"> <canvas id="hold" width="120" height="120"></canvas>
<canvas id="hold" width="120" height="120"></canvas> <div id="stats-names">
<div class="flex-columns"> SCORE<br/>
<div class="flex-space"></div> RECORD<br/>
</div> TEMPS<br/>
<div id="stats"> <br />
<div id="stats-names"> NIVEAU<br/>
SCORE<br/> OBJECTIF<br/>
RECORD<br/> LIGNES
TEMPS<br/> </div>
<br /> <div id="stats-values">
NIVEAU<br/> 0<br/>
OBJECTIF<br/> 0<br/>
LIGNES 00:00<br/>
</div> <br/>
<div id="stats-values"> 0<br/>
0<br/> 0<br/>
0<br/> 0
00:00<br/>
<br/>
0<br/>
0<br/>
0
</div>
</div>
</div> </div>
<canvas id="matrix" width="200" height="400">Votre navigateur ne supporte pas HTML5, veuillez le mettre à jour pour jouer.</canvas> <canvas id="matrix" width="200" height="400">Votre navigateur ne supporte pas HTML5, veuillez le mettre à jour pour jouer.</canvas>
<div class="flex-rows"> <canvas id="next"width="120" height="400"></canvas>
<canvas id="next"width="120" height="400"></canvas>
</div>
</div> </div>
</body> </body>
</html> </html>