remove old files

new themes
little changes
2019-11-03 13:28:30 +01:00 · 2019-11-03 13:27:49 +01:00 · 2019-11-03 02:23:28 +01:00
11 changed files with 189 additions and 1510 deletions
--- a/css/style.css
+++ b/css/style.css
@ -41,13 +41,9 @@ div {
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
-    margin: 4vmin;
+    margin: 2vmin auto;
    text-align: center;
-    column-gap: 1vmin;
-}
-
-div * {
-    margin: auto 2vmin;
+    column-gap: 2vmin;
 }

 fieldset {
@ -55,7 +51,7 @@ fieldset {
    grid-template-columns: 25vmin 17vmin 25vmin 17vmin;
    grid-gap: 1vmin;
    margin: 2vmin auto;
-    width: 85vmin;
+    width: 80vmin;
    justify-items: right;
    align-items: baseline;
 }
--- a/css/themes/light-solid.css
+++ b/css/themes/light-solid.css
@ -0,0 +1,62 @@
+.invisible-grid > .empty-cell {
+    background: transparent;
+    border: 1px solid transparent;
+}
+
+.visible-grid > .empty-cell {
+    background: transparent;
+    border: 1px inset rgba(128, 128, 128, 0.3);
+}
+
+.mino {
+    border: 1px solid white;
+    border-radius: 0vmin;
+}
+
+.I-mino {
+    background: rgb(153, 255, 230);
+}
+
+.J-mino {
+    background: rgb(153, 204, 255);
+}
+
+.L-mino {
+    background: rgb(255, 204, 153);
+}
+
+.O-mino {
+    background: rgb(255, 255, 153);
+}
+
+.S-mino {
+    background: rgb(153, 255, 153);
+}
+
+.T-mino {
+    background: rgb(204, 153, 255);
+}
+
+.Z-mino {
+    background: rgb(255, 153, 153);
+}
+
+.locked-mino {
+    background: white;
+}
+
+.cleared-line {
+    background: white;
+}
+
+.trail {
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 0vmin;
+}
+
+.ghost {
+    background: rgba(255, 255, 255, 0.4);
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    border-radius: 0vmin;
+}
--- a/css/themes/pure-relief.css
+++ b/css/themes/pure-relief.css
@ -0,0 +1,70 @@
+.invisible-grid > .empty-cell {
+    background: transparent;
+    border: 1px solid transparent;
+}
+
+.visible-grid > .empty-cell {
+    background: transparent;
+    border: 1px inset rgba(128, 128, 128, 0.3);
+}
+
+.mino {
+    border: 1px outset;
+    border-radius: 0vmin;
+}
+
+.I-mino {
+    background: cyan;
+    border-color: lightcyan;
+}
+
+.J-mino {
+    background: blue;
+    border-color: lightblue;
+}
+
+.L-mino {
+    background: orange;
+    border-color: lightgoldenrodyellow;
+}
+
+.O-mino {
+    background: yellow;
+    border-color: lightyellow;
+}
+
+.S-mino {
+    background: green;
+    border-color: lightgreen;
+}
+
+.T-mino {
+    background: magenta;
+    border-color: pink;
+}
+
+.Z-mino {
+    background: red;
+    border-color: lightpink;
+}
+
+.locked-mino {
+    background: white;
+    border-color: white;
+}
+
+.cleared-line {
+    background: white;
+}
+
+.trail {
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 0vmin;
+}
+
+.ghost {
+    background: rgba(255, 255, 255, 0.4);
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    border-radius: 0vmin;
+}
--- a/css/themes/pure-solid.css
+++ b/css/themes/pure-solid.css
@ -9,40 +9,48 @@
 }

 .mino {
-    border: 1px solid white;
-    border-radius: 0vmin;
+    border: 1px solid;
+    border-radius: 0;
 }

 .I-mino {
    background: cyan;
+    border-color: lightcyan;
 }

 .J-mino {
    background: blue;
+    border-color: lightblue;
 }

 .L-mino {
    background: orange;
+    border-color: lightgoldenrodyellow;
 }

 .O-mino {
    background: yellow;
+    border-color: lightyellow;
 }

 .S-mino {
    background: green;
+    border-color: lightgreen;
 }

 .T-mino {
    background: magenta;
+    border-color: pink;
 }

 .Z-mino {
    background: red;
+    border-color: lightpink;
 }

 .locked-mino {
    background: white;
+    border-color: white;
 }

 .cleared-line {
--- a/css/themes/tetris-effect.css
+++ b/css/themes/tetris-effect.css
@ -16,6 +16,7 @@

 .locked-mino {
    background: rgba(242, 255, 255, 0.5);
+    border-color: rgba(242, 255, 255, 0.7);
 }

 .cleared-line {
--- a/favicon.png
+++ b/favicon.png
--- a/index.php
+++ b/index.php
@ -95,11 +95,12 @@
            </div>
            <button type="button" onclick="hideSettings()">RETOUR</button>
        </div>
-        <div id="start">
+        <fieldset id="start">
+            <legend>Nouvelle partie</legend>
            <label for="startLevel">Niveau</label>
            <input type="number" id="startLevel" min="1" max="15" step="1">
-            <button id="startButton" type="button" onclick="start()" disabled>JOUER</button>
-        </div>
+            <button id="startButton" type="button" onclick="newGame()" disabled>JOUER</button>
+        </fieldset>
        <div>
            <button id="settingsButton" type="button" onclick="showSettings()" disabled>OPTIONS</button>
        </div>
--- a/js/excanvas.js
+++ b/js/excanvas.js
--- a/js/settings.js
+++ b/js/settings.js
@ -1,39 +0,0 @@
-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)
-}
--- a/js/webtris.js
+++ b/js/webtris.js
@ -206,7 +206,6 @@ class MinoesTable {
    constructor(id, rows, columns) {
        this.rows = rows
        this.columns = columns
-        this.piece = null
        this.table = document.getElementById(id)
    }

@ -233,6 +232,10 @@ class HoldQueue extends MinoesTable {
        super("hold", HOLD_ROWS, HOLD_COLUMNS)
    }

+    newGame() {
+        this.piece = null
+    }
+
    draw() {
        this.clearTable()
        if (this.piece && state != STATE.PAUSED)
@ -244,6 +247,9 @@ class HoldQueue extends MinoesTable {
 class Matrix extends MinoesTable {
    constructor() {
        super("matrix", MATRIX_ROWS, MATRIX_COLUMNS)
+    }
+
+    newGame() {
        this.lockedMinoes = Array.from(Array(MATRIX_ROWS+3), row => Array(MATRIX_COLUMNS))
        this.piece = null
        this.clearedLines = []
@ -303,6 +309,9 @@ class Matrix extends MinoesTable {
 class NextQueue extends MinoesTable {
    constructor() {
        super("next", NEXT_ROWS, NEXT_COLUMNS)
+    }
+
+    newGame() {
        this.pieces = Array.from({length: NEXT_PIECES}, (v, k) => new Tetromino(NEXT_PIECES_POSITIONS[k]))
    }

@ -331,12 +340,18 @@ class Stats {
        this.levelCell = document.getElementById("level")
        this.goalCell = document.getElementById("goal")
        this.clearedLinesCell = document.getElementById("clearedLines")
-        this._score = 0
        this.highScore = Number(localStorage.getItem('highScore'))
-        this.highScoreCell.innerHTML = this.highScore.toLocaleString()
+        this.highScoreCell.innerText = this.highScore.toLocaleString()
+    }
+
+    newGame() {
+        this.score = 0
        this.goal = 0
+        this.goalCell.innerText = this.goal
        this.clearedLines = 0
+        this.clearedLinesCell.innerText = this.clearedLines
        this.time = 0
+        this.timeCell.innerText = timeFormat(0)
        this.combo = -1
        this.lockDelay = LOCK_DELAY
        this.fallPeriod = FALL_PERIOD
@ -349,10 +364,10 @@ class Stats {
    set score(score) {
        if (score != NaN) {
            this._score = score
-            this.scoreCell.innerHTML = this._score.toLocaleString()
+            this.scoreCell.innerText = this._score.toLocaleString()
            if (score > this.highScore)
                this.highScore = score
-                this.highScoreCell.innerHTML = this.highScore.toLocaleString()
+                this.highScoreCell.innerText = this.highScore.toLocaleString()
        }
    }

@ -361,10 +376,10 @@ class Stats {
            this.level = level
        else
            this.level++
-        this.levelCell.innerHTML = this.level
+        this.levelCell.innerText = this.level
        printTempTexts(`LEVEL<br/>${this.level}`)
        this.goal += 5 * this.level
-        this.goalCell.innerHTML = this.goal
+        this.goalCell.innerText = this.goal
        if (this.level <= 20)
            this.fallPeriod = 1000 * Math.pow(0.8 - ((this.level - 1) * 0.007), this.level - 1)
        if (this.level > 15)
@ -386,10 +401,10 @@ class Stats {

        if (clearedLines || tSpin) {
            this.clearedLines += clearedLines
-            this.clearedLinesCell.innerHTML = clearedLines
+            this.clearedLinesCell.innerText = clearedLines
            patternScore = SCORES[clearedLines][tSpin]
            this.goal -= patternScore
-            this.goalCell.innerHTML = this.goal
+            this.goalCell.innerText = this.goal
            patternScore *= 100 * this.level
            patternName = patternName.join("\n")
        }
@ -410,8 +425,13 @@ class Stats {


 // Functions
-function start() {
+function newGame() {
    document.getElementById("startButton").blur()
+
+    holdQueue.newGame()
+    matrix.newGame()
+    nextQueue.newGame()
+    stats.newGame()
    
    var startLevel = document.getElementById("startLevel").value
    localStorage.setItem("startLevel", startLevel)
@ -610,7 +630,7 @@ function gameOver() {
    XHR.open('POST', 'inleaderboard.php')
    XHR.send(FD)

-    document.getElementById("game").style.display = "none"
+    document.getElementById("game").style.display = "grid"
    document.getElementById("settings").style.display = "none"
    document.getElementById("start").style.display = "flex"
    document.getElementById("settingsButton").style.display = "flex"
@ -760,7 +780,7 @@ function delTempTexts(self) {
 }

 function clock() {
-    stats.timeCell.innerHTML = timeFormat(1000 * ++stats.time)
+    stats.timeCell.innerText = timeFormat(1000 * ++stats.time)
 }

 function getKeyName(action) {
@ -832,13 +852,19 @@ function hideSettings() {
    applySettings()
    switch(state) {
        case STATE.WAITING:
-        case STATE.GAME_OVER:
            document.getElementById("game").style.display = "none"
            document.getElementById("settings").style.display = "none"
            document.getElementById("start").style.display = "flex"
            document.getElementById("settingsButton").style.display = "flex"
            document.getElementById("leaderboardLink").style.display = "flex"
        break
+        case STATE.GAME_OVER:
+            document.getElementById("game").style.display = "grid"
+            document.getElementById("settings").style.display = "none"
+            document.getElementById("start").style.display = "flex"
+            document.getElementById("settingsButton").style.display = "flex"
+            document.getElementById("leaderboardLink").style.display = "flex"
+        break
        case STATE.PAUSED:
            document.getElementById("game").style.display = "grid"
            document.getElementById("settings").style.display = "none"
--- a/settings.php
+++ b/settings.php
@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8" />
-    <title>Webtris</title>
-    <link rel="icon" type="image/png" href="favicon.png">
-    <link rel="stylesheet" type="text/css" href="css/style.css" />
-    <script type="text/javascript" src="js/settings.js"></script>
-</head>
-<body>
-    <h1>WEBTRIS</h1>
-    <div id="settings">
-<?php
-    function addButton($action, $label) {
-?>
-        <div><?=$label?></div>
-        <button type="button" onclick="changeKey(this, '<?=$action?>')">
-            <script>getKey("<?=$action?>")</script>
-        </button>
-<?php    }
-    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>
-</body>
-</html>
Author	SHA1	Message	Date
Adrien MALINGREY	e39216f7bf	remove old files	2019-11-03 13:28:30 +01:00
Adrien MALINGREY	2494b0795d	new themes	2019-11-03 13:27:49 +01:00
Adrien MALINGREY	2cd305fee0	little changes	2019-11-03 02:23:28 +01:00