InteractiveRockPaperScissor/index.html at main · DJERLO/InteractiveRockPaperScissor · 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
95
96
97
98
99
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Interactive Rock Paper Scissor</title>
  <!-- Bootstrap 5 CDN and style.css -->
  <link rel="stylesheet" href="style.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3Q
        DgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<body>
  <!-- GameLimit Modal -->
  <div id="gameLimitModal" class="modal">
    <div class="modal-content">
      <h2>Choose Your Game Limit</h2>
      <p>Select the number of rounds:</p>
      <button id="bestOfThreeBtn">Best of Three</button>
      <button id="bestOfFiveBtn">Best of Five</button>
      <button id="bestOfTenBtn">Best of Ten</button>
    </div>
  </div>

  <!-- Game Content, Result, & Scoreboard -->
  <div class="container text-center mt-5">
    <h1 class="result header text-center">Rock Paper Scissors</h1>
    <div class="result my-4">
      <div class="row">
        <div class="col-1">
          <div class="scoreboard">
            <h2 class="score-number text-center display-result">Player Score</h2>
            <p id="player-score" class="score-number text-center display-result">0</p>
          </div>
        </div>
        <div class="col-3">
          <div class="scoreboard">
            <h2 class="score-number text-center display-result">Result</h2>
            <p id="game-result" class="score-number display-result"></p>
          </div>
        </div>
        <div class="col-1">
          <div class="scoreboard">
            <h2 class="score-number text-center display-result">Computer Score</h2>
            <p id="computer-score" class="score-number display-result">0</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Display Section Section -->
    <div class="row align-items-center">
      <div class="col-4">
        <div class="player-hands">
          <h2>Player</h2>
          <p class="display-choice">Your Choice: <span id="player1-choice"></span></p>
        </div>
      </div>
      <div class="col-4">
        <div class="player-hands">
          <h2>Computer</h2>
          <p class="display-choice">Computer's Choice: <span id="player2-choice"></span></p>
        </div>
      </div>
    </div>

    <!-- Game Buttons Section -->
    <div id="game-buttons" class="row my-4">
      <div class="col-4 game-button">
        <button class="btn btn-dark btn-lg btn-block game-option rock" id="rock-button"></button>
      </div>
      <div class="col-4 game-button">
        <button class="btn btn-dark btn-lg btn-block game-option paper" id="paper-button"></button>
      </div>
      <div class="col-4 game-button">
        <button class="btn btn-dark btn-lg btn-block game-option scissor" id="scissor-button"></button>
      </div>
    </div>

    <!-- Countdown Timer Section -->
    <div class="row">
      <div class="col-12 text-center">
        <div id="countdown-timer" class="countdown-timer">
          <p id="countdown-message" class="countdown-message">Get ready to choose!</p>
          <div id="countdown-display" class="countdown-display">10</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Scripts -->
  <script src="modal.js"></script> <!-- Game UI/UX Behavior -->
  <script src="game.js"></script> <!-- Game Mechanics and Logic -->
  <script src="audio.js"></script> <!-- Sounds (Soon) -->
  <script src="player.js"></script> <!-- Player Behaviors -->
</body>

</html>