rocketacademy · jasonchiahs · Dec 18, 2023
diff --git a/Blackjack-table-top-view.jpg b/Blackjack-table-top-view.jpg
diff --git a/Blackjack.js b/Blackjack.js
diff --git a/BlackjackStyle.css b/BlackjackStyle.css
@@ -0,0 +1,253 @@
+* {
+  margin: 0;
+  padding: 0;
+  /* box-sizing: border-box; */
+}
+body {
+  background: #00763a;
+  text-align: center;
+}
+
+#background {
+  background: transparent url(Blackjack-table-top-view.jpg) 0 0 no-repeat;
+  border-radius: 5px;
+  color: #000000;
+  background-position: center;
+  height: 100vh;
+  width: 100%;
+  position: relative;
+  font: 14px/17px Helvetica, arial, verdana, sans-serif;
+}
+
+#action {
+  position: absolute;
+  bottom: 0;
+  left: 13%;
+  text-align: center;
+  padding: 1 rem;
+  margin-bottom: 1rem;
+  /* background-color: #000000; */
+}
+
+/* Cards */
+#dealer-cards img {
+  height: 175px;
+  width: 125px;
+  margin-bottom: 30px;
+  margin-top: 50px;
+  background-color: transparent;
+  animation: fadeInAnimation ease-in 1s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+
+#player-cards img {
+  height: 175px;
+  width: 125px;
+  margin-top: 30px;
+  animation: fadeInAnimation ease 1s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+
+#deck {
+  position: absolute;
+  height: 175px;
+  width: 125x;
+  bottom: 50%;
+  right: 13%;
+  animation: fadeInAnimation ease 3s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+
+@keyframes fadeInAnimation {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+/* Money */
+#money {
+  border: 1px solid #ffc926;
+  background: #333;
+  content: "";
+  opacity: 1;
+  text-align: right;
+  border-radius: 10px;
+  height: 70px;
+  position: absolute;
+  left: 1%;
+  top: 1%;
+  width: 300px;
+  padding: 10px;
+  color: #fff;
+  font: 700 18px/20px Helvetica, Arial, Verdana, Sans-serif;
+  justify-content: space-between;
+  display: inline-block;
+  margin-right: 30px;
+}
+
+#Wager-text {
+  width: 175px;
+}
+.tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black;
+}
+
+.tooltip .tooltiptext {
+  visibility: hidden;
+  width: 250px;
+  background-color: black;
+  color: #fff;
+  text-align: left;
+  border-radius: 6px;
+  padding: 5px 0;
+  /* Position the tooltip */
+  position: absolute;
+  z-index: 1;
+  top: -5px;
+  left: 105%;
+}
+
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+}
+
+#output-div {
+  color: #000000;
+  position: absolute;
+  margin: 20px auto;
+  border-radius: 10px;
+  padding: 10px;
+  top: 26%;
+  left: 2%;
+  width: 18%;
+  height: 20%;
+  font-family: "Comic Sans MS", "Comic Sans", "cursive";
+  font-size: medium;
+}
+
+#dpBoard {
+  position: absolute;
+  bottom: 18%;
+  left: 1%;
+  max-width: 50%;
+  max-height: 65%;
+}
+
+/* Button */
+.btn,
+.btn:after {
+  width: 50px;
+  height: 76px;
+  line-height: 78px;
+  font-size: 20px;
+  font-family: "Bebas Neue", sans-serif;
+  background: linear-gradient(45deg, transparent 5%, #ff013c 5%);
+  border: 0;
+  color: #fff;
+  letter-spacing: 3px;
+  box-shadow: 6px 0px 0px #00e6f6;
+  outline: transparent;
+  position: relative;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+}
+
+.btn:after {
+  --slice-0: inset(50% 50% 50% 50%);
+  --slice-1: inset(80% -6px 0 0);
+  --slice-2: inset(50% -6px 30% 0);
+  --slice-3: inset(10% -6px 85% 0);
+  --slice-4: inset(40% -6px 43% 0);
+  --slice-5: inset(80% -6px 5% 0);
+
+  content: "BLACKJACK";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(
+    45deg,
+    transparent 3%,
+    #00e6f6 3%,
+    #00e6f6 5%,
+    #ff013c 5%
+  );
+  text-shadow: -3px -3px 0px #f8f005, 3px 3px 0px #00e6f6;
+  clip-path: var(--slice-0);
+}
+
+.btn:hover:after {
+  animation: 1s glitch;
+  animation-timing-function: steps(2, end);
+}
+
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+@keyframes glitch {
+  0% {
+    clip-path: var(--slice-1);
+    transform: translate(-20px, -10px);
+  }
+  10% {
+    clip-path: var(--slice-3);
+    transform: translate(10px, 10px);
+  }
+  20% {
+    clip-path: var(--slice-1);
+    transform: translate(-10px, 10px);
+  }
+  30% {
+    clip-path: var(--slice-3);
+    transform: translate(0px, 5px);
+  }
+  40% {
+    clip-path: var(--slice-2);
+    transform: translate(-5px, 0px);
+  }
+  50% {
+    clip-path: var(--slice-3);
+    transform: translate(5px, 0px);
+  }
+  60% {
+    clip-path: var(--slice-4);
+    transform: translate(5px, 10px);
+  }
+  70% {
+    clip-path: var(--slice-2);
+    transform: translate(-10px, 10px);
+  }
+  80% {
+    clip-path: var(--slice-5);
+    transform: translate(20px, -10px);
+  }
+  90% {
+    clip-path: var(--slice-1);
+    transform: translate(-10px, 0px);
+  }
+  100% {
+    clip-path: var(--slice-1);
+    transform: translate(0);
+  }
+}
+
+@media (min-width: 768px) {
+  .btn,
+  .btn:after {
+    width: 180px;
+    height: 86px;
+    line-height: 88px;
+  }
+}
diff --git a/Cards/10-C.png b/Cards/10-C.png
diff --git a/Cards/10-D.png b/Cards/10-D.png
diff --git a/Cards/10-H.png b/Cards/10-H.png
diff --git a/Cards/10-S.png b/Cards/10-S.png
diff --git a/Cards/2-C.png b/Cards/2-C.png
diff --git a/Cards/2-D.png b/Cards/2-D.png
diff --git a/Cards/2-H.png b/Cards/2-H.png
diff --git a/Cards/2-S.png b/Cards/2-S.png
diff --git a/Cards/3-C.png b/Cards/3-C.png
diff --git a/Cards/3-D.png b/Cards/3-D.png
diff --git a/Cards/3-H.png b/Cards/3-H.png
diff --git a/Cards/3-S.png b/Cards/3-S.png
diff --git a/Cards/4-C.png b/Cards/4-C.png
diff --git a/Cards/4-D.png b/Cards/4-D.png
diff --git a/Cards/4-H.png b/Cards/4-H.png
diff --git a/Cards/4-S.png b/Cards/4-S.png
diff --git a/Cards/5-C.png b/Cards/5-C.png
diff --git a/Cards/5-D.png b/Cards/5-D.png
diff --git a/Cards/5-H.png b/Cards/5-H.png
diff --git a/Cards/5-S.png b/Cards/5-S.png
diff --git a/Cards/6-C.png b/Cards/6-C.png
diff --git a/Cards/6-D.png b/Cards/6-D.png
diff --git a/Cards/6-H.png b/Cards/6-H.png
diff --git a/Cards/6-S.png b/Cards/6-S.png
diff --git a/Cards/7-C.png b/Cards/7-C.png
diff --git a/Cards/7-D.png b/Cards/7-D.png
diff --git a/Cards/7-H.png b/Cards/7-H.png
diff --git a/Cards/7-S.png b/Cards/7-S.png
diff --git a/Cards/8-C.png b/Cards/8-C.png
diff --git a/Cards/8-D.png b/Cards/8-D.png
diff --git a/Cards/8-H.png b/Cards/8-H.png
diff --git a/Cards/8-S.png b/Cards/8-S.png
diff --git a/Cards/9-C.png b/Cards/9-C.png
diff --git a/Cards/9-D.png b/Cards/9-D.png
diff --git a/Cards/9-H.png b/Cards/9-H.png
diff --git a/Cards/9-S.png b/Cards/9-S.png
diff --git a/Cards/A-C.png b/Cards/A-C.png
diff --git a/Cards/A-D.png b/Cards/A-D.png
diff --git a/Cards/A-H.png b/Cards/A-H.png
diff --git a/Cards/A-S.png b/Cards/A-S.png
diff --git a/Cards/BACK.png b/Cards/BACK.png
diff --git a/Cards/J-B.png b/Cards/J-B.png
diff --git a/Cards/J-C.png b/Cards/J-C.png
diff --git a/Cards/J-D.png b/Cards/J-D.png
diff --git a/Cards/J-H.png b/Cards/J-H.png
diff --git a/Cards/J-R.png b/Cards/J-R.png
diff --git a/Cards/J-S.png b/Cards/J-S.png
diff --git a/Cards/K-C.png b/Cards/K-C.png
diff --git a/Cards/K-D.png b/Cards/K-D.png
diff --git a/Cards/K-H.png b/Cards/K-H.png
diff --git a/Cards/K-S.png b/Cards/K-S.png
diff --git a/Cards/Q-C.png b/Cards/Q-C.png
diff --git a/Cards/Q-D.png b/Cards/Q-D.png
diff --git a/Cards/Q-H.png b/Cards/Q-H.png
diff --git a/Cards/Q-S.png b/Cards/Q-S.png
diff --git a/Clipboard.jpg b/Clipboard.jpg
diff --git a/Riffle_shuffle.gif b/Riffle_shuffle.gif