feat: pages rework

1) landing page text and logo 2) cartridges page auto-select first cartridge 3) pressStart2P font applied only to key elements (titles, etc)
prototyp3-dev · Jan 22, 2024 · 233b9e2 · 233b9e2
1 parent 253b0a4
commit 233b9e2
Show file tree

Hide file tree

Showing 13 changed files with 74 additions and 91 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
@@ -15,13 +15,13 @@ function CartridgeDescription() {
     return (
         <div>
             <fieldset>
-                <legend className='font-bold text-xl'>Sumary</legend>
-                <p className='text-sm'>{selectedCartridge.info?.summary}</p>
+                <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>
-                <pre className={`${fontPressStart2P.className} text-sm`} style={{whiteSpace: "pre-wrap"}}>
+                <legend className={`font-bold text-xl ${fontPressStart2P.className}`}>Description</legend>
+                <pre style={{whiteSpace: "pre-wrap"}}>
                     {selectedCartridge.info?.description}
                 </pre>
             </fieldset>

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-xs'>
+                <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/CartridgeScoreboard.tsx b/frontend/app/components/CartridgeScoreboard.tsx
@@ -42,7 +42,7 @@ async function CartridgeScoreboard({cartridge_id}:{cartridge_id:string}) {
                     </th>
                 </tr>
             </thead>
-            <tbody className='text-xs'>
+            <tbody>
                 {
                     generalScores.map((scoreInfo, index) => {
                         return (

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,18 +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'>
+            {/* <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-sm 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>

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,23 +1,24 @@
 import React from 'react'
-// import Image from 'next/image'
-// import rivesLogo from '../../public/logo.png';
+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>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'/>
-    // <span className="subtitle-text">RiscV Verifiable Entertainment System</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/globals.css b/frontend/app/globals.css
@@ -258,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;
   }
 

diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
@@ -2,7 +2,6 @@ import type { Metadata } from 'next'
 import './globals.css'
 import Navbar from '@/app/components/Navbar';
 import {Web3OnboardProviderClient} from './utils/web3OnboardProvider';
-import { fontPressStart2P } from './utils/font';
 
 export const metadata: Metadata = {
   title: 'RiVES',
@@ -17,7 +16,7 @@ export default function RootLayout({
   return (
     <html lang="en-US">
       <Web3OnboardProviderClient>
-        <body className={fontPressStart2P.className}>
+        <body>
           <Navbar></Navbar>
           {children}
         </body>

diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
@@ -1,39 +1,24 @@
 import Title from "./components/Title";
+import { fontPressStart2P } from './utils/font';
 
 
 export default function Home() {
   return (
     <main className="">
       <section id="presentation-section" className="first-section">
-        <div className="basis-1/3 justify-self-start">
           <Title />
-        </div>
-
-        <div className="basis-2/3 ms-8">
-          <h2 className="subtitle-text title-color mb-4">About</h2>
-          <p className="mb-4">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada arcu ex, vitae gravida felis vestibulum ut.
-            Morbi congue, est ut dictum dignissim, lacus nibh laoreet est, in molestie metus massa eget nisi. In finibus eu massa vitae mattis.
-            Quisque iaculis eros vitae diam consectetur accumsan. Mauris efficitur magna tellus. Etiam sagittis mi nec varius congue.
-            Mauris nibh metus, ultrices ac ante id, vestibulum luctus velit. Morbi at metus tortor. Morbi in nisl lorem. Sed mattis feugiat ultrices.
-            Pellentesque quis maximus sem. Quisque gravida efficitur lorem, a commodo massa imperdiet vel.
+          {/* <h2 className={`subtitle-text title-color my-4 ${fontPressStart2P.className}`}>RiSCV Verifiable Entertainment System</h2> */}
+          <p className="my-6">
+            <span className={fontPressStart2P.className}>RiVES</span> (RISC-V Verifiable Entertainment System) is a free and open source verifiable fantasy game console for making and playing small onchain games.
+            All matches generate an output that can be used by anyone to reproduce and verify the gameplay.
+            No more lying about that epic speedrun or completing the final stage without taking a hit.
+            RIVES will enable decentralized trustless tournaments so that no one can deny your bounty after an epic play!
           </p>
 
-          <p className="mb-4">
-            Curabitur ut odio eget magna laoreet eleifend a eget justo. Etiam et venenatis nulla. Proin vestibulum luctus arcu, vitae tincidunt quam fringilla nec.
-            Duis faucibus, mi non scelerisque mattis, nunc orci pretium sapien, sit amet porttitor est tellus vel leo. Suspendisse tempor finibus urna.
-            Nunc vitae erat a ligula dictum condimentum at at lacus. Morbi a odio sed mi vehicula ornare in scelerisque tortor.
-            Phasellus ut mauris vitae felis dictum cursus sed nec metus. Curabitur iaculis dignissim tellus, non consequat justo maximus et.
-          </p>
+          <div className="w-1/2 bg-black h-1/2 rounded flex items-center justify-center">
+            Demo Video
+          </div>
 
-          <p>
-            Praesent vitae egestas nisl. Suspendisse vitae arcu ac ex volutpat dictum. Pellentesque fringilla sapien massa, non euismod sem cursus id.
-            Nullam posuere, nisl sit amet rutrum aliquet, sem justo lacinia odio, id sollicitudin sem lacus in orci.
-            Ut turpis urna, elementum sit amet convallis volutpat, dignissim eget magna. Praesent a tempus leo. Interdum et malesuada fames ac ante ipsum primis in faucibus.
-            Integer porttitor purus id nunc porta, eu pellentesque ipsum luctus. Donec a luctus ipsum. Ut dictum dolor eu condimentum ornare. Maecenas dictum feugiat mattis.
-            Maecenas mollis at dolor volutpat tincidunt. Morbi vehicula metus non ipsum tempor, quis venenatis libero iaculis. Nulla facilisi.
-          </p>
-        </div>
       </section>
       {/* <section id="statistical-section" className="h-svh">
         placeholder for statistical info retrieved from DApp

diff --git a/frontend/public/rives_logo.png b/frontend/public/rives_logo.png