@oasisomniverse/nextjs 1.0.0

package/src/components/Signup.tsx

@@ -0,0 +1,286 @@
+'use client';
+import React from "react";
+
+import ShowIcon from '../assets/images/visible-icon.svg';
+import HideIcon from '../assets/images/hidden-icon.svg';
+
+import { toast } from "react-toastify";
+import Loader from "react-loader-spinner";
+import { Modal } from 'react-bootstrap';
+import { Formik } from "formik";
+import * as Yup from "yup";
+import axios from "axios";
+import "../../src/assets/scss/signup.scss";
+import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
+import API_BASE_URL from "../config/api";
+
+export default class Signup extends React.Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            loading: false,
+            form: {
+                firstName: '',
+                lastName: '',
+                email: '',
+                password: '',
+                confirmPassword: '',
+                acceptTerms: false,
+                avatarType: 'User'
+            },
+            showPassword: false,
+            showconfirmPassword: false,
+        }
+    }
+
+    initialValues = {
+        firstName: '',
+        lastName: '',
+        email: '',
+        password: '',
+        confirmPassword: '',
+        acceptTerms: false
+    }
+
+    validationSchema = Yup.object().shape({
+        firstName: Yup.string()
+            .required("First name is required"),
+        lastName: Yup.string()
+            .required("Last name is required"),
+        email: Yup.string()
+            .email("Email is invalid")
+            .required("Email is required"),
+        password: Yup.string()
+            .required("No password provided.")
+            .min(8, "Password is too short - should be 8 characters minimum."),
+        confirmPassword: Yup.string()
+            .required("No password provided.")
+            .min(8, "Password is too short - should be 8 characters minimum.")
+            .oneOf([Yup.ref('password'), null], "Password did not match"),
+        acceptTerms: Yup.boolean()
+            .required("Accept terms is required to be checked")    
+    })
+
+    handleSignup = () => {
+        if (this.state.form.password === this.state.form.confirmPassword) {
+            if(!this.state.form.acceptTerms){
+                toast.info('Please accept terms')
+                return
+            }
+            let data = {...this.state.form, Username: this.state.form.email}
+
+            this.setState({ loading: true })
+            
+            axios({
+                method: 'post',
+                url: `${API_BASE_URL}/avatar/register`,
+                data: data,
+                headers: {
+                    'Content-Type': 'application/json'
+                }, 
+            })
+            .then((response) => {
+                this.setState({loading: false})
+
+                if (response.data.result?.isError) {
+                    toast.error(response.data.result.message);
+                    return;
+                }
+    
+                toast.success(response.data.result.message);
+                this.props.hide();
+                this.props.showLogin();
+            })
+            .catch((err) => {
+                this.setState({loading: false})
+                return { error: true, data: err };
+            });
+        } else {
+            toast.error("Password did not match")
+        }
+    }
+
+    render() {
+        const { showPassword, showconfirmPassword, loading } = this.state;
+        const { show, hide, change } = this.props;
+
+        return (
+            <>
+                <Formik
+                    initialValues={this.initialValues}
+                    validationSchema={this.validationSchema}
+                    onSubmit={(values, { setSubmitting, resetForm }) => {
+                        setTimeout(() => {
+                            let form = {...values, avatarType: 'User'};
+                            this.setState({ form })
+                            this.handleSignup();
+
+                            setSubmitting(true);
+                            // resetForm();
+                            setSubmitting(false);
+                        }, 400)
+                    }}
+                >
+                    {({ values, errors, touched, isSubmitting, handleChange, handleBlur, handleSubmit }) => (
+                        <Modal centered className="custom-modal" show={show} onHide={hide}>
+                            <Modal.Body>
+                                <span className="form-cross-icon" onClick={hide}>
+                                    <i className="fa fa-times"></i>
+                                </span>
+
+                                <form className="custom-form" onSubmit={handleSubmit}>
+                                    <div className="form-header">
+                                        <h2>Sign Up</h2>
+
+                                        <p>
+                                            Already have an account?
+                                            <span className="text-link" onClick={change}> Beam In!</span>
+                                        </p>
+                                    </div>
+
+                                    <div className="form-inputs grid-form">
+                                        <div className={this.handleFormFieldClass(errors.firstName, touched.firstName)}>
+                                            <label>First Name</label>
+                                            <input
+                                                type="text"
+                                                name="firstName"
+                                                disabled={loading}
+                                                value={values.firstName}
+                                                onChange={handleChange}
+                                                onBlur={handleBlur}
+                                                placeholder="Jhone Doe"
+                                            />
+                                            <span className="text-danger">{errors.firstName && touched.firstName && errors.firstName}</span>
+                                        </div>
+
+                                        <div className={this.handleFormFieldClass(errors.lastName, touched.lastName)}>
+                                            <label>Last Name</label>
+                                            <input
+                                                type="text"
+                                                name="lastName"
+                                                disabled={loading}
+                                                value={values.lastName}
+                                                onChange={handleChange}
+                                                onBlur={handleBlur}
+                                                placeholder="Jhone Doe"
+                                            />
+                                            <span className="text-danger">{errors.lastName && touched.lastName && errors.lastName}</span>
+                                        </div>
+
+                                        <div className={`${this.handleFormFieldClass(errors.email, touched.email)} mail-box`}>
+                                            <label>Email</label>
+                                            <input
+                                                type="email"
+                                                name="email"
+                                                disabled={loading}
+                                                value={values.email}
+                                                onChange={handleChange}
+                                                onBlur={handleBlur}
+                                                placeholder="name@example.com"
+                                            />
+                                            <span className="text-danger">{errors.email && touched.email && errors.email}</span>
+                                        </div>
+
+                                        <div className={this.handleFormFieldClass(errors.password, touched.password)}>
+                                            <label>Password</label>
+                                            <div className="have-icon">
+                                                <input
+                                                    type={`${showPassword ? "text" : "password"}`}
+                                                    name="password"
+                                                    value={values.password}
+                                                    onChange={handleChange}
+                                                    disabled={loading}
+                                                    onBlur={handleBlur}
+                                                    placeholder="password"
+                                                />
+                                                <img
+                                                    className="field-icon"
+                                                    onClick={() => this.setState({ showPassword: !showPassword })}
+                                                    src={showPassword ? ShowIcon : HideIcon}
+                                                    alt="icon"
+                                                />
+                                            </div>
+                                            <span className="text-danger">{errors.password && touched.password && errors.password}</span>
+                                        </div>
+
+                                        <div className={this.handleFormFieldClass(errors.confirmPassword, touched.confirmPassword)} >
+                                            <label>Confirm Password</label>
+                                            <div className="have-icon">
+                                                <input
+                                                    type={`${showconfirmPassword ? "text" : "password"}`}
+                                                    name="confirmPassword"
+                                                    value={values.confirmPassword}
+                                                    onChange={handleChange}
+                                                    onBlur={handleBlur}
+                                                    disabled={loading}
+                                                    placeholder="confirm password"
+                                                />
+                                                <img
+                                                    className="field-icon"
+                                                    onClick={() => this.setState({ showconfirmPassword: !showconfirmPassword })}
+                                                    src={showconfirmPassword ? ShowIcon : HideIcon}
+                                                    alt="loading..."
+                                                />
+                                            </div>
+                                            <span className="text-danger">{errors.confirmPassword && touched.confirmPassword && errors.confirmPassword}</span>
+                                        </div>
+                                        <div className="remember-me">
+                                                <label>
+                                                    <input
+                                                        type="checkbox"
+                                                        name="acceptTerms"
+                                                        value={values.acceptTerms}
+                                                        onChange={handleChange}
+                                                        disabled={loading}
+                                                        id="acceptTerms"
+                                                    />
+                                                    Accept Terms
+                                                </label>
+                                        </div>
+                                        <span className="text-danger">{errors.acceptTerms && touched.acceptTerms && errors.acceptTerms}</span>
+
+                                        {loading ? (
+                                          <button
+                                            type="submit"
+                                            className="submit-button"
+                                            disabled={true}
+                                            style={{
+                                              display: "flex",
+                                              justifyContent: "space-around",
+                                              cursor: "progress",
+                                            }}
+                                          >
+                                            Submitting
+                                            <Loader
+                                              type="Oval"
+                                              height={15}
+                                              width={15}
+                                              color="#fff"
+                                            />
+                                          </button>
+                                        ) : (
+                                          <button
+                                            type="submit"
+                                            className="submit-button"
+                                            disabled={false}
+                                          >Submit</button>
+                                        )}
+                                    </div>
+                                </form>
+                            </Modal.Body>
+                        </Modal>
+                    )}
+                </Formik>
+            </>
+        )
+    }
+
+    handleFormFieldClass(error, touched) {
+        let classes = "single-form-field ";
+        classes += (error && touched) ? "has-error" : "";
+
+        return classes;
+    }
+}

