rocketacademy · Nyx92 · Dec 20, 2021 · Dec 20, 2021 · Dec 22, 2021 · Dec 22, 2021
diff --git a/cardsPng/10_of_clubs.png b/cardsPng/10_of_clubs.png
diff --git a/cardsPng/10_of_diamonds.png b/cardsPng/10_of_diamonds.png
diff --git a/cardsPng/10_of_hearts.png b/cardsPng/10_of_hearts.png
diff --git a/cardsPng/10_of_spades.png b/cardsPng/10_of_spades.png
diff --git a/cardsPng/2_of_clubs.png b/cardsPng/2_of_clubs.png
diff --git a/cardsPng/2_of_diamonds.png b/cardsPng/2_of_diamonds.png
diff --git a/cardsPng/2_of_hearts.png b/cardsPng/2_of_hearts.png
diff --git a/cardsPng/2_of_spades.png b/cardsPng/2_of_spades.png
diff --git a/cardsPng/3_of_clubs.png b/cardsPng/3_of_clubs.png
diff --git a/cardsPng/3_of_diamonds.png b/cardsPng/3_of_diamonds.png
diff --git a/cardsPng/3_of_hearts.png b/cardsPng/3_of_hearts.png
diff --git a/cardsPng/3_of_spades.png b/cardsPng/3_of_spades.png
diff --git a/cardsPng/4_of_clubs.png b/cardsPng/4_of_clubs.png
diff --git a/cardsPng/4_of_diamonds.png b/cardsPng/4_of_diamonds.png
diff --git a/cardsPng/4_of_hearts.png b/cardsPng/4_of_hearts.png
diff --git a/cardsPng/4_of_spades.png b/cardsPng/4_of_spades.png
diff --git a/cardsPng/5_of_clubs.png b/cardsPng/5_of_clubs.png
diff --git a/cardsPng/5_of_diamonds.png b/cardsPng/5_of_diamonds.png
diff --git a/cardsPng/5_of_hearts.png b/cardsPng/5_of_hearts.png
diff --git a/cardsPng/5_of_spades.png b/cardsPng/5_of_spades.png
diff --git a/cardsPng/6_of_clubs.png b/cardsPng/6_of_clubs.png
diff --git a/cardsPng/6_of_diamonds.png b/cardsPng/6_of_diamonds.png
diff --git a/cardsPng/6_of_hearts.png b/cardsPng/6_of_hearts.png
diff --git a/cardsPng/6_of_spades.png b/cardsPng/6_of_spades.png
diff --git a/cardsPng/7_of_clubs.png b/cardsPng/7_of_clubs.png
diff --git a/cardsPng/7_of_diamonds.png b/cardsPng/7_of_diamonds.png
diff --git a/cardsPng/7_of_hearts.png b/cardsPng/7_of_hearts.png
diff --git a/cardsPng/7_of_spades.png b/cardsPng/7_of_spades.png
diff --git a/cardsPng/8_of_clubs.png b/cardsPng/8_of_clubs.png
diff --git a/cardsPng/8_of_diamonds.png b/cardsPng/8_of_diamonds.png
diff --git a/cardsPng/8_of_hearts.png b/cardsPng/8_of_hearts.png
diff --git a/cardsPng/8_of_spades.png b/cardsPng/8_of_spades.png
diff --git a/cardsPng/9_of_clubs.png b/cardsPng/9_of_clubs.png
diff --git a/cardsPng/9_of_diamonds.png b/cardsPng/9_of_diamonds.png
diff --git a/cardsPng/9_of_hearts.png b/cardsPng/9_of_hearts.png
diff --git a/cardsPng/9_of_spades.png b/cardsPng/9_of_spades.png
diff --git a/cardsPng/ace_of_clubs.png b/cardsPng/ace_of_clubs.png
diff --git a/cardsPng/ace_of_diamonds.png b/cardsPng/ace_of_diamonds.png
diff --git a/cardsPng/ace_of_hearts.png b/cardsPng/ace_of_hearts.png
diff --git a/cardsPng/ace_of_spades.png b/cardsPng/ace_of_spades.png
diff --git a/cardsPng/back.png b/cardsPng/back.png
diff --git a/cardsPng/jack_of_clubs.png b/cardsPng/jack_of_clubs.png
diff --git a/cardsPng/jack_of_diamonds.png b/cardsPng/jack_of_diamonds.png
diff --git a/cardsPng/jack_of_hearts.png b/cardsPng/jack_of_hearts.png
diff --git a/cardsPng/jack_of_spades.png b/cardsPng/jack_of_spades.png
diff --git a/cardsPng/king_of_clubs.png b/cardsPng/king_of_clubs.png
diff --git a/cardsPng/king_of_diamonds.png b/cardsPng/king_of_diamonds.png
diff --git a/cardsPng/king_of_hearts.png b/cardsPng/king_of_hearts.png
diff --git a/cardsPng/king_of_spades.png b/cardsPng/king_of_spades.png
diff --git a/cardsPng/queen_of_clubs.png b/cardsPng/queen_of_clubs.png
diff --git a/cardsPng/queen_of_diamonds.png b/cardsPng/queen_of_diamonds.png
diff --git a/cardsPng/queen_of_hearts.png b/cardsPng/queen_of_hearts.png
diff --git a/cardsPng/queen_of_spades.png b/cardsPng/queen_of_spades.png
diff --git a/index.html b/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>SWE101_yx</title>
+    <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=Teko:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1 id="header">VIDEO POKER 🚀</h1>
+    <!-- Container which contains all the elements of the game -->
+    <div id="bigGameContainer">
+      <div id="gameContainer" class="parent-1"></div>
+    </div>
+    <div id="msgContainer" class="parent-2">
+      <div id="player-credit"></div>
+      <div id="bet-msg"></div>
+      <div id="player-msg"></div>
+    </div>
+
+    <!-- Import program logic -->
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/script.js b/script.js
diff --git a/styles.css b/styles.css
@@ -0,0 +1,297 @@
+#header {
+  font-family: "cursive";
+  font-size: 80px;
+  color: #fff;
+  text-align: center;
+  -webkit-animation: glow 1s ease-in-out infinite alternate;
+  -moz-animation: glow 1s ease-in-out infinite alternate;
+  animation: glow 1s ease-in-out infinite alternate;
+}
+
+@-webkit-keyframes glow {
+  from {
+    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073,
+      0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
+  }
+  to {
+    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6,
+      0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
+  }
+}
+
+@-webkit-keyframes glow2 {
+  from {
+    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #2300e6,
+      0 0 40px #2300e6, 0 0 50px #2300e6, 0 0 60px #2300e6, 0 0 70px #2300e6;
+  }
+  to {
+    text-shadow: 0 0 20px #fff, 0 0 30px #5f4dff, 0 0 40px #5f4dff,
+      0 0 50px #5f4dff, 0 0 60px #5f4dff, 0 0 70px #5f4dff, 0 0 80px #5f4dff;
+  }
+}
+
+body {
+  background-color: black;
+}
+/* Also given a parent-1 class */
+#gameContainer {
+  background-color: black;
+  height: 860px;
+}
+
+#score-board-background-border {
+  display: flex;
+  width: 60%;
+  height: 385px;
+  justify-content: center;
+  margin: auto;
+  background: linear-gradient(
+    45deg,
+    #ff6600,
+    #00ffff,
+    #ff00ff,
+    #ff0099,
+    #e6fb04,
+    #6e0dd0,
+    #00ff66,
+    #ff3300,
+    #099fff
+  );
+  background-size: 400%;
+  animation: animate 20s linear infinite;
+}
+
+/* Also given a child class */
+#score-board-container {
+  /* display: flex; */
+  padding: 10px 10px;
+  justify-content: center;
+  background-color: black;
+  width: 98%;
+  margin: auto;
+}
+
+.scoreBoard {
+  margin: auto;
+}
+
+.table {
+  text-align: center;
+}
+
+td {
+  padding: 1px;
+  width: 200px;
+}
+
+tr {
+  border: 1px black solid;
+  background-color: black;
+  font-family: "Teko", sans-serif;
+  font-size: 25px;
+  color: #fff;
+  text-align: center;
+  -webkit-animation: glow2 1s ease-in-out infinite alternate;
+  -moz-animation: glow2 1s ease-in-out infinite alternate;
+  animation: glow2 1s ease-in-out infinite alternate;
+}
+
+/* Also given a child class */
+.playerHand {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: black;
+  height: 400px;
+  width: 80%;
+  margin: auto;
+}
+
+.card-pic {
+  padding: 5px 2px;
+  width: 190px;
+  height: 290px;
+}
+
+.inner-square {
+  content: "";
+  padding: 4.5px 3.5px;
+  margin-left: 7px;
+  margin-top: 6px;
+  width: 180px;
+  height: 280px;
+  background: black;
+}
+
+.column-style {
+  background: linear-gradient(
+    45deg,
+    #ff6600,
+    #00ffff,
+    #ff00ff,
+    #ff0099,
+    #e6fb04,
+    #6e0dd0,
+    #00ff66,
+    #ff3300,
+    #099fff
+  );
+  background-size: 400%;
+  animation: animate 500s linear infinite;
+}
+
+.square {
+  margin: 10px;
+  /* background-color: red; */
+  background: linear-gradient(
+    45deg,
+    #e6fb04,
+    #ff6600,
+    #00ff66,
+    #00ffff,
+    #ff00ff,
+    #ff0099,
+    #6e0dd0,
+    #ff3300,
+    #099fff
+  );
+  animation: animate 20s linear infinite;
+  display: inline-block;
+  height: 300px;
+  width: 200px;
+  background-size: 400%;
+  text-align: center;
+}
+
+@keyframes animate {
+  0% {
+    background-position: 0 0;
+  }
+  50% {
+    background-position: 400% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
+
+.clickedContainer {
+  margin: 10px;
+  background: white;
+  display: inline-block;
+  height: 300px;
+  width: 200px;
+  text-align: center;
+}
+
+.card-pic {
+  padding: 5px 2px;
+  width: 190px;
+  height: 290px;
+}
+
+#button-container {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  background-color: black;
+  height: 100px;
+  width: 80%;
+  margin: auto;
+  font-family: "Teko", sans-serif;
+}
+
+#msgContainer {
+  background-color: black;
+  height: 300px;
+  text-align: center;
+}
+
+/* #deal-button,
+#bet-one-button,
+#bet-max-button {
+  font-family: "Teko", sans-serif;
+  padding: 15px 30px;
+  color: #2196f3;
+  letter-spacing: 4px;
+  text-decoration: none;
+  font-size: 24px;
+  overflow: hidden;
+  transition: 0.2s;
+}
+
+#deal-button:hover,
+#bet-one-button:hover,
+#bet-max-button:hover {
+  color: #255784;
+  background: #2196f3;
+  box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3, 0 0 80px #2196f3;
+  transition-delay: 1s;
+} */
+
+#deal-button,
+#bet-one-button,
+#bet-max-button {
+  font-family: "Teko", sans-serif;
+  padding: 15px 30px;
+  background-color: black;
+  color: #fff;
+  letter-spacing: 4px;
+  text-decoration: none;
+  font-size: 24px;
+  -webkit-animation: glow 1s ease-in-out infinite alternate;
+  -moz-animation: glow 1s ease-in-out infinite alternate;
+  animation: glow 1s ease-in-out infinite alternate;
+}
+
+#deal-button:hover,
+#bet-one-button:hover,
+#bet-max-button:hover {
+  background: black;
+  box-shadow: 0 0 30px #ff4da6;
+}
+
+#player-credit {
+  font-family: "Teko", sans-serif;
+  padding: 20px;
+  margin-top: 20px;
+  margin-right: 30px;
+  color: #fff;
+  font-size: 35px;
+  -webkit-animation: glow3 1s ease-in-out infinite alternate;
+  -moz-animation: glow3 1s ease-in-out infinite alternate;
+  animation: glow3 1s ease-in-out infinite alternate;
+}
+
+#bet-msg {
+  font-family: "Teko", sans-serif;
+  padding: 20px;
+  margin-right: 30px;
+  color: #fff;
+  font-size: 35px;
+  -webkit-animation: glow3 1s ease-in-out infinite alternate;
+  -moz-animation: glow3 1s ease-in-out infinite alternate;
+  animation: glow3 1s ease-in-out infinite alternate;
+}
+
+#player-msg {
+  font-family: "Teko", sans-serif;
+  padding: 20px;
+  margin-right: 30px;
+  color: #fff;
+  font-size: 35px;
+  -webkit-animation: glow3 1s ease-in-out infinite alternate;
+  -moz-animation: glow3 1s ease-in-out infinite alternate;
+  animation: glow3 1s ease-in-out infinite alternate;
+}
+
+@-webkit-keyframes glow3 {
+  from {
+    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #00e613,
+      0 0 40px #00e613, 0 0 50px #00e613, 0 0 60px #00e613, 0 0 70px #00e613;
+  }
+  to {
+    text-shadow: 0 0 20px #fff, 0 0 30px #5cff4d, 0 0 40px #5cff4d,
+      0 0 50px #5cff4d, 0 0 60px #5cff4d, 0 0 70px #5cff4d, 0 0 80px #5cff4d;
+  }
+}