php
This commit is contained in:
Adrien MALINGREY
parent
350186ab06
commit
88837d8992
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
db_info.txt
|
||||||
100
css/index.css
100
css/index.css
@ -1,50 +1,50 @@
|
|||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Share Tech';
|
font-family: 'Share Tech';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
color: white;
|
color: white;
|
||||||
font-family: 'Share Tech';
|
font-family: 'Share Tech';
|
||||||
font-size: 1.05em;
|
font-size: 1.05em;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-image: url("../images/bg.jpg");
|
background-image: url("../images/bg.jpg");
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 3em;
|
font-size: 3em;
|
||||||
margin: 20px;
|
margin: 20px;
|
||||||
text-shadow: 3px 2px rgb(153, 145, 175);
|
text-shadow: 3px 2px rgb(153, 145, 175);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
color: black;
|
color: black;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: lightcyan;
|
color: lightcyan;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#actions {
|
#actions {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(4, 1fr);
|
grid-template-columns: repeat(4, 1fr);
|
||||||
grid-gap: 20px;
|
grid-gap: 20px;
|
||||||
margin: 80px auto;
|
margin: 80px auto;
|
||||||
width: 700px;
|
width: 700px;
|
||||||
justify-items: left;
|
justify-items: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.play {
|
.play {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-shadow: 2px 1px rgb(153, 145, 175);
|
text-shadow: 2px 1px rgb(153, 145, 175);
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
}
|
}
|
||||||
|
|||||||
176
css/webtris.css
176
css/webtris.css
@ -1,89 +1,89 @@
|
|||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Share Tech';
|
font-family: 'Share Tech';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
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;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
src: local('Share Tech Mono Regular'), local('ShareTechMono-Regular'), url(../fonts/ShareTechMono.woff2) format('woff2');
|
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;
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: white;
|
color: white;
|
||||||
font-family: 'Share Tech';
|
font-family: 'Share Tech';
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-image: url("../images/bg.jpg");
|
background-image: url("../images/bg.jpg");
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 3em;
|
font-size: 3em;
|
||||||
margin: 40px 20px 20px 20px;
|
margin: 40px 20px 20px 20px;
|
||||||
text-shadow: 3px 2px rgb(153, 145, 175);
|
text-shadow: 3px 2px rgb(153, 145, 175);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
canvas {
|
canvas {
|
||||||
display: block;
|
display: block;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-columns {
|
.flex-columns {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-space {
|
.flex-space {
|
||||||
flex-grow: 2;
|
flex-grow: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-rows {
|
.flex-rows {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin: 5% 2%;
|
margin: 5% 2%;
|
||||||
height: 400px;
|
height: 400px;
|
||||||
width: 150px;
|
width: 150px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#hold {
|
#hold {
|
||||||
width: 120px;
|
width: 120px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#stats {
|
#stats {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
margin: 10% 0;
|
margin: 10% 0;
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#stats-names {
|
#stats-names {
|
||||||
font-family: 'Share Tech';
|
font-family: 'Share Tech';
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
#stats-values {
|
#stats-values {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
font-family: 'Share Tech Mono';
|
font-family: 'Share Tech Mono';
|
||||||
min-width: 90px;
|
min-width: 90px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#matrix {
|
#matrix {
|
||||||
margin: 5% 2%;
|
margin: 5% 2%;
|
||||||
border: 0.5px solid grey;
|
border: 0.5px solid grey;
|
||||||
}
|
}
|
||||||
|
|
||||||
#next {
|
#next {
|
||||||
width: 120px;
|
width: 120px;
|
||||||
margin: 5% 2%;
|
margin: 5% 2%;
|
||||||
}
|
}
|
||||||
17
index.html
17
index.html
@ -1,17 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<title>Webtris</title>
|
|
||||||
<link rel="stylesheet" type="text/css" href="css/index.css" />
|
|
||||||
<script type="text/javascript" src="js/index.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<h1>WEBTRIS</h1>
|
|
||||||
<div id="actions">
|
|
||||||
</div>
|
|
||||||
<div class="play">
|
|
||||||
<a href="webtris.html"><b>JOUER</b></a>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
36
index.php
Normal file
36
index.php
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>Webtris</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/index.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)
|
||||||
|
{
|
||||||
|
echo " <div>$label</div>\n";
|
||||||
|
echo " <button type='button' onclick='changeKey(this, \"$action\")'>\n";
|
||||||
|
echo " <script>getKey(\"$action\")</script>\n";
|
||||||
|
echo " </button>\n";
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
<div class="play">
|
||||||
|
<a href="webtris.html"><b>JOUER</b></a>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
2828
js/excanvas.js
2828
js/excanvas.js
File diff suppressed because it is too large
Load Diff
90
js/index.js
90
js/index.js
@ -1,53 +1,39 @@
|
|||||||
const actionLabel = [
|
const actionsDefaultKeys = {
|
||||||
{name: "moveLeft", label: "GAUCHE"},
|
moveLeft: "ArrowLeft",
|
||||||
{name: "moveRight", label: "DROITE"},
|
moveRight: "ArrowRight",
|
||||||
{name: "softDrop", label: "CHUTE LENTE"},
|
softDrop: "ArrowDown",
|
||||||
{name: "hardDrop", label: "CHUTE RAPIDE"},
|
hardDrop: " ",
|
||||||
{name: "rotateCW", label: "ROTATION HORAIRE"},
|
rotateCW: "ArrowUp",
|
||||||
{name: "rotateCCW:", label: "ROTATE INVERSE"},
|
rotateCCW: "z",
|
||||||
{name: "hold", label: "GARDE"},
|
hold: "c",
|
||||||
{name: "pause", label: "PAUSE"}
|
pause: "Escape",
|
||||||
]
|
}
|
||||||
const actionsDefaultKeys = {
|
var selectedButton = null
|
||||||
moveLeft: "ArrowLeft",
|
var selectedAction = ""
|
||||||
moveRight: "ArrowRight",
|
|
||||||
softDrop: "ArrowDown",
|
function getKey(action) {
|
||||||
hardDrop: " ",
|
key = localStorage.getItem(action) || actionsDefaultKeys[action]
|
||||||
rotateCW: "ArrowUp",
|
if (key == ' ') key = "Space"
|
||||||
rotateCCW: "z",
|
document.open()
|
||||||
hold: "c",
|
document.write(key)
|
||||||
pause: "Escape",
|
document.close()
|
||||||
}
|
}
|
||||||
var selectedButton = null
|
|
||||||
var selectedAction = ""
|
function changeKey(button, action) {
|
||||||
|
button.innerHTML = "Touche ?"
|
||||||
function getKey(action) {
|
selectedButton = button
|
||||||
key = localStorage.getItem(action) || actionsDefaultKeys[action]
|
selectedAction = action
|
||||||
if (key == ' ')
|
button.blur()
|
||||||
return "Space"
|
}
|
||||||
else
|
|
||||||
return key
|
function keyUpHandler(e) {
|
||||||
}
|
if (selectedButton) {
|
||||||
|
localStorage.setItem(selectedAction, e.key)
|
||||||
function changeKey(button, action) {
|
selectedButton.innerHTML = (e.key == " ") ? "Space" : e.key
|
||||||
button.innerHTML = "Touche ?"
|
selectedButton = null
|
||||||
selectedButton = button
|
}
|
||||||
selectedAction = action
|
}
|
||||||
button.blur()
|
|
||||||
}
|
window.onload = function() {
|
||||||
|
addEventListener("keyup", keyUpHandler, false)
|
||||||
function keyUpHandler(e) {
|
|
||||||
if (selectedButton) {
|
|
||||||
localStorage.setItem(selectedAction, e.key)
|
|
||||||
selectedButton.innerHTML = (e.key == " ") ? "Space" : e.key
|
|
||||||
selectedButton = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.onload = function() {
|
|
||||||
document.getElementById("actions").innerHTML = actionLabel.map(action => `<div>${action.label}</div>
|
|
||||||
<button type="button" onclick="changeKey(this, '${action.name}')">${getKey(action.name)}</button>
|
|
||||||
`).join("\n")
|
|
||||||
|
|
||||||
addEventListener("keyup", keyUpHandler, false)
|
|
||||||
}
|
}
|
||||||
1564
js/webtris.js
1564
js/webtris.js
File diff suppressed because it is too large
Load Diff
74
webtris.html
74
webtris.html
@ -1,38 +1,38 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<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/webtris.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 class="flex-columns">
|
||||||
<div class="flex-rows">
|
<div class="flex-rows">
|
||||||
<div class="flex-columns">
|
<div class="flex-columns">
|
||||||
<div class="flex-space"></div>
|
<div class="flex-space"></div>
|
||||||
<canvas id="hold" width="120" height="120"></canvas>
|
<canvas id="hold" width="120" height="120"></canvas>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-space"></div>
|
<div class="flex-space"></div>
|
||||||
<div id="stats">
|
<div id="stats">
|
||||||
<div id="stats-names">
|
<div id="stats-names">
|
||||||
SCORE<br/>
|
SCORE<br/>
|
||||||
RECORD<br/>
|
RECORD<br/>
|
||||||
TEMPS<br/>
|
TEMPS<br/>
|
||||||
NIVEAU<br/>
|
NIVEAU<br/>
|
||||||
OBJECTIF<br/>
|
OBJECTIF<br/>
|
||||||
LIGNES<br/>
|
LIGNES<br/>
|
||||||
</div>
|
</div>
|
||||||
<div id="stats-values"></div>
|
<div id="stats-values"></div>
|
||||||
</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">
|
<div class="flex-rows">
|
||||||
<canvas id="next"width="120" height="400"></canvas>
|
<canvas id="next"width="120" height="400"></canvas>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user