package/src/components/VerifyEmail.tsx

@@ -0,0 +1,69 @@
+'use client';
+import React, { Component } from 'react';
+import axios from 'axios';
+// import { ToastContainer, toast } from "react-toastify";
+import { toast } from "react-toastify";
+import API_BASE_URL from "../config/api";
+
+// import { Link, withRouter } from "react-router-dom";
+import { withRouter } from "react-router-dom";
+
+class VerifyEmail extends Component {
+
+    constructor(props) {
+        super(props);
+            this.state = {
+            loading: true,
+            error: null,
+            message: null,
+        };
+    }
+
+    componentDidMount() {
+        const searchParams = new URLSearchParams(this.props.location.search);
+        const token = searchParams.get('token');
+
+        axios.get(`${API_BASE_URL}/avatar/verify-email?token=${token}`)
+        .then(response => {
+            this.setState({loading: false})
+
+            if(response.data.result?.isError) {
+                toast.error(response?.data?.result.message);
+                return;
+            }
+
+            this.props.history.push('/');
+
+            toast.success(response?.data?.result.message);
+            this.setState({
+                message: response.data.message,
+            });
+        })
+        .catch(error => {
+            this.setState({
+                loading: false,
+                error: error.response.data.message,
+            });
+        });
+    }
+
+  render() {
+    const { loading, error, message } = this.state;
+
+    if (loading) {
+      return <div>Loading...</div>;
+    }
+
+    if (error) {
+      return <div>{error}</div>;
+    }
+
+    return (
+      <div>
+        {message}
+      </div>
+    );
+  }
+}
+
+export default withRouter(VerifyEmail);

