Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="container master-container center">
   <h1 id="mainheader">
    <span id="latin">Tetris</span><span id="cyrillic">Тетрис</span>
</h1>
   <div class=row>
      <div class="col-xs-6 col-sm-4">
         <div id="instructionsEN">
            Move bricks sideways or rotate them. Fill as many rows as you can.
           <br><br>
            <h6>Control Keys
            </h6>
            <ul>
               <li><b>Left:</b> left arrow, numPad 4.</li>
               <li><b>Right:</b> right arrow, numPad 6.</li>
               <li><b>Rotate:</b> up arrow, numpad 8, numPad 5.</li>
               <li><b>Down:</b> down arrow, numPad 2.</li>
               <li><b>Pause:</b> spacebar.</li>
            </ul>
             </div>
         <div id="instructionsCZ">
            Pohybuj cihlami do stran a otáčej je. Zkus vyplinit co nejvíc řádků.
           <br><br>
            <h6>Ovládací klávesy
            </h6>
            <ul>
               <li><b>Doleva:</b> levá šipka, numPad 4.</li>
               <li><b>Doprava:</b> pravá šipka, numPad 6.</li>
               <li><b>Otočit:</b> horní šipka, numPad 8, numPad 5.</li>
               <li><b>Dolů:</b> dolní šipka, numPad 2.</li>
               <li><b>Pauza:</b> mezerník.</li>
            </ul>
         </div>
         <div id="next">
            <h5 id ="nextheader">Next brick
            </h5>
            <div class="row">
               <div class="col-xs-6 col-lg-4">&nbsp;</div>
               <div id="nextgrid" class="col-xs-12 col-sm-6 col-lg-8">
                  <div class="nextsquare">
                     <div class="content">
                        <div class="table">
                           <div class="table-cell" id="sq1002"></div>
                        </div>
                     </div>
                  </div>
                  <div class="nextsquare">
                     <div class="content">
                        <div class="table">
                           <div class="table-cell" id="sq1003"></div>
                        </div>
                     </div>
                  </div>
                  <div class="nextsquare">
                     <div class="content">
                        <div class="table">
                           <div class="table-cell" id="sq1004"></div>
                        </div>
                     </div>
                  </div>
                  <div class="nextsquare">
                     <div class="content">
                        <div class="table">
                           <div class="table-cell" id="sq1005"></div>
                        </div>
                     </div>
                  </div>
                  <div class="nextsquare">
                     <div class="content">
                        <div class="table">
                           <div class="table-cell" id="sq1014"></div>
                        </div>
                     </div>
                  </div>
                  <div class="nextsquare">
                     <div class="content">
                        <div class="table">
                           <div class="table-cell" id="sq1015"></div>
                        </div>
                     </div>
                  </div>
                  <div class="nextsquare">
                     <div class="content">
                        <div class="table">
                           <div class="table-cell" id="sq1016"></div>
                        </div>
                     </div>
                  </div>
                  <div class="nextsquare">
                     <div class="content">
                        <div class="table">
                           <div class="table-cell" id="sq1017"></div>
                        </div>
                     </div>
                  </div>
                  <div class="nextsquare">
                     <div class="content">
                        <div class="table">
                           <div class="table-cell" id="sq1026"></div>
                        </div>
                     </div>
                  </div>
                  <div class="nextsquare">
                     <div class="content">
                        <div class="table">
                           <div class="table-cell" id="sq1027"></div>
                        </div>
                     </div>
                  </div>
                  <div class="nextsquare">
                     <div class="content">
                        <div class="table">
                           <div class="table-cell" id="sq1028"></div>
                        </div>
                     </div>
                  </div>
                  <div class="nextsquare">
                     <div class="content">
                        <div class="table">
                           <div class="table-cell" id="sq1029"></div>
                        </div>
                     </div>
                  </div>
                  <div class="nextsquare">
                     <div class="content">
                        <div class="table">
                           <div class="table-cell" id="sq1038"></div>
                        </div>
                     </div>
                  </div>
                  <div class="nextsquare">
                     <div class="content">
                        <div class="table">
                           <div class="table-cell" id="sq1039"></div>
                        </div>
                     </div>
                  </div>
                  <div class="nextsquare">
                     <div class="content">
                        <div class="table">
                           <div class="table-cell" id="sq1040"></div>
                        </div>
                     </div>
                  </div>
                  <div class="nextsquare">
                     <div class="content">
                        <div class="table">
                           <div class="table-cell" id="sq1041"></div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="col-xs-6 col-sm-4">
         <div id="grid" class="text-center">
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq1"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq2"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq3"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq4"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq5"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq6"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq7"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq8"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq9"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq10"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq11"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq12"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq13"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq14"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq15"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq16"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq17"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq18"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq19"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq20"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq21"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq22"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq23"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq24"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq25"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq26"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq27"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq28"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq29"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq30"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq31"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq32"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq33"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq34"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq35"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq36"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq37"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq38"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq39"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq40"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq41"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq42"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq43"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq44"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq45"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq46"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq47"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq48"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq49"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq50"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq51"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq52"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq53"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq54"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq55"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq56"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq57"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq58"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq59"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq60"></div>
                  </div>
               </div>
            </div>
            <div class="square prep">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq61"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq62"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq63"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq64"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq65"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq66"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq67"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq68"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq69"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq70"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq71"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq72"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq73"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq74"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq75"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq76"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq77"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq78"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq79"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq80"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq81"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq82"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq83"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq84"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq85"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq86"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq87"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq88"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq89"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq90"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq91"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq92"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq93"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq94"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq95"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq96"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq97"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq98"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq99"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq100"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq101"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq102"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq103"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq104"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq105"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq106"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq107"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq108"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq109"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq110"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq111"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq112"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq113"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq114"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq115"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq116"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq117"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq118"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq119"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq120"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq121"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq122"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq123"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq124"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq125"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq126"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq127"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq128"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq129"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq130"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq131"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq132"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq133"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq134"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq135"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq136"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq137"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq138"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq139"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq140"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq141"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq142"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq143"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq144"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq145"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq146"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq147"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq148"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq149"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq150"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq151"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq152"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq153"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq154"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq155"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq156"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq157"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq158"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq159"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq160"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq161"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq162"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq163"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq164"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq165"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq166"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq167"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq168"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq169"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq170"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq171"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq172"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq173"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq174"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq175"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq176"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq177"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq178"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq179"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq180"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq181"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq182"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq183"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq184"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq185"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq186"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq187"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq188"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq189"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq190"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq191"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq192"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq193"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq194"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq195"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq196"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq197"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq198"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq199"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq200"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq201"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq202"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq203"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq204"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq205"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq206"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq207"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq208"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq209"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq210"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq211"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq212"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq213"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq214"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq215"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq216"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq217"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq218"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq219"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq220"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq221"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq222"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq223"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq224"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq225"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq226"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq227"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq228"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq229"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq230"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq231"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq232"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq233"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq234"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq235"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq236"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq237"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq238"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq239"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq240"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq241"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq242"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq243"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq244"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq245"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq246"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq247"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq248"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq249"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq250"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq251"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq252"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq253"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq254"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq255"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq256"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq257"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq258"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq259"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq260"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq261"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq262"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq263"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq264"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq265"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq266"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq267"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq268"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq269"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq270"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq271"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq272"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq273"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq274"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq275"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq276"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq277"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq278"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq279"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq280"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq281"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq282"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq283"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq284"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq285"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq286"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq287"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq288"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq289"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq290"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq291"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq292"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq293"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq294"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq295"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq296"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq297"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq298"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell" id="sq299"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq300"></div>
                  </div>
               </div>
            </div>
            <div class="square">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq301"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq302"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content hide">
                  <div class="table">
                     <div class="table-cell fender" id="sq303"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq304"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq305"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content hide">
                  <div class="table">
                     <div class="table-cell fender" id="sq306"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq307"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq308"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq309"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq310"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq311"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq312"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq313"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq314"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq315"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq316"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq317"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content hide">
                  <div class="table">
                     <div class="table-cell fender" id="sq318"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq319"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq320"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq321"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq322"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq323"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq324"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq325"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq326"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq327"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq328"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq329"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq330"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq331"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq332"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq333"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq334"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq335"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq336"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq337"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq338"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq339"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq340"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq341"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq342"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq343"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq344"></div>
                  </div>
               </div>
            </div>
            <div class="square hide" id="hide349">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq345"></div>
                  </div>
               </div>
            </div>
            <div class="square hide" id="hide346">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq346"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq347"></div>
                  </div>
               </div>
            </div>
            <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq348"></div>
                  </div>
               </div>
            </div>
                       <div class="square hide">
               <div class="content">
                  <div class="table">
                     <div class="table-cell fender" id="sq349"></div>
                  </div>
               </div>
            </div> 
         </div>
        </div>
      <div class="col-xs-6 col-sm-4">
        <div id="arrows">
  <div class="row">
    <div class="bump">&nbsp;</div>
    <button class="arrow" id="uparrow" onclick="shift()">↑</button>
    <div class="bump">&nbsp;</div>
  </div>
    <div class="row">
    <button class="arrow" id="leftarrow">←</button>
    <button class="arrow" id="downarrow">↓</button>
    <button class="arrow" id="rightarrow">→</button>
  </div>
          </div>
  <div class="row"></div>
  <div>
         <div id="mainButtons" class="row">
            <button id="invisiblebtn" >invisiblebtn</button>
            <button id="startbtn" onclick="starter()">Start game</button>
            <button id="pausebtn" onclick="pauseGame()">Pause</button>
            <button id="resumebtn" onclick="resumeGame()">Continue</button>
            <button id="newgamebtn"  onclick="newGame()">New game</button>
            <button id="setbtn"  onclick="settings()">Settings</button>
            <button id="tweetbtn" onclick="tweet()">Tweet result</button>
         </div>
         <div id="indicators">
            <div id="timeind"><span id="timeheader">Time:</span>
               <span id="hours">00</span> :
               <span id="minutes">00</span> :
               <span id="seconds">00</span>
            </div>
            <div id="linesind"><span id="linesheader">Lines:</span><span id="lines"> 000</span></div>
            <div id="speedind"><span id="speedheader">Speed:</span><span id="speed"> 000</span></div>
            <div id="rotind">
               <span id="rotheader">Rotation system:</span>
               <div id="rots">SRS</div>
            </div>
            <div id="gameoverind">
               <h3 id="gameoverheader">Game over</h3>
            </div>
         </div>
         <div id="settings">
            <br>
            <h6 id="settingsheader">Game settings</h6>
            <div id="settButtons">
               <div class="dropdown">
                  <button onclick="showColors()" class="dropbtn" id="colorbtn" onmouseover="colorDes()">Tetromino Colors</button>
                  <div id="colorsDrop" class="dropdown-content">
                     <a onclick="setColors(atari)">Atari</a>
                    <a onclick="setColors(black)" id="blackcol">Black</a>
                     <a onclick="setColors(crayola)">Crayola (default)</a>
                     <a onclick="setColors(gerasimov)">Gerasimov's 3.12</a>
                     <a onclick="setColors(microsoft)">Microsoft Tetris</a>
                     <a onclick="setColors(green)" id="greencol">Retro green</a>
                     <a onclick="setColors(sega)">Sega</a>
                     <a onclick="setColors(soviet)">Soviet mind game</a>
                     <a onclick="setColors(standard)">Standard</a>
                     <a onclick="setColors(three)">Super Tetris 3</a>
                     <a onclick="setColors(dx)">Tetris DX</a>
                     <a onclick="setColors(plus)">Tetris Plus</a>    
                     <a onclick="setColors(newT)">The New Tetris</a>
                     <a onclick="setColors(next)">The Next Tetris</a>    
                  </div>
               </div>
               <div class="dropdown">
                  <button onclick="showRotations()" class="dropbtn" id="rotationbtn" onmouseover="rotDes()">Rotation System</button>
                  <div id="RotationsDrop" class="dropdown-content">
                     <a onclick="changeRotation(nintendo)">Nintendo</a>
                     <a onclick="changeRotation(original)">Original</a>
                     <a onclick="changeRotation(srs)">SRS (default)</a>
                     <a onclick="changeRotation(segaRot)">Sega</a>
                  </div>
               </div>
               <div class="dropdown">
                  <button onclick="showSpeeds()" class="dropbtn" onmouseover="speedDes()" id="speedbtn">Starting Speed</button>
                  <div id="speedDrop" class="dropdown-content">
                     <a onclick=changeStartSpeed(1000)>1000</a>
                     <a onclick=changeStartSpeed(750)>750</a>
                     <a onclick=changeStartSpeed(500)>500 (default)</a>
                     <a onclick=changeStartSpeed(250)>250</a>
                     <a onclick=changeStartSpeed(125)>125</a>
                  </div>
               </div>
               <button id="increasebtn" class="longbutton" onclick="IncreaseSpeed()" onmouseover="incSpeedDes()">Increase Speed</button>
               <button id="noincreasebtn" class="longbutton" onclick="NoSpeedIncrease()" onmouseover="noIncSpeedDes()">Don't Increase Speed</button>
               <button id="shownextbtn" class="longbutton" onclick="showNext()" onmouseover="showNextDes()">Show next piece</button>
               <button id="hidenextbtn" class="longbutton" onclick="hideNext()" onmouseover="hideNextDes()">Don't show next piece</button>     
               <button id="showgridbtn" class="longbutton" onclick="showGrid()" onmouseover="showGridDes()">Show Grid</button>
               <button id="hidegridbtn" class="longbutton" onclick="hideGrid()" onmouseover="hideGridDes()" >Hide Grid</button>
               <button id="noszbtn" class="longbutton" onclick="noSZ()" onmouseover="noSZDes()">No S and Z pieces</button>
               <button id="yesszbtn" class="longbutton" onclick="useSZ()" onmouseover="useSZDes()">Use S and Z pieces</button>
               <h6 id="startheader">Starting rows:</h6>
               <span id="rowgenerator" class="row" onmouseover="rowsDes()">
               <button id="plusbtn" onclick="plusRows()">+</button> 
               <span id="startrowsind">00</span>
               <button id="minusbtn" onclick="minusRows()">-</button>                 
            </span>
            <div id="description"></div>
            <div id="phoneinfo">For more choices see desktop version.</div>
         </div>         
      </div>    
   </div>  
