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 (INCLUDES ATTENDEES)
========================= */

let state = {
    year: 1,
    cash: 750000,
    prestige: 20,
    satisfaction: 50,
    retention: 50,
    hype: 20,
    volatility: 0,
    attendees: 1000
};

/* =========================
   SCENARIOS (10 YEARS READY)
========================= */

const YEARS = [

/* YEAR 1 */
[
{
text:"Your first tradeshow struggles with low early awareness.",
A:"Spend heavily on aggressive digital ads and influencer blasts.",
B:"Focus on targeted industry outreach and early registrant perks.",
C:"Create a quirky underground ‘invite-only mystery expo’ campaign."
},
{
text:"A small sponsor offers funding with strict branding control.",
A:"Accept and scale aggressively with their money.",
B:"Negotiate partial branding limitations.",
C:"Reject and preserve brand independence."
},
{
text:"Exhibitor setup delays threaten opening day.",
A:"Pay overtime and force rapid deployment.",
B:"Re-sequence floor plan to reduce pressure points.",
C:"Turn setup chaos into a ‘behind the scenes’ storytelling moment."
}
],

/* YEAR 2 */
[
{
text:"A competitor expo launches nearby with similar positioning.",
A:"Undercut pricing and outspend marketing.",
B:"Differentiate through curated attendee experience.",
C:"Lean into ‘anti-convention’ rebellious branding."
},
{
text:"Your registration system shows early instability.",
A:"Replace system overnight with aggressive vendor switch.",
B:"Patch system and add redundancy layers.",
C:"Turn check-in delays into interactive networking lounges."
},
{
text:"A keynote speaker cancels last minute.",
A:"Fly in a celebrity replacement immediately.",
B:"Rebuild schedule and redistribute speaking slots.",
C:"Turn cancellation into ‘open mic industry summit’ format."
}
],

/* YEAR 3 */
[
{
text:"Attendee numbers plateau unexpectedly.",
A:"Increase marketing spend aggressively.",
B:"Improve exhibitor quality and targeting.",
C:"Rebrand event identity toward premium exclusivity."
},
{
text:"A viral moment emerges unexpectedly online.",
A:"Monetize it immediately through sponsorship integration.",
B:"Moderate messaging and avoid overexposure.",
C:"Turn it into a permanent brand symbol of the expo."
},
{
text:"Venue restrictions limit your expansion plans.",
A:"Pay premium for overrides and permits.",
B:"Optimize layout efficiency within constraints.",
C:"Turn constraint into immersive multi-zone storytelling."
}
],

/* YEAR 4 */
[
{
text:"Exhibitors complain about uneven traffic flow.",
A:"Invest heavily in signage and paid traffic routing.",
B:"Rebalance floor layout and booth placement logic.",
C:"Turn navigation into a gamified attendee journey."
},
{
text:"A major sponsor threatens withdrawal.",
A:"Offer expanded premium visibility packages.",
B:"Renegotiate value-based engagement terms.",
C:"Publicly reposition sponsor as ‘co-creator partner’."
},
{
text:"AV systems glitch during keynote demos.",
A:"Replace entire AV vendor immediately.",
B:"Patch systems and introduce redundancy layers.",
C:"Turn glitch into live experimental tech showcase."
}
],

/* YEAR 5 */
[
{
text:"Your expo gains international attention.",
A:"Expand aggressively into new global markets.",
B:"Stabilize operations before scaling.",
C:"Reposition as cultural movement rather than event."
},
{
text:"Security concerns rise with larger crowds.",
A:"Double security spending and enforce strict access.",
B:"Introduce smart zoning and controlled flow systems.",
C:"Turn security into interactive experience checkpoints."
},
{
text:"Attendee satisfaction dips slightly.",
A:"Add premium paid upgrades and VIP tiers.",
B:"Improve core logistics and comfort systems.",
C:"Introduce surprise experiential activations."
}
],

/* YEAR 6 */
[
{
text:"A major tech brand wants exclusivity over entire hall.",
A:"Accept and restructure show around them.",
B:"Negotiate limited exclusivity zones.",
C:"Reject to preserve multi-brand ecosystem."
},
{
text:"Unexpected weather disrupts entry flow.",
A:"Build emergency infrastructure immediately.",
B:"Redirect flows with structured indoor rerouting.",
C:"Turn weather into immersive thematic experience."
},
{
text:"Content fatigue begins appearing in sessions.",
A:"Add high-energy celebrity programming.",
B:"Improve scheduling diversity.",
C:"Replace talks with interactive experiences."
}
],

/* YEAR 7 */
[
{
text:"Your event becomes a recognized industry leader.",
A:"Scale aggressively into franchised expos.",
B:"Maintain controlled sustainable growth.",
C:"Reinforce cultural prestige positioning."
},
{
text:"Exhibitors demand higher ROI clarity.",
A:"Introduce premium lead-generation packages.",
B:"Improve analytics and reporting transparency.",
C:"Transform expo into narrative-driven engagement journey."
},
{
text:"A media scandal targets a sponsor.",
A:"Defend sponsor publicly and double down.",
B:"Neutral crisis communication strategy.",
C:"Distance brand and reframe narrative creatively."
}
],

/* YEAR 8 */
[
{
text:"Ticket pricing elasticity becomes uncertain.",
A:"Raise prices aggressively to maximize revenue.",
B:"Test segmented pricing tiers.",
C:"Introduce experiential value-based pricing model."
},
{
text:"Long-time exhibitors threaten churn.",
A:"Offer loyalty discounts and perks.",
B:"Reassess exhibitor satisfaction systems.",
C:"Reimagine exhibitor storytelling integration."
},
{
text:"A new digital expo platform emerges.",
A:"Compete with aggressive expansion.",
B:"Integrate hybrid digital model.",
C:"Reposition as ‘live-only premium experience’."
}
],

/* YEAR 9 */
[
{
text:"Operational complexity is now extremely high.",
A:"Hire large-scale operations expansion team.",
B:"Streamline and optimize systems.",
C:"Turn complexity into curated luxury experience."
},
{
text:"Investor interest in acquisition increases.",
A:"Push valuation through aggressive scaling.",
B:"Stabilize metrics before negotiation.",
C:"Strengthen brand prestige for premium exit."
},
{
text:"Attendee expectations reach peak sophistication.",
A:"Add high-budget spectacle elements.",
B:"Improve core experience consistency.",
C:"Shift toward curated immersive storytelling."
}
],

/* YEAR 10 */
[
{
text:"Final year pressure: legacy of your tradeshow is being defined.",
A:"Maximize valuation aggressively before exit.",
B:"Balance final performance across all metrics.",
C:"Focus on legacy, prestige, and cultural impact."
},
{
text:"Multiple acquisition offers arrive simultaneously.",
A:"Start bidding war for highest price.",
B:"Evaluate balanced strategic buyer.",
C:"Choose buyer aligned with brand identity."
},
{
text:"Final industry reputation moment defines your legacy.",
A:"Push for maximum global visibility.",
B:"Ensure stable and respected exit.",
C:"Create iconic finale experience."
}
]

];

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

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

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

