Bir İşlem

Yurt dışında “Countdown”, Türkiye’de ise “Bir Kelime Bir İşlem” adıyla bilinen yarışma programının işlem kısmını sonunda bir Web uygulaması olarak bitirmiş bulunuyorum. Sayfa düzeni şimdilik mobil cihazlar göz önünde tutularak hazırlanmış durumda.

Oynanış: Oyunda hedef verilen altı adet sayıyyla dört işlem yaparak hedef sayıya mümkün olduğunca yaklaşmak. Bir kullanılan sayı bir daha kullanılamıyor. Bu sayılar kırmızı kenarlarla gösteriliyor. Sarı kenarlı sayılar kullanılabilecek sayıları gösterirken, seçilmiş sayı da yeşil kenarla gösteriliyor. İşlemin ilk sayısını seçtikten sonra bir işlem seçiliyor. Ardından da bu işlem için gereken ikinci sayı seçiliyor. Bu aşamada program işlemin sonucunu ilk seçilen sayının yerine yazıyor ve ikinci sayıyı kullanılmayacak şekilde işaretliyor. Bir sonraki adımda işlemin sonucu hemen kullanılabilsin diye bu sayı otomatik olarak seçiliyor. Eğer başka bir sayı ile işlem yapılmak istenirse kullanıcı sarı sayılardan birini seçebilir. Bu durumda seçilen sayı değişecektir.

İşlemlerin altındaki sırada ise oyunla ilgili tuşlar bulunmakta. En soldaki tuş o ana kadar bulunmuş en yakın sonucu çözüm olarak değerlendirmeye sokuyor. Bu tuşa basılınca kalan zamana ve hedefe ne kadar yaklaşıldığına göre bir skor hesaplanıyor. Onun yanında çözüm tuşuna basılınca program hedefe olası en yakın çözümü hesaplıyor ve bu tuşların altındaki alana bu çözümü yazıyor. Geri al tuşuna basınca son yapılan işlem geri alınıyor ve kullanıcı başka bir işlem yapabiliyor. Bu şekilde oyunun en başına dönmek mümkün. En sağdaki tuşla da yeni bir oyun başlatılıyor.

Programla ilgili biraz da bilgi vereyim. Oyun HTML, CSS ve Javascript kodlarından oluşuyor. Çözüm algoritması verilen sayılarla olası bütün işlemleri yapıyor ve her işlemden sonra sonuçla karşılaştırıyor. Eğer ciddi bir hata yapmadıysam çözüm tuşuna (ampule) basınca program en iyi çözümü gösterecektir. Bu en iyi çözüm sırasında bazen gereksiz işlemler de oluyor ama sonucu etkileyen bir durum değil bu. Henüz bu gereksiz işlemleri çözümden çıkaracak kısmı programlamadım.

Program mobil cihazlarda CSS viewport birimleri destekleyen tarayıcılarda doğru gösteriliyor. Şimdilik sadece Chrome (51 ve sonrası) ve Firefox (48) versiyonlarıyla test edebildim. Android standard tarayıcıda doğru çalışmadığına dair ekran görüntülerini de gördüm.

Programın geliştirilmesi aşamasında fikirlerinden (Kullanıcı ara birimi ve oynanış) faydalandığım Hatice Savaş’a da teşekkürlerimi sunarım.

Bir İşlem

CSS ile imtihanım

Birkaç gündür programda kullandığımız Audit dosyasının görünüşüyle ilgili sorunlarla uğraşıyordum. Audit dosyası verilei barındıran bir XML dosyası. Bu dosya bir XSL dosyası yardımıyla HTML sayfasına dönüştürülüyor. Test bölümü bu HTML çıktısında bazı satırların sayfaya sığmadığını bildirdi ve böylece bu maceramın başlangıcına gelmiş oldum. Çıktıda bazı satırlar sayfaya sığmadığı gibi en sağdaki sütun hep bir sonraki satırdan başlıyordu:

31-03-2016 13:14:16
Recep
Sistem ayarlarıyla öyle oynandı ki sistem artık saçmalamaya başladı
31-03-2016 13:14:15
Recep
Sistem ayarlarıyla oynandı

 

Aradığım çözüm ise son sütunun diğer sütunlarla aynı hizada başlaması ve sayfanın sağından taşan yazının da bir alt satırdan ama sütunun başladığı yerden devam etmesiydi. Ayrıca son sütun birden fazla satıra yayıldığında ise sütunları kapsayan bütün div elementi de aynı yüksekliğe sahip olmalı ki bu kayıt bir sonraki kaydın görüntüsünü bozmamalı. Sonunda şu sayfanın da yardımıyla aradığım sonuca ulaştım:

31-03-2016 13:14:16
Recep
Sistem ayarlarıyla öyle oynandı ki sistem artık saçmalamaya başladı
31-03-2016 13:14:15
Recep
Sistem ayarlarıyla oynandı

[sourcecode]
.table-layout {
display: table; width:100%;
}

.row-layout {
display: table-row; width:100%;
}

.dateTime {
white-space: nowrap;
width: 40%;
display: table-cell;
}

.source {
white-space: nowrap;
width: 20%;
display: table-cell;
}

.audit {
width: 50%;
display: table-cell;
}

<div class="table-layout">
<div class="row-layout">
<div class="dateTime">
31-03-2016 13:14:16
</div>
<div class="source">
Recep
</div>
<div class="audit">
Sistem ayarlarıyla öyle oynandı ki sistem artık saçmalamaya başladı
</div>
</div>
<div class="row-layout">
<div class="dateTime">
31-03-2016 13:14:15
</div>
<div class="source">
Recep
</div>
<div class="audit">
Sistem ayarlarıyla oynandı
</div>
</div>
</div>

[/sourcecode]