Typo fix: a border-color is not a color

Well, it is, but not in the way it was specified here.
Rotate galaxy when game is won
2022-11-25 11:55:40 +05:30 · 2022-11-10 00:03:24 +05:30 · 2022-11-09 23:23:00 +05:30 · 2022-11-09 22:25:34 +05:30 · 2022-11-09 22:25:11 +05:30
1 changed files with 88 additions and 5 deletions
--- a/index.htm
+++ b/index.htm
@ -79,6 +79,19 @@
        opacity: 0.6;
      }

+      .galaxy {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        transform-origin: center;
+      }
+
+      .galaxy.game-over {
+        animation: orbit 10s linear infinite;
+      }
+
      .star {
        position: absolute;
        left: calc(50vw - var(--star-size) / 2);
@ -117,6 +130,10 @@
        transform: rotate(45deg);
      }

+      .trick .planet {
+        animation: slide-from-above 1s;
+      }
+
      .target {
        font-family: serif;
        font-size: 1.2rem;
@ -143,6 +160,25 @@
        box-shadow: inset calc(var(--bubble-size) / 64) calc(var(--bubble-size) / 64) calc(var(--bubble-size) / 8) var(--color-bg);
      }

+      .planet.pulsar:before {
+        content: '';
+        display: block;
+        height: var(--bubble-size);
+        width: calc(var(--bubble-size) * 0.04);
+        background-color: white;
+        position: absolute;
+        left: calc(var(--bubble-size) * (0.5 - 0.02));
+        bottom: 0;
+        border-radius: 1em;
+        transform: rotate(45deg);
+        box-shadow: 0 0 var(--bubble-size) var(--color-T);
+      }
+
+      .planet.pulsar:hover:before {
+        transition: transform 0.5s;
+        transform: rotate(25deg);
+      }
+
      .planet.glow {
        filter: drop-shadow(0.1em 0.1em 2em var(--color-shadow));
      }
@ -192,7 +228,7 @@

      .notification > div.success {
        color: var(--color-success);
-        border-color: color: var(--color-success);
+        border-color: var(--color-success);
      }

      .notification > div.failure {
@ -222,6 +258,33 @@
          opacity: 1;
        }
      }
+
+      @keyframes slide-from-above {
+        0% {
+          transform: translateY(calc(0px - (var(--bubble-max) / 6)));
+        }
+        100% {
+          transform: translateY(0px);
+        }
+      }
+
+      @keyframes orbit {
+        0% {
+          transform: rotate(0deg);
+        }
+        25% {
+          transform: rotate(90deg);
+        }
+        50% {
+          transform: rotate(180deg);
+        }
+        75% {
+          transform: rotate(270deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/reefjs@12/dist/reef.min.js"></script>
    <script src="cards.browser.js"></script>
@ -508,10 +571,19 @@
            if (wins.every((v,i) =>
              data.target[i] == v))
            {
+              document.getElementById('galaxy')
+                .classList
+                .add('game-over')
              data.notification = {
                class: 'success',
                message: 'You won! (Start next game)',
-                callback: nextGame,
+                callback: () => {
+                  document.getElementById('galaxy')
+                    .classList
+                    .remove('game-over')
+
+                  nextGame()
+                },
              }
            } else {
              data.notification = {
@ -699,6 +771,7 @@
          planet.push(`<div class="planet`)
          if (!!options.glow) planet.push(` glow`)
          if (!!options.eclipsed) planet.push(` eclipsed`)
+          if (suit == 'T') planet.push(' pulsar') // trumps are pulsars
          planet.push(`"`)

          // Styles
@ -814,9 +887,19 @@
              if (currentTrick.length == 0) {

                // First card? We should've won the last trick
-                let lastWon = (data.tricks
-                  .getWinningCard(data.tricks.length) // it's 1-indexed
-                  .player)
+                let lastWon
+
+                // We need to do some error handling because getWinningCard
+                // is a bit shakily coded and throws an error when it runs
+                // out of tricks to analyse
+                try {
+                  lastWon = (data.tricks
+                    .getWinningCard(data.tricks.length) // it's 1-indexed
+                    .player)
+                } catch(e) {
+                  console.warn(`Hey! That "${e}" error from getWinningCard happened again!`)
+                  lastWon = -1
+                }

                if (lastWon != starNum) {
Author	SHA1	Message	Date
Badri	2d74667b02	Typo fix: a border-color is not a color Well, it is, but not in the way it was specified here.	2022-11-25 11:55:40 +05:30
Badri	3ba2a8ade3	Rotate galaxy when game is won	2022-11-10 00:03:24 +05:30
Badri	92a5cf50be	Style pulsars (trumps)	2022-11-09 23:23:00 +05:30
Badri	471b7c2c39	Handle getWinningCard() error during backspace The error actually takes place in the renderHand function, but gets triggerred during backspace. Maybe it's some kind of race condition? Or it could just be that the tricks are being removed in a way that renderHand didn't account for. Either way, we're catching it and moving on with life because a possibly incorrect highlight is better than not being able to play at all (and is anyway getting corrected).	2022-11-09 22:25:34 +05:30
Badri	32892e858a	Animate planet appearance on trick	2022-11-09 22:25:11 +05:30