sosyal medyada karşıma sık sık çıkıyor bu oyun. tiktok oyunu sanırım emin değilim. dedim bunu html olarak rahatça oynanan bir versiyonunu yaptırayım yapay zekaya. görsellerini de kodu da aşağıda paylaşıyorum. isteyen istediği gibi kod üstünde oynama yapabilir.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Futbol Kariyer Simülatörü</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
<style>
:root{
--bg1:#0c1522; --bg2:#182338;
--navy:#12233a; --navy-light:#1c3050;
--gold:#e8b23d; --gold-light:#ffe2a3;
--pitch:#1f7a4d; --pitch-dark:#125031;
--white:#f4f6f8; --dim:#93a3b8;
--red:#e5484d; --green-ok:#38b06a; --blue:#4c8dff;
--radius:16px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%; margin:0;}
body{
font-family:'Inter',system-ui,sans-serif;
background:
radial-gradient(circle at 20% 0%, #1d3557 0%, transparent 45%),
radial-gradient(circle at 100% 100%, #0f2c4a 0%, transparent 50%),
linear-gradient(180deg,var(--bg1),var(--bg2));
min-height:100vh; color:var(--white);
display:flex; justify-content:center;
}
#app{
width:100%; max-width:480px; min-height:100vh;
display:flex; flex-direction:column;
position:relative; overflow-x:hidden;
}
/* ---------- header / timeline ---------- */
header{
padding:16px 16px 10px; flex-shrink:0;
}
.brand{
display:flex; align-items:center; gap:8px; margin-bottom:12px;
}
.brand .logo{font-family:'Bebas Neue',sans-serif; font-size:26px; letter-spacing:1px; color:var(--gold);}
.brand .ball{font-size:22px;}
.timeline{
display:flex; gap:6px; overflow-x:auto; padding-bottom:4px;
scrollbar-width:none;
}
.timeline::-webkit-scrollbar{display:none;}
.tstep{
flex:0 0 auto; min-width:38px; text-align:center; font-weight:800; font-size:12px;
padding:7px 0; border-radius:9px; background:#28374f; color:#7d8ea5;
transition:.3s;
}
.tstep.active{background:var(--gold); color:#22160a; transform:scale(1.08); box-shadow:0 3px 10px rgba(232,178,61,.4);}
.tstep.done{background:#3a5a7d; color:#dbe7f5;}
/* ---------- stage area ---------- */
main{flex:1; padding:6px 16px 100px; overflow-y:auto;}
.stage-inner{animation:fadeSlideIn .38s cubic-bezier(.2,.8,.2,1);}
@keyframes fadeSlideIn{
from{opacity:0; transform:translateY(14px);}
to{opacity:1; transform:translateY(0);}
}
h2.title{font-family:'Bebas Neue',sans-serif; font-size:26px; letter-spacing:.5px; margin:4px 0 6px; text-align:center; color:var(--white);}
p.sub{color:var(--dim); text-align:center; font-size:13.5px; margin:0 0 14px; line-height:1.5;}
/* ---------- buttons ---------- */
.btn{
display:block; width:100%; text-align:center; padding:14px 10px;
border-radius:14px; font-weight:800; font-size:15.5px; border:none; cursor:pointer;
margin-top:10px; transition:transform .12s ease, box-shadow .12s ease, opacity .2s;
letter-spacing:.2px;
}
.btn:active{transform:scale(.96);}
.btn-primary{background:linear-gradient(135deg,var(--gold),#c98f22); color:#241705; box-shadow:0 6px 16px rgba(232,178,61,.28);}
.btn-secondary{background:#243252; color:var(--white); border:1px solid #3a4c70;}
.btn-danger{background:linear-gradient(135deg,#f16a70,var(--red)); color:#2a0304;}
.btn:disabled{opacity:.4; box-shadow:none;}
.btn-row{display:flex; gap:8px;}
.btn-row .btn{margin-top:10px;}
.fixed-cta{
position:fixed; left:0; right:0; bottom:0; z-index:60;
max-width:480px; margin:0 auto;
padding:12px 16px 18px; background:linear-gradient(0deg,var(--bg2) 60%, transparent);
}
/* ---------- player card (signature element) ---------- */
.pcard{
position:relative; border-radius:20px; padding:18px 16px 16px; margin:6px auto 18px;
max-width:340px; overflow:hidden;
background:linear-gradient(160deg,var(--navy-light),var(--navy) 60%);
border:1px solid #33507a;
box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.pcard::before{
content:""; position:absolute; top:-60%; left:-40%; width:60%; height:220%;
background:linear-gradient(120deg, transparent, rgba(255,255,255,.09), transparent);
transform:rotate(20deg);
animation:shimmer 3.2s ease-in-out infinite;
}
@keyframes shimmer{
0%{ left:-40%; }
55%{ left:120%; }
100%{ left:120%; }
}
.pcard-top{display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:8px;}
.pcard-ovr{font-family:'Bebas Neue',sans-serif; font-size:44px; line-height:1; color:var(--gold);}
.pcard-ovr small{display:block; font-family:'Inter',sans-serif; font-size:10.5px; font-weight:700; color:var(--dim); letter-spacing:1px;}
.pcard-meta{text-align:right; font-size:12.5px; color:var(--dim);}
.pcard-meta b{display:block; color:var(--white); font-size:15px;}
.pcard-club{
display:flex; align-items:center; gap:8px; background:#0e1c30; border-radius:10px; padding:8px 10px; margin:8px 0 12px;
font-size:13px; font-weight:700;
}
.pcard-club .flag{font-size:16px;}
.statbars{display:flex; flex-direction:column; gap:7px;}
.statbar-row{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:var(--dim);}
.statbar-row .lbl{width:34px; flex-shrink:0; color:var(--white);}
.statbar-track{flex:1; height:7px; background:#0e1c30; border-radius:4px; overflow:hidden;}
.statbar-fill{height:100%; border-radius:4px; width:0%; background:linear-gradient(90deg,#4c8dff,#38c6b0); transition:width 1s cubic-bezier(.2,.8,.2,1);}
.statbar-val{width:26px; text-align:right; color:var(--white);}
.badges-row{display:flex; gap:8px; margin-top:12px;}
.badge{
flex:1; background:#0e1c30; border-radius:10px; text-align:center; padding:8px 4px;
}
.badge .ic{font-size:16px;}
.badge .val{font-weight:800; font-size:14px; margin-top:2px;}
.badge.pop{animation:pop .5s ease;}
@keyframes pop{
0%{transform:scale(1);}
40%{transform:scale(1.18);}
100%{transform:scale(1);}
}
.ovr-chart-card{
border-radius:14px; padding:10px 12px 6px; margin:2px 0 14px;
background:#0e1c30; border:1px solid #2a3f60;
animation:fadeSlideIn .45s cubic-bezier(.2,.8,.2,1);
}
.ovr-chart-head{
display:flex; align-items:center; justify-content:space-between;
font-size:12px; font-weight:800; color:var(--dim); margin-bottom:2px; letter-spacing:.2px;
}
.ovr-chart-now{color:var(--gold); font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:.4px;}
.ovr-chart-svg{width:100%; height:72px; display:block; overflow:visible;}
.ovr-chart-area{fill:rgba(76,141,255,.16); stroke:none;}
.ovr-chart-line{
fill:none; stroke:var(--gold); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
}
.ovr-chart-dot{fill:var(--gold); stroke:#0e1c30; stroke-width:1.4;}
.ovr-chart-dot.last{fill:#fff;}
.ovr-chart-agelbl{font-size:7.5px; fill:var(--dim); text-anchor:middle; font-family:'Inter',sans-serif;}
.ovr-chart-vallbl{font-size:8.5px; fill:var(--gold-light); text-anchor:middle; font-weight:700; font-family:'Inter',sans-serif;}
/* ---------- selection screen ---------- */
.section-label{font-weight:800; font-size:13.5px; color:var(--gold-light); text-transform:uppercase; letter-spacing:.6px; margin:14px 0 8px;}
.pitch{
position:relative; border-radius:14px; height:280px; overflow:hidden;
background:repeating-linear-gradient(180deg,var(--pitch) 0 32px,var(--pitch-dark) 32px 64px);
border:2px solid #1a3f2b;
}
.pos-dot{
position:absolute; width:36px; height:36px; border-radius:50%;
background:rgba(255,255,255,.85); border:2px solid #123; display:flex; align-items:center; justify-content:center;
font-size:10.5px; font-weight:800; color:#122; cursor:pointer; transform:translate(-50%,-50%);
transition:.18s;
}
.pos-dot:active{transform:translate(-50%,-50%) scale(.9);}
.pos-dot.sel{
background:var(--gold); box-shadow:0 0 0 5px rgba(232,178,61,.28);
animation:selectPulse .6s ease;
}
@keyframes selectPulse{
0%{box-shadow:0 0 0 0 rgba(232,178,61,.6);}
100%{box-shadow:0 0 0 8px rgba(232,178,61,0);}
}
.chip-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.chip-btn{
background:#1c2b45; border:1.5px solid #33507a; color:var(--white); font-weight:700; font-size:13px;
border-radius:11px; padding:12px 6px; cursor:pointer; transition:.15s;
}
.chip-btn:active{transform:scale(.96);}
.chip-btn.sel{background:var(--gold); color:#241705; border-color:var(--gold);}
/* ---------- tag / info rows ---------- */
.tag-row{display:flex; border-radius:11px; overflow:hidden; margin-bottom:10px;}
.tag-a{background:var(--gold); color:#241705; font-weight:800; font-size:12px; padding:11px 10px; flex:0 0 auto;}
.tag-b{background:#1c2b45; color:var(--white); font-weight:600; font-size:12.5px; padding:11px 10px; flex:1;}
/* ---------- offers ---------- */
.club-offer{
display:flex; border-radius:12px; overflow:hidden; margin-bottom:10px; cursor:pointer;
border:2px solid #33507a; opacity:0; animation:offerIn .4s ease forwards;
transition:border-color .15s, transform .1s;
}
.club-offer:nth-child(1){animation-delay:.05s;}
.club-offer:nth-child(2){animation-delay:.15s;}
.club-offer:nth-child(3){animation-delay:.25s;}
@keyframes offerIn{
from{opacity:0; transform:translateX(24px);}
to{opacity:1; transform:translateX(0);}
}
.club-offer:active{transform:scale(.98);}
.club-offer.sel{border-color:var(--gold);}
.club-offer .cname{flex:1; background:#182338; padding:11px 12px; font-weight:800; font-size:14px; color:var(--white);}
.club-offer .cname small{display:block; font-weight:600; color:var(--dim); font-size:11px; margin-top:2px;}
.club-offer .cfee{background:#233553; color:var(--gold-light); font-weight:800; font-size:13.5px; padding:11px; display:flex; align-items:center; gap:4px; min-width:104px; justify-content:center;}
/* ---------- summary ---------- */
.summary-card{border-radius:18px; padding:18px 16px; background:linear-gradient(160deg,var(--navy-light),var(--navy)); border:1px solid #33507a;}
.summary-card h3{font-family:'Bebas Neue',sans-serif; font-size:24px; letter-spacing:.4px; margin:0 0 10px; color:var(--gold); text-align:center;}
.line{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #26385a; font-size:14px;}
.line b{color:var(--white);}
.clubhistory{font-size:12.5px; color:var(--dim); margin-top:10px; line-height:1.7;}
/* ---------- confetti ---------- */
.confetti{position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:100;}
.confetti span{
position:absolute; top:-10px; width:8px; height:14px; opacity:.9;
animation:fall linear forwards;
}
@keyframes fall{
to{ transform:translateY(110vh) rotate(540deg); opacity:0; }
}
.center-wrap{display:flex; flex-direction:column; justify-content:center; min-height:60vh;}
</style>
</head>
<body>
<div id="app">
<header>
<div class="brand"><span class="ball">⚽</span><span class="logo">KARİYER SİMÜLATÖRÜ</span></div>
<div class="timeline" id="timeline"></div>
</header>
<main><div class="stage-inner" id="stage"></div></main>
</div>
<script>
/* ---------------- DATA ---------------- */
const POSITIONS = [
{k:'GK',label:'GK',group:'GK',x:50,y:92},
{k:'LB',label:'LB',group:'DEF',x:14,y:74},
{k:'CB1',label:'CB',group:'DEF',x:38,y:78},
{k:'CB2',label:'CB',group:'DEF',x:62,y:78},
{k:'RB',label:'RB',group:'DEF',x:86,y:74},
{k:'CDM',label:'CDM',group:'MID',x:50,y:62},
{k:'LM',label:'LM',group:'MID',x:14,y:50},
{k:'CM',label:'CM',group:'MID',x:50,y:48},
{k:'RM',label:'RM',group:'MID',x:86,y:50},
{k:'CAM',label:'CAM',group:'MID',x:50,y:36},
{k:'LW',label:'LW',group:'ATT',x:16,y:22},
{k:'ST',label:'ST',group:'ATT',x:50,y:14},
{k:'RW',label:'RW',group:'ATT',x:84,y:22},
];
const CONTINENTS = ['AFRİKA','ASYA','AVUSTRALYA','AVRUPA','K. AMERİKA','G. AMERİKA'];
const CONT_KEY = {
'AFRİKA':'AFRICA','ASYA':'ASIA','AVUSTRALYA':'AUSTRALIA','AVRUPA':'EUROPE',
'K. AMERİKA':'NORTH AMERICA','G. AMERİKA':'SOUTH AMERICA'
};
const CLUBS = {
EUROPE:[
// power 1 — küçük / alt lig kulüpleri
{name:'Zrinjski Mostar',country:'Bosna-Hersek',power:1},
{name:'Llapi',country:'Kosova',power:1},
{name:'Neftçi Baku',country:'Azerbaycan',power:1},
{name:'Connah\'s Quay Nomads',country:'Galler',power:1},
{name:'Sutjeska Nikšić',country:'Karadağ',power:1},
{name:'Valur',country:'İzlanda',power:1},
// power 2
{name:'Celta Vigo',country:'İspanya',power:2},
{name:'Genk',country:'Belçika',power:2},
{name:'Rangers',country:'İskoçya',power:2},
{name:'Dinamo Zagreb',country:'Hırvatistan',power:2},
{name:'Legia Warszawa',country:'Polonya',power:2},
{name:'Kızılyıldız',country:'Sırbistan',power:2},
{name:'AEK Atina',country:'Yunanistan',power:2},
{name:'Slavia Prag',country:'Çekya',power:2},
{name:'Molde',country:'Norveç',power:2},
// power 3
{name:'Sporting CP',country:'Portekiz',power:3},
{name:'Ajax',country:'Hollanda',power:3},
{name:'Real Sociedad',country:'İspanya',power:3},
{name:'Fenerbahçe',country:'Türkiye',power:3},
{name:'Galatasaray',country:'Türkiye',power:3},
{name:'Shakhtar Donetsk',country:'Ukrayna',power:3},
{name:'Feyenoord',country:'Hollanda',power:3},
{name:'Club Brugge',country:'Belçika',power:3},
{name:'Villarreal',country:'İspanya',power:3},
// power 4
{name:'RB Leipzig',country:'Almanya',power:4},
{name:'Inter',country:'İtalya',power:4},
{name:'Juventus',country:'İtalya',power:4},
{name:'Atletico Madrid',country:'İspanya',power:4},
{name:'Borussia Dortmund',country:'Almanya',power:4},
{name:'Arsenal',country:'İngiltere',power:4},
{name:'Napoli',country:'İtalya',power:4},
{name:'Benfica',country:'Portekiz',power:4},
{name:'Porto',country:'Portekiz',power:4},
// power 5
{name:'Manchester City',country:'İngiltere',power:5},
{name:'Real Madrid',country:'İspanya',power:5},
{name:'Bayern Münih',country:'Almanya',power:5},
{name:'Liverpool',country:'İngiltere',power:5},
{name:'Barcelona',country:'İspanya',power:5},
{name:'Paris Saint-Germain',country:'Fransa',power:5},
],
'SOUTH AMERICA':[
{name:'Sport Huancayo',country:'Peru',power:1},
{name:'Deportivo Municipal',country:'Peru',power:1},
{name:'Always Ready',country:'Bolivya',power:1},
{name:'Guaraní',country:'Paraguay',power:1},
{name:'Nacional (Bolivya)',country:'Bolivya',power:1},
{name:'Nacional',country:'Uruguay',power:2},
{name:'Universitario',country:'Peru',power:2},
{name:'Colo-Colo',country:'Şili',power:2},
{name:'Barcelona SC',country:'Ekvador',power:2},
{name:'Millonarios',country:'Kolombiya',power:2},
{name:'São Paulo',country:'Brezilya',power:3},
{name:'Racing Club',country:'Arjantin',power:3},
{name:'Independiente',country:'Arjantin',power:3},
{name:'Universidad de Chile',country:'Şili',power:3},
{name:'Peñarol',country:'Uruguay',power:3},
{name:'Boca Juniors',country:'Arjantin',power:4},
{name:'Palmeiras',country:'Brezilya',power:4},
{name:'River Plate',country:'Arjantin',power:5},
{name:'Flamengo',country:'Brezilya',power:5},
],
AFRICA:[
{name:'Gor Mahia',country:'Kenya',power:1},
{name:'AS Vita Club',country:'Kongo DC',power:1},
{name:'Horoya AC',country:'Gine',power:1},
{name:'Real Bamako',country:'Mali',power:1},
{name:'Enyimba',country:'Nijerya',power:2},
{name:'Simba SC',country:'Tanzanya',power:2},
{name:'Young Africans',country:'Tanzanya',power:2},
{name:'ASEC Mimosas',country:'Fildişi Sahili',power:2},
{name:'TP Mazembe',country:'Kongo DC',power:3},
{name:'Zamalek',country:'Mısır',power:3},
{name:'Raja Casablanca',country:'Fas',power:3},
{name:'Mamelodi Sundowns',country:'G.Afrika',power:3},
{name:'Wydad AC',country:'Fas',power:4},
{name:'Esperance',country:'Tunus',power:4},
{name:'Al Ahly',country:'Mısır',power:4},
],
ASIA:[
{name:'Terengganu FC',country:'Malezya',power:1},
{name:'Chonburi FC',country:'Tayland',power:1},
{name:'Bali United',country:'Endonezya',power:1},
{name:'Shabab Al-Ahli',country:'BAE',power:2},
{name:'Al Ain',country:'BAE',power:2},
{name:'Johor Darul Ta\'zim',country:'Malezya',power:2},
{name:'Yokohama F. Marinos',country:'Japonya',power:2},
{name:'Esteghlal',country:'İran',power:2},
{name:'Persepolis',country:'İran',power:3},
{name:'Shanghai Port',country:'Çin',power:3},
{name:'Buriram United',country:'Tayland',power:3},
{name:'Jeonbuk Hyundai Motors',country:'G.Kore',power:3},
{name:'Ulsan HD',country:'G.Kore',power:4},
{name:'Urawa Red Diamonds',country:'Japonya',power:4},
{name:'Kawasaki Frontale',country:'Japonya',power:4},
{name:'Al Nassr',country:'S.Arabistan',power:4},
{name:'Al Hilal',country:'S.Arabistan',power:5},
],
AUSTRALIA:[
{name:'Wellington Phoenix',country:'Y.Zelanda',power:1},
{name:'Perth Glory',country:'Avustralya',power:1},
{name:'Newcastle Jets',country:'Avustralya',power:1},
{name:'Western Sydney Wanderers',country:'Avustralya',power:2},
{name:'Central Coast Mariners',country:'Avustralya',power:2},
{name:'Auckland City',country:'Y.Zelanda',power:2},
{name:'Sydney FC',country:'Avustralya',power:3},
{name:'Melbourne Victory',country:'Avustralya',power:3},
],
'NORTH AMERICA':[
{name:'San Jose Earthquakes',country:'ABD',power:1},
{name:'Forge FC',country:'Kanada',power:1},
{name:'Real Estelí',country:'Nikaragua',power:1},
{name:'Atlanta United',country:'ABD',power:2},
{name:'CF Montréal',country:'Kanada',power:2},
{name:'Cruz Azul',country:'Meksika',power:2},
{name:'Toronto FC',country:'Kanada',power:2},
{name:'Seattle Sounders',country:'ABD',power:3},
{name:'Chivas Guadalajara',country:'Meksika',power:3},
{name:'Tigres UANL',country:'Meksika',power:3},
{name:'LA Galaxy',country:'ABD',power:4},
{name:'Club América',country:'Meksika',power:4},
{name:'Monterrey',country:'Meksika',power:4},
],
};
const ALL_CLUBS = Object.keys(CLUBS).reduce((acc, key) => acc.concat(CLUBS[key]), []);
const GROUP_WEIGHTS = {
GK: {PAC:.06,SHO:.02,PAS:.12,DRI:.05,DEF:.47,PHY:.28},
DEF:{PAC:.16,SHO:.05,PAS:.16,DRI:.10,DEF:.38,PHY:.15},
MID:{PAC:.15,SHO:.15,PAS:.30,DRI:.25,DEF:.10,PHY:.05},
ATT:{PAC:.26,SHO:.30,PAS:.14,DRI:.25,DEF:.02,PHY:.03},
};
/* Realistic card tendencies per position group (per single season) */
const CARD_PROFILES = {
GK: {yellow:[0,1], red:0.015},
DEF:{yellow:[3,8], red:0.09},
MID:{yellow:[2,6], red:0.05},
ATT:{yellow:[1,4], red:0.035},
};
/* ---------------- STATE ---------------- */
let S = {};
function resetState(){
S = {
phase:'intro',
continent:null, continentLabel:null,
posKey:null, posGroup:null, posLabel:null,
age:15,
stageIdx:0,
stats:null,
club:null,
trophiesLeague:0, trophiesCup:0,
apps:0, goals:0, assists:0, yellow:0, red:0,
history:[],
offerA:null, offerB:null, chosenOffer:null,
managerClub:null, managerTrophies:0,
ovrHistory:[],
};
}
resetState();
const STAGE_ORDER = ['A','18','21','24','27','30','33','R','M'];
/* ---------------- HELPERS ---------------- */
const $ = id => document.getElementById(id);
function randInt(a,b){return Math.floor(Math.random()*(b-a+1))+a;}
function pick(arr){return arr[randInt(0,arr.length-1)];}
function clamp(v,a,b){return Math.max(a,Math.min(b,v));}
function genBaseStats(group){
const w = GROUP_WEIGHTS[group];
const stats = {};
['PAC','SHO','PAS','DRI','DEF','PHY'].forEach(k=>{
const weight = w[k];
const lo = 35 + weight*60;
const hi = 55 + weight*70;
stats[k] = clamp(Math.round(randInt(Math.round(lo),Math.round(hi))),30,90);
});
stats.OVR = weightedOVR(stats, group);
return stats;
}
function weightedOVR(stats, group){
const w = GROUP_WEIGHTS[group];
let total = 0;
['PAC','SHO','PAS','DRI','DEF','PHY'].forEach(k=> total += stats[k]*w[k]);
return clamp(Math.round(total),35,99);
}
function growStats(stats, age, group){
let growth;
if(age<=24) growth = randInt(3,7);
else if(age<=30) growth = randInt(0,3);
else growth = randInt(-5,-1);
['PAC','SHO','PAS','DRI','DEF','PHY'].forEach(k=>{
stats[k] = clamp(stats[k]+growth+randInt(-2,2),30,99);
});
stats.OVR = weightedOVR(stats, group);
}
function clubsFor(continent, minPower, maxPower){
return CLUBS[continent].filter(c=>c.power>=minPower && c.power<=maxPower);
}
function clubsFromPool(pool, minPower, maxPower){
return pool.filter(c=>c.power>=minPower && c.power<=maxPower);
}
// After the academy stage, transfer offers can come from ANY continent's clubs —
// only the academy/starting club is restricted to the continent chosen at setup.
// A club can only make an offer if its power tier roughly matches the player's OVR:
// a lower-division club cannot approach an elite player, and an elite club won't
// waste time on a very low-rated player either.
function powerRangeForOVR(ovr){
if(ovr<58) return [1,2];
if(ovr<66) return [1,3];
if(ovr<73) return [2,3];
if(ovr<80) return [3,4];
if(ovr<87) return [4,5];
return [5,5];
}
// Transfer fees scale with age — clubs pay a premium for youth and a discount
// for players heading into their 30s.
function ageFeeMultiplier(age){
if(age<=18) return 1.35;
if(age<=21) return 1.15;
if(age<=24) return 1.0;
if(age<=27) return 0.9;
if(age<=30) return 0.7;
return 0.4;
}
function offersForOVR(ovr, currentClubName, age){
const [minP,maxP] = powerRangeForOVR(ovr);
let pool = clubsFromPool(ALL_CLUBS,minP,maxP).filter(c=>c.name!==currentClubName);
if(pool.length<2) pool = ALL_CLUBS.filter(c=>c.name!==currentClubName);
let a = pick(pool), b = pick(pool);
let guard=0;
while(b.name===a.name && guard<10){ b = pick(pool); guard++; }
const fee = c => {
// fee scales with OVR (squared, so elite players cost disproportionately
// more) and with the buying club's power tier, plus age (younger costs
// more, older costs less) and a bit of market randomness.
let raw = (ovr-40)*(ovr-40)*0.06*(c.power/3)*(0.8+Math.random()*0.5);
raw *= ageFeeMultiplier(age);
return Math.max(0.3, Math.round(raw*10)/10);
};
return [ {...a, fee:fee(a)}, {...b, fee:fee(b)} ];
}
function rollTrophies(club, seasons){
let gotLeague=false, gotCup=false;
for(let i=0;i<seasons;i++){
if(Math.random() < club.power*0.10){ S.trophiesLeague++; gotLeague=true; }
if(Math.random() < club.power*0.05){ S.trophiesCup++; gotCup=true; }
}
return {gotLeague, gotCup};
}
// Simulates `seasons` real seasons of matches, goals, assists and discipline
// records. `factor` scales everything down for younger ages (breaking into
// the first team) so a full 15-20 year career ends up with realistic totals
// instead of a handful of cards across two decades.
function rollCareerNumbers(seasons, factor){
const profile = CARD_PROFILES[S.posGroup] || CARD_PROFILES.MID;
for(let i=0;i<seasons;i++){
const appsThisSeason = Math.round(randInt(16,36)*factor);
S.apps += appsThisSeason;
const goalRate = S.posGroup==='ATT' ? randInt(4,24)
: S.posGroup==='MID' ? randInt(0,9)
: S.posGroup==='DEF' ? randInt(0,3)
: randInt(0,0);
S.goals += Math.round(goalRate*factor);
const assistRate = S.posGroup==='MID' ? randInt(1,10)
: S.posGroup==='ATT' ? randInt(1,8)
: S.posGroup==='DEF' ? randInt(0,4)
: randInt(0,1);
S.assists += Math.round(assistRate*factor);
let yellowThisSeason = randInt(profile.yellow[0], profile.yellow[1]);
if(S.posKey==='CDM') yellowThisSeason += randInt(1,2);
S.yellow += Math.max(0, Math.round(yellowThisSeason*factor));
if(Math.random() < profile.red*factor) S.red += 1;
}
}
/* ---------------- RENDER: timeline ---------------- */
function renderTimeline(){
const el = $('timeline');
el.innerHTML = STAGE_ORDER.map((k,i)=>{
let cls='tstep';
if(i===S.stageIdx) cls+=' active';
else if(i<S.stageIdx) cls+=' done';
return `<div class="${cls}">${k}</div>`;
}).join('');
}
/* ---------------- OVR CHART ---------------- */
function ovrChartHTML(){
const data = S.ovrHistory;
if(!data || data.length<1) return '';
const w=300, h=88, padX=16, padTop=20, padBottom=16;
const ovrs = data.map(d=>d.ovr);
const minOvr = Math.min(...ovrs) - 3;
const maxOvr = Math.max(...ovrs) + 3;
const range = Math.max(1, maxOvr-minOvr);
const stepX = data.length>1 ? (w-2*padX)/(data.length-1) : 0;
const pts = data.map((d,i)=>{
const x = data.length>1 ? padX + i*stepX : w/2;
const y = (h-padBottom) - ((d.ovr-minOvr)/range)*((h-padBottom)-padTop);
return {x,y,age:d.age,ovr:d.ovr};
});
const pathD = pts.map((p,i)=> (i===0?'M':'L')+p.x.toFixed(1)+','+p.y.toFixed(1)).join(' ');
const areaD = pts.length>1
? pathD+` L${pts[pts.length-1].x.toFixed(1)},${h-padBottom} L${pts[0].x.toFixed(1)},${h-padBottom} Z`
: '';
const last = pts[pts.length-1];
return `
<div class="ovr-chart-card">
<div class="ovr-chart-head"><span>📈 OVR Gelişimi</span><span class="ovr-chart-now">${last.ovr}</span></div>
<svg viewBox="0 0 ${w} ${h}" class="ovr-chart-svg" preserveAspectRatio="none">
${areaD ? `<path d="${areaD}" class="ovr-chart-area"></path>` : ''}
${pathD ? `<path d="${pathD}" class="ovr-chart-line"></path>` : ''}
${pts.map((p,i)=>`<text x="${p.x.toFixed(1)}" y="${(p.y-8).toFixed(1)}" class="ovr-chart-vallbl">${p.ovr}</text>`).join('')}
${pts.map((p,i)=>`<circle cx="${p.x.toFixed(1)}" cy="${p.y.toFixed(1)}" r="${i===pts.length-1?3.6:2.8}" class="ovr-chart-dot${i===pts.length-1?' last':''}"></circle>`).join('')}
${pts.map(p=>`<text x="${p.x.toFixed(1)}" y="${h-3}" class="ovr-chart-agelbl">${p.age===15?'Akademi':p.age+' y'}</text>`).join('')}
</svg>
</div>
`;
}
/* ---------------- PLAYER CARD ---------------- */
function playerCardHTML(){
if(!S.stats) return '';
return `
<div class="pcard">
<div class="pcard-top">
<div class="pcard-ovr">${S.stats.OVR}<small>OVR</small></div>
<div class="pcard-meta"><b>${S.posLabel}</b>${S.age} yaş · ${S.continentLabel}</div>
</div>
<div class="pcard-club"><span class="flag">🏟️</span> ${S.club ? S.club.name+' · '+S.club.country : 'Kulüpsüz'}</div>
<div class="statbars">
${['PAC','SHO','PAS','DRI','DEF','PHY'].map(k=>`
<div class="statbar-row">
<span class="lbl">${k}</span>
<span class="statbar-track"><span class="statbar-fill" data-val="${S.stats[k]}"></span></span>
<span class="statbar-val">${S.stats[k]}</span>
</div>`).join('')}
</div>
<div class="badges-row">
<div class="badge"><div class="ic">🏆</div><div class="val">${S.trophiesLeague}</div></div>
<div class="badge"><div class="ic">🥇</div><div class="val">${S.trophiesCup}</div></div>
<div class="badge"><div class="ic">👕</div><div class="val">${S.apps}</div></div>
<div class="badge"><div class="ic">🎯</div><div class="val">${S.assists}</div></div>
<div class="badge"><div class="ic">🟨</div><div class="val">${S.yellow}</div></div>
</div>
</div>
`;
}
function animateStatBars(){
requestAnimationFrame(()=>{
document.querySelectorAll('.statbar-fill').forEach(el=>{
const v = el.dataset.val;
el.style.width = v+'%';
});
});
}
function popBadges(){
document.querySelectorAll('.badge').forEach((b,i)=>{
setTimeout(()=> b.classList.add('pop'), i*70);
});
}
/* ---------------- CONFETTI ---------------- */
function launchConfetti(){
const colors = ['#e8b23d','#4c8dff','#38b06a','#e5484d','#ffffff'];
const box = document.createElement('div');
box.className='confetti';
document.body.appendChild(box);
for(let i=0;i<40;i++){
const s = document.createElement('span');
s.style.left = Math.random()*100+'%';
s.style.background = pick(colors);
s.style.animationDuration = (2.4+Math.random()*1.6)+'s';
s.style.animationDelay = (Math.random()*.6)+'s';
s.style.borderRadius = Math.random()>0.5 ? '50%' : '2px';
box.appendChild(s);
}
setTimeout(()=> box.remove(), 4500);
}
/* ---------------- STAGE SETTER ---------------- */
function setStage(html){
const el = $('stage');
el.classList.remove('stage-inner');
void el.offsetWidth;
el.classList.add('stage-inner');
el.innerHTML = html;
}
/* ---------------- FLOW ---------------- */
function goIntro(){
S.phase='intro';
renderTimeline();
setStage(`
<div class="center-wrap">
<h2 class="title">⚽ Futbol Kariyer Simülatörü</h2>
<p class="sub">Akademiden efsaneliğe... kariyerini sen şekillendir. Pozisyonunu ve kıtanı seç, yolculuk başlasın!</p>
<button class="btn btn-primary" onclick="goSelect()">KARİYERE BAŞLA</button>
</div>
`);
}
function goSelect(){
S.phase='select';
S.stageIdx = 0;
renderTimeline();
setStage(`
<div class="section-label">1 · Saha Pozisyonu</div>
<div class="pitch" id="pitch">
${POSITIONS.map(p=>`<div class="pos-dot" data-k="${p.k}" style="left:${p.x}%;top:${p.y}%;" onclick="pickPos('${p.k}')">${p.label}</div>`).join('')}
</div>
<div class="section-label">2 · Kıta</div>
<div class="chip-grid" id="clist">
${CONTINENTS.map(c=>`<button class="chip-btn" data-c="${c}" onclick="pickContinent('${c}')">${c}</button>`).join('')}
</div>
<button class="btn btn-primary" id="contBtn" disabled onclick="confirmSelect()">DEVAM ET</button>
`);
}
function pickPos(k){
S.posKey=k;
const p = POSITIONS.find(p=>p.k===k);
S.posGroup = p.group; S.posLabel = p.label;
document.querySelectorAll('.pos-dot').forEach(d=>{
d.classList.remove('sel');
});
const el = document.querySelector('.pos-dot[data-k="'+k+'"]');
el.classList.add('sel');
checkSelectReady();
}
function pickContinent(c){
S.continent = CONT_KEY[c];
S.continentLabel = c;
document.querySelectorAll('.chip-btn').forEach(b=>b.classList.toggle('sel', b.dataset.c===c));
checkSelectReady();
}
function checkSelectReady(){
$('contBtn').disabled = !(S.posKey && S.continent);
}
function confirmSelect(){
S.stats = genBaseStats(S.posGroup);
S.age = 15;
goAcademy();
}
function goAcademy(){
S.phase='academy';
S.stageIdx = 0;
renderTimeline();
const pool = clubsFor(S.continent,1,2);
const academy = pick(pool.length?pool:CLUBS[S.continent]);
S.club = academy;
S.history.push({age:15, club:academy.name});
S.ovrHistory.push({age:15, ovr:S.stats.OVR});
setStage(`
<div class="tag-row"><div class="tag-a">AKADEMİ</div><div class="tag-b">Kariyerine hangi akademiyle başlıyorsun?</div></div>
${ovrChartHTML()}
${playerCardHTML()}
<button class="btn btn-primary" onclick="goAgeStage(18)">DEVAM ET</button>
`);
animateStatBars(); popBadges();
}
function goAgeStage(age){
S.age = age;
S.phase='transfer';
S.stageIdx = STAGE_ORDER.indexOf(String(age));
// each checkpoint represents a 3-season chunk of the career; ramp up
// playing time / discipline realism gradually for very young players
const seasons = 3;
const factor = age<=18 ? 0.55 : (age<=21 ? 0.8 : 1.0);
rollTrophies(S.club, seasons);
rollCareerNumbers(seasons, factor);
growStats(S.stats, age, S.posGroup);
S.ovrHistory.push({age:age, ovr:S.stats.OVR});
renderTimeline();
const offers = offersForOVR(S.stats.OVR, S.club.name, S.age);
S.offerA = offers[0]; S.offerB = offers[1];
S.chosenOffer = null;
const nInterested = randInt(2,5);
renderTransferStage(nInterested);
}
function renderTransferStage(nInterested){
setStage(`
<div class="tag-row"><div class="tag-a">${nInterested} KULÜP İLGİLENİYOR</div><div class="tag-b">Yeteneğini kapmak için yarışıyorlar!</div></div>
${ovrChartHTML()}
${playerCardHTML()}
<div class="club-offer" id="offerA" onclick="chooseOffer('A')">
<div class="cname">${S.offerA.name}<small>${S.offerA.country}</small></div>
<div class="cfee">💰 €${S.offerA.fee}m</div>
</div>
<div class="club-offer" id="offerB" onclick="chooseOffer('B')">
<div class="cname">${S.offerB.name}<small>${S.offerB.country}</small></div>
<div class="cfee">💰 €${S.offerB.fee}m</div>
</div>
<div class="club-offer" id="offerStay" onclick="chooseOffer('STAY')">
<div class="cname">${S.club.name}'de kal<small>Mevcut kulübün</small></div>
<div class="cfee">🤝 Kal</div>
</div>
<button class="btn btn-primary" id="tContBtn" disabled onclick="afterTransfer()">DEVAM ET</button>
`);
animateStatBars(); popBadges();
}
function chooseOffer(which){
S.chosenOffer = which;
['offerA','offerB','offerStay'].forEach(id=>{
document.getElementById(id).classList.remove('sel');
});
const map = {A:'offerA',B:'offerB',STAY:'offerStay'};
document.getElementById(map[which]).classList.add('sel');
$('tContBtn').disabled = false;
}
function afterTransfer(){
if(S.chosenOffer==='A') S.club = S.offerA;
else if(S.chosenOffer==='B') S.club = S.offerB;
S.history.push({age:S.age, club:S.club.name});
const nextAges = [18,21,24,27,30,33];
const idx = nextAges.indexOf(S.age);
if(idx < nextAges.length-1){
goAgeStage(nextAges[idx+1]);
} else {
goCareerChoice();
}
}
function goCareerChoice(){
S.phase='choice';
renderTimeline();
setStage(`
<div class="center-wrap">
<h2 class="title">Kariyerinin Dönüm Noktası</h2>
<p class="sub">33 yaşındasın. Sahalara veda mı, yoksa teknik direktörlük mü?</p>
${ovrChartHTML()}
${playerCardHTML()}
<div class="btn-row">
<button class="btn btn-danger" onclick="goRetire()">🏁 EMEKLİ OL</button>
<button class="btn btn-secondary" onclick="goManagerSetup()">📋 T.D. OL</button>
</div>
</div>
`);
animateStatBars(); popBadges();
}
function goRetire(){
S.phase='retired';
S.stageIdx = STAGE_ORDER.indexOf('R');
renderTimeline();
renderSummary('Oyuncu Kariyeri Tamamlandı 🏁');
launchConfetti();
}
function goManagerSetup(){
S.phase='managerSetup';
S.stageIdx = STAGE_ORDER.indexOf('M');
renderTimeline();
const pool = clubsFor(S.continent,2,5);
const src = pool.length>=3?pool:CLUBS[S.continent];
const opts = [];
while(opts.length<3){
const c = pick(src);
if(!opts.find(o=>o.name===c.name)) opts.push(c);
}
setStage(`
<div class="tag-row"><div class="tag-a">YÖNETİCİLİK</div><div class="tag-b">Hangi kulübü çalıştırmak istersin?</div></div>
${opts.map((c,i)=>`
<div class="club-offer" id="mopt${i}" onclick="pickManagerClub(${i})">
<div class="cname">${c.name}<small>${c.country}</small></div>
<div class="cfee">⭐ Güç ${c.power}</div>
</div>`).join('')}
<button class="btn btn-primary" id="mContBtn" disabled onclick="runManagerSeasons()">GÖREVİ KABUL ET</button>
`);
window._mgrOpts = opts;
}
function pickManagerClub(i){
S.managerClub = window._mgrOpts[i];
window._mgrOpts.forEach((c,j)=>document.getElementById('mopt'+j).classList.toggle('sel', j===i));
$('mContBtn').disabled = false;
}
function runManagerSeasons(){
S.phase='managerSim';
S.managerTrophies=0;
const log=[];
for(let s=1;s<=3;s++){
let won=[];
if(Math.random() < S.managerClub.power*0.12){ S.managerTrophies++; won.push('Lig Şampiyonluğu'); }
if(Math.random() < S.managerClub.power*0.08){ S.managerTrophies++; won.push('Kupa'); }
log.push(`<div style="animation:fadeSlideIn .4s ease ${s*0.15}s both;">Sezon ${s}: <b>${won.length? won.join(' + ') : 'Trofesiz bir sezon'}</b></div>`);
}
setStage(`
<div class="center-wrap">
<h2 class="title">${S.managerClub.name}</h2>
<p class="sub">3 sezonluk yönetim dönemin</p>
<div class="summary-card">${log.join('')}</div>
<button class="btn btn-primary" onclick="goManagerSummary()">DEVAM ET</button>
</div>
`);
}
function goManagerSummary(){
S.phase='managerSummary';
renderSummary('Teknik Direktörlük Özeti 📋', true);
launchConfetti();
}
function renderSummary(headerText, managerMode){
const clubList = S.history.map(h=>`${h.age===15?'Akademi':h.age+' yaş'} → ${h.club}`).join('<br>');
setStage(`
<div class="center-wrap">
<div class="summary-card">
<h3>${headerText}</h3>
<div class="line"><span>Pozisyon</span><b>${S.posLabel} (${S.continentLabel})</b></div>
<div class="line"><span>Zirve OVR</span><b>${S.stats.OVR}</b></div>
<div class="line"><span>Maç</span><b>${S.apps}</b></div>
<div class="line"><span>Gol / Asist</span><b>${S.goals} / ${S.assists}</b></div>
<div class="line"><span>Lig Şampiyonluğu</span><b>${S.trophiesLeague}</b></div>
<div class="line"><span>Kupa</span><b>${S.trophiesCup}</b></div>
<div class="line"><span>Kart (Sarı/Kırmızı)</span><b>${S.yellow} / ${S.red}</b></div>
${managerMode ? `<div class="line"><span>T.D. olarak kazanılan kupa</span><b>${S.managerTrophies}</b></div>` : ''}
<div class="clubhistory"><b>Kulüp geçmişi:</b><br>${clubList}</div>
</div>
<button class="btn btn-primary" onclick="restart()">YENİDEN OYNA</button>
</div>
`);
}
function restart(){
resetState();
goIntro();
}
/* ---------------- INIT ---------------- */
goIntro();
</script>
</body>
</html>