rocketacademy · cheenaeng · Jan 18, 2022 · Jan 18, 2022 · Jan 18, 2022 · Jan 24, 2022
diff --git a/Audio/background-music.mp3 b/Audio/background-music.mp3
diff --git a/Audio/coin-sound.mp3 b/Audio/coin-sound.mp3
diff --git a/Audio/deal-card-sound.mp3 b/Audio/deal-card-sound.mp3
diff --git a/Audio/hold-sound.mp3 b/Audio/hold-sound.mp3
diff --git a/Audio/lose-sound.mp3 b/Audio/lose-sound.mp3
diff --git a/Audio/win-sound.mp3 b/Audio/win-sound.mp3
diff --git a/Images/CardCombo/Rank-1.jpg b/Images/CardCombo/Rank-1.jpg
diff --git a/Images/CardCombo/Rank-2.jpg b/Images/CardCombo/Rank-2.jpg
diff --git a/Images/CardCombo/Rank-3.jpg b/Images/CardCombo/Rank-3.jpg
diff --git a/Images/CardCombo/Rank-4.jpg b/Images/CardCombo/Rank-4.jpg
diff --git a/Images/CardCombo/Rank-5.jpg b/Images/CardCombo/Rank-5.jpg
diff --git a/Images/CardCombo/Rank-6.jpg b/Images/CardCombo/Rank-6.jpg
diff --git a/Images/CardCombo/Rank-7.jpg b/Images/CardCombo/Rank-7.jpg
diff --git a/Images/CardCombo/Rank-8.jpg b/Images/CardCombo/Rank-8.jpg
diff --git a/Images/CardCombo/Rank-9.jpg b/Images/CardCombo/Rank-9.jpg
diff --git a/Images/Gradient-Background-Best-Wallpaper-16349-Baltana.jpeg b/Images/Gradient-Background-Best-Wallpaper-16349-Baltana.jpeg
diff --git a/Images/background-image2.jpg b/Images/background-image2.jpg
diff --git a/Images/card-images-52/10_of_clubs.png b/Images/card-images-52/10_of_clubs.png
diff --git a/Images/card-images-52/10_of_diamonds.png b/Images/card-images-52/10_of_diamonds.png
diff --git a/Images/card-images-52/10_of_hearts.png b/Images/card-images-52/10_of_hearts.png
diff --git a/Images/card-images-52/10_of_spades.png b/Images/card-images-52/10_of_spades.png
diff --git a/Images/card-images-52/2_of_clubs.png b/Images/card-images-52/2_of_clubs.png
diff --git a/Images/card-images-52/2_of_diamonds.png b/Images/card-images-52/2_of_diamonds.png
diff --git a/Images/card-images-52/2_of_hearts.png b/Images/card-images-52/2_of_hearts.png
diff --git a/Images/card-images-52/2_of_spades.png b/Images/card-images-52/2_of_spades.png
diff --git a/Images/card-images-52/3_of_clubs.png b/Images/card-images-52/3_of_clubs.png
diff --git a/Images/card-images-52/3_of_diamonds.png b/Images/card-images-52/3_of_diamonds.png
diff --git a/Images/card-images-52/3_of_hearts.png b/Images/card-images-52/3_of_hearts.png
diff --git a/Images/card-images-52/3_of_spades.png b/Images/card-images-52/3_of_spades.png
diff --git a/Images/card-images-52/4_of_clubs.png b/Images/card-images-52/4_of_clubs.png
diff --git a/Images/card-images-52/4_of_diamonds.png b/Images/card-images-52/4_of_diamonds.png
diff --git a/Images/card-images-52/4_of_diamonds.png alias b/Images/card-images-52/4_of_diamonds.png alias
diff --git a/Images/card-images-52/4_of_hearts.png b/Images/card-images-52/4_of_hearts.png
diff --git a/Images/card-images-52/4_of_spades.png b/Images/card-images-52/4_of_spades.png
diff --git a/Images/card-images-52/5_of_clubs.png b/Images/card-images-52/5_of_clubs.png
diff --git a/Images/card-images-52/5_of_diamonds.png b/Images/card-images-52/5_of_diamonds.png
diff --git a/Images/card-images-52/5_of_hearts.png b/Images/card-images-52/5_of_hearts.png
diff --git a/Images/card-images-52/5_of_spades.png b/Images/card-images-52/5_of_spades.png
diff --git a/Images/card-images-52/6_of_clubs.png b/Images/card-images-52/6_of_clubs.png
diff --git a/Images/card-images-52/6_of_diamonds.png b/Images/card-images-52/6_of_diamonds.png
diff --git a/Images/card-images-52/6_of_hearts.png b/Images/card-images-52/6_of_hearts.png
diff --git a/Images/card-images-52/6_of_spades.png b/Images/card-images-52/6_of_spades.png
diff --git a/Images/card-images-52/7_of_clubs.png b/Images/card-images-52/7_of_clubs.png
diff --git a/Images/card-images-52/7_of_diamonds.png b/Images/card-images-52/7_of_diamonds.png
diff --git a/Images/card-images-52/7_of_hearts.png b/Images/card-images-52/7_of_hearts.png
diff --git a/Images/card-images-52/7_of_spades.png b/Images/card-images-52/7_of_spades.png
diff --git a/Images/card-images-52/8_of_clubs.png b/Images/card-images-52/8_of_clubs.png
diff --git a/Images/card-images-52/8_of_diamonds.png b/Images/card-images-52/8_of_diamonds.png
diff --git a/Images/card-images-52/8_of_hearts.png b/Images/card-images-52/8_of_hearts.png
diff --git a/Images/card-images-52/8_of_spades.png b/Images/card-images-52/8_of_spades.png
diff --git a/Images/card-images-52/9_of_clubs.png b/Images/card-images-52/9_of_clubs.png
diff --git a/Images/card-images-52/9_of_diamonds.png b/Images/card-images-52/9_of_diamonds.png
diff --git a/Images/card-images-52/9_of_hearts.png b/Images/card-images-52/9_of_hearts.png
diff --git a/Images/card-images-52/9_of_spades.png b/Images/card-images-52/9_of_spades.png
diff --git a/Images/card-images-52/A_of_clubs.png b/Images/card-images-52/A_of_clubs.png
diff --git a/Images/card-images-52/A_of_diamonds.png b/Images/card-images-52/A_of_diamonds.png
diff --git a/Images/card-images-52/A_of_hearts.png b/Images/card-images-52/A_of_hearts.png
diff --git a/Images/card-images-52/A_of_spades.png b/Images/card-images-52/A_of_spades.png
diff --git a/Images/card-images-52/A_of_spades2.png b/Images/card-images-52/A_of_spades2.png
diff --git a/Images/card-images-52/J_of_clubs.png b/Images/card-images-52/J_of_clubs.png
diff --git a/Images/card-images-52/J_of_clubs2.png b/Images/card-images-52/J_of_clubs2.png
diff --git a/Images/card-images-52/J_of_diamonds.png b/Images/card-images-52/J_of_diamonds.png
diff --git a/Images/card-images-52/J_of_diamonds2.png b/Images/card-images-52/J_of_diamonds2.png
diff --git a/Images/card-images-52/J_of_hearts.png b/Images/card-images-52/J_of_hearts.png
diff --git a/Images/card-images-52/J_of_hearts2.png b/Images/card-images-52/J_of_hearts2.png
diff --git a/Images/card-images-52/J_of_spades.png b/Images/card-images-52/J_of_spades.png
diff --git a/Images/card-images-52/J_of_spades2.png b/Images/card-images-52/J_of_spades2.png
diff --git a/Images/card-images-52/K_of_clubs.png b/Images/card-images-52/K_of_clubs.png
diff --git a/Images/card-images-52/K_of_clubs2.png b/Images/card-images-52/K_of_clubs2.png
diff --git a/Images/card-images-52/K_of_diamonds.png b/Images/card-images-52/K_of_diamonds.png
diff --git a/Images/card-images-52/K_of_diamonds2.png b/Images/card-images-52/K_of_diamonds2.png
diff --git a/Images/card-images-52/K_of_hearts.png b/Images/card-images-52/K_of_hearts.png
diff --git a/Images/card-images-52/K_of_hearts2.png b/Images/card-images-52/K_of_hearts2.png
diff --git a/Images/card-images-52/K_of_spades.png b/Images/card-images-52/K_of_spades.png
diff --git a/Images/card-images-52/K_of_spades2.png b/Images/card-images-52/K_of_spades2.png
diff --git a/Images/card-images-52/Q_of_clubs.png b/Images/card-images-52/Q_of_clubs.png
diff --git a/Images/card-images-52/Q_of_clubs2.png b/Images/card-images-52/Q_of_clubs2.png
diff --git a/Images/card-images-52/Q_of_diamonds.png b/Images/card-images-52/Q_of_diamonds.png
diff --git a/Images/card-images-52/Q_of_diamonds2.png b/Images/card-images-52/Q_of_diamonds2.png
diff --git a/Images/card-images-52/Q_of_hearts.png b/Images/card-images-52/Q_of_hearts.png
diff --git a/Images/card-images-52/Q_of_hearts2.png b/Images/card-images-52/Q_of_hearts2.png
diff --git a/Images/card-images-52/Q_of_spades.png b/Images/card-images-52/Q_of_spades.png
diff --git a/Images/card-images-52/Q_of_spades2.png b/Images/card-images-52/Q_of_spades2.png
diff --git a/Images/card-images-52/black_joker.png b/Images/card-images-52/black_joker.png
diff --git a/Images/card-images-52/red_joker.png b/Images/card-images-52/red_joker.png
diff --git a/Images/poker-icon.png b/Images/poker-icon.png
diff --git a/Images/pokercardIcon.png b/Images/pokercardIcon.png
diff --git a/README.md b/README.md
@@ -1 +1,6 @@
-# Rocket Academy Coding Bootcamp: Video Poker
+## About
+Video poker is a frontend-only webgame developed using vanilla Javascript, HTML and CSS. More rules of the game can be found on https://en.wikipedia.org/wiki/Video_poker. 
+
+Demo of the game can be found at : https://cheenaeng.github.io/video-poker-bootcamp/
+
+<img src="https://user-images.githubusercontent.com/94110588/177381835-a2e91c25-6a34-4680-b895-93a37e94aec6.png" width="500" />
diff --git a/index.html b/index.html
@@ -0,0 +1,236 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>Video Poker</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" crossorigin="anonymous">
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <!-- container  -->
+    <div class="container d-flex flex-column justify-content-center">
+
+      <!-- header containing the icons and heading  -->
+      <header>
+        <h1>Ultimate Poker</h1>
+        <div id="how-to-play"> 
+          <i class="fa fa-question-circle-o fa-2x" aria-hidden="true"></i>
+        </div>
+        <div >
+          <i class="fa fa-volume-up" aria-hidden="true" id="audio-icon"></i>
+        </div>
+
+      </header>
+        <!-- for popup game instructions -->
+        <div class="modal">
+          <div class="modal-content">
+            <span class="close">&times;</span>
+            <p><h4>Game Instructions:</h4>1. Enter your bet from 1 to 5 <br> 2. Click the 'DEAL' button <br> 3. Click on the cards you wish to hold <br> 4. Click the 'DEAL' button again! <br><br> Tip! You can hover around the card combination symbol to see which card combination you are closest to! 
+            </p>
+          </div>
+
+        </div>
+
+        <!-- payout info -->
+        <div class="top-half d-flex justify-content-center flex-wrap">
+        <div class="upper-row p-3">
+          <div class="col left-side">
+            <table>
+              <tr class="payout-row">
+                <td>9</td>
+                <td>Royal Flush</td>
+                <td class="payout-column">1x250</td>
+                <td>
+                      <div class="combo-info">
+                        <img
+                          src="Images/CardCombo/Rank-9.jpg"
+                          class="combo-cards"
+                        />
+                      </div>
+                    </td>
+              </tr>
+              <tr class="payout-row">
+                <td>8</td>
+                <td>Straight Flush</td>
+                <td class="payout-column">1x50</td>
+                 <td>
+                      <div class="combo-info">
+                        <img
+                          src="Images/CardCombo/Rank-8.jpg"
+                          class="combo-cards"
+                        />
+                      </div>
+                    </td>
+              </tr>
+              <tr class="payout-row">
+                <td>7</td>
+                <td>Four of a Kind</td>
+                <td class="payout-column">1x25</td>
+                <td>
+                      <div class="combo-info">
+                        <img
+                          src="Images/CardCombo/Rank-7.jpg"
+                          class="combo-cards"
+                        />
+                      </div>
+                    </td>
+              </tr>
+              <tr class="payout-row">
+                <td>6</td>
+                <td>Full House</td>
+                <td class="payout-column">1x9</td>
+                 <td>
+                      <div class="combo-info">
+                        <img
+                          src="Images/CardCombo/Rank-6.jpg"
+                          class="combo-cards"
+                        />
+                      </div>
+                    </td>
+
+              </tr>
+              <tr class="payout-row">
+                <td>5</td>
+                <td>Flush</td>
+                <td class="payout-column">1x6</td>
+                <td>
+                      <div class="combo-info">
+                        <img
+                          src="Images/CardCombo/Rank-5.jpg"
+                          class="combo-cards"
+                        />
+                      </div>
+                    </td>
+
+              </tr>
+              <tr class="payout-row">
+                <td>4</td>
+                <td>Straight</td>
+                <td class="payout-column">1x4</td>
+                 <td>
+                      <div class="combo-info">
+                        <img
+                          src="Images/CardCombo/Rank-4.jpg"
+                          class="combo-cards"
+                        />
+                      </div>
+                    </td>
+
+              </tr>
+              <tr class="payout-row">
+                <td>3</td>
+                <td>Three of a Kind</td>
+                <td class="payout-column">1x3</td>
+                <td>
+                      <div class="combo-info">
+                        <img
+                          src="Images/CardCombo/Rank-3.jpg"
+                          class="combo-cards"
+                        />
+                      </div>
+                    </td>
+              </tr>
+              <tr class="payout-row">
+                <td>2</td>
+                <td>Two Pairs</td>
+                <td class="payout-column">1x2</td>
+
+                    <td>
+                      <div class="combo-info">
+                        <img
+                          src="Images/CardCombo/Rank-2.jpg"
+                          class="combo-cards"
+                        />
+                      </div>
+                    </td>
+              </tr>
+              <tr class="payout-row">
+                <td>1</td>
+                <td>Jacks or better</td>
+                <td class="payout-column">1x1</td>
+                <td>
+                      <div class="combo-info">
+                        <img
+                          src="Images/CardCombo/Rank-1.jpg"
+                          class="combo-cards"
+                        />
+                      </div>
+                    </td>
+              </tr>
+            </table>
+          </div>
+
+          <!-- combo split into 2 columns-->  
+          </div>
+        </div>
+
+
+        <!-- card display -->
+        <div class="output">
+          <div id="cards-display">
+            <div class="card"><div class="hide">Hold</div></div>
+
+            <div class="card"><div class="hide">Hold</div></div>
+
+            <div class="card"><div class="hide">Hold</div></div>
+
+            <div class="card"><div class="hide">Hold</div></div>
+
+            <div class="card"><div class="hide">Hold</div></div>
+          </div>
+        </div>
+
+    <!-- buttons display -->
+  <div class="playing-buttons d-flex py-3">
+    <div class="row border-0 outline-0 bottom-part flex-nowrap justify-content-center">
+      <div class="col col-4">
+         <div class="d-flex play-function py-1" id="bet-function">
+            <button class="change-bet d-flex flex-column align-items-center" id="decrease-bet">-</button>
+            <div class="d-flex flex-column" >
+              <div id="bet-text">Bet</div>
+              <div id="bet-amount" >1</div>
+            </div>
+              <button class="change-bet" id="increase-bet">+</button>
+            </div>
+      </div>
+
+      <div class="col col-4 d-flex justify-content-center ms-3">
+        <div class="deal-card">
+          <button id="deal-btn" value="1">Deal</button>
+        </div>
+      </div>
+
+      <div class="col col-4 ">
+
+
+        <div class="play-function">
+
+          <div class="position-relative" id="total-credit" >
+              Total Credits
+            <div id="credits-value" >100</div>
+            <div class="win-value position-absolute bottom-0 end-0"></div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</div>
+
+  <!-- sound effects/music -->
+    <audio autoplay loop id="autoplay">
+      <source src="Audio/background-music.mp3" type="audio/mpeg">
+    </audio>
+
+    <audio src="Audio/hold-sound.mp3" type="audio/mpeg" id="hold-sound"></audio>
+    <audio id="deal-card" src="Audio/deal-card-sound.mp3" type="audio/mpeg"></audio>
+    </audio>
+    <audio id="win-sound" src="Audio/win-sound.mp3" type="audio/mpeg"></audio>
+    <audio id="lose-sound" src="Audio/lose-sound.mp3" type="audio/mpeg"></audio>
+    <audio id="coin-sound" src="Audio/coin-sound.mp3" type="audio/mpeg"></audio>
+  </body>
+  <script src="script.js"></script>
+</html>