</div>

<div class="container footer-buffer">
   <!-- empty -->
</div>
<footer>
   <span id="pajit">Original game by Alexey Pajitnov.<br>Programmed by </span><a href="https://www.freecodecamp.com/radekjohn" target="_blank">Radek John</a>.
</footer>
  <div id ="switcher">
            <img src="http://nocniptak.net/js/tetris/cz.jpg" id="czebtn" onclick="czech()" width="40" height="27" alt="Česky" title="Česky">
            <img src="http://nocniptak.net/js/tetris/uk.jpg" id="engbtn" onclick="english()" width="40" height="27" alt="English" title="English">
         </div>
</div>
  </div>

  



              
            
!

CSS

              
                *, *:before, *:after {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
}
 html, body {
     height: 100%;
     background-color: #86bbd8;
     color: #2f4858;
}
 body {
     margin: 0;
}
a{
color: #ffffff;
text-decoration: underline;
}
a:hover{
color: #336699;
background-color: #ffffff;
}
h1 {
  width: 20%;
}
 footer{
     width:50%;
     padding: 2%;
     position: absolute;
     bottom: 0;
}
 button {
     background-color: #2f4858;
     color: #ffffff;;
     text-align: center;
     border: none;
     margin: 1%;
     padding 0;
     display: inline-block;
     cursor: pointer;
     white-space: nowrap;
     text align: center;
     -webkit-transition-duration: 0.4s; /* Safari */
     transition-duration: 0.4s;
}
button:hover {
    background-color: #daf7dc;
    color: #250823;
}
 .container{
     width:65%;
     height: 100%;
     background-color: #336699;
     color: #ffffff;
}
 .master-container {
     min-height: 100%;
    /* force height of html and body */
     margin-bottom: -79px;
    /* opposite of footer buffer! */
}
 .square {
     float: left;
     position: relative;
     width: 8.33%;
     padding-bottom: 8.33%;
     margin: 0%;
     overflow: hidden;
}
 .bump{
     width: 33.33%;
}
 .arrow {
     width: 33.33%;
     display: inline-block;
     height: 50px;
     font-size: 200%;
     margin: 0;
}
 .content {
     position: absolute;
     height: 100%;
     width: 100%;
     padding: 0%;
}
 .table {
     height: 100%;
     width: 100%;
     padding: 0%;
     margin: 0%;
}
 .table-cell {
     vertical-align: middle;
     height: 100%;
     width: 100%;
     padding: 0%;
     margin: 0%;
     border: 1px solid white;
     background-color: RoyalBlue;
     box-sizing: border-box;
     font-size: 80%;
}
 .nextsquare {
     float:left;
     position: relative;
     width: 25%;
     padding-bottom : 25%;
    /* = width for a 1:1 aspect ratio */
     margin:0%;
     overflow:hidden;
}
 .fender {
     display: none;
}
 .prep{
     display: none;
}
 .longbutton{
     width: 70%;
}
 #arrows {
     margin: 0px;
     padding: 0px;
     display: none;
     width: 100%;
}
#mainheader:hover span#latin {
display:none;
}
#mainheader span#cyrillic {
display:none;
}
#mainheader:hover span#cyrillic {
display:inline;
}
 #description{
     color: white;
     padding: 2%;
     visibility: hiden;
}
 #switcher{
     position: absolute;
     bottom: 0;
     right: 0;
}
 #instructionsEN{
     background-color: #2f4858;
     padding: 2%;
}
 #instructionsCZ{
     display: none;
     background-color: #2f4858;
     padding: 2%;
}
 #phoneinfo{
     display: none;
     padding: 2%;
     background-color: #2f4858;
}
 #mainButtons{
     margin-bottom: 2%;
     padding-left: 4%; 
}
 #indicators{
     background-color: #2f4858;
     padding: 2%;
     color: white;
}
 #linesind{
}
 #lines{
}
 #timeind{
}
 #gameoverind {
     display: none;
}
 #settings{
     display: none;
}
 #next {
     width:40%;
}
 #grid{
}
 #nextgrid {
}
#sq1, #sq2, #sq3, #sq4, #sq5, #sq6, #sq7, #sq8, #sq9, #sq10, #sq11, #sq12, #sq13, #sq14, #sq15, #sq16, #sq17, #sq18, #sq19, #sq20, #sq21, #sq22, #sq23, #sq24, #sq25, #sq26, #sq27, #sq28, #sq29, #sq30, #sq31, #sq32, #sq33, #sq34, #sq35, #sq36, #sq37, #sq38, #sq39, #sq40, #sq41, #sq42, #sq43, #sq44, #sq45, #sq46, #sq47, #sq48, #sq49, #sq50, #sq51, #sq52, #sq53, #sq54, #sq55, #sq56, #sq57, #sq58, #sq59, #sq60 {
     /*display:none;*/
}
 #settButtons{
}
/*Buttons*/
 #invisiblebtn {
  display: none;
  background-color: #336699;
  color: #336699;
}
 #startbtn {
}
 #pausebtn {
     display: none;
}
 #resumebtn {
     display: none;
}
 #newgamebtn {
     display: none;
}
 #tweetbtn {
     display: none;
}
 #setbtn {
}
 #increasebtn {
     display: none;
}
 #noincreasebtn {
}
 #hidenextbtn{
}
 #shownextbtn{
     display: none;
}
 #showgridbtn {
}
 #hidegridbtn {
     display: none;
}
 #noszbtn {
}
 #yesszbtn {
     display: none;
}
 #rowgenerator {
     padding: 5%;
}
 #startrowsind {
     margin: 1%;
}
 #czebtn {
}
 #engbtn {
     display: none;
}
/* Dropdown Button */
 .dropbtn {
}
/* Dropdown button on hover & focus */
 .dropbtn:hover, .dropbtn:focus {
}
/* The container <div> - needed to position the dropdown content */
 .dropdown {
     position: relative;
     display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
 .dropdown-content {
     display: none;
     position: absolute;
     z-index: 1;
     font-size: 95%;
     background-color: #daf7dc;
     color: #250823;
}
/* Links inside the dropdown */
 .dropdown-content a {
     display: block;
     background-color: #daf7dc;
     color: #250823;
}
/* Change color of dropdown links on hover */
 .dropdown-content a:hover {
    background-color: #9ee493;    
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
 .show {
     display:block;
}
 @media only screen and (max-width: 640px) {
     body{
         padding: 0%;
    }
     h1, footer, #instructionsEN, #instructionsCZ, #next, #czebtn, #hidenextbtn, #speedind, #timeind, #rotind {
         display: none;
    }
     #arrows {
         display: unset;
    }
     .hide {
         display: none;
    }
     .container {
         width: 65%;
    }
     #linesind {
         position: absolute;
         right: 1px;   
    }
     #phoneinfo{
         display: unset;
    }
   #phonecase {
         display: none;
   }
   #mainButtons {
         margin-top: 5%;
         font-size: 4vw;
   }
   #settings {
         color: #ffffff;
   }
}
 
              
            
!

JS

              
                var colors = ["#5946B2", "#2243B6", "#E936A7", "#FF7A00", "#299617", "#9C51B6", "#FA5B3D"];
var colorsTemp = [];
var crayola = ["#5946B2", "#2243B6", "#E936A7", "#FF7A00", "#299617", "#9C51B6", "#FA5B3D"];
var black = ["#000000", "#000000", "#000000", "#000000", "#000000", "#000000", "#000000"];
var green = ["#33FF00", "#33FF00", "#33FF00", "#33FF00", "#33FF00", "#33FF00", "#33FF00"];
var atari = ["red", "yellow", "magenta", "blue", "cyan", "green", "orange"];
var microsoft = ["red", "magenta", "yellow", "cyan", "blue", "silver", "green"];
var sega = ["red", "blue", "orange", "yellow", "magenta", "cyan", "green"];
var three = ["blue", "orange", "green", "magenta", "cyan", "yellow", "red"];
var dx = ["orange", "cyan", "red", "yellow", "magenta", "green", "amber"];
var plus = ["red", "blue", "orange", "yellow", "magenta", "cyan", "green"];
var soviet = ["red", "orange", "magenta", "blue", "green", "olive", "cyan"];
var newT = ["cyan", "purple", "magenta", "silver", "green", "yellow", "red"];
var next = ["cyan", "blue", "magenta", "gray", "green", "yellow", "red"];
var standard = ["cyan", "blue", "orange", "yellow", "green", "purple", "red"];
var gerasimov = ["maroon", "silver", "purple", "navy", "darkgreen", "brown", "teal"];
var color = "red";

