2024-10-31 22:54:53 +00:00
12 changed files with 397 additions and 247 deletions
--- a/app/src/components/Army.tsx
+++ b/app/src/components/Army.tsx
@ -80,7 +80,7 @@ const unitAvailableToDiscoverAt: Record<UnitType, bigint> = {
 };

 interface UnitProps {
-  addUnit: (unitType: UnitType) => void;
+  addUnit: (unitType: UnitType, amount?: number) => void;
  unitType: UnitType;
  canPurchase: boolean;
  isShrouded: boolean;
@ -92,18 +92,19 @@ const Unit = ({
  unitType,
  canPurchase,
  isShrouded,
-  n_units,
+  n_units: unitLevel,
 }: UnitProps) => {
  const [unitPrice, unitProfit] = useMemo(() => {
    return [
-      toReadable(calculateUnitPrice(unitType, n_units, 1)),
-      toReadable(calculateProfitPerSecond(unitType, n_units)),
+      toReadable(calculateUnitPrice(unitType, unitLevel, 1)),
+      toReadable(calculateProfitPerSecond(unitType, unitLevel)),
    ];
-  }, [n_units, unitType]);
+  }, [unitLevel, unitType]);
  return (
    <div
-      onClick={() => addUnit(unitType)}
-      className={`${styles.armyUnit} ${canPurchase ? "" : styles.isUnavailable
+      onClick={() => addUnit(unitType, 10)}
+      className={`${styles.armyUnit} ${
+        canPurchase ? "" : styles.isUnavailable
      }`}
    >
      <div
@ -122,12 +123,12 @@ const Unit = ({
          {unitPrice} <small>GELD</small>
        </span>
      )}
-      {n_units > 0 ? (
+      {unitLevel > 0 ? (
        <span className={`${styles.unitSupply} ${styles.uiElement}`}>
-          {n_units}
+          {`lvl ${unitLevel}`}
        </span>
      ) : null}
-      {n_units > 0 ? (
+      {unitLevel > 0 ? (
        <span className={`${styles.unitProfit} ${styles.uiElement}`}>
          {unitProfit} <small>per sec</small>
        </span>
--- a/app/src/components/Counter.tsx
+++ b/app/src/components/Counter.tsx
@ -16,26 +16,27 @@ export const calculateBalance = (balance: bigint, perSecond: bigint, lastRaidedA
 export const toReadable = (rawValue: bigint) => {
  const value = rawValue / BigInt(10000);
  const suffixes = [
-    { value: BigInt('1000'), suffix: 'thousand' },
-    { value: BigInt('1000000'), suffix: 'million' },
-    { value: BigInt('1000000000'), suffix: 'billion' },
-    { value: BigInt('1000000000000'), suffix: 'trillion' },
-    { value: BigInt('1000000000000000'), suffix: 'quadrillion' },
-    { value: BigInt('1000000000000000000'), suffix: 'quintillion' },
-    { value: BigInt('1000000000000000000000'), suffix: 'sextillion' },
-    { value: BigInt('1000000000000000000000000'), suffix: 'septillion' },
-    { value: BigInt('1000000000000000000000000000'), suffix: 'octillion' },
-    { value: BigInt('1000000000000000000000000000000'), suffix: 'nonillion' },
-    { value: BigInt('1000000000000000000000000000000000'), suffix: 'decillion' },
-    { value: BigInt('1000000000000000000000000000000000000'), suffix: 'undecillion' },
-    { value: BigInt('1000000000000000000000000000000000000000'), suffix: 'duodecillion' },
-    { value: BigInt('1000000000000000000000000000000000000000000'), suffix: 'tredecillion' },
-    { value: BigInt('1000000000000000000000000000000000000000000000'), suffix: 'quattuordecillion' },
-    { value: BigInt('1000000000000000000000000000000000000000000000000'), suffix: 'quindecillion' },
-    { value: BigInt('1000000000000000000000000000000000000000000000000000'), suffix: 'sexdecillion' },
-    { value: BigInt('1000000000000000000000000000000000000000000000000000000'), suffix: 'septendecillion' },
+    { value: BigInt('1000'), suffix: 'k' },         // Thousand
+    { value: BigInt('1000000'), suffix: 'M' },      // Million
+    { value: BigInt('1000000000'), suffix: 'B' },   // Billion
+    { value: BigInt('1000000000000'), suffix: 'T' }, // Trillion
+    { value: BigInt('1000000000000000'), suffix: 'Qd' }, // Quadrillion
+    { value: BigInt('1000000000000000000'), suffix: 'Qi' }, // Quintillion
+    { value: BigInt('1000000000000000000000'), suffix: 'Sx' }, // Sextillion
+    { value: BigInt('1000000000000000000000000'), suffix: 'Sp' }, // Septillion
+    { value: BigInt('1000000000000000000000000000'), suffix: 'Oc' }, // Octillion
+    { value: BigInt('1000000000000000000000000000000'), suffix: 'No' }, // Nonillion
+    { value: BigInt('1000000000000000000000000000000000'), suffix: 'Dc' }, // Decillion
+    { value: BigInt('1000000000000000000000000000000000000'), suffix: 'Ud' }, // Undecillion
+    { value: BigInt('1000000000000000000000000000000000000000'), suffix: 'Dd' }, // Duodecillion
+    { value: BigInt('1000000000000000000000000000000000000000000'), suffix: 'Td' }, // Tredecillion
+    { value: BigInt('1000000000000000000000000000000000000000000000'), suffix: 'Qt' }, // Quattuordecillion
+    { value: BigInt('1000000000000000000000000000000000000000000000000'), suffix: 'Qn' }, // Quindecillion
+    { value: BigInt('1000000000000000000000000000000000000000000000000000'), suffix: 'Sd' }, // Sexdecillion
+    { value: BigInt('1000000000000000000000000000000000000000000000000000000'), suffix: 'St' }, // Septendecillion
  ];
  
+
  for (let i = 0; i < suffixes.length; i++) {
    if (value < suffixes[i].value) {
      if (i == 0) {
--- a/app/src/components/Header.tsx
+++ b/app/src/components/Header.tsx
@ -1,8 +1,8 @@
-import React, { useCallback, useMemo } from "react"
-import styles from "../styles/Header.module.css"
-import bgStyles from "../styles/Background.module.css"
+import React, { useCallback, useMemo } from "react";
+import styles from "../styles/Header.module.css";
+import bgStyles from "../styles/Background.module.css";
 import { usePlayer } from "../providers/PlayerProvider";
-import { useAccount } from 'wagmi';
+import { useAccount } from "wagmi";
 import dynamic from "next/dynamic";
 import Counter, { toReadable } from "./Counter";
 import { useModal } from "../providers/ModalProvider";
@ -13,38 +13,56 @@ const Header = () => {
  const { openRegistrationModal } = useModal();

  const title = useMemo(() => {
-    return isRegistered && !player?.has_active_session ? `You died 😇 Click here to start again and ...` :
-      isRegistered ? `SLAY THE MOLOCH` :
-        !isConnected ? "Connect your wallet traveler ☝️  and then ..." :
-          "Click here to start 😈"
-  }, [isConnected, isRegistered, player?.has_active_session])
+    return isRegistered && !player?.has_active_session
+      ? `You died 😇 Click here to start again and ...`
+      : isRegistered
+      ? `SLAY THE MOLOCH`
+      : !isConnected
+      ? "Connect your wallet traveler ☝️  and then ..."
+      : "Click here to start 😈";
+  }, [isConnected, isRegistered, player?.has_active_session]);

  const subtitle = useMemo(() => {
    if (isRegistered && player?.has_active_session) {
-      return <Counter />
+      return <Counter />;
    } else {
-      return <p className={`${styles.counter} ${isConnected && !player?.has_active_session ? bgStyles.excited : ""}`}>SLAY THE MOLOCH</p>
+      return (
+        <p
+          className={`${styles.counter} ${
+            isConnected && !player?.has_active_session ? bgStyles.excited : ""
+          }`}
+        >
+          SLAY THE MOLOCH
+        </p>
+      );
    }
-  }, [isRegistered, player?.has_active_session, isConnected])
+  }, [isRegistered, player?.has_active_session, isConnected]);

  const perSecondParagraph = useMemo(() => {
-    const perSecond = toReadable(army?.profit_per_second ?? BigInt(0))
-    return (isRegistered && player?.has_active_session) ?
+    const perSecond = toReadable(army?.profit_per_second ?? BigInt(0));
+    return isRegistered && player?.has_active_session ? (
      <p className={styles.counter_per_seconds}>per second: {perSecond}</p>
-      : null
-  }, [isRegistered, army?.profit_per_second, player?.has_active_session])
+    ) : null;
+  }, [isRegistered, army?.profit_per_second, player?.has_active_session]);

  const onRegister = useCallback(() => {
-    if (player?.has_active_session) return
-    openRegistrationModal()
-  }, [player?.has_active_session, openRegistrationModal])
+    if (player?.has_active_session) return;
+    openRegistrationModal();
+  }, [player?.has_active_session, openRegistrationModal]);

-  return <header onClick={onRegister} className={`${styles.header} ${isConnected && !player?.has_active_session ? styles.clickable : ""}`}>
+  return (
+    <header
+      onClick={onRegister}
+      className={`${styles.header} ${
+        isConnected && !player?.has_active_session ? styles.clickable : ""
+      }`}
+    >
      <h1 className={`${styles.title}`}>{title}</h1>
      {subtitle}
      {perSecondParagraph}
    </header>
-}
+  );
+};

 // export default Header

--- a/app/src/components/PixelatedQuote.tsx
+++ b/app/src/components/PixelatedQuote.tsx
@ -151,7 +151,9 @@ const EARLY_GAME_QUOTES = [
 function PixelatedQuote() {
  const { player } = usePlayer();
  const [isShown, setIsShown] = useState(true);
-  const [currentQuote, setCurrentQuote] = useState("Welcome to the Dark Forest!");
+  const [currentQuote, setCurrentQuote] = useState(
+    "Welcome to the Dark Forest!"
+  );
  const intervalIdRef = useRef<NodeJS.Timeout | null>(null);
  const hasShownWelcome = useRef(false);

@ -185,7 +187,9 @@ function PixelatedQuote() {
      } else if (totalMinted < PROGRESSION_TIERS.BEGINNER) {
        // Show early game quotes until player reaches beginner level
        setCurrentQuote(
-          EARLY_GAME_QUOTES[Math.floor(Math.random() * EARLY_GAME_QUOTES.length)]
+          EARLY_GAME_QUOTES[
+            Math.floor(Math.random() * EARLY_GAME_QUOTES.length)
+          ]
        );
      } else {
        const tier = getQuoteTier(totalMinted);
@ -198,8 +202,8 @@ function PixelatedQuote() {

      setTimeout(() => {
        setIsShown(false);
-      }, 4000);
-    }, 6000);
+      }, 5000);
+    }, 10000);

    return () => {
      if (intervalIdRef.current !== null) {
--- a/app/src/components/Scene.tsx
+++ b/app/src/components/Scene.tsx
@ -1,5 +1,5 @@
-import React, { useCallback, useState } from "react"
-import styles from '../styles/Background.module.css';
+import React, { useCallback, useState } from "react";
+import styles from "../styles/Background.module.css";
 import Tower from "./Tower";
 import Army from "./Army";
 import MarchingBand from "./MarchingBand";
@ -17,26 +17,32 @@ const bossToMountainsClass = {
  4: styles.mountains4,
  5: styles.mountains5,
  6: styles.mountains6,
-}
+};

 const Scene = () => {
  const { isRegistered, boss, player } = usePlayer();
  const [isLeaderboardOpen, setIsLeaderboardOpen] = useState(false);

-  const handleMusicReady = useCallback((unmute: () => void) => {
+  const handleMusicReady = useCallback(
+    (unmute: () => void) => {
      if (isRegistered) {
        unmute();
      }
-  }, [isRegistered]);
+    },
+    [isRegistered]
+  );
  const variant = boss?.variants[boss.level] || 0;

-  return <div className={styles.frame}>
+  return (
+    <div className={styles.frame}>
      <div className={`${styles.air} ${styles.background_asset}`} />
      <div className={`${styles.clouds_large} ${styles.background_asset}`} />
      <Boss />
      <Tower />
      <div className={`${styles.clouds_small} ${styles.background_asset}`} />
-    <div className={`${styles.mountains} ${styles.background_asset} ${bossToMountainsClass[variant]}`} />
+      <div
+        className={`${styles.mountains} ${styles.background_asset} ${bossToMountainsClass[variant]}`}
+      />
      <div className={`${styles.village} ${styles.background_asset}`} />
      {isRegistered && player?.has_active_session && <BossInfo />}
      <MarchingBand />
@ -48,7 +54,7 @@ const Scene = () => {
        className={styles.leaderboardButton}
        title="Leaderboard"
      >
-      📜
+        🏆
      </button>
      {isLeaderboardOpen && (
        <div className={styles.leaderboardOverlay}>
@ -64,6 +70,7 @@ const Scene = () => {
        </div>
      )}
    </div>
-}
+  );
+};

-export default Scene
+export default Scene;
--- a/app/src/pages/index.tsx
+++ b/app/src/pages/index.tsx
@ -1,9 +1,9 @@
-import { ConnectButton } from '@rainbow-me/rainbowkit';
-import type { NextPage } from 'next';
-import Head from 'next/head';
-import styles from '../styles/Home.module.css';
-import Header from '../components/Header';
-import Scene from '../components/Scene';
+import { ConnectButton } from "@rainbow-me/rainbowkit";
+import type { NextPage } from "next";
+import Head from "next/head";
+import styles from "../styles/Home.module.css";
+import Header from "../components/Header";
+import Scene from "../components/Scene";

 const Home: NextPage = () => {
  return (
@ -26,7 +26,10 @@ const Home: NextPage = () => {
      </main>

      <footer className={styles.footer}>
-        Made with ❤️ by your frens at 😈 Slay the Moloch team for Cohort VII of <a href="https://www.raidguild.org/" target="blank">RaidGuild</a>
+        Made with ❤️ by your frens at 😈 Slay the Moloch team for Cohort VII of{" "}
+        <a href="https://www.raidguild.org/" target="blank">
+          RaidGuild
+        </a>
      </footer>
    </div>
  );
--- a/app/src/providers/PlayerProvider.tsx
+++ b/app/src/providers/PlayerProvider.tsx
@ -1,48 +1,63 @@
-import React, { createContext, ReactNode, useCallback, useContext, useEffect, useState } from 'react'
-import { useAccount, useReadContract, useWriteContract } from 'wagmi'
-import contractAbi from "../../../out/RaidGeld.sol/RaidGeld.json"
-import { Hash, parseEther } from 'viem'
-import contracts from '../../contract_address'
-import WaitingForTxModal from '../components/WaitingForTxModal'
+import React, {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+import { useAccount, useReadContract, useWriteContract } from "wagmi";
+import contractAbi from "../../../out/RaidGeld.sol/RaidGeld.json";
+import { Hash, parseEther } from "viem";
+import contracts from "../../contract_address";
+import WaitingForTxModal from "../components/WaitingForTxModal";

-const { contractAddress, daoTokenAddress } = contracts
-const abi = contractAbi.abi
+const { contractAddress, daoTokenAddress } = contracts;
+const abi = contractAbi.abi;

-export type UnitType = 0 | 1 | 2 | 3
-export type BossLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6
+export type UnitType = 0 | 1 | 2 | 3;
+export type BossLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6;

 export interface Player {
-  created_at: bigint,
-  last_raided_at: bigint,
-  total_minted: bigint
-  total_rewards: bigint,
-  n_runs: number,
-  prestige_level: number,
-  is_registered: boolean,
-  has_active_session: boolean,
+  created_at: bigint;
+  last_raided_at: bigint;
+  total_minted: bigint;
+  total_rewards: bigint;
+  n_runs: number;
+  prestige_level: number;
+  is_registered: boolean;
+  has_active_session: boolean;
 }
 export interface Army {
-  anointed: { level: number }
-  apprentice: { level: number }
-  champion: { level: number }
-  moloch_denier: { level: number }
-  profit_per_second: bigint
+  anointed: { level: number };
+  apprentice: { level: number };
+  champion: { level: number };
+  moloch_denier: { level: number };
+  profit_per_second: bigint;
 }
 export interface Boss {
  level: BossLevel;
-  variants: [BossLevel, BossLevel, BossLevel, BossLevel, BossLevel, BossLevel, BossLevel]
+  variants: [
+    BossLevel,
+    BossLevel,
+    BossLevel,
+    BossLevel,
+    BossLevel,
+    BossLevel,
+    BossLevel
+  ];
 }

 export interface PlayerContextType {
-  isRegistered: boolean,
-  player: null | Player,
-  army: null | Army,
-  boss: null | Boss,
-  balance: bigint,
-  register: (arg: "ETH" | "RGCVII") => void,
-  raid: () => void,
+  isRegistered: boolean;
+  player: null | Player;
+  army: null | Army;
+  boss: null | Boss;
+  balance: bigint;
+  register: (arg: "ETH" | "RGCVII") => void;
+  raid: () => void;
  battleWithBoss: () => void;
-  addUnit: (unit: UnitType) => void
+  addUnit: (unit: UnitType, amount?: number) => void;
 }

 const PlayerContext = createContext<PlayerContextType>({
@ -51,150 +66,172 @@ const PlayerContext = createContext<PlayerContextType>({
  army: null,
  boss: null,
  balance: BigInt(0),
-  register: () => { },
-  raid: () => { },
-  battleWithBoss: () => { },
-  addUnit: () => { }
+  register: () => {},
+  raid: () => {},
+  battleWithBoss: () => {},
+  addUnit: () => {},
 });

 const PlayerProvider = ({ children }: { children: ReactNode }) => {
  const { address, isConnected } = useAccount();
  const { writeContract, error } = useWriteContract();
-  const [[txHash, callbackFn], setHashAndCallback] = useState<[Hash | null, () => void]>([null, () => { }])
+  const [[txHash, callbackFn], setHashAndCallback] = useState<
+    [Hash | null, () => void]
+  >([null, () => {}]);

  useEffect(() => {
-    console.warn(error)
-  }, [error])
+    console.error(error?.message);
+  }, [error]);

  const resetHashAndCallback = useCallback(() => {
-    setHashAndCallback([null, () => { }])
-  }, [])
+    setHashAndCallback([null, () => {}]);
+  }, []);

  const { data: isRegistered } = useReadContract({
    address: contractAddress,
    abi,
-    functionName: 'isRegistered',
+    functionName: "isRegistered",
    args: [address],
    query: {
      enabled: isConnected,
      refetchInterval: 15,
-    }
+    },
  });

-  const { data: balance, } = useReadContract({
+  const { data: balance } = useReadContract({
    address: contractAddress,
    abi,
-    functionName: 'balanceOf',
+    functionName: "balanceOf",
    args: [address],
    query: {
      refetchInterval: 15,
-      enabled: isConnected
-    }
+      enabled: isConnected,
+    },
  });

  const { data: player } = useReadContract({
    address: contractAddress,
    abi,
-    functionName: 'getPlayer',
+    functionName: "getPlayer",
    args: [address],
    query: {
      enabled: isConnected,
-      refetchInterval: 15
-    }
+      refetchInterval: 15,
+    },
  });

  const { data: army } = useReadContract({
    address: contractAddress,
    abi,
-    functionName: 'getArmy',
+    functionName: "getArmy",
    args: [address],
    query: {
      enabled: isConnected,
-      refetchInterval: 15
-    }
+      refetchInterval: 15,
+    },
  });

  const { data: boss } = useReadContract({
    address: contractAddress,
    abi,
-    functionName: 'getBoss',
+    functionName: "getBoss",
    args: [address],
    query: {
      enabled: isConnected,
-      refetchInterval: 15
-    }
+      refetchInterval: 15,
+    },
  });

-  console.log(balance, player, army, boss)
+  console.log(balance, player, army, boss);

-  const register = useCallback((arg: "RGCVII" | "ETH") => {
-    if (arg === 'ETH') {
-      writeContract({
+  const register = useCallback(
+    (arg: "RGCVII" | "ETH") => {
+      if (arg === "ETH") {
+        writeContract(
+          {
            abi,
            address: contractAddress,
-        functionName: 'register_eth',
+            functionName: "register_eth",
            value: parseEther("0.0005"),
-      }, {
+          },
+          {
            onSuccess: (hash) => {
-          setHashAndCallback([hash, resetHashAndCallback])
+              setHashAndCallback([hash, resetHashAndCallback]);
+            },
          }
-      })
+        );
      } else if (arg === "RGCVII") {
-      writeContract({
+        writeContract(
+          {
            abi,
            address: daoTokenAddress,
-        functionName: 'approve',
+            functionName: "approve",
            args: [contractAddress, parseEther("500")],
-      }, {
+          },
+          {
            onSuccess: (hash) => {
              setHashAndCallback([
                hash,
-            () => writeContract({
+                () =>
+                  writeContract(
+                    {
                      abi,
                      address: contractAddress,
-              functionName: 'register_dao',
-            }, {
+                      functionName: "register_dao",
+                    },
+                    {
                      onSuccess: (hash) => {
-                setHashAndCallback([hash, resetHashAndCallback])
+                        setHashAndCallback([hash, resetHashAndCallback]);
+                      },
                    }
-            })
-          ])
+                  ),
+              ]);
+            },
          }
-      });
+        );
      }
-  }, [writeContract, resetHashAndCallback])
+    },
+    [writeContract, resetHashAndCallback]
+  );

  const raid = useCallback(() => {
-    writeContract({
+    writeContract(
+      {
        abi,
        address: contractAddress,
-      functionName: 'raid',
-    }, {
+        functionName: "raid",
+      },
+      {
        onSuccess: (hash) => {
-        setHashAndCallback([hash, resetHashAndCallback])
+          setHashAndCallback([hash, resetHashAndCallback]);
+        },
      }
-    })
-  }, [writeContract, resetHashAndCallback])
+    );
+  }, [writeContract, resetHashAndCallback]);

-  const addUnit = useCallback((unit: UnitType) => {
+  const addUnit = useCallback(
+    (unit: UnitType, amount: number = 1) => {
      writeContract({
        abi,
        address: contractAddress,
-      functionName: 'addUnit',
-      args: [unit, 1]
-    })
-  }, [writeContract])
+        functionName: "addUnit",
+        args: [unit, amount],
+      });
+    },
+    [writeContract]
+  );

  const battleWithBoss = useCallback(() => {
    writeContract({
      abi,
      address: contractAddress,
-      functionName: 'battle_with_boss',
-    })
-  }, [writeContract])
+      functionName: "battle_with_boss",
+    });
+  }, [writeContract]);

  return (
-    <PlayerContext.Provider value={{
+    <PlayerContext.Provider
+      value={{
        isRegistered: isRegistered as boolean,
        player: player as Player,
        army: army as Army,
@ -203,17 +240,17 @@ const PlayerProvider = ({ children }: { children: ReactNode }) => {
        register,
        raid,
        addUnit,
-      battleWithBoss
-    }}>
+        battleWithBoss,
+      }}
+    >
      {children}
      {txHash && <WaitingForTxModal hash={txHash} callbackFn={callbackFn} />}
    </PlayerContext.Provider>
  );
-}
+};

 export const usePlayer = () => {
  return useContext(PlayerContext);
-}
-
-export default PlayerProvider
+};

+export default PlayerProvider;
--- a/app/src/styles/Army.module.css
+++ b/app/src/styles/Army.module.css
@ -130,8 +130,17 @@
  display: flex;
  justify-content: center;
  align-items: center;
+
+  @media only screen and (max-width: 600px) {
+    left: 10px;
+    bottom: 5px;
+    overflow: auto;
+  }
 }
 .armyUnit {
+  @media only screen and (max-width: 600px) {
+    transform: scale(0.75);
+  }
  position: relative;
  height: 100%;
  width: 120px;
@ -152,6 +161,7 @@
  }
 }
 .uiElement {
+  width: fit-content;
  position: absolute;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.89);
@ -161,18 +171,22 @@
  text-align: center;
 }
 .unitSupply {
-  top: 0;
+  top: -30px;
  right: 0;
+  left: 2rem;
+  white-space: nowrap;
 }
 .unitName {
  left: 0;
  right: 0;
  bottom: 45px;
+  white-space: nowrap;
 }
 .unitPrice {
  left: 0;
  right: 0;
  bottom: 25px;
+  white-space: nowrap;
 }
 .unitProfit {
  left: 0;
@ -201,18 +215,24 @@
  height: 90px;
  user-select: none;
  .pixelQuote {
-    min-width: 150px;
+    min-width: 200px;
+    width: fit-content;
+    max-width: 300px;
    color: black;
    font-size: 0.7rem;
+    line-height: 0.9rem;
    position: absolute;
    bottom: 5.5rem;
-    left: -20px;
+    left: -70px;
    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);
  }
+
+  @media only screen and (max-width: 600px) {
+    right: 60px;
+  }
 }
 .static.moloch_denier {
  background-image: url("/roles/scribe2.png");
@ -257,6 +277,40 @@
  }
 }

+@media only screen and (max-width: 600px) {
+  @keyframes marching {
+    0% {
+      transform: translate(-54px, -59px); /* -100px scaled to ~-54px */
+    }
+    8% {
+      /* approaches fire */
+      transform: translate(15px, -100px); /* 72px scaled to ~39px */
+    }
+    15% {
+      /* approaches road */
+      transform: translate(82px, -123px); /* 152px scaled to ~82px */
+    }
+    25% {
+      /* first road turn */
+      transform: translate(66px, -200px); /* 122px scaled to ~66px */
+    }
+    45% {
+      /* second road turn */
+      transform: translate(138px, -264px); /* 256px scaled to ~138px */
+    }
+    75% {
+      /* third road turn */
+      transform: translate(86px, -293px); /* 159px scaled to ~86px */
+    }
+    100% {
+      /* vanishes into distance */
+      transform: translate(97px, -300px); /* 180px scaled to ~97px */
+    }
+  }
+}
+
+
+
@keyframes marchingPerson {
  0% {
    background-size: 100% 100%;
--- a/app/src/styles/Background.module.css
+++ b/app/src/styles/Background.module.css
@ -6,6 +6,12 @@
  border-image: url("/background/frame.png") 22 fill / auto space;
  width: 720px;
  height: 960px;
+
+  max-height: 90vh;
+  @media only screen and (max-width: 600px) {
+    max-width: 100vw;
+    max-height: 90vh;
+  }
 }

 .background_asset {
@ -34,7 +40,7 @@
  height: 150px;
  background-image: url("/background/clouds_large.png");
  animation:
-    scrollBackground 80s linear infinite,
+    scrollBackground 280s linear infinite,
    thunder 4s linear infinite;
 }
 .clouds_small {
@ -42,7 +48,7 @@
  height: 82px;
  background-image: url("/background/clouds_small.png");
  animation:
-    scrollBackground 20s linear infinite,
+    scrollBackground 200s linear infinite,
    thunder 12s linear infinite;
 }

@ -215,6 +221,11 @@
  background-image: url("/background/village.png");
  height: 540px;
  bottom: 22px;
+
+  @media only screen and (max-width: 600px) {
+    height: 300px;
+    bottom: 80px;
+  }
 }
 .bonfire {
  background-image: url("/background/bonfire.png");
@ -226,6 +237,12 @@
  animation:
    bonfire 12s linear infinite,
    bonfire_skew 5s infinite linear;
+
+  @media only screen and (max-width: 600px) {
+    left: 80px;
+    bottom: 105px;
+    scale: .7;
+  }
 }
 .musicButton {
  position: absolute;
--- a/app/src/styles/Header.module.css
+++ b/app/src/styles/Header.module.css
@ -5,10 +5,18 @@
  &.clickable {
    cursor: pointer;
  }
+
+  @media only screen and (max-width: 600px) {
+    margin-top: 3rem;
+  }
 }
 .title {
  font-size: 1.5rem;
  margin: 0;
+
+  @media only screen and (max-width: 600px) {
+    display: none;
+  }
 }
 .counter {
  font-size: 2rem;
--- a/app/src/styles/Home.module.css
+++ b/app/src/styles/Home.module.css
@ -16,14 +16,14 @@
  align-items: center;
  width: 100%;
  max-width: 720px;
-  height: 100vh;
  margin: 0 auto;
+
+  height: 90vh;
 }

 .footer {
-  margin-top: 2rem;
-  padding: 2rem 0;
-  border-top: 1px solid #eaeaea;
+  padding: 0;
+  margin-top: 10px;
  text-align: center;
 }

--- a/lib/openzeppelin-contracts
+++ b/lib/openzeppelin-contracts
@ -1 +1 @@
-Subproject commit 3291252c866ad698f6a55ec660259e49a67eb3d0
+Subproject commit 448efeea6640bbbc09373f03fbc9c88e280147ba