⛵ Velora Sailing

Yarışa hazırlanan genç yelkenciler için etkileşimli taktik ve kural animasyonları. Tekne, yelken (rüzgara göre bumba konumu), tramola/kavança, start çizgisi, şamandıra ve rüzgar değişimleri basit ama doğru bir modelle canlandırılır; her senaryo zamanlı açıklama adımlarıyla gelir.

Canlı görüntüleme (GitHub Pages)

Site: https://seyhundev.github.io/velora-sailing/

Yayın otomatiktir: main dalına her push'ta GitHub Actions (.github/workflows/deploy.yml) scripts/build.mjs ile src/ klasörünü derleyip Pages'e yükler. Tek seferlik ayar: Settings → Pages → Source: "GitHub Actions".

Önbellek sorunu neden yaşanmaz?

Derleme, her CSS/JS dosyasının adına içerik özetini ekler (app.e629d783.js gibi) ve index.html içindeki bağlantıları günceller. İçerik değişince dosya adı da değişir; tarayıcı eski dosyayı asla yeni HTML ile eşleştiremez. Sayfanın sağ altındaki sürüm damgası (commit + tarih) hangi sürümün yüklendiğini gösterir.

Yerelde çalıştırma

npm run dev        # http://localhost:8000  (src/ doğrudan, derleme gerekmez)
npm run build      # dist/ üretir
npm run preview    # http://localhost:8080  (dist/ ile aynı yayın hâli)

Teknoloji kararı ve gereksinimler

Gereksinim	Karar
Her cihazda (telefon, tablet, projeksiyon) kurulumsuz açılsın	HTML + CSS + vanilla JavaScript, derleme adımı yok
Tekne / yelken / rüzgar vektör olarak çizilsin, ölçeklenince bozulmasın	SVG (Canvas değil: her tekne bir DOM nesnesi, tıklanabilir, CSS ile stillenebilir)
Zamanda ileri-geri sarılabilsin, adımlara atlanabilsin	Senaryolar önceden örneklenmiş rota (track) üretir; her kare t ile örneklenir
Senaryo yazmak kolay olsun (kod değil, tanım)	docs/js/scenarios.js içinde segment tabanlı tanım: closehauled / run / heading / hold
Kalabalık start hatları	Senaryoda crowd ile tanımlanan filo, rules.js ile birlikte simüle edilir; hattın dibinde bekler, sinyalde çıkar ve karşılaşmalarda simülatörle aynı kural koduyla (SailRules.giveWay / chooseEscape: RRS 10/11/12/13/14) kendiliğinden manevra yapar; uygulanan kural teknenin üstünde yazar. Hızlanma simülatördeki tekne sınıfı tablosundan (boatClass, windKn, clockScale → engine.scenarioTau). (Arayüzden tekne ekle/çıkar şimdilik kapalı; kod duruyor.)
Ücretsiz yayın	GitHub Pages
Python gerekli mi?	Hayır. Python yalnızca ileride veri (sporcu kayıtları, sonuçlar) tarafı için; animasyon tarafı tarayıcıda

Neden React/Three.js/Unity değil? Hedef "basit, anlaşılır, hızlı üretilen" 2D üstten görünüş animasyonları. Framework bağımlılığı yok; ileride gerekirse SVG katmanı olduğu gibi React'e taşınabilir.

Kullanım

• Üst çubuk: senaryo seçimi (kare küçük resimler, her biri animasyonun kısa ön izlemesini döngüde oynatır), Bilgi kartı aç/kapat, Katmanlar (rüzgar çizgileri, merdiven basamağı, isimler, izler, yakın görünüm, tam ekran). Velora logosu ve adı sahnenin sol alt köşesinde.
• Alt çubuk: oynat/duraklat, başa al, hız, zaman çubuğu.
• Bilgi kartı animasyonla birlikte adım adım ilerler. Üst satırdaki ‹ › ile kendiniz gezerseniz kart durur ve Bu ana git belirir; ona (ya da oynat / zaman çubuğu / başa al) basınca animasyon o ana gider, kart yeniden izler.
• Klavye: Boşluk oynat/duraklat, ← → adımlar arasında gezinme, i bilgi kartı.

Yarış simülatörü (sim.html)

Üst çubuktaki Simülatör bağlantısıyla açılır. Hazır animasyonlardan bağımsızdır:

여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