var pauseKey = false; // is the spacebar down?
var gridOn = false; // Is grid on the board?
var speeder = true; // Speed increase off/on 
var sz = true; // S and Z pieces on
var landed = false; // Did the shape touch down?
var justStarted = true; // Game just started
var pauseVal = false; // Pause is on
var pauseOn = false;
var gameOverVal = false; // Game over
var rotationAllowed = true; // Is the rotation possible?
var downKey = false; // Downkey was pressed 
var roomRight = true; // Is there room at the sides of the falling shape?
var roomLeft = true;
var cz = false; // Which language is being used?
var en = true;

// Basic brick set, SRS rotation system
var tetrominoes = [
    // "I" piece
    [
        [colors[0]],
        [
            // Piece squares, left free space, maximal right push.
            [
                [14, 15, 16, 17],
                [0],
                [6]
            ],
            [
                [4, 16, 28, 40],
                [2],
                [7]
            ],
            [
                [26, 27, 28, 29],
                [0],
                [6]
            ],
            [
                [3, 15, 27, 39],
                [1],
                [8]
            ]
        ]
    ],
    // "J" piece
    [
        [colors[1]],
        [
            [
                [14, 26, 27, 28],
                [0],
                [7]
            ],
            [
                [15, 16, 27, 39],
                [1],
                [7]
            ],
            [
                [26, 27, 28, 40],
                [0],
                [7]
            ],
            [
                [15, 27, 38, 39],
                [0],
                [8]
            ]
        ]
    ],
    // "L" piece
    [
        [colors[2]],
        [
            [
                [16, 26, 27, 28],
                [0],
                [7]
            ],
            [
                [15, 27, 39, 40],
                [1],
                [7]
            ],
            [
                [26, 27, 28, 38],
                [0],
                [7]
            ],
            [
                [14, 15, 27, 39],
                [0],
                [8]
            ]
        ]
    ],
    // "O" piece  
    [
        [colors[3]],
        [
            [
                [15, 16, 27, 28],
                [1],
                [7]
            ],
            [
                [15, 16, 27, 28],
                [1],
                [7]
            ]
        ]
    ],
    // "S" piece
    [
        [colors[4]],
        [
            [
                [15, 16, 26, 27],
                [0],
                [7]
            ],
            [
                [15, 27, 28, 40],
                [1],
                [7]
            ],
            [
                [28, 29, 39, 40],
                [1],
                [6]
            ],
            [
                [15, 27, 28, 40],
                [1],
                [7]
            ]
        ]
    ],
    // "T" piece  
    [
        [colors[5]],
        [
            [
                [15, 26, 27, 28],
                [0],
                [7]
            ],
            [
                [15, 27, 28, 39],
                [1],
                [7]
            ],
            [
                [26, 27, 28, 39],
                [0],
                [7]
            ],
            [
                [15, 26, 27, 39],
                [0],
                [8]
            ]
        ]
    ],
    // "Z" piece
    [
        [colors[6]],
        [
            [
                [14, 15, 27, 28],
                [0],
                [7]
            ],
            [
                [16, 27, 28, 39],
                [1],
                [7]
            ],
            [
                [26, 27, 39, 40],
                [0],
                [7]
            ],
            [
                [15, 26, 27, 38],
                [0],
                [8]
            ]
        ]
    ]
];

var tetroSt = []; // Stores full tetrominoes set
var colSt = []; // Stores full color set
var tetroNum = 6; // Shape number
var nextTetroNum = 0; // Next Shape number
var oldTertroNum = 0; // Previous shape number
var tetroShift = 0; // Rotation number
var shiftoShift = 1; // Next rotation number
var max = 0; // Maximal horizontal position of the given shape
var min = 0; // Minimal horizontal position of the given shape
var int; // Time interval for the counter
var speed = 500; // Game speed in miliseconds
var speedStorage = 500;
var timer = 0; // Time value (*speed = time in miliseconds)
var timerStorage = 0; // Storing timer value during pauses
var shape = []; // Current shape
var nextShape = []; // Next shape
var shapeStorage = []; // Storing timer value during pauses
var brick = []; // Falling brick
var testBrick = []; // Rotation test

// For looking whether the space under brick is free
var verticalSum = 0;
var leftSensArr = [];
var rightSensArr = [];
var verticalSensArr = [];
var verticalTestArr = [];

var pile = []; // Landed shapes
var colorPile = []; // Colors of the landed shapes
var horizontal = 0; // Horizontal positon

// Fenders
var fendersLeft = [1, 13, 25, 37, 49, 61, 73, 85, 97, 109, 121, 133, 145, 157, 169, 181, 193, 205, 217, 229, 241, 253, 265, 277, 289];
var fendersRight = [12, 24, 36, 48, 60, 72, 84, 96, 108, 120, 132, 144, 156, 168, 180, 192, 204, 216, 228, 240, 252, 264, 276, 288, 300];
var fendersBottom = [301, 302, 303, 304, 305, 306, 307, 308, 309, 310, 311, 312];

// For clearing the full line
var line = []; // To hold line under inspection
var numb = 0; // Number of line to clear
var indexes = []; // Indexes of squares scheduled for removal
var indexor = 0; // helps in deleting the full line
var pileindexor = 0; // dtto.

// Indicators
var lines = 0;
var time = 0;
var clock = 0;
var timeStorage = 0;

// for animations
var closeTime = 300;
var openTime = 61;
var firstCloseTime = 1001;
var secondCloseTime = 1013;
var thirdCloseTime = 1025;
var fourthCloseTime = 1037;
var spaceCount = 0;
var startingRows = 0;
var colorLeft = 100;
var colorNextLeft = 100;
var blackLeft = 200;
var blackNextLeft = 190;
var blueLeft = 150;
var closeLeft = 200;
var closeNextLeft = 190;
var closeTimer = 200;
var pileHolder = [];
var colorPileHolder = [];

// For arrow buttons
var downcounter = 0;
var downheld = false;
var rightcounter = 0;
var rightheld = false;
var leftcounter = 0;
var leftheld = false;

var curDes = ""; // For current description in the description div

// Show descriptions of the buttons in both languages
function colorDes() {
    if (en === true) {
        document.getElementById("description").innerHTML = colorsEN;
        document.getElementById("description").style.backgroundColor = "#2f4858";
    } else {
        document.getElementById("description").innerHTML = colorsCZ;
        document.getElementById("description").style.backgroundColor = "#2f4858";
    }
    curDes = "colors";
}

function rotDes() {
    if (en === true) {
        document.getElementById("description").innerHTML = rotationsEN;
        document.getElementById("description").style.backgroundColor = "#2f4858";
    } else {
        document.getElementById("description").innerHTML = rotationsCZ;
        document.getElementById("description").style.backgroundColor = "#2f4858";
    }
    curDes = "rotations";
}

function speedDes() {
    if (en === true) {
        document.getElementById("description").innerHTML = speedEN;
        document.getElementById("description").style.backgroundColor = "#2f4858";
    } else {
        document.getElementById("description").innerHTML = speedCZ;
        document.getElementById("description").style.backgroundColor = "#2f4858";
    }
    curDes = "speedDesc";
}

function incSpeedDes() {
    if (en === true) {
        document.getElementById("description").innerHTML = incSpeedEN;
        document.getElementById("description").style.backgroundColor = "#2f4858";
    } else {
        document.getElementById("description").innerHTML = incSpeedCZ;
        document.getElementById("description").style.backgroundColor = "#2f4858";
    }
    curDes = "incSpeedDesc";
}

function noIncSpeedDes() {
    if (en === true) {
        document.getElementById("description").innerHTML = noIncSpeedEN;
        document.getElementById("description").style.backgroundColor = "#2f4858";
    } else {
        document.getElementById("description").innerHTML = noIncSpeedCZ;
        document.getElementById("description").style.backgroundColor = "#2f4858";
    }
    curDes = "noIncSpeedDesc";
}

function hideNextDes() {
    if (en === true) {
        document.getElementById("description").innerHTML = hideNextEN;
        document.getElementById("description").style.backgroundColor = "#2f4858";
    } else {
        document.getElementById("description").innerHTML = hideNextCZ;
        document.getElementById("description").style.backgroundColor = "#2f4858";
    }
    curDes = "hideNextDesc";
}

function showNextDes() {
    if (en === true) {
        document.getElementById("description").innerHTML = showNextEN;
        document.getElementById("description").style.backgroundColor = "#2f4858";
    } else {
        document.getElementById("description").innerHTML = showNextCZ;
        document.getElementById("description").style.backgroundColor = "#2f4858";
    }
    curDes = "showNextDesc";
}

function showGridDes() {
    if (en === true) {
        document.getElementById("description").innerHTML = showGridEN;
        document.getElementById("description").style.backgroundColor = "#2f4858";
    } else {
        document.getElementById("description").innerHTML = showGridCZ;
        document.getElementById("description").style.backgroundColor = "#2f4858";
    }
    curDes = "showGridDesc";
}

function hideGridDes() {
    if (en === true) {
        document.getElementById("description").innerHTML = hideGridEN;
        document.getElementById("description").style.backgroundColor = "#2f4858";
    } else {
        document.getElementById("description").innerHTML = hideGridCZ;
        document.getElementById("description").style.backgroundColor = "#2f4858";
    }
    curDes = "hideGridDesc";
}

function noSZDes() {
    if (en === true) {
        document.getElementById("description").innerHTML = noSZEN;
        document.getElementById("description").style.backgroundColor = "#2f4858";
    } else {
        document.getElementById("description").innerHTML = noSZCZ;
        document.getElementById("description").style.backgroundColor = "#2f4858";
    }
    curDes = "noSZDesc";
}

function useSZDes() {
    if (en === true) {
        document.getElementById("description").innerHTML = useSZEN;
        document.getElementById("description").style.backgroundColor = "#2f4858";
    } else {
        document.getElementById("description").innerHTML = useSZCZ;
        document.getElementById("description").style.backgroundColor = "#2f4858";
    }
    curDes = "useSZDesc";
}

