Scribd
Upload
1 views9 pages

Solo Leveling

The document is a React application that implements a ranking and skill system for users, featuring various ranks, skills, and quests. It includes functionalities for tracking experience points (XP), leveling up skills, and completing quests, with a user interface that displays an overview, skills, quests, and rank systems. The application utilizes hooks for state management and provides visual feedback through toast notifications.

Uploaded by

jaylond.business
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
1 views9 pages

Solo Leveling

The document is a React application that implements a ranking and skill system for users, featuring various ranks, skills, and quests. It includes functionalities for tracking experience points (XP), leveling up skills, and completing quests, with a user interface that displays an overview, skills, quests, and rank systems. The application utilizes hooks for state management and provides visual feedback through toast notifications.

Uploaded by

jaylond.business
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

import { useState, useEffect } from "react";

const RANKS = [
{ id:"E", label:"E-Rank", minAvg:1, color:"#6b7280", bg:"#1a1a1a", glow:"#6
{ id:"D", label:"D-Rank", minAvg:4, color:"#4ade80", bg:"#0d1f12", glow:"#2
{ id:"C", label:"C-Rank", minAvg:7, color:"#38bdf8", bg:"#0c1929", glow:"#0
{ id:"B", label:"B-Rank", minAvg:11, color:"#a78bfa", bg:"#160f2a", glow:"#8
{ id:"A", label:"A-Rank", minAvg:16, color:"#fb923c", bg:"#1f1008", glow:"#f
{ id:"S", label:"S-Rank", minAvg:21, color:"#fbbf24", bg:"#1f1800", glow:"#f
{ id:"SS", label:"SS-Rank", minAvg:28, color:"#f87171", bg:"#2a0a0a", glow:"#e
{ id:"SSS",label:"SSS-Rank", minAvg:36, color:"#67e8f9", bg:"#021b1f", glow:"#0
{ id:"SM", label:"Shadow Monarch", minAvg:45, color:"#c084fc", bg:"#130920", glow:"#9
{ id:"∞", label:"Monarch Beyond Borders", minAvg:55,color:"#e2e8f0",bg:"#0a0a0f", glow:"#c
];

const SKILLS = {
oh: { name:"Objection Handling", icon:" ", stat:"Charisma", color:"#a78bfa", acts:[{l:"H
ca: { name:"Client Acquisition", icon:" ", stat:"Strategy", color:"#38bdf8", acts:[{l:"
ft: { name:"Fitness", icon:" ", stat:"Endurance", color:"#4ade80", acts:[{l:"
er: { name:"Emotional Regulation",icon:" ", stat:"Resolve", color:"#fb923c", acts:[{l:"
ds: { name:"Discipline Training", icon:" ", stat:"Willpower", color:"#fbbf24", acts:[{l:"
};

const QUESTS = [
{ id:0, name:"The Persistence Trial", desc:"Advance 3 leads to Day 4+ of outreach cycle",
{ id:1, name:"Blade Sharpener", desc:"Handle 5 objections cleanly this week",
{ id:2, name:"Iron Constitution", desc:"Complete 4 workouts this week",
{ id:3, name:"The Unshaken Mind", desc:"Log 5 emotional regulation wins",
{ id:4, name:"The Daily Grind", desc:"Hit full daily standard 5 of 7 days",
{ id:5, name:"Shadow Outreach", desc:"Add 50 new leads to HubSpot this week",
{ id:6, name:"The First Seal", desc:"Land your first paying client",
];

function xpNeeded(lv) {
return [Link](100 * [Link](1.18, lv - 1));
}

function getRank(avgLv) {
let r = RANKS[0];
for (const x of RANKS) if (avgLv >= [Link]) r = x;
return r;
}

function avgLevel(levels) {
const vals = [Link](levels);
return [Link]((a, b) => a + b, 0) / [Link];
}

const initLevels = () => [Link]([Link](SKILLS).map(k => [k, 1]));


const initXP = () => [Link]([Link](SKILLS).map(k => [k, 0]));
const initQDone = () => [Link]([Link](q => [[Link], false]));

export default function App() {


const [tab, setTab] = useState("overview");
const [levels, setLevels] = useState(initLevels);
const [xp, setXP] = useState(initXP);
const [qdone, setQDone] = useState(initQDone);
const [toast, setToast] = useState(null);
const [toastKey, setToastKey] = useState(0);

function showToast(msg, type="xp") {


setToast({ msg, type });
setToastKey(k => k + 1);
}

useEffect(() => {
if (!toast) return;
const t = setTimeout(() => setToast(null), 2600);
return () => clearTimeout(t);
}, [toastKey]);

function addXP(sid, amount, label) {


setLevels(prev => {
setXP(xpPrev => {
let newXP = { ...xpPrev };
let newLevels = { ...prev };
newXP[sid] += amount;
let leveled = false;
while (newXP[sid] >= xpNeeded(newLevels[sid])) {
newXP[sid] -= xpNeeded(newLevels[sid]);
newLevels[sid]++;
leveled = true;
}
if (leveled) showToast(`LEVEL UP! ${SKILLS[sid].name} → Lv ${newLevels[sid]}`, "lvl")
else showToast(`+${amount} XP — ${label}`, "xp");
setLevels(newLevels);
return newXP;
});
return prev;
});
}
function completeQuest(q) {
if (qdone[[Link]]) return;
setQDone(prev => ({ ...prev, [[Link]]: true }));
addXP([Link], [Link], [Link]);
}

const avg = avgLevel(levels);


const rank = getRank(avg);
const totalLevels = [Link](levels).reduce((a, b) => a + b, 0);

const tabs = [
{ id:"overview", label:"Overview" },
{ id:"skills", label:"Skills" },
{ id:"quests", label:"Quests" },
{ id:"ranks", label:"Rank System" },
];

return (
<div style={{ background:"#080810", minHeight:"100vh", fontFamily:"'Segoe UI', system-ui,

{/* Top Banner */}


<div style={{ background:"#0d0d1f", borderBottom:"1px solid #1e1e3a", padding:"14px 20p
<div>
<div style={{ fontSize:11, letterSpacing:"0.12em", color:"#4a4a6a", textTransform:"
<div style={{ fontSize:18, fontWeight:600, letterSpacing:"0.04em", color:"#e2e8f0"
</div>
<div style={{ textAlign:"right" }}>
<div style={{ display:"inline-block", padding:"4px 14px", borderRadius:100, border:
{[Link]}
</div>
<div style={{ fontSize:11, color:"#4a4a6a", marginTop:4 }}>Total Levels: {totalLeve
</div>
</div>

{/* Toast */}


{toast && (
<div key={toastKey} style={{ position:"fixed", top:70, left:"50%", transform:"transla
{[Link]==="lvl" ? " " : "✦ "}{[Link]}
</div>
)}

<style>{`@keyframes fadeIn{from{opacity:0;transform:translateX(-50%) translateY(-6px)}t

{/* Tabs */}


<div style={{ display:"flex", gap:4, padding:"14px 20px 0", overflowX:"auto" }}>
{[Link](t => (
<button key={[Link]} onClick={() => setTab([Link])} style={{ background: tab===[Link] ? "
{[Link]}
</button>
))}
</div>

<div style={{ padding:"16px 20px" }}>


{tab==="overview" && <Overview levels={levels} xp={xp} rank={rank} avg={avg} />}
{tab==="skills" && <Skills levels={levels} xp={xp} addXP={addXP} />}
{tab==="quests" && <Quests qdone={qdone} completeQuest={completeQuest} levels={le
{tab==="ranks" && <RankSystem avg={avg} rank={rank} />}
</div>
</div>
);
}

function StatBar({ label, value, max=100, color, sublabel }) {


const pct = [Link]([Link](value/max*100), 100);
return (
<div style={{ marginBottom:14 }}>
<div style={{ display:"flex", justifyContent:"space-between", marginBottom:5 }}>
<span style={{ fontSize:13, fontWeight:500, color:"#c4c4d4" }}>{label}</span>
<span style={{ fontSize:12, color:"#4a4a6a" }}>{sublabel}</span>
</div>
<div style={{ background:"#12121f", borderRadius:100, height:5, overflow:"hidden" }}>
<div style={{ width:`${pct}%`, height:"100%", background:color, borderRadius:100, box
</div>
</div>
);
}

function Overview({ levels, xp, rank, avg }) {


const STATS = [
{ n:"Charisma", sids:["oh","ca"], color:"#a78bfa", sub:"Persuasion & Rapport" },
{ n:"Strategy", sids:["ca","oh"], color:"#38bdf8", sub:"Outreach & Systems" },
{ n:"Endurance", sids:["ft"], color:"#4ade80", sub:"Physical Conditioning" },
{ n:"Resolve", sids:["er","ds"], color:"#fb923c", sub:"Mental Toughness" },
{ n:"Willpower", sids:["ds","er"], color:"#fbbf24", sub:"Habit Strength" },
];
return (
<div>
{/* Player card */}
<div style={{ background:"#0d0d1f", border:"1px solid #1e1e3a", borderRadius:12, paddin
<div style={{ display:"flex", alignItems:"center", gap:14, marginBottom:16 }}>
<div style={{ width:52, height:52, borderRadius:"50%", background:[Link], border:`
{[Link]}
</div>
<div>
<div style={{ fontSize:16, fontWeight:600, color:"#e2e8f0" }}>Jay · JayDesigns</d
<div style={{ fontSize:13, color:"#4a4a6a" }}>SMMA Hunter · Trinidad &amp; Tobago
<div style={{ fontSize:12, color:[Link], marginTop:2 }}>{[Link]} — avg lv
</div>
</div>
<div style={{ fontSize:12, color:"#4a4a6a", fontStyle:"italic", borderTop:"1px solid
"{[Link]}"
</div>
</div>

{/* Skill bars */}


<div style={{ background:"#0d0d1f", border:"1px solid #1e1e3a", borderRadius:12, paddin
<div style={{ fontSize:11, letterSpacing:"0.08em", color:"#4a4a6a", textTransform:"up
{[Link](s => {
const val = [Link]([Link]((acc, id, i) => acc + levels[id] * (i ? 3 : 5),
return <StatBar key={s.n} label={s.n} value={val} color={[Link]} sublabel={[Link]}
})}
</div>

{/* Skill summary */}


<div style={{ background:"#0d0d1f", border:"1px solid #1e1e3a", borderRadius:12, paddin
<div style={{ fontSize:11, letterSpacing:"0.08em", color:"#4a4a6a", textTransform:"up
{[Link](SKILLS).map(([id, sk]) => {
const lv = levels[id], needed = xpNeeded(lv), cur = xp[id];
const pct = [Link](cur/needed*100);
return (
<div key={id} style={{ display:"flex", alignItems:"center", gap:10, marginBottom:
<span style={{ fontSize:16, width:22 }}>{[Link]}</span>
<div style={{ flex:1 }}>
<div style={{ display:"flex", justifyContent:"space-between", marginBottom:4
<span style={{ fontSize:13, color:"#c4c4d4" }}>{[Link]}</span>
<span style={{ fontSize:12, color:"#4a4a6a" }}>Lv {lv} &nbsp;{cur}/{needed}
</div>
<div style={{ background:"#12121f", borderRadius:100, height:4, overflow:"hid
<div style={{ width:`${pct}%`, height:"100%", background:[Link], borderRa
</div>
</div>
</div>
);
})}
</div>

{/* North Star */}


<div style={{ background:"#0a0a18", border:"1px solid #9333ea44", borderRadius:12, padd
<div style={{ fontSize:11, letterSpacing:"0.08em", color:"#9333ea", textTransform:"up
<div style={{ fontSize:13, color:"#8888a8", lineHeight:1.7 }}>
First 3 paying clients → 10-15 clients in 5 months → Monaco residency → One of the
</div>
</div>
</div>
);
}

function Skills({ levels, xp, addXP }) {


return (
<div>
{[Link](SKILLS).map(([id, sk]) => {
const lv = levels[id], needed = xpNeeded(lv), cur = xp[id];
const pct = [Link](cur/needed*100);
const nextUnlock = lv < 5 ? `Lv 5 — Advanced ${[Link]} techniques unlock` :
lv < 10 ? `Lv 10 — ${[Link]} Mastery badge unlocks` :
lv < 21 ? `Lv 21 — S-Rank threshold` :
lv < 45 ? `Lv 45 — Shadow Monarch threshold` :
lv < 55 ? `Lv 55 — Monarch Beyond Borders` : "Maximum known rank achieved.";
return (
<div key={id} style={{ background:"#0d0d1f", border:"1px solid #1e1e3a", borderRadi
<div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-st
<div style={{ display:"flex", alignItems:"center", gap:10 }}>
<span style={{ fontSize:20 }}>{[Link]}</span>
<div>
<div style={{ fontSize:15, fontWeight:600, color:"#e2e8f0" }}>{[Link]}</di
<div style={{ fontSize:12, color:"#4a4a6a" }}>Stat: {[Link]}</div>
</div>
</div>
<div style={{ textAlign:"right" }}>
<div style={{ fontSize:22, fontWeight:700, color:[Link], lineHeight:1 }}>Lv
<div style={{ fontSize:11, color:"#4a4a6a", marginTop:3 }}>{cur}/{needed} XP<
</div>
</div>

<div style={{ marginBottom:12 }}>


<div style={{ display:"flex", justifyContent:"space-between", fontSize:11, colo
<span>Progress to Level {lv+1}</span><span>{pct}%</span>
</div>
<div style={{ background:"#12121f", borderRadius:100, height:6, overflow:"hidde
<div style={{ width:`${pct}%`, height:"100%", background:[Link], borderRadi
</div>
</div>

<div style={{ borderTop:"1px solid #1a1a2e", paddingTop:12, marginBottom:12 }}>


<div style={{ fontSize:11, color:"#4a4a6a", textTransform:"uppercase", letterSp
<div style={{ display:"flex", flexWrap:"wrap", gap:6 }}>
{[Link]((a, i) => (
<button key={i} onClick={() => addXP(id, a.x, a.l)} style={{ background:"#1
onMouseEnter={e => { [Link]=[Link]; [Link].
onMouseLeave={e => { [Link]="#1e1e3a"; [Link]
{a.l} <span style={{ color:"#4a4a6a" }}>+{a.x}</span>
</button>
))}
</div>
</div>

<div style={{ background:"#0a0a15", border:"1px solid #1a1a2e", borderRadius:8, p


▸ {nextUnlock}
</div>
</div>
);
})}
</div>
);
}

function Quests({ qdone, completeQuest, levels }) {


const done = [Link](qdone).filter(Boolean).length;
const total = [Link];
const earnedXP = [Link](q => qdone[[Link]]).reduce((s, q) => s + [Link], 0);
return (
<div>
<div style={{ background:"#0d0d1f", border:"1px solid #1e1e3a", borderRadius:12, paddin
<div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", ma
<div>
<div style={{ fontSize:15, fontWeight:600, color:"#e2e8f0" }}>Weekly Quests</div>
<div style={{ fontSize:12, color:"#4a4a6a", marginTop:2 }}>{done}/{total} complet
</div>
<div style={{ textAlign:"right" }}>
<div style={{ fontSize:20, fontWeight:700, color:"#fbbf24" }}>{[Link]
<div style={{ fontSize:11, color:"#4a4a6a" }}>earned this week</div>
</div>
</div>
<div style={{ background:"#12121f", borderRadius:100, height:6 }}>
<div style={{ width:`${[Link](done/total*100)}%`, height:"100%", background:"#f
</div>
</div>

{[Link](q => {
const sk = SKILLS[[Link]];
const isSpecial = [Link] >= 500;
return (
<div key={[Link]} onClick={() => completeQuest(q)} style={{ background:"#0d0d1f", bor
onMouseEnter={e => { if (!qdone[[Link]]) [Link]=[Link]
onMouseLeave={e => { if (!qdone[[Link]]) [Link]=isSpecia
<div style={{ display:"flex", gap:12, alignItems:"flex-start" }}>
<div style={{ width:20, height:20, borderRadius:5, border:`1.5px solid ${qdone[
{qdone[[Link]] && "✓"}
</div>
<div style={{ flex:1 }}>
<div style={{ fontSize:14, fontWeight:600, color:"#e2e8f0", marginBottom:3, t
{isSpecial && !qdone[[Link]] && <span style={{ color:"#fbbf24" }}>★ </span>}{
</div>
<div style={{ fontSize:13, color:"#5a5a7a", marginBottom:8 }}>{[Link]}</div>
<span style={{ fontSize:12, padding:"2px 10px", borderRadius:100, background:
+{[Link]} XP · {[Link]}
</span>
</div>
</div>
</div>
);
})}
</div>
);
}

function RankSystem({ avg, rank }) {


return (
<div>
<div style={{ background:"#0d0d1f", border:"1px solid #1e1e3a", borderRadius:12, paddin
<div style={{ fontSize:11, color:"#4a4a6a", textTransform:"uppercase", letterSpacing:
<div style={{ display:"flex", alignItems:"center", gap:12, padding:"14px", background
<div style={{ width:44, height:44, borderRadius:"50%", background:[Link], border:`
{[Link]}
</div>
<div>
<div style={{ fontSize:16, fontWeight:600, color:[Link] }}>{[Link]}</div>
<div style={{ fontSize:12, color:"#6666a0", marginTop:2 }}>Avg Level: {[Link]
</div>
</div>
</div>

<div style={{ background:"#0d0d1f", border:"1px solid #1e1e3a", borderRadius:12, paddin


<div style={{ fontSize:11, color:"#4a4a6a", textTransform:"uppercase", letterSpacing:
{[Link]((r, i) => {
const isActive = [Link] === getRank(avg).id;
const next = RANKS[i+1];
return (
<div key={[Link]} style={{ display:"flex", alignItems:"flex-start", gap:12, marginB
<div style={{ display:"flex", flexDirection:"column", alignItems:"center", flex
<div style={{ width:32, height:32, borderRadius:"50%", background: isActive ?
{[Link]}
</div>
{i < [Link]-1 && <div style={{ width:1, height:20, background:"#1e1e3a"
</div>
<div style={{ paddingTop:4 }}>
<div style={{ fontSize:13, fontWeight:600, color: isActive ? [Link] : "#6666
<div style={{ fontSize:12, color:"#4a4a6a" }}>Avg Lv {[Link]}{next?`–${next
</div>
</div>
);
})}
</div>

<div style={{ background:"#0a0a18", border:"1px solid #9333ea44", borderRadius:12, padd


<div style={{ fontSize:11, color:"#9333ea", textTransform:"uppercase", letterSpacing:
<div style={{ fontSize:13, color:"#6666a0", lineHeight:1.7 }}>
Early levels cost ~100 XP. By Level 20 each level costs ~1,600 XP. By Level 45 (Sha
</div>
<div style={{ display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:8, marginTop:12
{[[5,"~175 XP"],[10,"~405 XP"],[20,"~1.6k XP"],[30,"~6.6k XP"],[45,"~70k XP"],[55,"
<div key={lv} style={{ background:"#12121f", borderRadius:8, padding:"8px 10px",
<div style={{ fontSize:11, color:"#4a4a6a" }}>Level {lv}</div>
<div style={{ fontSize:13, fontWeight:500, color:"#9898b8" }}>{cost}</div>
</div>
))}
</div>
</div>
</div>
);
}

function getRank(avgLv) {
let r = RANKS[0];
for (const x of RANKS) if (avgLv >= [Link]) r = x;
return r;
}

You might also like