Bir turnuva dirsek Çizim (CSS / HTML PHP Verisetinin dayalı)

2 Cevap php

If you're not familiar with what I mean by tournament bracket, see here: http://baseballguru.com/bracket1.gif

O dedi, ben dataset inşa edilmiş ve mermi sayısını (ceil (log ($ numPlayers, 2))) anladım ve ben vs her turda oyuncuların sayısını bulma rahat oluyorum

Şimdi ne yapmam gereken bir parantez içine her tur için maçlar benim dizi taşımaktır. Bu CSS, ya da masaya, ben sadece görsel bir şey (turnuva mermi değişken sayıda olabilir düşünün) Ben bu bina hakkında gitmek nasıl merak ediyorum, tasarımı ile kendimi oynayabilirsiniz.

Teşekkürler!

2 Cevap

Sen tablolar ile gitmek ve desteğini sıraya uygun rowspan s ayarlayabilirsiniz. Bu daha kolay bir yoldur, ancak bazı anlam doğru değil diyecekler. Example.

Ayrıca sadece uygun pozisyonları hesaplamak ve bir kelepçe gibi görünmesi için kesinlikle konumlandırılmış divs kullanarak CSS'd katmanları ile yapabilirdi. Eğer javascript bunu etrafında hareket sürece bu yaklaşım sıvı olmayacağını unutmayın. More on this.

Son olarak, this topic açıklandığı gibi, iç içe listeleri ile bunu yapabilirdi, ama bu oldukça dağınık görünüyor.

Ben (TournamentsApi) turnuvaları izleme ve işleme için yapılmış bir proje var. Bunu bir göz atmalısınız.

Sitemde, ben SVG parantez render ediyorum ve HTML gömerek. Benim uygulama kullanmak için eğimli olsaydı, ben SVG nesil / gömme için kullanabileceğiniz kod paylaşmaktan mutluluk duyarım.

Tabii ki, benim C # ile yazılmış, bu nedenle kullandığı uygun olmayabilir. Ancak, kaynak kodu MIT lisansı altında yayımlanan, ve ben kendi projesi için oluşturduğunuz veri yapılarını kullanmak için ücretsiz oldu