Merge pull request #10 from prototyp3-dev/feature/font-family

Feature/font family
prototyp3-dev · Jan 22, 2024 · 98617b9 · 98617b9
2 parents fd864c2 + 233b9e2
commit 98617b9
Show file tree

Hide file tree

Showing 18 changed files with 184 additions and 109 deletions.
diff --git a/frontend/app/cartridges/page.tsx b/frontend/app/cartridges/page.tsx
@@ -1,4 +1,4 @@
-import Title from "../components/Title";
+// import Title from "../components/Title";
 import CartridgesList from "../components/CartridgesList";
 import CartridgeInfo from "../components/CartridgeInfo";
 import Rivemu from "../components/Rivemu";
@@ -28,11 +28,11 @@ function listLoaderFallback() {
 export default async function Cartridges() {
     return (
       <main>
-		<section id="cartridges-section" className="first-section">
+		<section id="cartridges-section" className="second-section">
 			<div className="basis-1/3 justify-self-center flex flex-col">
-				<div>
+				{/* <div>
 					<Title />
-				</div>
+				</div> */}
 
 				<div className="p-4 break-words overflow-auto custom-scrollbar">
 					<Suspense fallback={listLoaderFallback()}>

diff --git a/frontend/app/components/CartridgeDescription.tsx b/frontend/app/components/CartridgeDescription.tsx
@@ -3,6 +3,7 @@
 
 import { useContext } from 'react';
 import { selectedCartridgeContext } from '../cartridges/selectedCartridgeProvider';
+import { fontPressStart2P } from '../utils/font';
 
 function CartridgeDescription() {
     const {selectedCartridge} = useContext(selectedCartridgeContext);
@@ -14,12 +15,12 @@ function CartridgeDescription() {
     return (
         <div>
             <fieldset>
-                <legend className='font-bold text-xl'>Sumary</legend>
+                <legend className={`font-bold text-xl ${fontPressStart2P.className}`}>Sumary</legend>
                 <p>{selectedCartridge.info?.summary}</p>
             </fieldset>
 
             <fieldset>
-                <legend className='font-bold text-xl'>Description</legend>
+                <legend className={`font-bold text-xl ${fontPressStart2P.className}`}>Description</legend>
                 <pre style={{whiteSpace: "pre-wrap"}}>
                     {selectedCartridge.info?.description}
                 </pre>

diff --git a/frontend/app/components/CartridgeInfo.tsx b/frontend/app/components/CartridgeInfo.tsx
@@ -26,6 +26,7 @@ import CartridgeDescription from './CartridgeDescription';
 import Link from 'next/link';
 import CartridgeScoreboard from './CartridgeScoreboard';
 import { envClient } from "../utils/clientEnv";
+import { fontPressStart2P } from '../utils/font';
 
 
 function scoreboardFallback() {
@@ -138,9 +139,9 @@ function CartridgeInfo() {
     return (
         <fieldset className='h-full custom-shadow'>
             <legend className="ms-2 px-1">
-                <span className='cartridge-title-text'>{selectedCartridge.name}</span>
+                <span className={`cartridge-title-text ${fontPressStart2P.className}`}>{selectedCartridge.name}</span>
                 <br/>
-                <span className='muted-text text-sm'>
+                <span className='muted-text'>
                     Uploaded by {selectedCartridge.user_address} on {new Date(selectedCartridge.created_at*1000).toLocaleString()}
                 </span>
             </legend>
@@ -205,7 +206,7 @@ function CartridgeInfo() {
                             <></>
                         :
                             <div className='mt-3'>
-                                <span className='ms-2 font-bold text-xl'>
+                                <span className={`ms-2 font-bold text-xl ${fontPressStart2P.className}`}>
                                     Creators
                                 </span>
 
@@ -243,7 +244,6 @@ function CartridgeInfo() {
 
                             <Tab
                                 className={({selected}) => {return selected?"game-tabs-option-selected":"game-tabs-option-unselected"}}
-                                disabled
                                 >
                                     <span className='game-tabs-option-text'>
                                         <StadiumIcon/>
@@ -253,7 +253,6 @@ function CartridgeInfo() {
 
                             <Tab
                                 className={({selected}) => {return selected?"game-tabs-option-selected":"game-tabs-option-unselected"}}
-                                disabled
                                 >
                                     <span className='game-tabs-option-text'>
                                         <CodeIcon/>
@@ -281,13 +280,13 @@ function CartridgeInfo() {
                             <Tab.Panel
                                 className="game-tab-content"
                             >
-                                <></>
+                                <span className={`${fontPressStart2P.className}`}>Coming Soon!</span>
                             </Tab.Panel>
 
                             <Tab.Panel
                                 className="game-tab-content"
                             >
-                                <></>
+                                <span className={`${fontPressStart2P.className}`}>Coming Soon!</span>
                             </Tab.Panel>
                         </Tab.Panels>
                     </Tab.Group>

diff --git a/frontend/app/components/CartridgeSelectButton.tsx b/frontend/app/components/CartridgeSelectButton.tsx
@@ -1,28 +1,36 @@
 "use client"
 
-import React, { useContext } from 'react'
+import React, { useContext, useEffect } from 'react'
 import { selectedCartridgeContext } from '../cartridges/selectedCartridgeProvider';
 import { CartridgeInfo as Cartridge } from "../backend-libs/app/ifaces"
 import { cartridgeInfo } from '../backend-libs/app/lib';
+import { fontPressStart2P } from '../utils/font';
 
-function CartridgeSelectButton({cartridge}:{cartridge:Cartridge}) {
+function CartridgeSelectButton({cartridge, index}:{cartridge:Cartridge, index:number}) {
     const {selectedCartridge, changeCartridge} = useContext(selectedCartridgeContext);
 
+    useEffect(() => {
+        const initialSelection = async () => {
+           await handleCartridgeSelection({} as React.MouseEvent<HTMLElement>);
+        }
+        if (index == 0 && !selectedCartridge) initialSelection();
+    })
+
     const handleCartridgeSelection = async (e:React.MouseEvent<HTMLElement>) => {
 
         const cartridgeWithInfo = await cartridgeInfo({id:cartridge.id},{decode:true});
 
         console.log('Select')
-        
+
 		changeCartridge(cartridgeWithInfo);
 	}
 
     return (
         <button className={
             selectedCartridge?.id==cartridge.id?
-                "games-list-item games-list-selected-item"
+                `games-list-item games-list-selected-item ${fontPressStart2P.className}`
             :
-                "games-list-item"
+                `games-list-item ${fontPressStart2P.className}`
             } value={cartridge.id} onClick={handleCartridgeSelection}>
 
             {cartridge.name}

diff --git a/frontend/app/components/CartridgesList.tsx b/frontend/app/components/CartridgesList.tsx
@@ -2,30 +2,10 @@ import CartridgeSelectButton from './CartridgeSelectButton';
 import { cache } from 'react';
 import { cartridges as cartridgerequest} from "../backend-libs/app/lib";
 
-function delay(ms: number) {
-    return new Promise( resolve => setTimeout(resolve, ms) );
-}
 
 const getCartridges = cache(async () => {
 	const cartridges: any[] = (await cartridgerequest({},{decode:true})).data;
-    // await delay(3000); // artificial fetch cartridges delay
-    // const cartridges: any[] = [
-    //     {id: 0, name: "Castlevania", cover: "nes_castlevania_cover.jpeg", date: "01/08/2024", desc: "Castlevania #"+desc},
-    //     {id: 1, name: "Life Force",cover: "nes_lifeForce_cover.jpg", date: "01/08/2024", desc: "Life Force #"+desc},
-    //     {id: 2, name: "The Legend of Zelda", cover: "nes_thelegendofzelda_cover.jpg", date: "01/08/2024", desc: "The Legend of Zelda #"+desc},
-    //     {id: 3, name: "Castlevania", cover: "nes_castlevania_cover.jpeg", date: "01/08/2024", desc: "Castlevania #"+desc},
-    //     {id: 4, name: "Life Force",cover: "nes_lifeForce_cover.jpg", date: "01/08/2024", desc: "Life Force #"+desc},
-    //     {id: 5, name: "The Legend of Zelda", cover: "nes_thelegendofzelda_cover.jpg", date: "01/08/2024", desc: "The Legend of Zelda #"+desc},
-    //     {id: 6, name: "Castlevania", cover: "nes_castlevania_cover.jpeg", date: "01/08/2024", desc: "Castlevania #"+desc},
-    //     {id: 7, name: "Life Force",cover: "nes_lifeForce_cover.jpg", date: "01/08/2024", desc: "Life Force #"+desc},
-    //     {id: 8, name: "The Legend of Zelda", cover: "nes_thelegendofzelda_cover.jpg", date: "01/08/2024", desc: "The Legend of Zelda #"+desc},
-    //     {id: 9, name: "Castlevania", cover: "nes_castlevania_cover.jpeg", date: "01/08/2024", desc: "Castlevania #"+desc},
-    //     {id: 10, name: "Life Force",cover: "nes_lifeForce_cover.jpg", date: "01/08/2024", desc: "Life Force #"+desc},
-    //     {id: 11, name: "The Legend of Zelda", cover: "nes_thelegendofzelda_cover.jpg", date: "01/08/2024", desc: "The Legend of Zelda #"+desc},
-    //     {id: 12, name: "Castlevania", cover: "nes_castlevania_cover.jpeg", date: "01/08/2024", desc: "Castlevania #"+desc},
-    //     {id: 13, name: "Life Force",cover: "nes_lifeForce_cover.jpg", date: "01/08/2024", desc: "Life Force #"+desc},
-    //     {id: 14, name: "The Legend of Zelda", cover: "nes_thelegendofzelda_cover.jpg", date: "01/08/2024", desc: "The Legend of Zelda #"+desc}
-    // ]
+
     return cartridges;
   })
 
@@ -38,7 +18,7 @@ async function CartridgesList() {
                 cartridges.map((cartridge: any, index: number) => {
                     return (
                         <li key={`${cartridge.name}-${index}`} className="flex">
-                            <CartridgeSelectButton cartridge={cartridge} />
+                            <CartridgeSelectButton index={index} cartridge={cartridge} />
                         </li>
                     );
                 })

diff --git a/frontend/app/components/Navbar.tsx b/frontend/app/components/Navbar.tsx
@@ -5,20 +5,24 @@ import { usePathname } from "next/navigation";
 import React from 'react'
 import ThemeSwitch from "@/app/components/ThemeSwitch";
 import { useConnectWallet } from '@web3-onboard/react';
+import rivesLogo from '../../public/rives_logo.png';
+import Image from 'next/image'
 
 function Navbar() {
     const pathname = usePathname();
     const [{ wallet, connecting }, connect, disconnect] = useConnectWallet()
 
     return (
         <header className='header'>
-            <Link href={"/"} className='font-semibold title-color'>
-                <span>World</span>
-                <br/>
-                <span className='ps-2'>Arcade</span>
+            {/* <Link href={"/"} className={`font-semibold title-color ${fontPressStart2P.className}`}>
+                <span>RiVES</span>
+            </Link> */}
+
+            <Link href={"/"}>
+                <Image src={rivesLogo} alt='RiVES' width={96} ></Image>
             </Link>
 
-            <nav className='flex text-lg gap-7 font-medium'>
+            <nav className='flex gap-7 font-medium'>
                 <Link href={"/cartridges"} className={ pathname === "/cartridges" ? "link-active" : "link-2step-hover" }>
                     <p>Cartridges</p>
                 </Link>
@@ -28,7 +32,7 @@ function Navbar() {
                 </Link>
             </nav>
 
-            <div className='flex space-x-8'>
+            <div className='flex space-x-6'>
                 <ThemeSwitch/>
 
                 <button className='web3-connect-btn' disabled={connecting}

diff --git a/frontend/app/components/Rivemu.tsx b/frontend/app/components/Rivemu.tsx
@@ -13,6 +13,7 @@ import OndemandVideoIcon from '@mui/icons-material/OndemandVideo';
 
 import { selectedCartridgeContext } from '../cartridges/selectedCartridgeProvider';
 import { cartridge } from '../backend-libs/app/lib';
+import { fontPressStart2P } from '../utils/font';
 
 // let rivlogData: Uint8Array | undefined = undefined;
 
@@ -53,11 +54,11 @@ function Rivemu() {
         const data = await cartridge({id:selectedCartridge.id},{decode:true,decodeModel:"bytes"});
         setCartridgeData(data);
     }
-    
+
     if (!selectedCartridge) {
        return  <></>;
     }
-    
+
     var decoder = new TextDecoder("utf-8");
     let parser = new Parser();
     let scoreFunction = parser.parse('score');
@@ -238,9 +239,9 @@ function Rivemu() {
                         }}
                     />
                 {/* </Suspense> */}
-            </div>1
+            </div>
             <div className="text-center d-flex justify-content-center">
-                <h3>Score: <span>{overallScore}</span></h3>
+                <h3 className={fontPressStart2P.className}>Score: <span>{overallScore}</span></h3>
             </div>
 
             <Script src="/rivemu.js" strategy="lazyOnload" />

diff --git a/frontend/app/components/Title.tsx b/frontend/app/components/Title.tsx
@@ -1,15 +1,23 @@
-import Link from 'next/link'
 import React from 'react'
+import { fontPressStart2P } from '../utils/font';
+
+import Image from 'next/image'
+import rivesLogo from '../../public/logo.png';
 
 function Title() {
   return (
-    <div className="grid grid-cols-1">
-        <h1 className='title-text'>
-                <span>World</span>
-                <br/>
-                <span className='ps-16'>Arcade</span>
-        </h1>
-        <span className="subtitle-text justify-self-end">Powered by <Link className="link-2step-hover" href="https://cartesi.io/">Cartesi</Link></span>
+    // <div className="grid grid-cols-1">
+    //     <h1 className={`${fontPressStart2P.className} title-text`}>
+    //             <span>RiVES</span>
+    //     </h1>
+    //     <span className="subtitle-text">RiscV Verifiable Entertainment System</span>
+    // </div>
+
+    <div className="flex space-x-2">
+    {/* <h1 className='title-text'>
+            <span>RiVES</span>
+    </h1> */}
+      <Image width={250} src={rivesLogo} alt='RiVES logo'/>
     </div>
   )
 }

diff --git a/frontend/app/favicon.ico b/frontend/app/favicon.ico
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
@@ -54,13 +54,6 @@ body {
       --background-start-rgb: 36, 36, 36;
       --background-end-rgb: 105, 105, 105;
       --background-end-rgba0: rgba(100, 100, 100, 0.4);
-      --highlight-text-start-hex: #BFFFFC;
-      --highlight-text-end-hex: #12B8FF;
-      --highlight-text-end-rgba0: rgba(18, 184, 255, 0.4);
-      --highlight-text-end-rgba1: rgba(18, 184, 255, 0.3);
-      --highlight-text-end-rgba2: rgba(18, 184, 255, 0.2);
-      --highlight-text-end-rgba3: rgba(18, 184, 255, 0.1);
-      --highlight-text-end-rgba4: rgba(18, 184, 255, 0.05);
     }
   }
   :root[data-theme="dark"] {
@@ -69,13 +62,6 @@ body {
     --background-start-rgb: 36, 36, 36;
     --background-end-rgb: 105, 105, 105;
     --background-end-rgba0: rgba(100, 100, 100, 0.4);
-    --highlight-text-start-hex: #BFFFFC;
-    --highlight-text-end-hex: #12B8FF;
-    --highlight-text-end-rgba0: rgba(18, 184, 255, 0.4);
-    --highlight-text-end-rgba1: rgba(18, 184, 255, 0.3);
-    --highlight-text-end-rgba2: rgba(18, 184, 255, 0.2);
-    --highlight-text-end-rgba3: rgba(18, 184, 255, 0.1);
-    --highlight-text-end-rgba4: rgba(18, 184, 255, 0.05);
 }
 }
 
@@ -231,6 +217,7 @@ body {
   transform: translateY(225%) translateX(-50%);
   height: 14px;
   line-height: 13px;
+  font-size: 60%;
 }
 
 .button-57:disabled,
@@ -271,6 +258,10 @@ body {
   }
 
   .first-section {
+    @apply mx-auto md:p-16 pb-12 !pt-[126px] px-8 h-svh flex flex-col items-center max-w-screen-lg;
+  }
+
+  .second-section {
     @apply mx-auto md:p-16 pb-12 !pt-[126px] px-8 h-svh flex flex-row;
   }
 
@@ -284,15 +275,15 @@ body {
   }
 
   .title-text {
-    @apply 2xl:text-9xl xl:text-8xl md:text-6xl sm:text-3xl font-semibold font-poppins title-color leading-none;
+    @apply 2xl:text-8xl xl:text-7xl md:text-3xl sm:text-2xl font-semibold title-color leading-none;
   }
 
   .subtitle-text {
-    @apply font-semibold 2xl:text-3xl xl:text-xl md:text-lg sm:text-base relative font-poppins;
+    @apply font-semibold 2xl:text-2xl xl:text-lg md:text-sm sm:text-base relative;
   }
 
   .cartridge-title-text {
-    @apply font-semibold sm:text-4xl text-xl relative font-poppins title-color;
+    @apply font-semibold sm:text-4xl text-xl relative title-color;
   }
 
   .games-list-item {
@@ -345,7 +336,7 @@ body {
 
 
   .web3-connect-btn {
-    @apply rounded p-2 shadow-sm shadow-current;/*bg-gradient-to-r from-[var(--highlight-text-start-hex)] to-[var(--highlight-text-end-hex)];*/
+    @apply rounded text-sm p-2 shadow-sm shadow-current;/*bg-gradient-to-r from-[var(--highlight-text-start-hex)] to-[var(--highlight-text-end-hex)];*/
   }
 
   .web3-connect-btn:hover {

diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
@@ -1,14 +1,11 @@
 import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
 import './globals.css'
 import Navbar from '@/app/components/Navbar';
 import {Web3OnboardProviderClient} from './utils/web3OnboardProvider';
 
-const inter = Inter({ subsets: ['latin'] })
-
 export const metadata: Metadata = {
-  title: 'World Arcade',
-  description: 'Generated by create next app',
+  title: 'RiVES',
+  description: 'RiscV Verifiable Entertainment System',
 }
 
 export default function RootLayout({
@@ -19,7 +16,7 @@ export default function RootLayout({
   return (
     <html lang="en-US">
       <Web3OnboardProviderClient>
-        <body className={inter.className}>
+        <body>
           <Navbar></Navbar>
           {children}
         </body>