/* =========================
   GAMEPLAY
========================= */

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

    let s = yearState.scenarios[i];

    if(c==="A"){
        state.cash+=300000;
        state.hype+=10;
        state.attendees+=200;
    }

    if(c==="B"){
        state.prestige+=5;
        state.satisfaction+=5;
        state.attendees+=100;
    }

    if(c==="C"){
        state.prestige+=15;
        state.satisfaction+=10;
        state.attendees+=300;
    }

    render();
}

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

function allDone(){
    return yearState.scenarios.every((_,i)=>yearState.done[i]);
}

function endYear(){

    if(!allDone()) return alert("Complete all scenarios");

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

    state.year++;

    loadYear();
    render();
}

/* =========================
   KPI
========================= */

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

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

function render(){

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

    if(state.year>10){
        g.innerHTML=`
        <div class="card">
            <h1>🏁 Final Outcome</h1>
            <p><b>Attendees:</b> ${state.attendees}</p>
            <p><b>Prestige:</b> ${state.prestige}</p>
            <p><b>Satisfaction:</b> ${state.satisfaction}</p>
        </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>`;
        }

        if(chosen){
            html+=`<p class="small">✔ Locked in</p>`;
        }

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

    html+=`
    <div class="card">
        <button onclick="endYear()">▶ End Year</button>
    </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