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-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: 3em;
|
||||
margin: 20px;
|
||||
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: 80px auto;
|
||||
width: 700px;
|
||||
justify-items: left;
|
||||
}
|
||||
|
||||
.play {
|
||||
text-align: center;
|
||||
text-shadow: 2px 1px rgb(153, 145, 175);
|
||||
font-size: 1.5em;
|
||||
}
|
||||
@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: 3em;
|
||||
margin: 20px;
|
||||
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: 80px auto;
|
||||
width: 700px;
|
||||
justify-items: left;
|
||||
}
|
||||
|
||||
.play {
|
||||
text-align: center;
|
||||
text-shadow: 2px 1px rgb(153, 145, 175);
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
176
css/webtris.css
176
css/webtris.css
@ -1,89 +1,89 @@
|
||||
@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;
|
||||
}
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: white;
|
||||
font-family: 'Share Tech';
|
||||
}
|
||||
|
||||
body {
|
||||
background-image: url("../images/bg.jpg");
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3em;
|
||||
margin: 40px 20px 20px 20px;
|
||||
text-shadow: 3px 2px rgb(153, 145, 175);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
canvas {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.flex-columns {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.flex-space {
|
||||
flex-grow: 2;
|
||||
}
|
||||
|
||||
.flex-rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 5% 2%;
|
||||
height: 400px;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
#hold {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
#stats {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 10% 0;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
#stats-names {
|
||||
font-family: 'Share Tech';
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#stats-values {
|
||||
text-align: right;
|
||||
font-family: 'Share Tech Mono';
|
||||
min-width: 90px;
|
||||
}
|
||||
|
||||
#matrix {
|
||||
margin: 5% 2%;
|
||||
border: 0.5px solid grey;
|
||||
}
|
||||
|
||||
#next {
|
||||
width: 120px;
|
||||
margin: 5% 2%;
|
||||
@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;
|
||||
}
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: white;
|
||||
font-family: 'Share Tech';
|
||||
}
|
||||
|
||||
body {
|
||||
background-image: url("../images/bg.jpg");
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3em;
|
||||
margin: 40px 20px 20px 20px;
|
||||
text-shadow: 3px 2px rgb(153, 145, 175);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
canvas {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.flex-columns {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.flex-space {
|
||||
flex-grow: 2;
|
||||
}
|
||||
|
||||
.flex-rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 5% 2%;
|
||||
height: 400px;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
#hold {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
#stats {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 10% 0;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
#stats-names {
|
||||
font-family: 'Share Tech';
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#stats-values {
|
||||
text-align: right;
|
||||
font-family: 'Share Tech Mono';
|
||||
min-width: 90px;
|
||||
}
|
||||
|
||||
#matrix {
|
||||
margin: 5% 2%;
|
||||
border: 0.5px solid grey;
|
||||
}
|
||||
|
||||
#next {
|
||||
width: 120px;
|
||||
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 = [
|
||||
{name: "moveLeft", label: "GAUCHE"},
|
||||
{name: "moveRight", label: "DROITE"},
|
||||
{name: "softDrop", label: "CHUTE LENTE"},
|
||||
{name: "hardDrop", label: "CHUTE RAPIDE"},
|
||||
{name: "rotateCW", label: "ROTATION HORAIRE"},
|
||||
{name: "rotateCCW:", label: "ROTATE INVERSE"},
|
||||
{name: "hold", label: "GARDE"},
|
||||
{name: "pause", label: "PAUSE"}
|
||||
]
|
||||
const actionsDefaultKeys = {
|
||||
moveLeft: "ArrowLeft",
|
||||
moveRight: "ArrowRight",
|
||||
softDrop: "ArrowDown",
|
||||
hardDrop: " ",
|
||||
rotateCW: "ArrowUp",
|
||||
rotateCCW: "z",
|
||||
hold: "c",
|
||||
pause: "Escape",
|
||||
}
|
||||
var selectedButton = null
|
||||
var selectedAction = ""
|
||||
|
||||
function getKey(action) {
|
||||
key = localStorage.getItem(action) || actionsDefaultKeys[action]
|
||||
if (key == ' ')
|
||||
return "Space"
|
||||
else
|
||||
return key
|
||||
}
|
||||
|
||||
function changeKey(button, action) {
|
||||
button.innerHTML = "Touche ?"
|
||||
selectedButton = button
|
||||
selectedAction = action
|
||||
button.blur()
|
||||
}
|
||||
|
||||
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)
|
||||
const actionsDefaultKeys = {
|
||||
moveLeft: "ArrowLeft",
|
||||
moveRight: "ArrowRight",
|
||||
softDrop: "ArrowDown",
|
||||
hardDrop: " ",
|
||||
rotateCW: "ArrowUp",
|
||||
rotateCCW: "z",
|
||||
hold: "c",
|
||||
pause: "Escape",
|
||||
}
|
||||
var selectedButton = null
|
||||
var selectedAction = ""
|
||||
|
||||
function getKey(action) {
|
||||
key = localStorage.getItem(action) || actionsDefaultKeys[action]
|
||||
if (key == ' ') key = "Space"
|
||||
document.open()
|
||||
document.write(key)
|
||||
document.close()
|
||||
}
|
||||
|
||||
function changeKey(button, action) {
|
||||
button.innerHTML = "Touche ?"
|
||||
selectedButton = button
|
||||
selectedAction = action
|
||||
button.blur()
|
||||
}
|
||||
|
||||
function keyUpHandler(e) {
|
||||
if (selectedButton) {
|
||||
localStorage.setItem(selectedAction, e.key)
|
||||
selectedButton.innerHTML = (e.key == " ") ? "Space" : e.key
|
||||
selectedButton = null
|
||||
}
|
||||
}
|
||||
|
||||
window.onload = function() {
|
||||
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>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Webtris</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/webtris.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">
|
||||
<div class="flex-columns">
|
||||
<div class="flex-space"></div>
|
||||
<canvas id="hold" width="120" height="120"></canvas>
|
||||
</div>
|
||||
<div class="flex-space"></div>
|
||||
<div id="stats">
|
||||
<div id="stats-names">
|
||||
SCORE<br/>
|
||||
RECORD<br/>
|
||||
TEMPS<br/>
|
||||
NIVEAU<br/>
|
||||
OBJECTIF<br/>
|
||||
LIGNES<br/>
|
||||
</div>
|
||||
<div id="stats-values"></div>
|
||||
</div>
|
||||
|
||||
</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>
|
||||
</div>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Webtris</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/webtris.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">
|
||||
<div class="flex-columns">
|
||||
<div class="flex-space"></div>
|
||||
<canvas id="hold" width="120" height="120"></canvas>
|
||||
</div>
|
||||
<div class="flex-space"></div>
|
||||
<div id="stats">
|
||||
<div id="stats-names">
|
||||
SCORE<br/>
|
||||
RECORD<br/>
|
||||
TEMPS<br/>
|
||||
NIVEAU<br/>
|
||||
OBJECTIF<br/>
|
||||
LIGNES<br/>
|
||||
</div>
|
||||
<div id="stats-values"></div>
|
||||
</div>
|
||||
|
||||
</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>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user