package/src/components/common/AvatarConnect.tsx

@@ -0,0 +1,90 @@
+'use client';
+import React, { useState, useCallback } from 'react';
+import OasisModal from './OasisModal';
+
+const API_URL = 'https://api.web4.oasisomniverse.one';
+const SESSION_KEY = 'oasis_session';
+
+function loadSession() {
+  try { return JSON.parse(sessionStorage.getItem(SESSION_KEY)); } catch { return null; }
+}
+
+export default function AvatarConnect({ onLogin, onLogout, sessionKey = SESSION_KEY, apiUrl = API_URL }) {
+  const [session, setSession] = useState(loadSession);
+  const [open, setOpen] = useState(false);
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [showPwd, setShowPwd] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const doLogin = useCallback(async () => {
+    if (!username || !password) { setError('Please fill in all fields.'); return; }
+    setLoading(true); setError('');
+    try {
+      const { OASISClient } = await import('@oasisomniverse/web4-api');
+      const oasis = new OASISClient({ baseUrl: apiUrl });
+      const result = await oasis.auth.login({ username, password });
+      const karma = await oasis.karma.getKarmaForAvatar({ avatarId: result.avatarId });
+      const sess = { avatarId: result.avatarId, username, karma: karma.total ?? 0 };
+      sessionStorage.setItem(sessionKey, JSON.stringify(sess));
+      setSession(sess); setOpen(false);
+      onLogin?.(sess);
+    } catch (e) {
+      setError(e?.message ?? 'Login failed. Please check your credentials.');
+    } finally {
+      setLoading(false);
+    }
+  }, [username, password, apiUrl, sessionKey, onLogin]);
+
+  const doLogout = useCallback(() => {
+    sessionStorage.removeItem(sessionKey);
+    setSession(null);
+    onLogout?.();
+  }, [sessionKey, onLogout]);
+
+  if (session) {
+    return (
+      <div style={{ display:'flex', alignItems:'center', gap:10, background:'rgba(0,200,255,.08)', border:'1px solid rgba(0,200,255,.2)', borderRadius:999, padding:'6px 14px 6px 10px', fontSize:13 }}>
+        <span style={{ fontSize:18 }}>👤</span>
+        <span style={{ color:'#fff', fontWeight:600 }}>{session.username}</span>
+        <span style={{ color:'#00c8ff', fontFamily:"'Orbitron',sans-serif", fontSize:11 }}>⚡ {session.karma ?? 0}</span>
+        <button onClick={doLogout} style={{ background:'none', border:'1px solid rgba(255,100,100,.3)', color:'#ff8080', borderRadius:6, fontSize:11, padding:'3px 8px', cursor:'pointer', marginLeft:4 }}>Logout</button>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <button onClick={() => setOpen(true)} style={{ background:'linear-gradient(135deg,#00c8ff,#0080ff)', border:'none', borderRadius:8, color:'#fff', fontFamily:"'Orbitron',sans-serif", fontSize:12, fontWeight:700, letterSpacing:'.08em', padding:'9px 18px', cursor:'pointer' }}>
+        Beam In
+      </button>
+
+      <OasisModal open={open} onClose={() => setOpen(false)} title="Beam In">
+        <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
+          {error && <div style={{ background:'rgba(255,80,80,.12)', border:'1px solid rgba(255,80,80,.3)', color:'#ff6b6b', borderRadius:8, padding:'10px 14px', fontSize:13 }}>{error}</div>}
+          <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
+            <label style={{ fontSize:11, fontWeight:600, letterSpacing:'.06em', color:'#7a9bbf', textTransform:'uppercase' }}>Username</label>
+            <input value={username} onChange={e => setUsername(e.target.value)} type="text" placeholder="yourusername" autoComplete="username"
+              style={{ background:'rgba(255,255,255,.05)', border:'1px solid rgba(0,200,255,.2)', borderRadius:8, padding:'10px 14px', color:'#fff', fontSize:14, outline:'none' }} />
+          </div>
+          <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
+            <label style={{ fontSize:11, fontWeight:600, letterSpacing:'.06em', color:'#7a9bbf', textTransform:'uppercase' }}>Password</label>
+            <div style={{ position:'relative' }}>
+              <input value={password} onChange={e => setPassword(e.target.value)} type={showPwd ? 'text' : 'password'} placeholder="••••••••" autoComplete="current-password"
+                onKeyDown={e => e.key === 'Enter' && doLogin()}
+                style={{ width:'100%', background:'rgba(255,255,255,.05)', border:'1px solid rgba(0,200,255,.2)', borderRadius:8, padding:'10px 44px 10px 14px', color:'#fff', fontSize:14, outline:'none', boxSizing:'border-box' }} />
+              <button onClick={() => setShowPwd(v => !v)} type="button" style={{ position:'absolute', right:10, top:'50%', transform:'translateY(-50%)', background:'none', border:'none', cursor:'pointer', fontSize:16, padding:0, lineHeight:1 }}>
+                {showPwd ? '🙈' : '👁️'}
+              </button>
+            </div>
+          </div>
+          <button onClick={doLogin} disabled={loading}
+            style={{ background:'linear-gradient(135deg,#00c8ff,#0080ff)', border:'none', borderRadius:8, color:'#fff', fontFamily:"'Orbitron',sans-serif", fontSize:13, fontWeight:700, letterSpacing:'.08em', padding:12, cursor:'pointer', opacity: loading ? .5 : 1 }}>
+            {loading ? 'Connecting…' : 'Beam In'}
+          </button>
+        </div>
+      </OasisModal>
+    </>
+  );
+}

package/src/components/common/Contact.tsx

@@ -0,0 +1,61 @@
+'use client';
+import { useState } from 'react';
+
+const s = {
+  shell: { display: 'flex', flexDirection: 'column', gap: 18 },
+  header: { textAlign: 'center' },
+  title: { fontFamily: "'Orbitron',sans-serif", fontSize: 20, color: '#fff', margin: '0 0 6px' },
+  sub: { fontSize: 13, color: '#7a9bbf', margin: 0 },
+  error: { background: 'rgba(255,80,80,.12)', border: '1px solid rgba(255,80,80,.3)', color: '#ff6b6b', borderRadius: 8, padding: '10px 14px', fontSize: 13 },
+  success: { background: 'rgba(72,220,130,.12)', border: '1px solid rgba(72,220,130,.3)', color: '#48dc82', borderRadius: 8, padding: '10px 14px', fontSize: 13 },
+  grid2: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 },
+  field: { display: 'flex', flexDirection: 'column', gap: 6 },
+  label: { fontSize: 12, fontWeight: 600, letterSpacing: '.06em', color: '#7a9bbf', textTransform: 'uppercase' },
+  input: { width: '100%', background: 'rgba(255,255,255,.05)', border: '1px solid rgba(0,200,255,.2)', borderRadius: 8, padding: '10px 14px', color: '#fff', fontSize: 14, outline: 'none', boxSizing: 'border-box', fontFamily: 'inherit' },
+  textarea: { width: '100%', background: 'rgba(255,255,255,.05)', border: '1px solid rgba(0,200,255,.2)', borderRadius: 8, padding: '10px 14px', color: '#fff', fontSize: 14, outline: 'none', boxSizing: 'border-box', fontFamily: 'inherit', resize: 'vertical', minHeight: 100 },
+  btn: { background: 'linear-gradient(135deg,#00c8ff,#0080ff)', border: 'none', borderRadius: 8, color: '#fff', fontFamily: "'Orbitron',sans-serif", fontSize: 13, fontWeight: 700, letterSpacing: '.08em', padding: 12, cursor: 'pointer' },
+  btnDisabled: { opacity: .5, cursor: 'not-allowed' },
+};
+
+export function Contact() {
+  const [fields, setFields] = useState({ firstName: '', lastName: '', email: '', subject: '', message: '' });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [sent, setSent] = useState(false);
+
+  function set(k) { return e => setFields(f => ({ ...f, [k]: e.target.value })); }
+
+  async function submit() {
+    if (!fields.email || !fields.message) { setError('Please fill in your email and message.'); return; }
+    setLoading(true); setError('');
+    try {
+      await fetch('https://formsubmit.co/ajax/davidellams@hotmail.com', {
+        method: 'POST', headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+        body: JSON.stringify(fields),
+      });
+      setSent(true);
+    } catch (e) { setError(e?.message ?? 'Send failed. Please try again.'); }
+    finally { setLoading(false); }
+  }
+
+  return (
+    <div style={s.shell}>
+      <div style={s.header}><h2 style={s.title}>Contact Us</h2><p style={s.sub}>Get in touch with the OASIS team.</p></div>
+      {sent ? (
+        <div style={s.success}>✅ Message sent! We'll be in touch soon.</div>
+      ) : (
+        <>
+          {error && <div style={s.error}>{error}</div>}
+          <div style={s.grid2}>
+            <div style={s.field}><label style={s.label}>First Name</label><input style={s.input} value={fields.firstName} onChange={set('firstName')} placeholder="John" /></div>
+            <div style={s.field}><label style={s.label}>Last Name</label><input style={s.input} value={fields.lastName} onChange={set('lastName')} placeholder="Doe" /></div>
+          </div>
+          <div style={s.field}><label style={s.label}>Email</label><input style={s.input} type="email" value={fields.email} onChange={set('email')} placeholder="name@example.com" /></div>
+          <div style={s.field}><label style={s.label}>Subject</label><input style={s.input} value={fields.subject} onChange={set('subject')} placeholder="How can we help?" /></div>
+          <div style={s.field}><label style={s.label}>Message</label><textarea style={s.textarea} value={fields.message} onChange={set('message')} placeholder="Your message…" rows={4} /></div>
+          <button style={{ ...s.btn, ...(loading ? s.btnDisabled : {}) }} disabled={loading} onClick={submit}>{loading ? 'Sending…' : 'Send Message'}</button>
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/common/Eggs.tsx

@@ -0,0 +1,51 @@
+'use client';
+import { useState } from 'react';
+
+const RARITY_COLORS = { Common: '#7a9bbf', Rare: '#5ba8ff', Epic: '#b87fff', Legendary: '#ffb43c' };
+const INITIAL = [
+  { id: '1', name: 'Cosmic Egg', rarity: 'Legendary', hatchProgress: 75, hatched: false, reward: '+500 Karma Companion' },
+  { id: '2', name: 'Forest Egg', rarity: 'Common', hatchProgress: 100, hatched: true, reward: 'Woodland Sprite' },
+  { id: '3', name: 'Astral Egg', rarity: 'Epic', hatchProgress: 30, hatched: false, reward: '+200 Karma Companion' },
+  { id: '4', name: 'Ocean Egg', rarity: 'Rare', hatchProgress: 55, hatched: false, reward: 'Sea Guardian' },
+];
+
+export function Eggs() {
+  const [eggs, setEggs] = useState(INITIAL);
+  function incubate(id) {
+    setEggs(es => es.map(e => {
+      if (e.id !== id) return e;
+      const next = Math.min(100, e.hatchProgress + 25);
+      return { ...e, hatchProgress: next, hatched: next >= 100 };
+    }));
+  }
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
+      <div style={{ textAlign: 'center' }}>
+        <h2 style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 20, color: '#fff', margin: '0 0 6px' }}>🥚 Eggs</h2>
+        <p style={{ fontSize: 13, color: '#7a9bbf', margin: 0 }}>Hatch eggs to discover rare OASIS companions and rewards.</p>
+      </div>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(160px,1fr))', gap: 16 }}>
+        {eggs.map(e => (
+          <div key={e.id} style={{ background: e.hatched ? 'rgba(255,180,60,.04)' : 'rgba(255,255,255,.04)', border: `1px solid ${e.hatched ? 'rgba(255,180,60,.3)' : 'rgba(0,200,255,.15)'}`, borderRadius: 12, padding: '18px 14px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
+            <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', borderRadius: 999, padding: '3px 10px', border: `1px solid ${RARITY_COLORS[e.rarity]}44`, color: RARITY_COLORS[e.rarity] }}>{e.rarity}</div>
+            <div style={{ fontSize: 40 }}>{e.hatched ? '🐣' : '🥚'}</div>
+            <div style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 12, color: '#fff', textAlign: 'center' }}>{e.name}</div>
+            {!e.hatched ? (
+              <>
+                <div style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 4, alignItems: 'center' }}>
+                  <div style={{ width: '100%', height: 6, background: 'rgba(255,255,255,.1)', borderRadius: 999, overflow: 'hidden' }}>
+                    <div style={{ height: '100%', width: `${e.hatchProgress}%`, background: 'linear-gradient(90deg,#00c8ff,#0080ff)', borderRadius: 999, transition: 'width .4s' }} />
+                  </div>
+                  <div style={{ fontSize: 11, color: '#7a9bbf' }}>{e.hatchProgress}%</div>
+                </div>
+                <button style={{ width: '100%', background: 'linear-gradient(135deg,#ffb43c,#ff8c00)', border: 'none', borderRadius: 7, color: '#fff', fontFamily: "'Orbitron',sans-serif", fontSize: 11, fontWeight: 700, letterSpacing: '.08em', padding: 8, cursor: 'pointer' }} onClick={() => incubate(e.id)}>Incubate</button>
+              </>
+            ) : (
+              <div style={{ fontSize: 12, color: '#ffb43c', fontWeight: 600, textAlign: 'center' }}>✨ {e.reward}</div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/common/Game.tsx

@@ -0,0 +1,37 @@
+'use client';
+import { useState } from 'react';
+
+const INITIAL = [
+  { id: '1', name: 'Karma Wars', genre: 'Strategy', description: 'Battle other avatars for karma dominance in real-time.', players: 12450, karma: 50, icon: '⚔️', playing: false },
+  { id: '2', name: 'Seed Garden', genre: 'Simulation', description: 'Grow and cultivate a virtual garden to earn seeds and karma.', players: 8900, karma: 30, icon: '🌱', playing: false },
+  { id: '3', name: 'OASIS Racer', genre: 'Racing', description: 'Race across virtual worlds and earn speed karma.', players: 5600, karma: 40, icon: '🏎️', playing: false },
+  { id: '4', name: 'NFT Quest', genre: 'RPG', description: 'An epic RPG adventure to discover legendary NFTs.', players: 22000, karma: 80, icon: '🗡️', playing: false },
+];
+
+export function Game() {
+  const [games, setGames] = useState(INITIAL);
+  function toggle(id) { setGames(l => l.map(x => x.id === id ? { ...x, playing: !x.playing } : x)); }
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
+      <div style={{ textAlign: 'center' }}>
+        <h2 style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 20, color: '#fff', margin: '0 0 6px' }}>🎮 Games</h2>
+        <p style={{ fontSize: 13, color: '#7a9bbf', margin: 0 }}>Play games in the OASIS to earn karma and rewards.</p>
+      </div>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(200px,1fr))', gap: 16 }}>
+        {games.map(g => (
+          <div key={g.id} style={{ background: g.playing ? 'rgba(0,200,255,.05)' : 'rgba(255,255,255,.04)', border: `1px solid ${g.playing ? 'rgba(0,200,255,.5)' : 'rgba(0,200,255,.12)'}`, borderRadius: 12, padding: '18px 14px', display: 'flex', flexDirection: 'column', gap: 8 }}>
+            <div style={{ fontSize: 40 }}>{g.icon}</div>
+            <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: '#5ba8ff' }}>{g.genre}</div>
+            <div style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 13, color: '#fff' }}>{g.name}</div>
+            <div style={{ fontSize: 12, color: '#7a9bbf', lineHeight: 1.5, flex: 1 }}>{g.description}</div>
+            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+              <div style={{ fontSize: 11, color: '#7a9bbf' }}>👥 {g.players.toLocaleString()}</div>
+              <div style={{ fontSize: 11, color: '#48dc82', fontWeight: 600 }}>+{g.karma} karma/hr</div>
+            </div>
+            <button onClick={() => toggle(g.id)} style={{ background: g.playing ? 'rgba(255,80,80,.2)' : 'linear-gradient(135deg,#00c8ff,#0080ff)', border: g.playing ? '1px solid rgba(255,80,80,.35)' : 'none', borderRadius: 8, color: g.playing ? '#ff6b6b' : '#fff', fontFamily: "'Orbitron',sans-serif", fontSize: 12, fontWeight: 700, letterSpacing: '.08em', padding: 9, cursor: 'pointer', marginTop: 4 }}>{g.playing ? '⏹ Stop' : '▶ Play'}</button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/common/HyperDrive.tsx

@@ -0,0 +1,51 @@
+'use client';
+import { useState } from 'react';
+
+const METRICS = [{ label: 'Throughput', value: '4.2 TB/s' }, { label: 'Latency', value: '0.3ms' }, { label: 'Uptime', value: '99.98%' }];
+const NODES = [
+  { id: '1', name: 'ONODE Alpha — US East', status: 'active', latency: 12 },
+  { id: '2', name: 'ONODE Beta — EU West', status: 'active', latency: 28 },
+  { id: '3', name: 'ONODE Gamma — Asia Pacific', status: 'idle', latency: 55 },
+];
+
+export function HyperDrive() {
+  const [active, setActive] = useState(false);
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
+      <div style={{ textAlign: 'center' }}>
+        <h2 style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 20, color: '#fff', margin: '0 0 6px' }}>🚀 HyperDrive</h2>
+        <p style={{ fontSize: 13, color: '#7a9bbf', margin: 0 }}>Quantum-speed data layer for the OASIS Omniverse.</p>
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 14, background: active ? 'rgba(0,200,255,.05)' : 'rgba(255,255,255,.04)', border: `1px solid ${active ? 'rgba(0,200,255,.4)' : 'rgba(0,200,255,.12)'}`, borderRadius: 12, padding: 16 }}>
+        <div style={{ fontSize: 28 }}>{active ? '⚡' : '💤'}</div>
+        <div style={{ flex: 1 }}>
+          <div style={{ fontSize: 12, color: '#7a9bbf', textTransform: 'uppercase', letterSpacing: '.06em' }}>HyperDrive Status</div>
+          <div style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 16, color: active ? '#00c8ff' : '#7a9bbf', marginTop: 2 }}>{active ? 'ACTIVE' : 'OFFLINE'}</div>
+        </div>
+        <button onClick={() => setActive(a => !a)} style={{ background: active ? 'rgba(255,80,80,.2)' : 'linear-gradient(135deg,#00c8ff,#0080ff)', border: active ? '1px solid rgba(255,80,80,.35)' : 'none', borderRadius: 8, color: active ? '#ff6b6b' : '#fff', fontFamily: "'Orbitron',sans-serif", fontSize: 12, fontWeight: 700, letterSpacing: '.08em', padding: '10px 20px', cursor: 'pointer' }}>{active ? 'Disengage' : 'Engage'}</button>
+      </div>
+      {active && (
+        <>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 12 }}>
+            {METRICS.map(m => (
+              <div key={m.label} style={{ background: 'rgba(255,255,255,.04)', border: '1px solid rgba(0,200,255,.1)', borderRadius: 10, padding: 14, textAlign: 'center' }}>
+                <div style={{ fontFamily: "'Share Tech Mono',monospace", fontSize: 20, color: '#00c8ff', fontWeight: 600 }}>{m.value}</div>
+                <div style={{ fontSize: 11, color: '#7a9bbf', marginTop: 4, textTransform: 'uppercase', letterSpacing: '.06em' }}>{m.label}</div>
+              </div>
+            ))}
+          </div>
+          <div style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 12, color: '#7a9bbf', letterSpacing: '.06em', textTransform: 'uppercase' }}>Connected Nodes</div>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+            {NODES.map(n => (
+              <div key={n.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', background: 'rgba(255,255,255,.03)', border: '1px solid rgba(0,200,255,.07)', borderRadius: 8 }}>
+                <div style={{ width: 8, height: 8, borderRadius: '50%', background: n.status === 'active' ? '#48dc82' : '#7a9bbf', boxShadow: n.status === 'active' ? '0 0 6px #48dc82' : undefined, flexShrink: 0 }} />
+                <div style={{ flex: 1, fontSize: 13, color: '#e0f0ff' }}>{n.name}</div>
+                <div style={{ fontFamily: "'Share Tech Mono',monospace", fontSize: 12, color: '#7a9bbf' }}>{n.latency}ms</div>
+              </div>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}