format
This commit is contained in:
parent
5697684ac0
commit
1d9e1d3442
@ -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;
|
||||
}
|
||||
@ -5,6 +5,7 @@
|
||||
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;
|
||||
@ -14,10 +15,9 @@
|
||||
}
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: white;
|
||||
font-family: 'Share Tech';
|
||||
font-size: 1.05em;
|
||||
}
|
||||
|
||||
body {
|
||||
@ -31,60 +31,71 @@ h1 {
|
||||
text-shadow: 3px 2px rgb(153, 145, 175);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
canvas {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
|
||||
button {
|
||||
color: black;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.flex-columns {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.flex-space {
|
||||
flex-grow: 2;
|
||||
#actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-gap: 20px;
|
||||
margin: 40px auto;
|
||||
width: 700px;
|
||||
justify-items: left;
|
||||
}
|
||||
|
||||
.flex-rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 5% 2%;
|
||||
height: 400px;
|
||||
width: 150px;
|
||||
#play {
|
||||
color: lightcyan;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
text-shadow: 2px 1px rgb(153, 145, 175);
|
||||
font-size: 1.5em;
|
||||
margin 40px;
|
||||
}
|
||||
|
||||
#grid {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 3fr 10fr 6fr;
|
||||
grid-gap: 20px;
|
||||
margin: auto;
|
||||
width: 550px;
|
||||
}
|
||||
|
||||
#hold {
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 1;
|
||||
width: 120px;
|
||||
justify-content: right;
|
||||
}
|
||||
|
||||
#stats {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 10% 0;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
#stats-names {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
font-family: 'Share Tech';
|
||||
text-align: left;
|
||||
align-self: top;
|
||||
}
|
||||
|
||||
#stats-values {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
text-align: right;
|
||||
font-family: 'Share Tech Mono';
|
||||
min-width: 90px;
|
||||
align-self: top;
|
||||
}
|
||||
|
||||
#matrix {
|
||||
margin: 5% 2%;
|
||||
grid-column: 3;
|
||||
grid-row: 1 / 3;
|
||||
border: 0.5px solid grey;
|
||||
}
|
||||
|
||||
#next {
|
||||
width: 120px;
|
||||
margin: 5% 2%;
|
||||
grid-column: 4;
|
||||
grid-row: 1 / 3;
|
||||
}
|
||||
26
index.php
26
index.php
@ -3,34 +3,32 @@
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<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>
|
||||
</head>
|
||||
<body>
|
||||
<h1>WEBTRIS</h1>
|
||||
<div id="actions">
|
||||
<?php
|
||||
$actionLabel = array(
|
||||
"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)
|
||||
{
|
||||
function addButton($action, $label) {
|
||||
echo " <div>$label</div>\n";
|
||||
echo " <button type='button' onclick='changeKey(this, \"$action\")'>\n";
|
||||
echo " <script>getKey(\"$action\")</script>\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 id="play">
|
||||
<a href="webtris.html"><b>JOUER</b></a>
|
||||
<a href="webtris.html">JOUER</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
52
webtris.html
52
webtris.html
@ -3,44 +3,34 @@
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<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]-->
|
||||
<script type="text/javascript" src="js/webtris.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>WEBTRIS</h1>
|
||||
<div class="flex-columns">
|
||||
<div class="flex-rows">
|
||||
<canvas id="hold" width="120" height="120"></canvas>
|
||||
<div class="flex-columns">
|
||||
<div class="flex-space"></div>
|
||||
</div>
|
||||
<div id="stats">
|
||||
<div id="stats-names">
|
||||
SCORE<br/>
|
||||
RECORD<br/>
|
||||
TEMPS<br/>
|
||||
<br />
|
||||
NIVEAU<br/>
|
||||
OBJECTIF<br/>
|
||||
LIGNES
|
||||
</div>
|
||||
<div id="stats-values">
|
||||
0<br/>
|
||||
0<br/>
|
||||
00:00<br/>
|
||||
<br/>
|
||||
0<br/>
|
||||
0<br/>
|
||||
0
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="grid">
|
||||
<canvas id="hold" width="120" height="120"></canvas>
|
||||
<div id="stats-names">
|
||||
SCORE<br/>
|
||||
RECORD<br/>
|
||||
TEMPS<br/>
|
||||
<br />
|
||||
NIVEAU<br/>
|
||||
OBJECTIF<br/>
|
||||
LIGNES
|
||||
</div>
|
||||
<div id="stats-values">
|
||||
0<br/>
|
||||
0<br/>
|
||||
00:00<br/>
|
||||
<br/>
|
||||
0<br/>
|
||||
0<br/>
|
||||
0
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<canvas id="next"width="120" height="400"></canvas>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user