From 1d9e1d3442e4361047c8a2350758337874b8bf8b Mon Sep 17 00:00:00 2001
From: Adrien MALINGREY <adrien@malingrey.fr>
Date: Mon, 28 Oct 2019 17:17:37 +0100
Subject: [PATCH] format
---
css/index.css | 51 ------------------------
css/{webtris.css => style.css} | 73 +++++++++++++++++++---------------
index.php | 26 ++++++------
webtris.html | 52 ++++++++++--------------
4 files changed, 75 insertions(+), 127 deletions(-)
delete mode 100644 css/index.css
rename css/{webtris.css => style.css} (62%)
diff --git a/css/index.css b/css/index.css
deleted file mode 100644
index e4eb47f..0000000
--- a/css/index.css
+++ /dev/null
@@ -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;
-}
diff --git a/css/webtris.css b/css/style.css
similarity index 62%
rename from css/webtris.css
rename to css/style.css
index c5b3d98..c02d224 100644
--- a/css/webtris.css
+++ b/css/style.css
@@ -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;
}
\ No newline at end of file
diff --git a/index.php b/index.php
index 24f40b8..6880333 100644
--- a/index.php
+++ b/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>
\ No newline at end of file
diff --git a/webtris.html b/webtris.html
index 35a741e..0c82115 100644
--- a/webtris.html
+++ b/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>
\ No newline at end of file