Home Explore Help
Sign In
pascal
/
pas2js
mirror of https://gitlab.com/freepascal.org/fpc/pas2js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

* More fixes so it works on Safari

michael 6 years ago
parent
3c8c70710e
commit
bf40923c37
3 changed files with 124 additions and 82 deletions
Split View Show Diff Stats
  1. 62 29
      demo/tetris/tetris.css
  2. 62 53
      demo/tetris/tetris.html
  3. BIN
      demo/tetris/tetrislogo.png

+ 62 - 29
demo/tetris/tetris.css
View File 

@@ -10,7 +10,7 @@ body {
 
 

 #tetris {

     display: flex;

-    width: 540px;

+    width: 560px;

     margin: 3em auto;

 }

 

@@ -20,19 +20,25 @@ body {
 
 }

 

 #info {

-    display: grid;

-    grid-row-gap: 0.5em;

+    display: flex;

+    flex-direction: column;

+    justify-content: space-between;

     height: 470px;

-    grid-template-rows: 2fr 1fr 1fr 1fr 6.5fr 1fr;

 }

 

 #info > #logo {

-    grid-row: 1;

+    flex-basis: auto;

+    margin-top: 7px;

+    padding: 5px 0;

+    display: flex;

+    align-items: center;

+    justify-content: center;

+    background-color: #b8caf4;

 }

 

 #info > #score-envelope {

-    grid-row: 2;

-    border: 2px solid grey;

+    flex-basis: 8%;

+    border: 2px solid #B0B0B0;

     border-radius: 5px;

     display: flex;

     align-items: center;

@@ -40,8 +46,8 @@ body {
 
 }

 

 #info > #level-envelope {

-    grid-row: 3;

-    border: 2px solid grey;

+    flex-basis: 8%;

+    border: 2px solid #B0B0B0;

     border-radius: 5px;

     display: flex;

     align-items: center;

@@ -49,8 +55,8 @@ body {
 
 }

 

 #info > #status-envelope {

-    grid-row: 4;

-    border: 2px solid grey;

+    flex-basis: 8%;

+    border: 2px solid #B0B0B0;

     border-radius: 5px;

     display: flex;

     align-items: center;

@@ -58,26 +64,51 @@ body {
 
 }

 

 #info > #controls-envelope {

-    grid-row: 5;

-    border: 2px solid grey;

+    flex-basis: auto;

+    border: 2px solid #B0B0B0;

     border-radius: 5px;

-    padding-top: 0.5em;

+    padding: 0.5em 0;

     display: flex;

     flex-direction: column;

     justify-content: center;

 }

 

 #info > #btn-reset {

-    grid-row: 6;

+    flex-basis: auto;

 }

 

-#controls > p {

-    border-radius: 5px;

-    background: #b8caf4;

+.button {

     margin: 0.4em;

-    padding: 0.5em;

+    padding: 0.7em 1em;

+    text-align: center;

     cursor: pointer;

-    box-shadow: 0.05em 0.1em rgba(0, 0, 0, 0.1);

+    outline: none;

+    color: #fff;

+    font-weight: bold;

+    background-color: #537fe4;

+    border: none;

+    border-radius: 15px;

+    box-shadow: 0 2px #999;

+  }

+

+.button:hover {

+    background-color: #2B60DE;

+}

+

+.button:active {

+    background-color: #2B60DE;

+    box-shadow: 0 3px #888;

+    transform: translateY(2px);

+}

+

+#controls > .one-btn {

+    display: flex;

+    justify-content: center;

+}

+

+#controls > .two-btn {

+    display: flex;

