Tetris (template)

/*
 *  Tetris v1.0
 *  Copyright (C) 2017 Andrzej Żukowski
 *  http://angular-cms.pl
 */

<style>
    div#game-information { margin: 5px; text-align: center; }
    div#game-information > span { width: 100px; height: 20px; color: #555; display: inline-block; text-align: left; }
    div#game-information > span#position { width: 120px; }
    div#game-information > span#record { color: #090; font-size: 1.1em; font-weight: bold; }
    div#game-information > span#date { color: #090; font-size: 0.85em; display: none; }
    div#game-container { margin: 20px; text-align: center; }
    canvas#game-canvas { background: url(public/img/gallery/75) no-repeat center; }
    span#panel-left, span#panel-right { display: inline-block; padding: 0 10px; position: fixed; vertical-align: top; top: 150px; }
    span#panel-left { left: 10px; }
    span#panel-right { right: 10px; }
    button.game-button { width: 70px; }
    button#start { width: 100px; }
    div#game-control { margin: 0; padding: 0; text-align: center; }
    div#game-message { font-size: 1.0em; font-weight: bold; color: #090; }
    div#game-button { padding: 10px; display: block; }
    canvas#game-canvas { width: 400px; height: 500px; border: 1px solid #aaa; padding: 1px; }
    div#game-legend { display: block; position: fixed; width: 200px; bottom: 100px; right: 50px; font-size: 0.75em; }
    @media (max-width: 968px) {
        div#game-legend { display: none; }
    }
    div#editor-button, div#close-button { position: fixed; top: 80px; right: 20px; }
    div#game-map { display: none; }
    div#game-map > h4 { text-align: center; }
    button.map-element { width: 30px; height: 30px; margin: 1px; padding: 1px; }
    table#maps-edit { max-width: 500px; }
    div#alert-info, div#alert-danger { display: none; text-align: center; margin: 10px 20% 0 20%; }
    div#maps-title { margin: 0 0 30px 0; text-align: center; font-size: 1.2em; font-weight: bold; color: #369; border-bottom: 1px solid #369; }
    div#maps-container { text-align: center; margin: 10px 50px; }
    div.item-container { display: inline-block; margin: 4px; width: 150px; height: 220px; border: 1px solid #ccc; background: #fff; }
    div.lp, div.map, div.color, div.actions { margin: 10px; text-align: center; }
    div.lp { margin: 0; font-size: 0.75em; }
</style>

<div id="game-play">
    <div id="editor-button"><button id="map-editor" class="btn btn-info">Map editor</button></div>

    <div id="game-container">
        <span id="panel-left">
            <hr>
            <button id="rotate-left" class="btn btn-warning game-button"><i class="fa fa-undo" aria-hidden="true"></i></button>
            <hr>
            <button id="move-left" class="btn btn-success game-button"><i class="fa fa-arrow-left" aria-hidden="true"></i></button>
            <hr>
            <button id="drop-left" class="btn btn-danger game-button drop-down"><i class="fa fa-level-down" aria-hidden="true"></i></button>
        </span>
        <canvas id="game-canvas">Canvas is not supported in your browser.</canvas>
        <span id="panel-right">
            <hr>
            <button id="rotate-right" class="btn btn-warning game-button"><i class="fa fa-repeat" aria-hidden="true"></i></button>
            <hr>
            <button id="move-right" class="btn btn-success game-button"><i class="fa fa-arrow-right" aria-hidden="true"></i></button>
            <hr>
            <button id="drop-right" class="btn btn-danger game-button drop-down"><i class="fa fa-level-down" aria-hidden="true"></i></button>
        </span>
    </div>

    <div id="game-information">
        <span id="position"></span>
        <span id="blocks"></span>
        <span id="level"></span>
        <span id="scores"></span>
        <span id="time"></span>
        <span id="record"></span>
        <span id="date"></span>
    </div>

    <div id="game-control">
        <div id="game-message">Aby rozpocząć grę, naciśnij przycisk...</div>
        <div id="game-button"><button id="start" class="btn btn-success game-button">Start</button></div>
    </div>

    <div id="game-legend">
        <b><u>Keyboard control:</u></b><br><br>
        Rotation: <b>PageUp</b>, <b>PageDown</b><br>Move: <b>Left</b>, <b>Right</b>, <b>Down</b><br>Drop: <b>Space Bar</b>
    </div>
</div>

<div id="game-map">
    <div id="close-button"><button id="save-maps" class="btn btn-success">Save &amp; exit</button>&nbsp;<button id="close-editor" class="btn btn-danger">Close</button></div>
    <div id="maps-title">Tetris Maps Editor</div>
    <div id="maps-table"></div>
    <div class="alert alert-info" id="alert-info"></div>
    <div class="alert alert-danger" id="alert-danger"></div>
</div>

<script src="tetris.js"></script>

<script>
/*
    shapes.push({ map: [[1, 1, 0], [0, 1, 0], [0, 1, 1]], color: '#009900' });
    shapes.push({ map: [[0, 1, 1], [0, 1, 0], [1, 1, 0]], color: '#0080c0' });
    mapEditor.loadMaps();
*/
</script>