myFirstGame/index.html at master · staszekz/myFirstGame · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://www.gstatic.com/firebasejs/7.22.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.22.0/firebase-firestore.js"></script>
    <link rel="stylesheet" href="main.css" />
    <link rel="stylesheet" href="variables.css" />
    <link rel="shortcut icon" type="image/png" href="./img/dollarCoin.png" />
    <title>Play a game!</title>
  </head>

  <body>
    <h1 class="player__header">Player: <span class="player__name"></span></h1>
    <div class="container">
      <div class="ship"></div>
    </div>
    <div class="controlPanel">
      <button class="button button--left">LEFT</button>
      <button class="button button--right">RIGHT</button>
      <p class="lifesLeft">
        Lifes left:<br />
        <span class="lifes"> </span>
      </p>
      <p class="result">
        Result: <br />
        <span class="score"></span><span> coins</span>
      </p>
      <button class="button quitInGame__button">END</button>
    </div>
    <div class="start">
      <p class="gameManual">
        Pick so many coins as you can! <br />You can move safebox by arrows, A & D keys or by
        clicking buttons.<br />
        <strong>Enter your name to be on a winners list or play as anonymous player.</strong>
      </p>
      <div class="start__player">
        <h1 class="start__name">Enter your nick</h1>
        <input class="input" type="text" placeholder="nick" value="" />
      </div>
      <h1 class="start__header">Click to start a game</h1>
      <div class="buttons__container">
        <button class="button start__button">START</button>
        <button class="button quit__button">QUIT</button>
      </div>
    </div>

    <div class="endModal">
      <h1 class="endModal__header">
        You were able to pick <span class="endModal__result"></span>&nbsp;coins
      </h1>
      <table>
        <caption class="caption">
          The List of Winners:
        </caption>
        <thead>
          <tr class="header__row">
            <th>Place</th>
            <th>Nick</th>
            <th>Result</th>
          </tr>
        </thead>
        <tbody class="table__body"></tbody>
      </table>
      <tbody class="winnersList">
        <button class="button playAgain__button">PLAY AGAIN</button>
        <div class="loader"></div>
      </tbody>
    </div>

    <div class="onPhones">
      <span>I am sorry, but you can play this game only on desktops or tablets</span>
    </div>
    <script>
      // Your web app's Firebase configuration
      const firebaseConfig = {
        apiKey: 'AIzaSyCMfCjdfeq1rlPO2YcPnAZFU6zNO5rTH3w',
        authDomain: 'firstgame-e9d9c.firebaseapp.com',
        databaseURL: 'https://firstgame-e9d9c.firebaseio.com',
        projectId: 'firstgame-e9d9c',
        storageBucket: 'firstgame-e9d9c.appspot.com',
        messagingSenderId: '344789726492',
        appId: '1:344789726492:web:3c81c55e9252380eb6b6d9',
        measurementId: 'G-F148G3KTL5',
      };
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);

      const db = firebase.firestore();
    </script>
    <script src="./script.js"></script>
  </body>
</html>