function rowsDes() {
    if (en === true) {
        document.getElementById("description").innerHTML = rowsEN;
        document.getElementById("description").style.backgroundColor = "#2f4858";
    } else {
        document.getElementById("description").innerHTML = rowsCZ;
        document.getElementById("description").style.backgroundColor = "#2f4858";
    }
    curDes = "rowsDesc";
}
// Change language to Czech
function czech() {
    document.getElementById("czebtn").style.display = "none";
    document.getElementById("engbtn").style.display = "unset";
    document.getElementById("instructionsEN").style.display = "none";
    document.getElementById("instructionsCZ").style.display = "block";
    document.getElementById("nextheader").innerHTML = "Příští cihla";
    document.getElementById("startbtn").innerHTML = "Spusť hru";
    document.getElementById("pausebtn").innerHTML = "Pauza";
    document.getElementById("resumebtn").innerHTML = "Pokračovat";
    document.getElementById("newgamebtn").innerHTML = "Nová hra";
    document.getElementById("setbtn").innerHTML = "Nastavení";
    document.getElementById("tweetbtn").innerHTML = "Tweetnout";
    document.getElementById("timeheader").innerHTML = "Čas:";
    document.getElementById("linesheader").innerHTML = "Řádky:";
    document.getElementById("speedheader").innerHTML = "Rychlost:";
    document.getElementById("rotheader").innerHTML = "Rotační systém:";
    document.getElementById("gameoverheader").innerHTML = "Konec hry";
    document.getElementById("settingsheader").innerHTML = "Nastavení hry";
    document.getElementById("colorbtn").innerHTML = "Barvy tetromin";
    document.getElementById("blackcol").innerHTML = "Černá";
    document.getElementById("greencol").innerHTML = "Retro zelená";
    document.getElementById("rotationbtn").innerHTML = "Rotační systém";
    document.getElementById("speedbtn").innerHTML = "Startovní rychlost";
    document.getElementById("increasebtn").innerHTML = "Zvyšovat rychlost";
    document.getElementById("noincreasebtn").innerHTML = "Nezvyšovat rychlost";
    document.getElementById("shownextbtn").innerHTML = "Ukaž prříští cihlu";
    document.getElementById("hidenextbtn").innerHTML = "Neukazuj prříští cihlu";
    document.getElementById("showgridbtn").innerHTML = "Zobrazovat síť";
    document.getElementById("hidegridbtn").innerHTML = "Nezobrazovat síť";
    document.getElementById("noszbtn").innerHTML = "Žádné kostky S a Z";
    document.getElementById("yesszbtn").innerHTML = "Použít kostky S a Z";
    document.getElementById("startheader").innerHTML = "Řádky na začátku:";
    document.getElementById("pajit").innerHTML = "Autorem původní hry je Alexej Pažitnov. <br>Naprogramoval ";
    cz = true;
    en = false;
    if (curDes === "colors") {
        document.getElementById("description").innerHTML = colorsCZ;
    }
    if (curDes === "rotations") {
        document.getElementById("description").innerHTML = rotationsCZ;
    }
    if (curDes === "speedDesc") {
        document.getElementById("description").innerHTML = speedCZ;
    }
    if (curDes === "incSpeedDesc") {
        document.getElementById("description").innerHTML = incSpeedCZ;
    }
    if (curDes === "noIncSpeedDesc") {
        document.getElementById("description").innerHTML = noIncSpeedCZ;
    }
    if (curDes === "hideNextDesc") {
        document.getElementById("description").innerHTML = hideNextCZ;
    }
    if (curDes === "showNextDesc") {
        document.getElementById("description").innerHTML = showNextCZ;
    }
    if (curDes === "showGridDesc") {
        document.getElementById("description").innerHTML = showGridCZ;
    }
    if (curDes === "hideGridDesc") {
        document.getElementById("description").innerHTML = hideGridCZ;
    }
    if (curDes === "noSZDesc") {
        document.getElementById("description").innerHTML = noSZCZ;
    }
    if (curDes === "useSZDesc") {
        document.getElementById("description").innerHTML = useSZCZ;
    }
    if (curDes === "rowsDesc") {
        document.getElementById("description").innerHTML = rowsCZ;
    }
}
// Change language to English
function english() {
    document.getElementById("czebtn").style.display = "unset";
    document.getElementById("engbtn").style.display = "none";
    document.getElementById("instructionsEN").style.display = "block";
    document.getElementById("instructionsCZ").style.display = "none";
    document.getElementById("nextheader").innerHTML = "Next brick";
    document.getElementById("startbtn").innerHTML = "Start game";
    document.getElementById("pausebtn").innerHTML = "Pause";
    document.getElementById("resumebtn").innerHTML = "Continue";
    document.getElementById("newgamebtn").innerHTML = "New game";
    document.getElementById("setbtn").innerHTML = "Settings";
    document.getElementById("tweetbtn").innerHTML = "Tweet result";
    document.getElementById("timeheader").innerHTML = "Time:";
    document.getElementById("linesheader").innerHTML = "Lines:";
    document.getElementById("speedheader").innerHTML = "Speed:";
    document.getElementById("rotheader").innerHTML = "Rotation system:";
    document.getElementById("gameoverheader").innerHTML = "Game over";
    document.getElementById("settingsheader").innerHTML = "Game settings";
    document.getElementById("colorbtn").innerHTML = "Tetromino Colors";
    document.getElementById("blackcol").innerHTML = "Black";
    document.getElementById("greencol").innerHTML = "Retro green";
    document.getElementById("rotationbtn").innerHTML = "Rotation System";
    document.getElementById("speedbtn").innerHTML = "Starting Speed";
    document.getElementById("increasebtn").innerHTML = "Increase Speed";
    document.getElementById("noincreasebtn").innerHTML = "Don't Increase Speed";
    document.getElementById("shownextbtn").innerHTML = "Show next piece";
    document.getElementById("hidenextbtn").innerHTML = "Don't show next piece";
    document.getElementById("showgridbtn").innerHTML = "Show Grid";
    document.getElementById("hidegridbtn").innerHTML = "Hide Grid";
    document.getElementById("noszbtn").innerHTML = "No S and Z pieces";
    document.getElementById("yesszbtn").innerHTML = "Use S and Z pieces";
    document.getElementById("startheader").innerHTML = "Starting rows:";
    document.getElementById("pajit").innerHTML = "Original game by Alexey Pajitnov.<br>Programmed by ";
    cz = false;
    en = true;
    if (curDes === "colors") {
        document.getElementById("description").innerHTML = colorsEN;
    }
    if (curDes === "rotations") {
        document.getElementById("description").innerHTML = rotationsEN;
    }
    if (curDes === "speedDesc") {
        document.getElementById("description").innerHTML = speedEN;
    }
    if (curDes === "incSpeedDesc") {
        document.getElementById("description").innerHTML = incSpeedEN;
    }
    if (curDes === "noIncSpeedDesc") {
        document.getElementById("description").innerHTML = noIncSpeedEN;
    }
    if (curDes === "hideNextDesc") {
        document.getElementById("description").innerHTML = hideNextEN;
    }
    if (curDes === "showNextDesc") {
        document.getElementById("description").innerHTML = showNextEN;
    }
    if (curDes === "showGridDesc") {
        document.getElementById("description").innerHTML = showGridEN;
    }
    if (curDes === "hideGridDesc") {
        document.getElementById("description").innerHTML = hideGridEN;
    }
    if (curDes === "noSZDesc") {
        document.getElementById("description").innerHTML = noSZEN;
    }
    if (curDes === "useSZDesc") {
        document.getElementById("description").innerHTML = useSZEN;
    }
    if (curDes === "rowsDesc") {
        document.getElementById("description").innerHTML = rowsEN;
    }
}

// When the user clicks on the button, toggle between hiding and showing the  content dropdown menus  
function showRotations() {
    document.getElementById("RotationsDrop").classList.toggle("show");
}

function showSpeeds() {
    document.getElementById("speedDrop").classList.toggle("show");
}

