Update ui

readme.MD

@@ -0,0 +1,3 @@
+# Build and deploy
+- `PUBLIC_URL="bingo" npm run build` to host in the /build subdirectory
+- zip build directory, upload to server, to serve at /build

src/App.css

@@ -62,9 +62,19 @@ div > div.begone {
 }
 @keyframes disappear {
   0% {
+    filter: saturate(1) opacity(1);
     transform: scale(1) rotate(0deg);
   }
-  100% {
+  74% {
+    filter: saturate(1) opacity(1);
     transform: scale(0) rotate(720deg);
   }
+  75% {
+    filter: saturate(0) opacity(.1);
+    transform: scale(0) rotate(720deg);
+  }
+  100% {
+    filter: saturate(0) opacity(.1);
+    transform: scale(1) rotate(720deg);
+  }
 }

src/App.tsx

@@ -76,7 +76,14 @@ const App: React.FC<{}> = () => {
       <div className="bingo-board">
       {Array.from(alphabet).map((e, index) => 
           <div key={index} >
-            <div className={ticked[index] ? "begone": undefined} onClick={() => highlight(index)} onContextMenu={(e) => {e.preventDefault(); toggleField(index);}}>
+            <div className={ticked[index] ? "begone": undefined} onClick={() => {
+              // fuck IOS not sending onContextMenu events
+              if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
+                toggleField(index);
+              } else {
+                highlight(index);
+              }
+            }} onContextMenu={(e) => {e.preventDefault(); toggleField(index);}}>
               <span>{e}</span>
             </div>
           </div>