css animation
This commit is contained in:
129
index.php
129
index.php
@ -1,13 +1,13 @@
|
||||
<?php
|
||||
$actions = [
|
||||
"moveLeft" => ["label"=>"Gauche", "defaultKey"=>"ArrowLeft"],
|
||||
"moveRight" => ["label"=>"Droite", "defaultKey"=>"ArrowRight"],
|
||||
"softDrop" => ["label"=>"Chute lente", "defaultKey"=>"ArrowDown"],
|
||||
"hardDrop" => ["label"=>"Chute rapide", "defaultKey"=>"Space"],
|
||||
"rotateCW" => ["label"=>"Rotation horaire", "defaultKey"=>"ArrowUp"],
|
||||
"rotateCCW" => ["label"=>"Rotation anti-horaire", "defaultKey"=>"z"],
|
||||
"hold" => ["label"=>"Garde", "defaultKey"=>"c"],
|
||||
"pause" => ["label"=>"Pause/Reprise", "defaultKey"=>"Escape"]
|
||||
"moveLeft" => ["label"=>"Gauche", "defaultKey"=>"ArrowLeft"],
|
||||
"moveRight" => ["label"=>"Droite", "defaultKey"=>"ArrowRight"],
|
||||
"softDrop" => ["label"=>"Chute lente", "defaultKey"=>"ArrowDown"],
|
||||
"hardDrop" => ["label"=>"Chute rapide", "defaultKey"=>"Space"],
|
||||
"rotateCW" => ["label"=>"Rotation horaire", "defaultKey"=>"ArrowUp"],
|
||||
"rotateCCW" => ["label"=>"Rotation anti-horaire", "defaultKey"=>"z"],
|
||||
"hold" => ["label"=>"Garde", "defaultKey"=>"c"],
|
||||
"pauseResume" => ["label"=>"Pause/Reprise", "defaultKey"=>"Escape"]
|
||||
];
|
||||
|
||||
function echoTable($id, $invisibleRows, $visibleRows, $columns) {
|
||||
@ -38,17 +38,19 @@
|
||||
<script type="text/javascript" src="app.js"></script>
|
||||
<link rel="manifest" href="manifest.json">
|
||||
</head>
|
||||
<body>
|
||||
<section id="settingsSection">
|
||||
<body id="body" style="display:none">
|
||||
<header id="header">
|
||||
<h1>WEBTRIS</h1>
|
||||
</header>
|
||||
<section id="settingsSection">
|
||||
<fieldset>
|
||||
<legend>Clavier</legend>
|
||||
<div>
|
||||
<?php
|
||||
foreach($actions as $action=>$parameters) {
|
||||
?>
|
||||
<label for='<?=$action?>SetKeyButton'><?=$parameters["label"]?></label>
|
||||
<button id='<?=$action?>SetKeyButton' type='button' onclick="waitKey(this, '<?=$action?>')"><?=$parameters["defaultKey"]?></button>
|
||||
<label for='<?=$action?>'><?=$parameters["label"]?></label>
|
||||
<button id='<?=$action?>' type='button' onclick="settings.waitKey(this)"><?=$parameters["defaultKey"]?></button>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
@ -58,16 +60,16 @@
|
||||
<legend>Répétition automatique</legend>
|
||||
<div>
|
||||
<label id="autorepeatDelayRangeLabel" for="autorepeatDelayRange">Délai initial : 300ms</label>
|
||||
<input id="autorepeatDelayRange" type="range" oninput="autorepeatDelayChanged()" min="100" max="500" step="10" />
|
||||
<input id="autorepeatDelayRange" type="range" oninput="this.previousElementSibling.innerText = `Délai initial : ${this.value}ms`" value="300" min="100" max="500" step="10"/>
|
||||
<label id="autorepeatPeriodRangeLabel" for="autorepeatPeriodRange">Période : 10ms</label>
|
||||
<input id="autorepeatPeriodRange" type="range" id="autorepeatPeriodRange" oninput="autorepeatPeriodChanged()" min="2" max="50" step="2" />
|
||||
<input id="autorepeatPeriodRange" type="range" id="autorepeatPeriodRange" oninput="this.previousElementSibling.innerText = `Période : ${autorepeatPeriodRange.value}ms`" value="10" min="2" max="50" step="2"/>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Thème</legend>
|
||||
<legend>Style</legend>
|
||||
<div>
|
||||
<div></div>
|
||||
<select id="themeSelect" onchange="themeChanged()">
|
||||
<label for="themeSelect">Thème</label>
|
||||
<select id="themeSelect" oninput="settings.applyTheme()" value="default">
|
||||
<?php
|
||||
foreach(array_slice(scandir("themes"), 2) as $theme) {
|
||||
if (is_dir(pathinfo($theme)['dirname']))
|
||||
@ -75,52 +77,52 @@
|
||||
}
|
||||
?>
|
||||
</select>
|
||||
<table id="themePreviewTable" class=minoes-table>
|
||||
<tr>
|
||||
<th class="mino I"></th>
|
||||
<th></th>
|
||||
<th class="mino J"></th>
|
||||
<th class="mino J"></th>
|
||||
<th class="mino J"></th>
|
||||
<th></th>
|
||||
<th class="mino S"></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="mino I"></th>
|
||||
<th class="mino O"></th>
|
||||
<th class="mino O"></th>
|
||||
<th></th>
|
||||
<th class="mino J"></th>
|
||||
<th class="mino Z"></th>
|
||||
<th class="mino S"></th>
|
||||
<th class="mino S"></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="mino I"></th>
|
||||
<th class="mino O"></th>
|
||||
<th class="mino O"></th>
|
||||
<th class="mino L"></th>
|
||||
<th class="mino Z"></th>
|
||||
<th class="mino Z"></th>
|
||||
<th class="mino T"></th>
|
||||
<th class="mino S"></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="mino I"></th>
|
||||
<th class="mino L"></th>
|
||||
<th class="mino L"></th>
|
||||
<th class="mino L"></th>
|
||||
<th class="mino Z"></th>
|
||||
<th class="mino T"></th>
|
||||
<th class="mino T"></th>
|
||||
<th class="mino T"></th>
|
||||
</tr>
|
||||
<label for="showGhostCheckbox">Afficher le fantôme</label>
|
||||
<input id="showGhostCheckbox" type="checkbox" checked/>
|
||||
<table id="themePreviewTable" class="minoes-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th class="mino I"></th>
|
||||
<th></th>
|
||||
<th class="mino J"></th>
|
||||
<th class="mino J"></th>
|
||||
<th class="mino J"></th>
|
||||
<th></th>
|
||||
<th class="mino S"></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="mino I"></th>
|
||||
<th class="mino O"></th>
|
||||
<th class="mino O"></th>
|
||||
<th></th>
|
||||
<th class="mino J"></th>
|
||||
<th class="mino Z"></th>
|
||||
<th class="mino S"></th>
|
||||
<th class="mino S"></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="mino I"></th>
|
||||
<th class="mino O"></th>
|
||||
<th class="mino O"></th>
|
||||
<th class="mino L"></th>
|
||||
<th class="mino Z"></th>
|
||||
<th class="mino Z"></th>
|
||||
<th class="mino T"></th>
|
||||
<th class="mino S"></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="mino I"></th>
|
||||
<th class="mino L"></th>
|
||||
<th class="mino L"></th>
|
||||
<th class="mino L"></th>
|
||||
<th class="mino Z"></th>
|
||||
<th class="mino T"></th>
|
||||
<th class="mino T"></th>
|
||||
<th class="mino T"></th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div id="showGhostDiv">
|
||||
<input id="showGhostCheckbox" type="checkbox" checked onchange="showGhostChanged()"/>
|
||||
<label for="showGhostCheckbox">Afficher le fantôme</label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</section>
|
||||
@ -153,7 +155,7 @@
|
||||
<label for="startLevel">Niveau</label>
|
||||
<input type="number" id="startLevelInput" min="1" max="15" step="1" value="1">
|
||||
<div></div>
|
||||
<button id="startButton" type="button" onclick="newGame(Number(startLevelInput.value))" disabled>JOUER</button>
|
||||
<button id="startButton" type="button" onclick="newGame(Number(startLevelInput.value))">JOUER</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
</section>
|
||||
@ -164,7 +166,6 @@
|
||||
<div id="credits">
|
||||
Sources d'inspiration des thèmes :
|
||||
<a href="https://github.com/kubowania/Tetris">Ania Kubow</a>
|
||||
<a href="https://manjaro.org/">Manjaro</a>
|
||||
<a href="https://www.tetriseffect.game/">Tetris Effect</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
Reference in New Issue
Block a user