function showColors() {
    document.getElementById("colorsDrop").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
    if (!event.target.matches('.dropbtn')) {

        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
};
// Saves color picked by the player
function setColors(x) {
    colorsTemp = x;
}
// Changes color set of the blocks
function changeColors() {
    if (colorsTemp.length !== 0) {
        for (var i = 0; i < tetrominoes.length; i++) {
            tetrominoes[i][0] = colorsTemp[i];
        }
    }
}
// Allow speed increase
function IncreaseSpeed() {
    speeder = true;
    document.getElementById("noincreasebtn").style.display = "unset";
    document.getElementById("increasebtn").style.display = "none";
}
// Forbid speed increase
function NoSpeedIncrease() {
    speeder = false;
    document.getElementById("noincreasebtn").style.display = "none";
    document.getElementById("increasebtn").style.display = "unset";
}
// Show next brick is off
function hideNext() {
    document.getElementById("shownextbtn").style.display = "unset";
    document.getElementById("hidenextbtn").style.display = "none";
    document.getElementById("next").style.visibility = "hidden";
}
// Show next brick is on
function showNext() {
    document.getElementById("hidenextbtn").style.display = "unset";
    document.getElementById("shownextbtn").style.display = "none";
    document.getElementById("next").style.visibility = "visible";
}
// Add grid to the board
function showGrid() {
    document.getElementById("showgridbtn").style.display = "none";
    document.getElementById("hidegridbtn").style.display = "unset";
    gridOn = true;
}
// Remove grid from the board
function hideGrid() {
    document.getElementById("showgridbtn").style.display = "unset";
    document.getElementById("hidegridbtn").style.display = "none";
    gridOn = false;
}
// Draw grid to the board
function viewGrid() {
    if (gridOn === true) {
        for (var i = 1; i < 300; i++) {
            if (pile.indexOf(i) < 0 && document.getElementById("sq" + [i]).classList.contains("fender") === false) {
                document.getElementById("sq" + [i]).style.border = "1px solid #181818";
            }
        }
    }
}
// Call for deletion of S and Z pieces from the brick list 
function noSZ() {
    sz = false;
    document.getElementById("noszbtn").style.display = "none";
    document.getElementById("yesszbtn").style.display = "unset";
    delSandZ();
}
// Add S and Z pieces back to the brick list 
function useSZ() {
    sz = true;
    document.getElementById("noszbtn").style.display = "unset";
    document.getElementById("yesszbtn").style.display = "none";
    restoreSandZ ();
}
// Increase obstacle rows count
function plusRows() {
    if (startingRows < 19) {
        startingRows++;
    } else {
        startingRows = 0;
    }
    document.getElementById("startrowsind").innerHTML = getTwo(startingRows);
}
// Decrease obstacle rows count
function minusRows() {
    if (startingRows > 0) {
        startingRows--;
    }
    document.getElementById("startrowsind").innerHTML = getTwo(startingRows);
}
// Delete everything on the board
function deleteAll() {
    pile = [];
    colorPile = [];
    for (var i = 1; i < 300; i++) {
        if (fendersLeft.indexOf(i) < 0 && fendersRight.indexOf(i) < 0 && fendersBottom.indexOf(i) < 0) {
            document.getElementById("sq" + [i]).style.backgroundColor = "black";
            document.getElementById("sq" + [i]).style.border = "1px solid black";
            document.getElementById("sq" + [i]).classList.add("free");
        }
    }
}
// Generate obstacle rows
function generateRows() {
  deleteAll();
  if (colorsTemp.length !== 0) {
  for (var i = 0; i < startingRows; i++) {
        for (var j = 290 - i * 12; j < 300 - i * 12; j++) {
            if (Math.round(Math.random()) == 1) {
                pile.push(j);
                document.getElementById("sq" + j).style.backgroundColor = colorsTemp[Math.floor(Math.random() * colorsTemp.length)];
                document.getElementById("sq" + j).style.border = "1px solid white";
                document.getElementById("sq" + j).classList.remove("free");
            }
        }
    }
  } else {
            for (var i = 0; i < startingRows; i++) {
        for (var j = 290 - i * 12; j < 300 - i * 12; j++) {
            if (Math.round(Math.random()) == 1) {
                pile.push(j);
                document.getElementById("sq" + j).style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                document.getElementById("sq" + j).style.border = "1px solid white";
                document.getElementById("sq" + j).classList.remove("free");
            }
        }
    }
  }
    clearBoard();
}
// Show settings buttons
function settings() {
    document.getElementById("settings").style.display = "unset";
    document.getElementById("setbtn").style.display = "none";
}
// Nomen omen
function pauseGame() {
    document.getElementById("pausebtn").style.display = "none";
    document.getElementById("resumebtn").style.display = "unset";
    timeStorage = time;
    pauseOn = true;
    pause();
}
// Nomen omen
function resumeGame() {
    document.getElementById("pausebtn").style.display = "unset";
    document.getElementById("resumebtn").style.display = "none";
    pauseOn = false;
    getTime();
    endPause();
}
// Put 00 in front of single digit an 0 i front of two digits
function getThree(x) {
    if (x >= 100) {
        return x;
    } else if (x >= 10) {
        return "0" + x;
    } else {
        return "00" + x;
    }

}
// Put 0 in front of single digit
function getTwo(x) {
    if (x >= 10) {
        return x;
    } else {
        return "0" + x;
    }
}
// Put 00 in front of single digit, 0 in front of two digits
function getTime() {
    var clock = setInterval(function() {
        time++;
        document.getElementById("hours").innerHTML = getHours(time);
        document.getElementById("minutes").innerHTML = getMinutes(time);
        document.getElementById("seconds").innerHTML = getSeconds(time);
        if (pauseOn === true) {
            clearInterval(clock);
        }
    }, 1000);
}
// Calculate hours from time variamble
function getHours(time) {
    return getTwo(Math.floor(time / 3600));
}
// Calculate minutes from time variamble
function getMinutes(time) {
    return getTwo(Math.floor(time / 60));
}
// Calculate seconds from time variamble
function getSeconds(time) {
    return getTwo(time % 60);
}
// Change speed value at start
function changeStartSpeed(x) {
    speed = x;
    speedStorage = x;
    showSpeed();
}
// Show speed value
function showSpeed() {
    document.getElementById("speed").innerHTML = " " + getThree(speed);
}
// Calculate new game speed
function calcSpeed() {
    if (speed > 26 && lines % 10 === 0 && speeder === true) {
        speed = speed - 25;
        pauseVal = false;
    }
}
// Remove S and Z pieces
function delSandZ() {
        tetroSt = tetrominoes.slice(0);
        colSt = colors.slice(0);
        tetrominoes.splice(4, 1);
        tetrominoes.splice(5, 1);
        colors.splice(4, 1);
        colors.splice(5, 1);   // } 
   
}
// Put S and Z pieces back in the game
function restoreSandZ (){
        tetrominoes = tetroSt.slice(0);
        colors = colSt.slice(0);
}
// Cange rotation system
function changeRotation(x) {
    tetrominoes = x;
    if (x === nintendo) {
        document.getElementById("rots").innerHTML = "Nintendo";
    }
    if (x === original) {
        document.getElementById("rots").innerHTML = "Original";
    }
    if (x === srs) {
        document.getElementById("rots").innerHTML = "SRS";
    }
    if (x === segaRot) {
        document.getElementById("rots").innerHTML = "Sega";
    }
}
// Tweet result
function tweet() {
       if (en === true) {
            window.open(
        "https://twitter.com/intent/tweet?text=I filled up " + lines + " rows in Teris game by @nocniptace. http://nocniptak.net/js/tetris/tetris.html %23javaScript %23tetris"
    );
    } else {
            window.open(
        "https://twitter.com/intent/tweet?text=Vyplnil(a) jsem " + lines + " řádek v Terisu od @nocniptace. http://nocniptak.net/js/tetris/tetris.html %23javaScript %23tetris"
    );
    }
}
// Fix for premature end of the game 
function bugFix () {
  for (var i = 1; i < 61; i++) {
   if (document.getElementById("sq" + i).classList.contains("fender") === false) {
    document.getElementById("sq" + i).classList.add("free"); 
    }
  }
}
function gameOver() {
    console.log(brick);
    console.log(pile);
    gameOverVal = true;
    pauseOn = true;
    document.getElementById("pausebtn").style.display = "none";
    document.getElementById("newgamebtn").style.display = "unset";
    document.getElementById("setbtn").style.display = "unset";
    document.getElementById("gameoverind").style.display = "unset";
    document.getElementById("gameoverind").style.display = "unset";
    document.getElementById("tweetbtn").style.display = "unset";
    closeBoard();
    closeNextBoard();
}
// Nomen omen
function closeBoard() {
if (colorsTemp.length !== 0) {
    var closeTimer = setInterval(function() {
        closeLeft -= 10;
        for (var i = 62; i < 300; i++) {
            if (closeLeft >= 100) {
                if (Math.round(Math.random()) == 1) {
                    document.getElementById("sq" + i).style.backgroundColor = colorsTemp[Math.floor(Math.random() * colorsTemp.length)];
                }
            } else {
                if (Math.round(Math.random()) == 1) {
                    document.getElementById("sq" + i).style.backgroundColor = "RoyalBlue";
                    adBorder();
                }
            }
        }
        if (closeLeft <= 0) {
            clearInterval(closeTimer);
            paintBoardBlue();
        }
    }, 200);
} else {
     var closeTimer = setInterval(function() {
        closeLeft -= 10;
        for (var i = 62; i < 300; i++) {
            if (closeLeft >= 100) {
                if (Math.round(Math.random()) == 1) {
                    document.getElementById("sq" + i).style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                }
            } else {
                if (Math.round(Math.random()) == 1) {
                    document.getElementById("sq" + i).style.backgroundColor = "RoyalBlue";
                    adBorder();
                }
            }
        }
        if (closeLeft <= 0) {
            clearInterval(closeTimer);
            paintBoardBlue();
        }
    }, 200);
}
}
// Nomen omen
function closeNextBoard() {
  if (colorsTemp.length !== 0) {
          var closeNextTimer = setInterval(function() {
        closeNextLeft -= 10;
        for (var i = 1002; i < 1006; i++) {
            if (closeNextLeft >= 100) {
                if (Math.round(Math.random()) == 1) {
                    document.getElementById("sq" + i).style.backgroundColor = colorsTemp[Math.floor(Math.random() * colorsTemp.length)];
                }
            } else {
                if (Math.round(Math.random()) == 1) {
                    document.getElementById("sq" + i).style.backgroundColor = "RoyalBlue";
                    adNextBorder();
                }
            }
        }
        for (var j = 1014; j < 1018; j++) {
            if (closeNextLeft >= 100) {
                if (Math.round(Math.random()) == 1) {
                    document.getElementById("sq" + j).style.backgroundColor = colorsTemp[Math.floor(Math.random() * colorsTemp.length)];
                }
            } else {
                if (Math.round(Math.random()) == 1) {
                    document.getElementById("sq" + j).style.backgroundColor = "RoyalBlue";
                }
            }
        }
        for (var k = 1026; k < 1030; k++) {
            if (closeNextLeft >= 100) {
                if (Math.round(Math.random()) == 1) {
                    document.getElementById("sq" + k).style.backgroundColor = colorsTemp[Math.floor(Math.random() * colorsTemp.length)];
                }
            } else {
                if (Math.round(Math.random()) == 1) {
                    document.getElementById("sq" + k).style.backgroundColor = "RoyalBlue";
                }
            }
        }
        for (var l = 1038; l < 1042; l++)  {
            if (closeNextLeft >= 100) {
                if (Math.round(Math.random()) == 1) {
                    document.getElementById("sq" + l).style.backgroundColor = colorsTemp[Math.floor(Math.random() * colorsTemp.length)];
                }
            } else {
                if (Math.round(Math.random()) == 1) {
                    document.getElementById("sq" + l).style.backgroundColor = "RoyalBlue";
                }
            }
        }
        if (closeNextLeft <= 0) {
            clearInterval(closeNextTimer);
            paintNextBoardBlue();
        }
    }, 200);
  } else {
      var closeNextTimer = setInterval(function() {
        closeNextLeft -= 10;
        for (var i = 1002; i < 1006; i++) {
            if (closeNextLeft >= 100) {
                if (Math.round(Math.random()) == 1) {
                    document.getElementById("sq" + i).style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                }
            } else {
                if (Math.round(Math.random()) == 1) {
                    document.getElementById("sq" + i).style.backgroundColor = "RoyalBlue";
                    adNextBorder();
                }
            }
        }
        for (var j = 1014; j < 1018; j++) {
            if (closeNextLeft >= 100) {
                if (Math.round(Math.random()) == 1) {
                    document.getElementById("sq" + j).style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                }
            } else {
                if (Math.round(Math.random()) == 1) {
                    document.getElementById("sq" + j).style.backgroundColor = "RoyalBlue";
                }
            }
        }
        for (var k = 1026; k < 1030; k++) {
            if (closeNextLeft >= 100) {
                if (Math.round(Math.random()) == 1) {
                    document.getElementById("sq" + k).style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                }
            } else {
                if (Math.round(Math.random()) == 1) {
                    document.getElementById("sq" + k).style.backgroundColor = "RoyalBlue";
                }
            }
        }
        for (var l = 1038; l < 1042; l++)  {
            if (closeNextLeft >= 100) {
                if (Math.round(Math.random()) == 1) {
                    document.getElementById("sq" + l).style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                }
            } else {
                if (Math.round(Math.random()) == 1) {
                    document.getElementById("sq" + l).style.backgroundColor = "RoyalBlue";
                }
            }
        }
        if (closeNextLeft <= 0) {
            clearInterval(closeNextTimer);
            paintNextBoardBlue();
        }
    }, 200);
  }
}
// Add border to all squares of the Next board 
function adNextBorder() {
  for (var i = 1002; i < 1006; i++) {
    document.getElementById("sq" + i).style.border = "1px solid white";
  }
  for (var j = 1014; j < 1018; j++) {
    document.getElementById("sq" + j).style.border = "1px solid white";
  } 
  for (var k = 1026; k < 1030; k++) {
    document.getElementById("sq" + k).style.border = "1px solid white";
  }
  for (var l = 1038; l < 1042; l++) {
    document.getElementById("sq" + l).style.border = "1px solid white";
  }  
}
// Run start animation
function starter() {
    document.getElementById("invisiblebtn").style.display = "unset";
    document.getElementById("startbtn").style.display = "none";
    document.getElementById("setbtn").style.display = "none";
    document.getElementById("newgamebtn").style.display = "none";
    document.getElementById("tweetbtn").style.display = "none";
    document.getElementById("gameoverind").style.display = "none";
    document.getElementById("settings").style.display = "none";
    colorBoard();
    blackBoard();
    if(pauseVal === false) {
    blackNextBoard();
    colorNextBoard();
    }
}
// Add border to free squares
function adBorder() {
    for (var i = 1; i < 300; i++) {
        if (pile.indexOf(i) < 0 && document.getElementById("sq" + [i]).classList.contains("fender") === false) {
            document.getElementById("sq" + [i]).style.border = "1px solid white";
        }
    }
}
// Paint all board squares blue
function paintBoardBlue() {
    for (var i = 61; i < 300; i++) {
        document.getElementById("sq" + [i]).style.backgroundColor = "RoyalBlue";
    }
}
// Paint all Next board squares blue
function paintNextBoardBlue() {
 for (var i = 1002; i < 1006; i++) {
   document.getElementById("sq" + i).style.backgroundColor = "RoyalBlue";
 }
 for (var j = 1014; j < 1018; j++) {
   document.getElementById("sq" + j).style.backgroundColor = "RoyalBlue";
 }
 for (var k = 1026; k < 1030; k++) {
   document.getElementById("sq" + k).style.backgroundColor = "RoyalBlue";
 }
 for (var l = 1038; l < 1042; l++) {
   document.getElementById("sq" + l).style.backgroundColor = "RoyalBlue";
 }
}
// Randomly change color of the board squares
function colorBoard() {
if (colorsTemp.length !== 0) {
    var colorTimer = setInterval(function() {
        colorLeft -= 10;
        for (var i = 62; i < 300; i++) {
            if (Math.round(Math.random()) == 1) {
                document.getElementById("sq" + i).style.backgroundColor = colorsTemp[Math.floor(Math.random() * colorsTemp.length)];
            }
        }
        if (colorLeft <= 0) {
            clearInterval(colorTimer);
        }
    }, 100);
} else {
    var colorTimer = setInterval(function() {
        colorLeft -= 10;
        for (var i = 62; i < 300; i++) {
            if (Math.round(Math.random()) == 1) {
                document.getElementById("sq" + i).style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
            }
        }
        if (colorLeft <= 0) {
            clearInterval(colorTimer);
        }
    }, 100);
}
}
// Randomly change color of the Next board squares
function colorNextBoard() {
  if (colorsTemp.length !== 0) {
        var colorNextTimer = setInterval(function() {
        colorNextLeft -= 10;
        for (var i = 1002; i < 1006; i++) {
           if (Math.round(Math.random()) == 1) {
                document.getElementById("sq" + i).style.backgroundColor = colorsTemp[Math.floor(Math.random() * colorsTemp.length)];
            }
        }
        for (var j = 1014; j < 1018; j++) {
           if (Math.round(Math.random()) == 1) {
                document.getElementById("sq" + j).style.backgroundColor = colorsTemp[Math.floor(Math.random() * colorsTemp.length)];
            }
        }
        for (var k = 1026; k < 1030; k++) {
           if (Math.round(Math.random()) == 1) {
                document.getElementById("sq" + k).style.backgroundColor = colorsTemp[Math.floor(Math.random() * colorsTemp.length)];
            }
        }
        for (var l = 1038; l < 1042; l++) {
           if (Math.round(Math.random()) == 1) {
                document.getElementById("sq" + l).style.backgroundColor = colorsTemp[Math.floor(Math.random() * colorsTemp.length)];
            }
        }
        if (colorNextLeft <= 0) {
            clearInterval(colorNextTimer);
        }
      }, 100);
  } else{
    var colorNextTimer = setInterval(function() {
        colorNextLeft -= 10;
        for (var i = 1002; i < 1006; i++) {
           if (Math.round(Math.random()) == 1) {
                document.getElementById("sq" + i).style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
            }
        }
        for (var j = 1014; j < 1018; j++) {
           if (Math.round(Math.random()) == 1) {
                document.getElementById("sq" + j).style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
            }
        }
        for (var k = 1026; k < 1030; k++) {
           if (Math.round(Math.random()) == 1) {
                document.getElementById("sq" + k).style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
            }
        }
        for (var l = 1038; l < 1042; l++) {
           if (Math.round(Math.random()) == 1) {
                document.getElementById("sq" + l).style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
            }
        }
        if (colorNextLeft <= 0) {
            clearInterval(colorNextTimer);
        }
      }, 100);
  }
}
// Randomly paint Next board squares black
function blackNextBoard() {
 for (var i = 1002; i < 1006; i++) {
   document.getElementById("sq" + i).style.border = "1px solid black";
 }
 for (var j = 1014; j < 1018; j++) {
   document.getElementById("sq" + j).style.border = "1px solid black";
 }
 for (var k = 1026; k < 1030; k++) {
   document.getElementById("sq" + k).style.border = "1px solid black";
 }
 for (var l = 1038; l < 1042; l++) {
   document.getElementById("sq" + l).style.border = "1px solid black";
 }
     var blackNextTimer = setInterval(function() {
        blackNextLeft -= 10;
        for (var m = 1002; m < 1006; m++) {
            if (Math.round(Math.random()) == 1 && colorNextLeft < 10) {
                document.getElementById("sq" + m).style.backgroundColor = "black";
            }
        }
        for (var n = 1014; n < 1018; n++) {
            if (Math.round(Math.random()) == 1 && colorNextLeft < 10) {
                document.getElementById("sq" + n).style.backgroundColor = "black";
            }
        }
        for (var o = 1026; o < 1030; o++) {
            if (Math.round(Math.random()) == 1 && colorNextLeft < 10) {
                document.getElementById("sq" + o).style.backgroundColor = "black";
            }
        }
        for (var p = 1038; p < 1042; p++) {
            if (Math.round(Math.random()) == 1 && colorNextLeft < 10) {
                document.getElementById("sq" + p).style.backgroundColor = "black";
            }
        }
        if (blackNextLeft <= 0) {
            clearInterval(blackNextTimer);            
        }
    }, 200); 
 
  
}
// Randomly paint board squares black
function blackBoard() {
    for (var i = 1; i < 300; i++) {
        if (document.getElementById("sq" + [i]).classList.contains("fender") === false) {
            document.getElementById("sq" + [i]).style.border = "1px solid black";
        }
    }
    var blackTimer = setInterval(function() {
        blackLeft -= 10;
        for (var j = 62; j < 300; j++) {
            if (Math.round(Math.random()) == 1 && colorLeft < 10) {
                document.getElementById("sq" + j).style.backgroundColor = "black";
            }
        }
        if (blackLeft <= 0) {
            clearInterval(blackTimer);
            startGame();
        }
    }, 200);
}
// Randomly paint board squares blue
function blueBoard() {
    var blueTimer = setInterval(function() {        
        blueLeft -= 10;
        for (var j = 62; j < 300; j++) {
            if (Math.round(Math.random()) == 1 && blueLeft < 10) {
                document.getElementById("sq" + j).style.backgroundColor = "RoyalBlue";
            }
        }
        if (blueLeft <= 0) {
            clearInterval(blueTimer);
        }
    }, 150);
}
// Nomen omen
function newGame() {
    justStarted = true;
    pauseVal = false;
    gameOverVal = false;
    rotationAllowed = true;
    tetroNum = 6;
    nextTetroNum = 0;
    oldTertroNum = 0;
    tetroShift = 0;
    shiftoShift = 1;
    max = 0;
    min = 0;
    speed = speedStorage;
    timer = 0;
    timerStorage = 0;
    shape = [];
    nextShape = [];
    shapeStorage = [];
    brick = [];
    testBrick = [];
    verticalSum = 0;
    leftSensArr = [];
    rightSensArr = [];
    verticalSensArr = [];
    verticalTestArr = [];
    pile = [];
    colorPile = [];
    horizontal = 0;
    downKey = false;
    roomRight = true;
    roomLeft = true;
    line = [];
    numb = 0;
    indexes = [];
    indexor = 0;
    pileindexor = 0;
    lines = 0;
    time = 0;
    clock = 0;
    pauseOn = false;
    timeStorage = 0;
    colorLeft = 100;
    colorNextLeft = 100;
    blackLeft = 200;
    blackNextLeft = 190;
    blueLeft = 150;
    closeLeft = 200;
    closeNextLeft = 190;
    closeTimer = 200;
    starter();
}
// Nomen omen
function startGame() {
    document.getElementById("invisiblebtn").style.display = "none";
    document.getElementById("pausebtn").style.display = "unset";
    changeColors();    
    getTime();
    landed = true;
    tetroNum = Math.floor(Math.random() * tetrominoes.length);
    nextTetroNum = Math.floor(Math.random() * tetrominoes.length);
    justStarted = false;
    landed = false;
    getShape();
    shapeStorage = shape;
    generateRows();
    start();
}
// Produces game time and stuff
function start() {
    testLines();
    clearBoard();
    viewLines();
    showSpeed();
    adWhiteBorder();
    if (pauseVal === false && gameOverVal === false) {
        getNextTetroNum();
        paintNextBoard();
        getNextShape();
        pauseVal = false;
    }
    pauseVal = false;
    color = tetrominoes[tetroNum][0];
    viewBrick();
    downKey = false;
    if (gameOverVal === false) {
        int = setInterval(function() {
            timer = timer + 12;
            shapeStorage = shape;
            viewBrick();
            fall();
        }, speed);
    }
}
// Pauses game
function pause() {
    pauseVal = true;
    shapeStorage = shape;
    clearInterval(int);
}
// Resumes game
function endPause() {
    shape = shapeStorage;
    paintNextBoard();
    viewNextShape();
    start();
}
// When the brick lands
function touchdown() {
    downcounter = 0;
    downheld = false;
    rightcounter = 0;
    rightheld = false;
    leftcounter = 0;
    leftheld = false;
    for (var i = 0; i < brick.length; i++) {
        document.getElementById("sq" + brick[i]).classList.remove("free");
        document.getElementById("sq" + brick[i]).style.backgroundColor = color;
        colorPile.push(color);
    }
    clearInterval(int);
    pile = pile.concat(brick);
    adWhiteBorder ();
    testGameOver();
    timer = 0;
    horizontal = 0;
    landed = true;
    getTetroNum();
    landed = false;
    shape = [];
    brick = [];
    getShape();
    paintNextBoard();
    start();
}
// is the game over?
function testGameOver() {
      for (var i = 62; i < 72; i++) {
           if (document.getElementById("sq" + i).classList.contains("free") === false){
               gameOver();
               }
       }
}
// Look for full lines
function testLines() {
    for (var i = 62; i < 300; i += 12) {
        line = [];
        for (var j = i; j < i + 10; j++) {
            if (document.getElementById("sq" + j).classList.contains("free") === false) {
                line.push(j);
            }
        }
        if (line.length == 10) {
            numb = i;
            clearLine();
        }
    }
}
// Remove squares from the full line from the pile. Move al squares above the line one row down
function clearLine() {
    indexes = [];
    var testArr = [];
    for (var i = numb; i < numb + 10; i++) {
        indexes.push(pile.indexOf(i));

    }
    for (var k = 0; k < indexes.length; k++) {
        testArr.push(pile[indexes[k]]);
    }
    pileindexor = indexes.length;
    indexes = indexes.sort(function(a, b) {
        return a - b;
    });
    while (pileindexor--) {
        pile.splice(indexes[pileindexor], 1);
    }
    for (var j = 0; j < pile.length; j++) {
        if (pile[j] < numb) {
            pile[j] = (pile[j] + 12);
        }
    }
    clearColorPile();
    paintPile();
    clearBoard();
    lines++;
    calcSpeed();
    testLines();
}
// Fix missing borders in the pile 
function adWhiteBorder() {
  if(pile.length > 0) {
  for (var i = 0; i < pile.length; i++) {
    document.getElementById("sq" + pile[i]).style.border = "1px solid white";
  }
    }
}
// Nomen omen
function paintPile() {
    for (var i = 1; i < 300; i++) {
        if (pile.indexOf(i) < 0 && fendersLeft.indexOf(i) < 0 && fendersRight.indexOf(i) < 0 && fendersBottom.indexOf(i) < 0) {
            document.getElementById("sq" + i).classList.add("free");
            document.getElementById("sq" + i).style.backgroundColor = "black";
        }
    }
    for (var j = 0; j < pile.length; j++) {
        document.getElementById("sq" + pile[j]).classList.remove("free");
        document.getElementById("sq" + pile[j]).style.backgroundColor = colorPile[j];
        document.getElementById("sq" + pile[j]).style.border = "1 px solid white";
    }
}
// Remove colours of the deleted squares from the colour pile
function clearColorPile() {
    indexor = indexes.length;
    while (indexor--) {
        colorPile.splice(indexes[indexor], 1);
    }
}
// Change colour of all squares except the pile to background colour, make all squares except the pile free
function clearBoard() {
    for (var i = 1; i < 300; i++) {
        if (brick.indexOf(i) < 0 && fendersLeft.indexOf(i) < 0 && fendersRight.indexOf(i) < 0 && fendersBottom.indexOf(i) < 0 && pile.indexOf(i) < 0) {
            document.getElementById("sq" + [i]).style.backgroundColor = "black";
            document.getElementById("sq" + [i]).classList.add("free");
        }
    }
}
// Show number of filled lines
function viewLines() {
    document.getElementById("lines").innerHTML = " " + getThree(lines);
}
// Randomly select the next shape
function getNextTetroNum() {
    nextTetroNum = Math.floor(Math.random() * tetrominoes.length);
    getNextShape();
}
// Nomen omen
function getTetroNum() {
    if (landed === true) {
        oldTertroNum = tetroNum;
        tetroNum = nextTetroNum;
    }
    getNextTetroNum();
    getTetroShift();
}
// Randomly select starting rotation of the next shape
function getTetroShift() {
    tetroShift = Math.floor(Math.random() * tetrominoes[tetroNum][1].length);
    getHorizontal();
}
// Randomly select horizontal position of the next shape
function getHorizontal() {
    max = tetrominoes[tetroNum][1][tetroShift][2];
    min = 0 - tetrominoes[tetroNum][1][tetroShift][1];
    horizontal = Math.floor(Math.random() * (max - min + 1)) + min;
    getShape();
}
// Simulate fall
function fall() {
    roomRight = true;
    roomLeft = true;
    rotationAllowed = true;
    nextRotation();
    brick = shape.map(function(value) {
        return value + timer + horizontal;
    });
    testRoom();
    viewBrick();
}
// Nomen omen
function paintBoard() {
    for (var i = 1; i < 300; i++) {
        if (brick.indexOf(i) < 0 && fendersLeft.indexOf(i) < 0 && fendersRight.indexOf(i) < 0 && fendersBottom.indexOf(i) < 0 &&
            pile.indexOf(i) < 0 && gameOverVal === false) {
            document.getElementById("sq" + [i]).style.backgroundColor = "black";
            document.getElementById("sq" + [i]).style.border = "1px solid black";
        }
    }
    viewGrid();
}
// Nomen omen
function paintBrick() {
    for (var i = 0; i < brick.length; i++) {
        if (pile.indexOf(i) < 0) {
            document.getElementById("sq" + brick[i]).style.backgroundColor = color;
            document.getElementById("sq" + brick[i]).style.border = "1px solid white";
        }
    }
}
// Nomen omen
function viewBrick() {
    paintBoard();
    paintBrick();
}
// Is there a free space under the brick?
function testRoom() {
    verticalSensArr = brick.map(function(value) {
        return value + 12;
    });

    verticalTestArr = [];

    for (var i = 0; i < verticalSensArr.length; i++) {
        if (
            document.getElementById("sq" + verticalSensArr[i]).classList.contains("free") ===
            true
        ) {
            verticalTestArr.push(0);
        } else {
            verticalTestArr.push(1);
        }
    }

    verticalSum = verticalTestArr.reduce(function(a, b) {
        return a + b;
    }, 0);
    // If not, call touchdown
    if (verticalSum > 0) {
        landed = true;
        touchdown();
    }
}
// Is there a free space on left?
function testRoomLeft() {
    leftSensArr = brick.map(function(value) {
        return value - 1;
    });

    for (var i = 0; i < leftSensArr.length; i++) {
        if (fendersLeft.indexOf(leftSensArr[i]) > -1) {
            roomLeft = false;
        }
    }
    for (var j = 0; j < leftSensArr.length; j++) {
        if (pile.indexOf(leftSensArr[j]) > -1) {
            roomLeft = false;
        }
    }
}
// Is there a free space on right?
function testRoomRight() {
    rightSensArr = brick.map(function(value) {
        return value + 1;
    });

    for (var i = 0; i < rightSensArr.length; i++) {
        if (fendersRight.indexOf(rightSensArr[i]) > -1) {
            roomRight = false;
        }
    }
    for (var j = 0; j < rightSensArr.length; j++) {
        if (pile.indexOf(rightSensArr[j]) > -1) {
            roomRight = false;
        }
    }
}
// Get the shape of the next brick
function getNextShape() {
    if (downKey === false) {
        nextShape = tetrominoes[nextTetroNum][1][0][0];
        showNextShape();
    }
}
// Nomen omen
function showNextShape() {
    nextShape = nextShape.map(function(value) {
        return value + 1000;
    });
    viewNextShape();
}
// Nomen omen
function viewNextShape() {
    for (var i = 0; i < nextShape.length; i++) {
        document.getElementById("sq" + nextShape[i]).style.backgroundColor = tetrominoes[nextTetroNum][0];
        document.getElementById("sq" + nextShape[i]).style.border = "1px solid white";
    }
}
// Nomen omen
function paintNextBoard() {
    for (var i = 1002; i < 1006; i++) {
        document.getElementById("sq" + i).style.backgroundColor = "black";
        document.getElementById("sq" + i).style.border = "1px solid black";
    }
    for (var j = 1014; j < 1018; j++) {
        document.getElementById("sq" + j).style.backgroundColor = "black";
        document.getElementById("sq" + j).style.border = "1px solid black";
    }
    for (var k = 1026; k < 1030; k++) {
        document.getElementById("sq" + k).style.backgroundColor = "black";
        document.getElementById("sq" + k).style.border = "1px solid black";
    }
    for (var l = 1038; l < 1042; l++) {
        document.getElementById("sq" + l).style.backgroundColor = "black";
        document.getElementById("sq" + l).style.border = "1px solid black";
    }
}
// Get the shape of the brick
function getShape() {
    shape = tetrominoes[tetroNum][1][tetroShift][0];
    viewBrick();
}
// Push brick to the left
function left() {
    testRoomLeft();
    if (roomLeft === true) {
        horizontal--;
        fall();
    }
}
// Push brick to the right
function right() {
    testRoomRight();
    if (roomRight === true) {
        horizontal++;
        fall();
    }
}
// Push brick down
function down() {
    testRoom();
    brick = brick.map(function(value) {
        return value + 12;
    });
    downKey = true;
    pause();
    timer = timer + 12;
    start();
    fall();
}
// Rotate brick
function shift() {
    if (rotationAllowed === true) {
        if (tetroShift < tetrominoes[tetroNum][1].length - 1) {
            tetroShift++;
            shape = tetrominoes[tetroNum][1][tetroShift][0];
            shapeStorage = shape;
        } else {
            tetroShift = 0;
            shape = tetrominoes[tetroNum][1][tetroShift][0];
            shapeStorage = shape;
        }
        fall();
    }
}
// Calculate number of the next rotation
function calcShiftoShift() {
    if (tetrominoes[tetroNum][1].length == 1) {
        shiftoShift = 0;
    } else if (tetroShift < tetrominoes[tetroNum][1].length - 1) {
        shiftoShift = tetroShift + 1;
    } else {
        shiftoShift = 0;
    }
}
// Calculate position of the next rotation on the board
function calcTestBrick() {
    testBrick = tetrominoes[tetroNum][1][shiftoShift][0].map(function(value) {
        return value + timer + horizontal;
    });
}
// Is there a space for the brick to rotate?
function nextRotation() {
    calcShiftoShift();
    calcTestBrick();
    for (var i = 0; i < testBrick.length; i++) {
        if (document.getElementById("sq" + testBrick[i]).classList.contains("free") === false) {
            rotationAllowed = false;
        }
    }
}

// Arrows
document.onkeydown = checkKey;

function checkKey(e) {

    e = e || window.event;

    if (e.keyCode == '38') {
        shift();
    } else if (e.keyCode == '40') {
        down();
    } else if (e.keyCode == '37') {
        left();
    } else if (e.keyCode == '39') {
        right();
    } else if (e.keyCode == '104') {
        shift();
    } else if (e.keyCode == '101') {
        shift();
    } else if (e.keyCode == '98') {
        down();
    } else if (e.keyCode == '100') {
        left();
    } else if (e.keyCode == '102') {
        right();
    } else if (e.keyCode == '32') {
      if(pauseKey === false){
        pauseGame();
        pauseKey = true;
      } else {
        resumeGame();
        pauseKey = false;
      }
    }
}

// Right
let rightarrow = document.getElementById('rightarrow');
// touch events
rightarrow.addEventListener('touchstart', (event) => { rightheld = true });
rightarrow.addEventListener('touchend', (event) => { rightheld = false });
// mouse events
rightarrow.addEventListener('mousedown', (event) => { rightheld = true });
rightarrow.addEventListener('mouseup', (event) => { rightheld = false });
// loop
function rightMove() { 
  if (rightheld) {rightcounter++;
            if (rightcounter % 5 == 0){ 
            right();
            }
            }
  else if (rightcounter > 0) { rightcounter--; }

  window.requestAnimationFrame(rightMove);
}
rightMove();

// Left
let lefttarrow = document.getElementById('rightarrow');
// touch events
leftarrow.addEventListener('touchstart', (event) => { leftheld = true });
leftarrow.addEventListener('touchend', (event) => { lrftheld = false });
// mouse events
leftarrow.addEventListener('mousedown', (event) => { leftheld = true });
leftarrow.addEventListener('mouseup', (event) => { leftheld = false });
// loop
function leftMove() {  
  if (leftheld) {leftcounter++;
            if (leftcounter % 5 == 0){ 
            left();
            }
            }
  else if (leftcounter > 0) { leftcounter--; }

  window.requestAnimationFrame(leftMove);
}
leftMove();

// Down
let downarrow = document.getElementById('downarrow');
// touch events
downarrow.addEventListener('touchstart', (event) => { downheld = true });
downarrow.addEventListener('touchend', (event) => { lrftheld = false });
// mouse events
downarrow.addEventListener('mousedown', (event) => { downheld = true });
downarrow.addEventListener('mouseup', (event) => { downheld = false });
// loop
function downMove() {  
  if (downheld) {downcounter++;
            if (downcounter % 5 == 0){ 
            down();
            }
            }
  else if (downcounter > 0) { downcounter--; }

  window.requestAnimationFrame(downMove);
}
downMove();

// Settings descriptions
var colorsCZ = "Vyber si barevné schéma kostek, většinou podle různých historických verzí Tetrisu.";
var colorsEN = "Choose color scheme for the blocks, mostly according to various historical implementations of Tetris.";
var rotationsCZ = "Různí programátoři vymysleli různé způsoby otáčení tvarů. Zkus si některé z nich.";
var rotationsEN = "Different programmers have devised different ways of rotating shapes. Try some of them.";
var speedCZ = "Čas, za který spadne kostka o jeden řádek, vyjádřený v milisekundách (1000 ms = 1 s).";
var speedEN = "The time in which the block falls one line, given in milliseconds (1000 ms = 1 s).";
var incSpeedCZ = "Po každých deseti vyplněných řádcích zvýšit rychlost padání bloků.";
var incSpeedEN = "Increase the falling speed of the blocks after every ten completed rows.";
var noIncSpeedCZ = "Nezvyšovat rychlost padání bloků po každých deseti vyplněných řádcích.";
var noIncSpeedEN = "Do not increase the falling speed of the blocks after every ten completed rows.";
var hideNextCZ = "Neukazovat tvar, který bude padat příště.";
var hideNextEN = "Do not show the shape that will fall next time.";
var showNextCZ = "Ukazovat tvar, který bude padat příště.";
var showNextEN = "Show the shape that will fall next time.";
var showGridCZ = "Přidat do hracího pole čtvercovou síť pro usnadnění orientace.";
var showGridEN = "Add a square grid to the board for better orientation.";
var hideGridCZ = "Nepřidávat do hracího pole čtvercovou síť pro usnadnění orientace.";
var hideGridEN = "Do not add a square grid to the board for better orientation.";
var noSZCZ = "Vypnout zlé tvary S a Z, co se nikam nehodí.";
var noSZEN = "Turn off the evil game-spoiling S and Z pieces.";
var useSZCZ = "Zapnout zábavné tvary S a Z, aby hra byla náročnější.";
var useSZEN = "Turn on those marvelous and challenging S and Z pieces.";
var rowsCZ = "Přidet náhodné překážky.";
var rowsEN = "Add random obstacles.";

// Rotation systems
var nintendo = [
    // "I" piece
    [
        [colors[0]],
        [
            // Piece squares, left free space, maximal right push.
            [
                [26, 27, 28, 29],
                [0],
                [6]
            ],
            [
                [4, 16, 28, 40],
                [2],
                [7]
            ]
        ]
    ],
    // "J" piece
    [
        [colors[1]],
        [
            [
                [26, 27, 28, 40],
                [0],
                [7]
            ],
            [
                [15, 27, 39, 38],
                [0],
                [8]
            ],
            [
                [14, 26, 27, 28],
                [0],
                [7]
            ],
            [
                [15, 16, 27, 39],
                [1],
                [7]
            ]
        ]
    ],
    // "L" piece
    [
        [colors[2]],
        [
            [
                [26, 27, 28, 38],
                [0],
                [7]
            ],
            [
                [14, 15, 27, 39],
                [0],
                [8]
            ],
            [
                [26, 27, 28, 16],
                [0],
                [7]
            ],
            [
                [15, 27, 39, 40],
                [1],
                [7]
            ]
        ]
    ],
    // "O" piece  
    [
        [colors[3]],
        [
            [
                [15, 16, 27, 28],
                [1],
                [7]
            ],
            [
                [15, 16, 27, 28],
                [1],
                [7]
            ]
        ]
    ],
    // "S" piece
    [
        [colors[4]],
        [
            [
                [27, 28, 38, 39],
                [0],
                [7]
            ],
            [
                [15, 27, 28, 40],
                [1],
                [7]
            ]
        ]
    ],
    // "T" piece  
    [
        [colors[5]],
        [
            [
                [26, 27, 28, 39],
                [0],
                [7]
            ],
            [
                [15, 26, 27, 39],
                [0],
                [8]
            ],
            [
                [15, 26, 27, 28],
                [0],
                [7]
            ],
            [
                [15, 27, 28, 39],
                [1],
                [7]
            ]
        ]
    ],
    // "Z" piece
    [
        [colors[6]],
        [
            [
                [26, 27, 39, 40],
                [0],
                [7]
            ],
            [
                [16, 27, 28, 39],
                [1],
                [7]
            ]
        ]
    ]
];
var original = [
    // "I" piece
    [
        [colors[0]],
        [
            // Piece squares, left free space, maximal right push.
            [
                [14, 15, 16, 17],
                [0],
                [6]
            ],
            [
                [4, 16, 28, 40],
                [2],
                [7]
            ]
        ]
    ],
    // "J" piece
    [
        [colors[1]],
        [
            [
                [26, 27, 28, 40],
                [0],
                [7]
            ],
            [
                [15, 27, 39, 38],
                [0],
                [8]
            ],
            [
                [14, 26, 27, 28],
                [0],
                [7]
            ],
            [
                [15, 16, 27, 39],
                [1],
                [7]
            ]
        ]
    ],
    // "L" piece
    [
        [colors[2]],
        [
            [
                [26, 27, 28, 38],
                [0],
                [7]
            ],
            [
                [14, 15, 27, 39],
                [0],
                [8]
            ],
            [
                [26, 27, 28, 16],
                [0],
                [7]
            ],
            [
                [15, 27, 39, 40],
                [1],
                [7]
            ]
        ]
    ],
    // "O" piece  
    [
        [colors[3]],
        [
            [
                [15, 16, 27, 28],
                [1],
                [7]
            ],
            [
                [15, 16, 27, 28],
                [1],
                [7]
            ]
        ]
    ],
    // "S" piece
    [
        [colors[4]],
        [
            [
                [27, 28, 38, 39],
                [0],
                [7]
            ],
            [
                [15, 27, 28, 40],
                [1],
                [7]
            ]
        ]
    ],
    // "T" piece  
    [
        [colors[5]],
        [
            [
                [26, 27, 28, 39],
                [0],
                [7]
            ],
            [
                [15, 26, 27, 39],
                [0],
                [8]
            ],
            [
                [15, 26, 27, 28],
                [0],
                [7]
            ],
            [
                [15, 27, 28, 39],
                [1],
                [7]
            ]
        ]
    ],
    // "Z" piece
    [
        [colors[6]],
        [
            [
                [26, 27, 39, 40],
                [0],
                [7]
            ],
            [
                [16, 27, 28, 39],
                [1],
                [7]
            ]
        ]
    ]
];
var srs = [
    // "I" piece
    [
        [colors[0]],
        [
            // Piece squares, left free space, maximal right push.
            [
                [14, 15, 16, 17],
                [0],
                [6]
            ],
            [
                [4, 16, 28, 40],
                [2],
                [7]
            ],
            [
                [26, 27, 28, 29],
                [0],
                [6]
            ],
            [
                [3, 15, 27, 39],
                [1],
                [8]
            ]
        ]
    ],
    // "J" piece
    [
        [colors[1]],
        [
            [
                [14, 26, 27, 28],
                [0],
                [7]
            ],
            [
                [15, 16, 27, 39],
                [1],
                [7]
            ],
            [
                [26, 27, 28, 40],
                [0],
                [7]
            ],
            [
                [15, 27, 38, 39],
                [0],
                [8]
            ]
        ]
    ],
    // "L" piece
    [
        [colors[2]],
        [
            [
                [16, 26, 27, 28],
                [0],
                [7]
            ],
            [
                [15, 27, 39, 40],
                [1],
                [7]
            ],
            [
                [26, 27, 28, 38],
                [0],
                [7]
            ],
            [
                [14, 15, 27, 39],
                [0],
                [8]
            ]
        ]
    ],
    // "O" piece  
    [
        [colors[3]],
        [
            [
                [15, 16, 27, 28],
                [1],
                [7]
            ],
            [
                [15, 16, 27, 28],
                [1],
                [7]
            ]
        ]
    ],
    // "S" piece
    [
        [colors[4]],
        [
            [
                [15, 16, 26, 27],
                [0],
                [7]
            ],
            [
                [15, 27, 28, 40],
                [1],
                [7]
            ],
            [
                [28, 29, 39, 40],
                [1],
                [6]
            ],
            [
                [15, 27, 28, 40],
                [1],
                [7]
            ]
        ]
    ],
    // "T" piece  
    [
        [colors[5]],
        [
            [
                [15, 26, 27, 28],
                [0],
                [7]
            ],
            [
                [15, 27, 28, 39],
                [1],
                [7]
            ],
            [
                [26, 27, 28, 39],
                [0],
                [7]
            ],
            [
                [15, 26, 27, 39],
                [0],
                [8]
            ]
        ]
    ],
    // "Z" piece
    [
        [colors[6]],
        [
            [
                [14, 15, 27, 28],
                [0],
                [7]
            ],
            [
                [16, 27, 28, 39],
                [1],
                [7]
            ],
            [
                [26, 27, 39, 40],
                [0],
                [7]
            ],
            [
                [15, 26, 27, 38],
                [0],
                [8]
            ]
        ]
    ]
];
var segaRot = [
    // "I" piece
    [
        [colors[0]],
        [
            // Piece squares, left free space, maximal right push.
            [
                [14, 15, 16, 17],
                [0],
                [6]
            ],
            [
                [4, 16, 28, 40],
                [2],
                [7]
            ]
        ]
    ],
    // "J" piece
    [
        [colors[1]],
        [
            [
                [26, 27, 28, 40],
                [0],
                [7]
            ],
            [
                [15, 27, 39, 38],
                [0],
                [8]
            ],
            [
                [26, 38, 39, 40],
                [0],
                [7]
            ],
            [
                [15, 16, 27, 39],
                [1],
                [7]
            ]
        ]
    ],
    // "L" piece
    [
        [colors[2]],
        [
            [
                [26, 27, 28, 38],
                [0],
                [7]
            ],
            [
                [14, 15, 27, 39],
                [0],
                [8]
            ],
            [
                [28, 38, 39, 40],
                [0],
                [7]
            ],
            [
                [15, 27, 39, 40],
                [1],
                [7]
            ]
        ]
    ],
    // "O" piece  
    [
        [colors[3]],
        [
            [
                [15, 16, 27, 28],
                [1],
                [7]
            ],
            [
                [15, 16, 27, 28],
                [1],
                [7]
            ]
        ]
    ],
    // "S" piece
    [
        [colors[4]],
        [
            [
                [27, 28, 38, 39],
                [0],
                [7]
            ],
            [
                [14, 26, 27, 39],
                [0],
                [8]
            ]
        ]
    ],
    // "T" piece  
    [
        [colors[5]],
        [
            [
                [26, 27, 28, 39],
                [0],
                [7]
            ],
            [
                [15, 26, 27, 39],
                [0],
                [8]
            ],
            [
                [27, 38, 39, 40],
                [0],
                [7]
            ],
            [
                [15, 27, 28, 39],
                [1],
                [7]
            ]
        ]
    ],
    // "Z" piece
    [
        [colors[6]],
        [
            [
                [26, 27, 39, 40],
                [0],
                [7]
            ],
            [
                [16, 27, 28, 39],
                [1],
                [7]
            ]
        ]
    ]
];
              
            
!
999px

Console