- update deploy script

- random +x stuff because I switched directories
- change heart stones to use inline svgs

public/icons/heart.svg

@@ -1,3 +0,0 @@
-<svg data-slot="icon" aria-hidden="true" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" stroke-linecap="round" stroke-linejoin="round"></path>
-</svg>

public/index.html

@@ -47,7 +47,7 @@
         <div id="button-box"></div>
       </div>
 
-      <script src="scripts/display-ws-connection.js"></script>
+      <script src="scripts/make-ws-connection.js"></script>
       <script src="scripts/send-ws-messages.js"></script>
       <script src="scripts/profile-editor.js"></script>
       <script src="scripts/copy-game-link.js"></script>

public/scripts/make-ws-connection.js

@@ -8,7 +8,13 @@ const gameId = gameIdMeta.content;
 const playerId = playerIdMeta.content;
 
 // Dynamically construct WebSocket URL
-const wsUrl = `ws://${window.location.host}/ws?gameId=${gameId}&playerId=${playerId}`;
+let wsProtocol;
+if (window.location.protocol === 'https:') {
+  wsProtocol = 'wss';
+} else {
+  wsProtocol = 'ws';
+}
+const wsUrl = `${wsProtocol}://${window.location.host}/ws?gameId=${gameId}&playerId=${playerId}`;
 
 // Get the game container element
 const gameContainer = document.getElementById('ws-container');

public/style.css

@@ -149,48 +149,20 @@ body {
   width: 24px;
   height: 24px;
   margin: auto;
-  overflow: hidden;
 }
 
-.stone-black-heart::before,
-.stone-black-heart::after,
-.stone-white-heart::before,
-.stone-white-heart::after {
-  content: '';
-  position: absolute;
-  width: 12px;
-  height: 20px;
-  border-radius: 50% 50% 0 0;
-  border: 1px solid var(--color-neutral-900);
-  box-sizing: border-box;
-  transform: rotate(-45deg);
-  transform-origin: 0 100%;
-  top: 0;
-  left: 12px;
+.stone-black-heart {
+  fill: var(--color-primary);
+  stroke: var(--color-neutral-900);
 }
 
-.last-move.stone-white-heart::after,
-.last-move.stone-black-heart::after,
-.last-move.stone-white-heart::before,
-.last-move.stone-black-heart::before {
-  border: 2px solid var(--color-info) !important;
+.stone-white-heart {
+  stroke: var(--color-neutral-900);
+  fill: var(--color-on-primary);
 }
 
-.stone-black-heart::after,
-.stone-white-heart::after {
-  left: 0;
-  transform: rotate(45deg);
-  transform-origin: 100% 100%;
-}
-
-.stone-black-heart::before,
-.stone-black-heart::after {
-  background-color: var(--color-primary-light);
-}
-
-.stone-white-heart::before,
-.stone-white-heart::after {
-  background-color: var(--color-on-primary);
+.last-move {
+  stroke: var(--color-info) !important;
 }
 
 .player-name {