diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx index f15f646..7b8cf2d 100644 --- a/packages/nextjs/components/Footer.tsx +++ b/packages/nextjs/components/Footer.tsx @@ -1,21 +1,22 @@ -import { hardhat } from "wagmi/chains"; -import { CurrencyDollarIcon } from "@heroicons/react/24/outline"; +// import { hardhat } from "wagmi/chains"; +// import { CurrencyDollarIcon } from "@heroicons/react/24/outline"; import { HeartIcon } from "@heroicons/react/24/outline"; -import { SwitchTheme } from "~~/components/SwitchTheme"; -import { Faucet } from "~~/components/scaffold-eth"; -import { useGlobalState } from "~~/services/store/store"; -import { getTargetNetwork } from "~~/utils/scaffold-eth"; + +// import { SwitchTheme } from "~~/components/SwitchTheme"; +// import { Faucet } from "~~/components/scaffold-eth"; +// import { useGlobalState } from "~~/services/store/store"; +// import { getTargetNetwork } from "~~/utils/scaffold-eth"; /** * Site footer */ export const Footer = () => { - const nativeCurrencyPrice = useGlobalState(state => state.nativeCurrencyPrice); + // const nativeCurrencyPrice = useGlobalState(state => state.nativeCurrencyPrice); const codeLink = "https://github.com/BuidlGuidl/private-key-dice"; return ( -
-
+
+ {/*
{nativeCurrencyPrice > 0 && ( @@ -28,7 +29,7 @@ export const Footer = () => {
-
+
*/}
    diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx index 765db53..c6a5c53 100644 --- a/packages/nextjs/components/Header.tsx +++ b/packages/nextjs/components/Header.tsx @@ -59,7 +59,7 @@ export const Header = () => { ); return ( -
    +
    - DICE + DICE
    Private Key Dice
    -
      + {/*
        -
      +
    */}
    diff --git a/packages/nextjs/components/SwitchTheme.tsx b/packages/nextjs/components/SwitchTheme.tsx index 4752e35..993378a 100644 --- a/packages/nextjs/components/SwitchTheme.tsx +++ b/packages/nextjs/components/SwitchTheme.tsx @@ -8,7 +8,7 @@ export const SwitchTheme = ({ className }: { className?: string }) => { useEffect(() => { const body = document.body; - body.setAttribute("data-theme", isDarkMode ? "scaffoldEthDark" : "scaffoldEth"); + body.setAttribute("data-theme", "scaffoldEth"); }, [isDarkMode]); return ( diff --git a/packages/nextjs/components/Wallet.tsx b/packages/nextjs/components/Wallet.tsx index 2f3153c..d9abc8e 100644 --- a/packages/nextjs/components/Wallet.tsx +++ b/packages/nextjs/components/Wallet.tsx @@ -186,8 +186,8 @@ export default function Wallet() {
    - Point your camera phone at qr code to open in   - + Point your phone camera at qr code to open in   + Punk Wallet : diff --git a/packages/nextjs/components/dicedemo/GameCreateForm.tsx b/packages/nextjs/components/dicedemo/GameCreateForm.tsx index d03539c..5112182 100644 --- a/packages/nextjs/components/dicedemo/GameCreateForm.tsx +++ b/packages/nextjs/components/dicedemo/GameCreateForm.tsx @@ -109,10 +109,10 @@ const GameCreationForm = () => { }; return ( -
    +

    - diff --git a/packages/nextjs/components/dicedemo/GameJoinForm.tsx b/packages/nextjs/components/dicedemo/GameJoinForm.tsx index 66cd7be..ac5d2b9 100644 --- a/packages/nextjs/components/dicedemo/GameJoinForm.tsx +++ b/packages/nextjs/components/dicedemo/GameJoinForm.tsx @@ -1,4 +1,4 @@ -import React, { Dispatch, SetStateAction, useEffect, useRef, useState } from "react"; +import React, { Dispatch, SetStateAction, useEffect, useState } from "react"; import { useRouter } from "next/router"; import { InputBase } from "../scaffold-eth"; import QrReader from "react-qr-reader-es6"; @@ -15,7 +15,6 @@ const GameJoinForm = ({ setInviteCode: Dispatch>; }) => { const router = useRouter(); - const labelRef = useRef(null); const [scanning, setScanning] = useState(false); const [loading, setLoading] = useState(false); @@ -73,12 +72,6 @@ const GameJoinForm = ({ // setScanning(true); // }; - useEffect(() => { - if (labelRef.current) { - labelRef.current.focus(); - } - }, []); - useEffect(() => { if (invite) { handleJoinGame(invite as string); @@ -93,10 +86,10 @@ const GameJoinForm = ({ }, [invite]); return ( -
    +
    -
      { setIsDarkTheme(isDarkMode); }, [isDarkMode]); - const nowish = new Date(); - return ( @@ -42,15 +40,7 @@ const ScaffoldEthApp = ({ Component, pageProps }: AppProps) => { avatar={BlockieAvatar} theme={isDarkTheme ? darkTheme() : lightTheme()} > -
      +
      diff --git a/packages/nextjs/pages/game/[id].tsx b/packages/nextjs/pages/game/[id].tsx index bd077b1..998cc07 100644 --- a/packages/nextjs/pages/game/[id].tsx +++ b/packages/nextjs/pages/game/[id].tsx @@ -6,8 +6,8 @@ import QRCode from "qrcode.react"; import CopyToClipboard from "react-copy-to-clipboard"; import { useAccount, useBalance } from "wagmi"; import { CheckCircleIcon, DocumentDuplicateIcon } from "@heroicons/react/24/outline"; -import Congrats from "~~/components/dicedemo/Congrats"; import HostAnnouncement from "~~/components/dicedemo/HostAnnouncement"; +import PlayerAnnouncement from "~~/components/dicedemo/PlayerAnnoucement"; import RestartWithNewPk from "~~/components/dicedemo/RestartWithNewPk"; import { Address } from "~~/components/scaffold-eth"; import { Price } from "~~/components/scaffold-eth/Price"; @@ -15,6 +15,7 @@ import useGameData from "~~/hooks/useGameData"; import useSweepWallet from "~~/hooks/useSweepWallet"; import { Game } from "~~/types/game/game"; import { kickPlayer, pauseResumeGame, toggleMode } from "~~/utils/diceDemo/apiUtils"; +import { calculateLength, compareResult, generateRandomHex } from "~~/utils/diceDemo/gameUtils"; function GamePage() { const router = useRouter(); @@ -46,20 +47,7 @@ function GamePage() { const prize = useBalance({ address: game?.adminAddress }); const { sweepWallet, isSweeping, sweepMessage } = useSweepWallet({ game, token }); - const calculateLength = () => { - const maxLength = 150; - const diceCount = game?.diceCount ?? 0; - const calculatedLength = Math.max(maxLength - (diceCount - 1) * 3, 10); - return calculatedLength; - }; - - const length = calculateLength(); - - const generateRandomHex = () => { - const hexDigits = "0123456789ABCDEF"; - const randomIndex = Math.floor(Math.random() * hexDigits.length); - return hexDigits[randomIndex]; - }; + const length = calculateLength(game?.diceCount as number); const isAdmin = address == game?.adminAddress; const isPlayer = game?.players?.includes(address as string); @@ -117,16 +105,8 @@ function GamePage() { } }; - const compareResult = () => { - if (rolled && rolledResult.length > 0 && game?.hiddenChars) - return rolledResult.every( - (value, index) => value.toLowerCase() === Object.values(game?.hiddenChars)[index].toLowerCase(), - ); - }; - useEffect(() => { const { token, game: gameState } = loadGameState(); - setGame(gameState); setToken(token); setIsUnitRolling(Array.from({ length: gameState?.diceCount }, () => false)); @@ -140,7 +120,11 @@ function GamePage() { }, []); useEffect(() => { - const isHiiddenChars = compareResult(); + let isHiiddenChars; + + if (rolled && rolledResult.length > 0 && game?.hiddenChars) { + isHiiddenChars = compareResult(rolledResult, game?.hiddenChars); + } if (isHiiddenChars) { setAutoRolling(false); @@ -246,15 +230,15 @@ function GamePage() { if (game) { return (
      -
      +
      -
      -
      -
      +
      +
      +
      {isAdmin && (
      -
      +
      Copy Invite Url {inviteUrlCopied ? ( @@ -311,26 +295,8 @@ function GamePage() { )}
      - {/*
      - {inviteUrlCopied ? ( - Copied invite Url - ) : ( - { - setInviteUrlCopied(true); - setTimeout(() => { - setInviteUrlCopied(false); - }, 800); - }} - > - Copy invite Url - - )} -
      */}
      - ) -
      +
      Status: {game.status} @@ -343,7 +309,7 @@ function GamePage() { checked={game?.status == "ongoing"} />
      -
      +
      Mode: {game.mode}
      @@ -388,7 +354,7 @@ function GamePage() {
      {screenwidth <= 768 && (
      -
      +

      PRIVATE KEY

      @@ -400,7 +366,7 @@ function GamePage() { )} {game.winner && (

      - Winner
      + Winner
      )} {/* {isAdmin && game.winner && ( @@ -418,7 +384,7 @@ function GamePage() {
      {isAdmin && (
      -
      +

      PRIVATE KEY

      @@ -428,7 +394,7 @@ function GamePage() { )}

      -
      +

      PLAYERS: {game?.players.length}

      @@ -486,7 +452,7 @@ function GamePage() {
      )} -
      +
      {Object.entries(game.hiddenChars).map(([key], index) => rolled ? ( isUnitRolling[index] || (isRolling && game.mode == "brute") ? ( @@ -494,7 +460,7 @@ function GamePage() { className="transition duration-500 opacity-100 rounded-lg" key={key} src="/rolls-gif/Spin.gif" - alt="spinning dice" + alt="spinning" width={length} height={length} /> @@ -503,7 +469,7 @@ function GamePage() { className="transition duration-500 ease-in rounded-lg" key={key} src={`/rolls-jpg/${rolls[index]}.jpg`} - alt="rolled dice" + alt="rolled" width={length} height={length} /> @@ -513,7 +479,7 @@ function GamePage() { className="rounded-lg" key={key} src={`/rolls-jpg/0.jpg`} - alt="rolled dice" + alt="zero roll" width={length} height={length} /> @@ -522,7 +488,7 @@ function GamePage() {
      {" "} {(isHacked || game.winner) && ( - )} {screenwidth <= 768 && game.players.length > 0 && ( -
      +
      -
      +

      PLAYERS

      diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx index 359b22b..f678422 100644 --- a/packages/nextjs/pages/index.tsx +++ b/packages/nextjs/pages/index.tsx @@ -4,6 +4,7 @@ import type { NextPage } from "next"; import { MetaHeader } from "~~/components/MetaHeader"; import GameCreationForm from "~~/components/dicedemo/GameCreateForm"; import GameJoinForm from "~~/components/dicedemo/GameJoinForm"; +import WelcomeRoll from "~~/components/dicedemo/WelcomeRoll"; const Home: NextPage = () => { const router = useRouter(); @@ -11,58 +12,62 @@ const Home: NextPage = () => { const { invite } = router.query; const [gameState, setGameState] = useState<"createGame" | "joinGame">("joinGame"); const [inviteCode, setInviteCode] = useState(""); + const [showWelcomeRoll, setShowWelcomRoll] = useState(true); useEffect(() => { if (invite) { setGameState("joinGame"); setInviteCode(invite as string); + setShowWelcomRoll(false); } }, [invite]); - const quote = - "Every key is a boundless whisper from the unknown and each guess a brushstroke on the infinite canvas of possibility, our journey weaves through the lattice of chance and destiny, illuminating paths in the cosmic dance of uncharted realms, where the thrill of discovery echoes in the heartbeats of the bold, crafting a universe with every daring leap into the silence of the never-before-seen."; + // const quote = "Every key is a boundless whisper from the unknown and each guess a brushstroke on the infinite canvas of possibility, our journey weaves through the lattice of chance and destiny, illuminating paths in the cosmic dance of uncharted realms, where the thrill of discovery echoes in the heartbeats of the bold, crafting a universe with every daring leap into the silence of the never-before-seen." return ( <> -
      -
      +
      + {/*

      {quote}

      -
      -
      -
      -
      -
      +
      */} + +
      +
      + {showWelcomeRoll && } +
      + +
      -
      - - {gameState == "createGame" && } - {gameState == "joinGame" && } +
      + {gameState == "createGame" && } + {gameState == "joinGame" && } +
      diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js index b3a3b61..f0aecae 100644 --- a/packages/nextjs/tailwind.config.js +++ b/packages/nextjs/tailwind.config.js @@ -8,17 +8,17 @@ module.exports = { themes: [ { scaffoldEth: { - primary: "#d6fcf8", + primary: "#93BBFB", "primary-content": "#212638", - secondary: "#dceeee", + secondary: "#DAE8FF", "secondary-content": "#212638", - accent: "#90fbfb", + accent: "#93BBFB", "accent-content": "#212638", neutral: "#212638", "neutral-content": "#ffffff", "base-100": "#ffffff", - "base-200": "#f3fafa", - "base-300": "#dcfefe", + "base-200": "#f4f8ff", + "base-300": "#DAE8FF", "base-content": "#212638", info: "#93BBFB", success: "#34EEB6", @@ -45,7 +45,7 @@ module.exports = { "base-100": "#385183", "base-200": "#2A3655", "base-300": "#212638", - "base-content": "#048e8e", + "base-content": "#F9FBFF", info: "#385183", success: "#34EEB6", warning: "#FFCF72", @@ -90,6 +90,14 @@ module.exports = { theme: { // Extend Tailwind classes (e.g. font-bai-jamjuree, animate-grow) extend: { + colors: { + new_primary: "#293853", + new_secondary: "#3f5174", + new_tertiary: "#93bbfb", + }, + backgroundColor: { + gradient: "linear-gradient(225deg, #293853 0%, #521f93 100%)", + }, fontFamily: { "bai-jamjuree": ["Bai Jamjuree", "sans-serif"], }, diff --git a/packages/nextjs/utils/diceDemo/gameUtils.ts b/packages/nextjs/utils/diceDemo/gameUtils.ts new file mode 100644 index 0000000..7e15d46 --- /dev/null +++ b/packages/nextjs/utils/diceDemo/gameUtils.ts @@ -0,0 +1,15 @@ +export const calculateLength = (count: number) => { + const maxLength = 150; + const calculatedLength = Math.max(maxLength - (count - 1) * 3, 10); + return calculatedLength; +}; + +export const generateRandomHex = () => { + const hexDigits = "0123456789ABCDEF"; + const randomIndex = Math.floor(Math.random() * hexDigits.length); + return hexDigits[randomIndex]; +}; + +export const compareResult = (rolledResult: string[], pkChars: Record) => { + return rolledResult.every((value, index) => value.toLowerCase() === Object.values(pkChars)[index].toLowerCase()); +};