+    justify-content: space-between;

 }

 

 .label {

@@ -91,17 +122,9 @@ body {
 
     display: flex;

     width: 540px;

     margin: -40px auto;

-    

 }

 

-input{

-    border: 0;

-    width: 70%;

-    font-size: 16px;

-    font-weight: bold;

-}

-

-button{

+.btn-primary{

     background: #2B60DE;

     color: #eee;

     font-weight: bold;

@@ -111,4 +134,14 @@ button{
 
     border-radius: 5px;

     text-transform: uppercase;

     font-size: 14px;

+    cursor: pointer;

+}

+

+.btn-primary:hover {

+    background-color: #1e4fc2;

+}

+

+.btn-primary:active {

+    background-color: #1e4fc2;

+    transform: translateY(2px);

 }

+ 62 - 53
demo/tetris/tetris.html
View File 

@@ -1,53 +1,62 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-<head>
 
-  <meta charset="UTF-8">
 
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
-  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
 
-  <link rel="stylesheet" type="text/css" href="tetris.css">
 
-  <title>Tetris using pas2js</title>
 
-  <script src="tetris.js"></script>
 
-</head>
 
-<body>
 
-  <div id="tetris">
 
-    <div id="gameboard">
 
-      <canvas id="my-canvas"></canvas>
 
-    </div>
 
-    <div id="info">
 
-      <div id="logo">
 
-        <img id="logo-img" src="tetrislogo.png" width="80%"/>
 
-      </div>
 
-      <div id="score-envelope" class="envelope">
 
-        <div id="score-label" class="label">Score:</div>
 
-        <div id="score">0</div>
 
-      </div>
 
-      <div id="level-envelope" class="envelope">
 
-        <div id="level-label" class="label">Level:</div>
 
-        <div id="level">1</div>
 
-      </div>
 
-      <div id="status-envelope" class="envelope">
 
-        <div id="status-label" class="label">Game status:</div>
 
-        <div id="status">Playing</div>
 
-      </div>
 
-      <div id="controls-envelope" class="envelope">
 
-        <div id="controls-label" class="label">Controls:</div>
 
-        <div id="controls">
 
-          <p><span id="control-left"><i class="fas fa-arrow-left"></i>&nbsp;Arrow-Left:</span> Move left</p>
 
-          <p><span id="control-right"><i class="fas fa-arrow-right"></i>&nbsp;Arrow-Right:</span> Move right</p>
 
-          <p><span id="control-down"><i class="fas fa-arrow-down"></i>&nbsp;Arrow-Down:</span> Move down</p>
 
-          <p><span id="control-rotate"><i class="fas fa-arrow-up"></i>&nbsp;Arrow-Up:</span> Rotate block</p>
 
-          <p><span id="control-drop"><i class="fas fa-square"></i>&nbsp;Space bar:</span> Drop block</p>
 
-        </div>
 
-      </div>
 
-      <button id="btn-reset" class="btn-primary">Restart</button>
 
-    </div>
 
-  </div>
 
-  <div class="source">
 
-  Sources: <a target="new" href="tetris.lpr">Program</a>&nbsp; <a target="new" href="utetris.pp">unit</a>.
 
-  </div>
 
-  <script>
 
-    window.addEventListener("load", rtl.run);
 
-  </script>
 
-</body>
 
-</html>
 
+<!DOCTYPE html>

+<html lang="en">

+<head>

+    <meta charset="UTF-8">

+    <meta name="viewport" content="width=device-width, initial-scale=1.0">

+    <meta http-equiv="X-UA-Compatible" content="ie=edge">

+    <title>Tetris using pas2js</title>

+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">

+    <link rel="stylesheet" type="text/css" href="tetris.css">

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

+</head>

+<body>

+    <div id="tetris">

+        <div id="gameboard">

+          <canvas id="my-canvas"></canvas>

+        </div>

+        <div id="info">

+          <div id="logo">

+            <!-- <img id="logo-img" src="tetrislogo.png" width="161" height="54"/> -->

+            <img id="logo-img" src="tetrislogo.png" height="54"/>

+          </div>

+          <div id="score-envelope">

+            <div id="score-label" class="label">Score:</div>

+            <div id="score">0</div>

+          </div>

+          <div id="level-envelope">

+            <div id="level-label" class="label">Level:</div>

+            <div id="level">1</div>

+          </div>

+          <div id="status-envelope">

+            <div id="status-label" class="label">Game status:</div>

+            <div id="status">Playing</div>

+          </div>

+          <div id="controls-envelope">

+            <div id="controls-label" class="label">Controls:</div>

+            <div id="controls">

+              <div class="one-btn">

+                <button class="button" id="control-rotate"><i class="fas fa-sync"></i>&nbsp; &nbsp;Arrow up: Rotate</button>

+              </div>

+              <div class="two-btn">

+                <button class="button" id="control-left"><i class="fas fa-arrow-left"></i>&nbsp;&nbsp;Move Left</button>

+                <button class="button" id="control-right">Move Right&nbsp; &nbsp;<i class="fas fa-arrow-right"></i></button>

+              </div>

+              <div class="one-btn">

+                <button class="button" id="control-down"><i class="fas fa-arrow-down"></i>&nbsp; &nbsp;Move Down</button>

+              </div>

+              <div class="one-btn">

+                <button class="button" id="control-drop">Space bar: Drop block</button>

+              </div>

+            </div>

+          </div>

+          <button id="btn-reset" class="btn-primary">Restart</button>

+        </div>

+    </div>

+    <div class="source">

+        Created using &nbsp; <a target="_blank" href="https://wiki.freepascal.org/pas2js">pas2js.</a> &nbsp;&nbsp;Sources: &nbsp; <a target="new" href="tetris.lpr">Program</a> &nbsp; <a target="new" href="utetris.pp">unit</a>.

+    </div>

+    <script>

+      window.addEventListener("load", rtl.run);

+    </script>

+</body>

+</html>

BIN
demo/tetris/tetrislogo.png
View File