rocketacademy · gracethedragon · Jan 24, 2022 · Jan 24, 2022 · Jan 25, 2022 · Jan 25, 2022
diff --git a/click.mp3 b/click.mp3
diff --git a/index.html b/index.html
@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<head>
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    charset="UTF-8"
+  />
+  <!-- Bootstrap CSS -->
+  <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="style.css" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Nanum+Gothic:wght@700&family=Press+Start+2P&family=VT323&display=swap"
+    rel="stylesheet"
+  />
+  <link
+    rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
+  />
+</head>
+<body>
+  <audio
+    id="clickAudio"
+    src="click.mp3"
+    type="audio/mpeg"
+    preload="auto"
+    autobuffer
+    controls
+  ></audio>
+  <audio
+    id="winSound"
+    src="winsound.mp3"
+    type="audio/mpeg"
+    preload="auto"
+    autobuffer
+    controls
+  ></audio>
+  <audio
+    id="loseSound"
+    src="losesound.mp3"
+    type="audio/mpeg"
+    preload="auto"
+    autobuffer
+    controls
+  ></audio>
+
+  <div class="container my-3">
+    <div class="row justify-content-center">
+      <header class="lh-1 linear-wipe">VIDEO POKER</header>
+    </div>
+    <div class="row justify-content-center">
+      <div class="px-1" id="scoretable"></div>
+    </div>
+    <div class="row justify-content-center">
+      <div id="results"></div>
+    </div>
+    <div
+      class="d-flex row justify-content-center flex-wrap"
+      id="card-container"
+    >
+      <div class="column col-1 col-sm-4 card">
+        <div class="cardfront">
+          <img src="pokercardback.svg" alt="back of poker card" />
+        </div>
+        <div class="cardback">
+          <div class="hold"></div>
+          <div class="name"></div>
+          <div class="suit"></div>
+          <div class="body"></div>
+        </div>
+      </div>
+
+      <div class="column col-1 card col-sm-4">
+        <div class="cardfront">
+          <img src="pokercardback.svg" alt="back of poker card" />
+        </div>
+        <div class="cardback">
+          <div class="hold"></div>
+          <div class="name"></div>
+          <div class="suit"></div>
+          <div class="body"></div>
+        </div>
+      </div>
+
+      <div class="column col-1 card col-sm-4">
+        <div class="cardfront">
+          <img src="pokercardback.svg" alt="back of poker card" />
+        </div>
+        <div class="cardback">
+          <div class="hold"></div>
+          <div class="name"></div>
+          <div class="suit"></div>
+          <div class="body"></div>
+        </div>
+      </div>
+
+      <div class="column col-1 card col-sm-4">
+        <div class="cardfront">
+          <img src="pokercardback.svg" alt="back of poker card" />
+        </div>
+        <div class="cardback">
+          <div class="hold"></div>
+          <div class="name"></div>
+          <div class="suit"></div>
+          <div class="body"></div>
+        </div>
+      </div>
+
+      <div class="column col-1 card col-sm-4">
+        <div class="cardfront">
+          <img src="pokercardback.svg" alt="back of poker card" />
+        </div>
+        <div class="cardback">
+          <div class="hold"></div>
+          <div class="name"></div>
+          <div class="suit"></div>
+          <div class="body"></div>
+        </div>
+      </div>
+    </div>
+    <div class="row justify-content-center">
+      <div id="numbers">
+        <div id="winrate">Wins:</div>
+        <div id="points"></div>
+      </div>
+    </div>
+
+    <div class="row justify-content-evenly text-center" id="buttons">
+      <div class="column col-4">
+        <button id="bet"></button>
+      </div>
+      <div class="column col-4">
+        <button id="reset">Reset</button>
+      </div>
+      <div class="column col-4">
+        <button id="deal"></button>
+      </div>
+    </div>
+  </div>
+
+  <script src="scoretable.js"></script>
+  <script src="script.js"></script>
+
+  <!-- <script src="test.js"></script> -->
+</body>
diff --git a/losesound.mp3 b/losesound.mp3
diff --git a/pokercardback.svg b/pokercardback.svg
diff --git a/scoretable.js b/scoretable.js
@@ -0,0 +1,80 @@
+let pointsList = [
+  {hand:'royal flush', points: 250},
+  {hand: 'straight flush', points: 50},
+  {hand: 'four of a kind', points: 25},
+  {hand: 'fullhouse', points: 9},
+  {hand: 'flush', points: 6},
+  {hand: 'straight', points: 4},
+  {hand: 'three of a kind', points: 3},
+  {hand: 'two pair', points: 2},
+  {hand: 'jacks or better', points: 1},
+  {hand: 'lose', points:0}]
+
+let bet = [1,2,3,4,5]
+let heading = ["bet amount", "1", "2", "3", "4 "," 5"]
+let betAmt=1;
+let count = 0;
+
+const betButton = document.getElementById("bet")
+betButton.innerText = `Bet: ${betAmt}`
+
+const scoreTable = document.getElementById("scoretable")
+/**
+ * Function to create the scoretable
+ */
+const createTable = ()=>{
+for(let j = 0; j <= bet.length; j +=1){
+  const column = document.createElement('div')
+  for (let i = 1; i <= pointsList.length; i +=1){
+    const row = document.createElement('p')
+
+    if ((i-1)===0) {
+      row.innerText = heading[j]
+    } 
+    else if (j === 0) {
+      row.innerText = pointsList[i-2].hand
+    } else {
+      row.innerText = pointsList[i-2].points * (j)
+    }
+    column.append(row)
+
+  }
+  scoreTable.append(column)
+}
+}
+
+/**
+ * A function to highligh the relevant column in the score table based on the bet input
+ * @param {number} bet 
+ */
+const highlightScore =(betAmt)=>{
+  Array.from(document.querySelectorAll('#scoretable div')).forEach(e=>e.removeAttribute('id'))
+
+  if (betAmt <=5){
+    document.querySelector('#scoretable div:nth-child('+ (betAmt+1) +')').id = "highlight"
+  } 
+
+  betButton.innerText = `Bet: ${betAmt}` 
+}
+
+
+
+
+/**
+ * A function to check if the bet number < points available.
+ * @param {number} betAmt 
+ * @param {number} pointsNum 
+ * if bet exceeds, player cannot proceed until the bet is changed. If bet does not exceed, player is prompted to deal and start.
+ */
+
+const checkBet =(betAmt, pointsNum) => {
+
+  if(betAmt > pointsNum) {
+  output("bet exceeds available amount.")
+  dealButton.disabled = true
+  } else if(gameEnd === false ){
+  output ("press deal to start.")
+  console.log("checkbet")
+  dealButton.disabled = false
+  }
+}