Prepping for merge into main

app/package-lock.json

@@ -12122,6 +12122,7 @@
       "resolved": "https://registry.npmjs.org/pixel-borders/-/pixel-borders-1.1.4.tgz",
       "integrity": "sha512-jBX9MMRsCeYNl1sHnXnAgtBD5hLAMa59/MDvVBZUoeHtsF6t97goigzIPQHvssh8xsQ5w+vF7hqabutbpb0zxA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=4"
       }

app/src/components/Army.tsx

@@ -103,8 +103,7 @@ const Unit = ({
   return (
     <div
       onClick={() => addUnit(unitType)}
-      className={`${styles.armyUnit} ${
+      className={`${styles.armyUnit} ${canPurchase ? "" : styles.isUnavailable
-        canPurchase ? "" : styles.isUnavailable
         }`}
     >
       <div

app/src/components/PixelatedQuote.tsx

@@ -1,6 +1,5 @@
-"use client";
-
 import { useState, useEffect, useRef } from "react";
+import styles from "../styles/Army.module.css"
 
 const tavernerQuotes = [
   "There is always Moloch to be slain here...",
@@ -31,7 +30,7 @@ function PixelatedQuote() {
       setTimeout(() => {
         setIsShown(false);
       }, 4000);
-    }, 15000);
+    }, 6000);
 
     // Clean up the interval on component unmount
     return () => {
@@ -42,29 +41,11 @@ function PixelatedQuote() {
     };
   }, []);
 
-  // const currentQuote = useMemo(
-  //   () => tavernerQuotes[Math.floor(Math.random() * tavernerQuotes.length)],
-  //   []
-  // );
-
   return (
     <div>
       <div
-        className="pixel-borders pixel-borders--2"
+        className={`pixel-borders pixel-borders--2 pixelFont ${styles.pixelQuote}`}
-        style={{
+        style={{ opacity: isShown ? 1 : 0 /* Control visibility with opacity */ }}
-          minWidth: "150px",
-          color: "black",
-          fontSize: ".5rem",
-          position: "absolute",
-          bottom: "5.5rem",
-          left: "-20px",
-          right: "0px",
-          padding: "0.7rem",
-          lineHeight: "0.7rem",
-          opacity: isShown ? 1 : 0, // Control visibility with opacity
-          transition: "opacity 1s ease-in-out",
-          boxShadow: "0px 5px 10px 5px rgba(0,0,0,0.4)",
-        }}
       >
         {currentQuote}
       </div>

app/src/pages/_app.tsx

@@ -6,12 +6,15 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { WagmiProvider } from "wagmi";
 import { RainbowKitProvider, midnightTheme } from "@rainbow-me/rainbowkit";
 import { config } from "../wagmi";
-import { Texturina } from "next/font/google";
+import { Press_Start_2P, Texturina } from "next/font/google";
 import PlayerProvider from "../providers/PlayerProvider";
 
 const client = new QueryClient();
 const font = Texturina({ weight: ["400"], subsets: ["latin"] });
 
+// Tavern keeper quote
+const fontPixel = Press_Start_2P({ weight: ["400"], subsets: ["latin"] });
+
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <WagmiProvider config={config}>
@@ -34,6 +37,9 @@ function MyApp({ Component, pageProps }: AppProps) {
             .title {
               font-family: ${font.style.fontFamily};
             }
+            .pixelFont {
+               font-family: ${fontPixel.style.fontFamily};
+            }
           `}</style>
           <PlayerProvider>
             <Component {...pageProps} />

app/src/styles/Army.module.css

@@ -199,6 +199,20 @@
   bottom: 160px;
   width: 90px;
   height: 90px;
+
+  .pixelQuote {
+    min-width: 150px;
+    color: black;
+    font-size: 0.7rem;
+    position: absolute;
+    bottom: 5.5rem;
+    left: -20px;
+    right: 0;
+    padding: 0.7rem;
+    line-height: 0.8rem;
+    transition: opacity 1s ease-in-out;
+    box-shadow: 0px 5px 10px 5px rgba(0, 0, 0, 0.4);
+  }
 }
 .static.moloch_denier {
   background-image: url("/roles/scribe2.png");

app/src/styles/globals.css

@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
-
 :root {
   --bg-color: #1a1a1a;
   --text-color: #ffffff;