Embed

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Tradeshow Tycoon</title>

<style>
body {
    font-family: Arial;
    background: #0f1115;
    color: #e6e6e6;
    margin: 0;
}
.container { max-width: 950px; margin: auto; padding: 20px; }
.card {
    background: #1a1d24;
    padding: 15px;
    margin: 10px 0;
    border-radius: 10px;
}
button {
    padding: 10px;
    margin: 5px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: #2563eb;
    color: white;
}
button:hover { background: #1d4ed8; }
button:disabled { opacity: 0.4; }
.selected { background: #16a34a !important; }
.bar {
    height: 10px;
    background: #111827;
    border-radius: 6px;
    overflow: hidden;
    margin: 4px 0;
}
.fill {
    height: 100%;
    background: #38bdf8;
}
.small { font-size: 12px; opacity: 0.8; }
</style>

</head>

<body>
<div class="container">
<h1>🎪 Tradeshow Tycoon</h1>
<div id="game"></div>
</div>

<script>

/* =========================
   STATE
========================= */

let state = {
    year: 1,
    cash: 750000,
    revenue: 0,
    expenses: 0,
    profit: 0,

    prestige: 20,
    satisfaction: 50,
    retention: 50,
    hype: 20,
    attendees: 1000
};

/* =========================
   SCENARIOS (FULL NARRATIVE STYLE)
========================= */

const YEARS = [

/* YEAR 1 */
[
{
text:"Your first tradeshow struggles with low early awareness, and industry insiders are unsure whether your event is worth attending.",
A:"Spend heavily on aggressive digital ads and influencer campaigns to generate buzz quickly.",
B:"Focus on targeted industry outreach and offer early registrant perks to build credibility.",
C:"Create a mysterious invite-only underground campaign that sparks curiosity."
},
{
text:"A small but ambitious sponsor offers funding, but they demand strict control over branding and messaging throughout the show.",
A:"Accept their terms and scale aggressively using their funding.",
B:"Negotiate partial control to balance growth with brand integrity.",
C:"Reject the deal to preserve your long-term brand independence."
},
{
text:"Exhibitor setup delays begin to threaten your opening day, creating tension across vendors and staff.",
A:"Pay for overtime labor and rush everything into place.",
B:"Reorganize the floor plan to reduce bottlenecks and pressure points.",
C:"Lean into the chaos and turn setup into a behind-the-scenes storytelling moment."
}
],

/* YEAR 2 */
[
{
text:"A competing tradeshow launches nearby with similar positioning, threatening to split your audience.",
A:"Undercut pricing and dramatically increase marketing spend.",
B:"Differentiate your event through curated attendee experience.",
C:"Lean into a bold anti-convention identity to stand apart."
},
{
text:"Your registration system begins showing instability as attendee numbers increase.",
A:"Replace the system immediately with a new vendor.",
B:"Patch the system and introduce redundancy safeguards.",
C:"Transform delays into networking opportunities with interactive check-in zones."
},
{
text:"A keynote speaker cancels at the last minute, putting your schedule at risk.",
A:"Fly in a high-profile celebrity replacement.",
B:"Restructure the agenda and distribute time across other speakers.",
C:"Turn the moment into an open-format industry discussion."
}
],

/* YEAR 3 */
[
{
text:"Your attendee growth begins to plateau, raising concerns about the event’s long-term trajectory.",
A:"Increase marketing spend aggressively to drive new demand.",
B:"Improve exhibitor quality and refine audience targeting.",
C:"Rebrand the event toward a more exclusive, premium identity."
},
{
text:"An unexpected viral moment puts your event in the spotlight overnight.",
A:"Monetize the attention immediately through sponsors.",
B:"Carefully manage messaging to avoid overexposure.",
C:"Turn the moment into a defining symbol of your brand."
},
{
text:"Venue limitations restrict your ability to expand the show floor.",
A:"Pay a premium to override restrictions.",
B:"Optimize layout efficiency within constraints.",
C:"Transform limitations into immersive themed zones."
}
],

/* YEAR 4 */
[
{
text:"Exhibitors begin complaining about uneven traffic flow across the show floor.",
A:"Invest heavily in signage and paid traffic routing.",
B:"Redesign the floor layout for balance.",
C:"Turn navigation into a gamified attendee journey."
},
{
text:"A major sponsor threatens to withdraw unless they receive greater visibility.",
A:"Offer expanded premium placements.",
B:"Renegotiate based on measurable value.",
C:"Reframe the sponsor as a collaborative partner."
},
{
text:"Technical issues disrupt a major keynote presentation.",
A:"Replace your AV vendor immediately.",
B:"Patch systems and build redundancy.",
C:"Turn the glitch into a live experimental showcase."
}
],

/* YEAR 5 */
[
{
text:"Your tradeshow gains international attention, creating new growth opportunities.",
A:"Expand rapidly into global markets.",
B:"Stabilize operations before scaling further.",
C:"Reposition the event as a cultural movement."
},
{
text:"Rising attendance introduces new security challenges.",
A:"Increase security spending significantly.",
B:"Implement smarter crowd flow systems.",
C:"Integrate security into the experience design."
},
{
text:"Attendee satisfaction begins to dip slightly.",
A:"Introduce VIP tiers and premium upgrades.",
B:"Improve core logistics and comfort.",
C:"Add surprise experiential elements."
}
],

/* YEAR 6 */
[
{
text:"A major tech brand offers to dominate an entire hall exclusively.",
A:"Accept and restructure the show around them.",
B:"Negotiate limited exclusivity.",
C:"Reject to maintain a diverse exhibitor ecosystem."
},
{
text:"Severe weather disrupts entry and attendee flow.",
A:"Build emergency infrastructure quickly.",
B:"Redirect traffic efficiently indoors.",
C:"Turn the weather into part of the event narrative."
},
{
text:"Attendees begin experiencing content fatigue across sessions.",
A:"Bring in celebrity speakers.",
B:"Improve session variety and pacing.",
C:"Shift toward interactive formats."
}
],

/* YEAR 7 */
[
{
text:"Your event is now recognized as an industry leader with growing influence.",
A:"Scale aggressively through franchising.",
B:"Maintain steady and controlled growth.",
C:"Double down on prestige and cultural relevance."
},
{
text:"Exhibitors demand clearer return on investment from participation.",
A:"Introduce premium lead generation packages.",
B:"Improve analytics and reporting.",
C:"Redesign engagement as a narrative experience."
},
{
text:"A sponsor becomes embroiled in a public controversy.",
A:"Defend them publicly.",
B:"Take a neutral stance.",
C:"Distance your brand creatively."
}
],

/* YEAR 8 */
[
{
text:"Pricing strategy becomes more complex as demand fluctuates.",
A:"Raise prices aggressively.",
B:"Introduce tiered pricing models.",
C:"Shift toward value-based pricing."
},
{
text:"Long-time exhibitors begin considering leaving.",
A:"Offer loyalty incentives.",
B:"Reevaluate exhibitor satisfaction.",
C:"Reimagine exhibitor storytelling roles."
},
{
text:"A digital competitor emerges offering virtual experiences.",
A:"Compete directly.",
B:"Adopt a hybrid model.",
C:"Position your event as premium in-person only."
}
],

/* YEAR 9 */
[
{
text:"Operational complexity increases significantly as your event grows.",
A:"Hire a large operations team.",
B:"Streamline existing systems.",
C:"Turn complexity into a luxury experience."
},
{
text:"Investor interest in acquiring your event increases.",
A:"Scale aggressively to boost valuation.",
B:"Stabilize metrics before negotiating.",
C:"Focus on brand prestige for a premium exit."
},
{
text:"Attendee expectations reach new heights.",
A:"Invest in spectacle.",
B:"Ensure consistency and reliability.",
C:"Curate deeply immersive experiences."
}
],

/* YEAR 10 */
[
{
text:"Your final year will define the legacy of your tradeshow in the industry.",
A:"Maximize valuation at all costs.",
B:"Balance performance across all metrics.",
C:"Focus on legacy and long-term impact."
},
{
text:"Multiple acquisition offers are now on the table.",
A:"Start a bidding war.",
B:"Choose the most strategic buyer.",
C:"Select the partner aligned with your vision."
},
{
text:"The final impression of your event will shape its long-term reputation.",
A:"Push for maximum global visibility.",
B:"Ensure a stable and respected exit.",
C:"Create an unforgettable closing experience."
}
]

];

/* ========================= */

let yearState = {scenarios:[],done:{}};

function loadYear(){
    yearState.scenarios = YEARS[state.year-1];
    yearState.done = {};
}

/* =========================
   CHOICES
========================= */

function pick(i,c){
    if(yearState.done[i]) return;
    yearState.done[i]=c;

    if(c==="A"){
        state.revenue += 400000;
        state.expenses += 300000;
        state.hype += 10;
        state.attendees += 200;
    }
    if(c==="B"){
        state.revenue += 250000;
        state.expenses += 150000;
        state.prestige += 5;
        state.satisfaction += 5;
        state.attendees += 100;
    }
    if(c==="C"){
        state.revenue += 200000;
        state.expenses += 100000;
        state.prestige += 15;
        state.satisfaction += 10;
        state.attendees += 300;
    }

    render();
}

/* =========================
   END YEAR
========================= */

function endYear(){

    if(!yearState.scenarios.every((_,i)=>yearState.done[i])){
        return alert("Complete all scenarios");
    }

    let ticketRevenue = state.attendees * 150;
    let sponsorRevenue = state.prestige * 10000;
    state.revenue += ticketRevenue + sponsorRevenue;

    let operatingCost = state.attendees * 50;
    state.expenses += operatingCost;

    state.profit = state.revenue - state.expenses;
    state.cash += state.profit;

    if(state.cash < 0){
        document.getElementById("game").innerHTML = `
        <div class="card">
            <h1>💥 Bankruptcy</h1>
            <p>Your tradeshow ran out of cash and collapsed.</p>
            <p>Final Year: ${state.year}</p>
            <button onclick="location.reload()">Restart</button>
        </div>`;
        return;
    }

    state.attendees += Math.floor(state.hype * 5);

    state.revenue = 0;
    state.expenses = 0;

    state.year++;
    loadYear();
    render();
}

/* ========================= */

function bar(l,v){
    return `
    <div>${l}</div>
    <div class="bar"><div class="fill" style="width:${Math.min(100,v)}%"></div></div>`;
}

/* =========================
   RENDER
========================= */

function render(){

    let g=document.getElementById("game");

    if(state.year>10){

        let valuation =
            (state.attendees * 200) +
            (state.prestige * 50000) +
            (state.satisfaction * 30000) +
            (state.cash * 1.2);

        g.innerHTML=`
        <div class="card">
            <h1>🏁 Exit</h1>
            <p><b>Valuation:</b> $${Math.floor(valuation).toLocaleString()}</p>
            <p>Cash: $${state.cash.toLocaleString()}</p>
            <p>Attendees: ${state.attendees}</p>
            <p>Prestige: ${state.prestige}</p>

            <h3>${
                valuation > 50000000 ? "🏆 Industry Titan" :
                valuation > 20000000 ? "🚀 Market Leader" :
                valuation > 8000000 ? "📈 Strong Operator" :
                "🧪 Niche Experiment"
            }</h3>

            <button onclick="location.reload()">Play Again</button>
        </div>`;
        return;
    }

    let html=`<div class="card"><h2>Year ${state.year}</h2></div>`;

    yearState.scenarios.forEach((s,i)=>{
        let chosen=yearState.done[i];

        html+=`<div class="card">
        <p><b>${s.text}</b></p>`;

        for(let c of ["A","B","C"]){
            html+=`
            <button onclick="pick(${i},'${c}')"
            ${chosen?"disabled":""}
            class="${chosen===c?'selected':''}">
            ${s[c]}
            </button>`;
        }

        html+=`</div>`;
    });

    html+=`
    <div class="card">
        <button onclick="endYear()">▶ End Year</button>
    </div>

    <div class="card">
        <h3>💰 Financials</h3>
        <p>Cash: $${state.cash.toLocaleString()}</p>
        <p>Last Profit: $${state.profit.toLocaleString()}</p>
    </div>

    <div class="card">
        ${bar("Prestige",state.prestige)}
        ${bar("Satisfaction",state.satisfaction)}
        ${bar("Hype",state.hype)}
        ${bar("Attendees",state.attendees/100)}
    </div>
    `;

    g.innerHTML=html;
}

/* INIT */
loadYear();
render();

</script>

</body>
</html>


Silver EPG