Gin

an average
frontend developer

Hal-hal menyenangkan ketika ngoprek-ngoprek wordle

HTML, CSS, JS masih menyenangkan seperti sedia kala. Sama menyenangkannya dengan bermain wordle itu sendiri.

By: Gin|22/02/2022|Web Development

Beberapa bulan terakhir lini masa kita tentu dihujani dengan emoji-emoji berbentuk kotak, dengan warna hijau, kuning, dan putih. Saya termasuk pelakunya. Tentu saya sedang membahas wordle dan katla. Dua permainan teka-teki sederhana, yang tiba-tiba membuat banyak sekali manusia menghadapi satu persoalan yang sama: apa gerangan kata hari ini? Ditambah lagi dengan ide untuk membagikan emoji warna-warni itu brilian. Imut, lucu, mudah dimengerti, cemerlang sudah. Pada dasarnya manusia memang mahluk komunal bukan?

 

Saya latah ikut-ikutan bikin, versi Bahasa Jawa. Silakan coba disini: Katlo | Wordle Boso Jowo
 

Tapi kemudian saya melihat tweet ini:

 

 

 

 

Membuat sebuah project dengan Vanilla JS? Tanpa framework? Tentu saja bisa.
 

Proyek game mini seperti wordle misalnya, tentu bisa dibuat dengan vanilla JS. Banyak juga yang coba membuat tutorialnya (yah, namanya juga game viral, konten kreator yang cekatan tentu langsung mengambil hikmahnya). Misalnya channel ini, ini, atau ini. Mereka semua memakai vanilla JS dan CSS untuk membuat game wordle sederhana. 

 

Ada juga yang menyediakan repository open source, siap pakai, tinggal ganti list kata-kata yang ingin dipakai sebagai sumber teka-teki. Berbasis react kalau tidak salah.

 

Niat saya membuat adaptasi wordle bahasa jawa itu juga kurang lebih dipicu oleh tweet mbak Magdalena tersebut. Semakin tertarik ketika melihat bagaimana wordle yang dibeli New York Times itu tetap tidak mengubah apapun di coding-nya. Jawaban dan deret kata-kata tetap disimpan di tempat yang sama, tidak ada fetching. Semua yang menyenangkan di dalam game tersebut, dilayani oleh javascript dan browser.

 

Ketika pertama kali mengoprek, saya memang tidak pakai framework apa-apa. Cuma HTML dan CSS. Sekali dua kali masih harus buka-buka dokumentasi lagi soal CSS grid. 

 

Bagaimana membuat papan yang memuat tebakan, bagaimana membuat keyboard, semua pakai CSS grid. Bagimana tiap kotak akan memiliki animasinya masing-masing, berputar, bouncing, jumping, juga dengan CSS. Dalam proses ini saya jadi teringat kenapa dulu sempat jatuh hati pada per-Frontend-an, tidak lain tidak bukan ya karena interaksi-interaksi kecil semacam ini. Melihat apa yang kita ketik di editor, muncul di layar sebagai elemen warna-warni.

 

Kemudian masuk ke sisi interaksi, mulailah kita menuliskan baris-baris JavaScript. Tapi kemudian ditengah jalan, saya merasa bosan juga menulis querySelector. Pakai framework tentu lebih enak dan cepat. Pilihan saya jatuh ke svelte. Untuk SPA model wordle begini, Svelte jelas sangat mumpuni. 

 

Yang paling menarik buat saya di bagian interaksi ini adalah soal algoritma sederhananya untuk membuat kotak-kotak di papan berubah warna sesuai state-nya, apakah huruf tersebut sudah benar letaknya (hijau), apakah masih meleset (kuning), atau huruf tersebut tidak ada dalam kata (kelabu), untuk kemudian menambahkan delay di kotak-kotak tersebut sehingga animasinya terkesan berjalan dari kiri ke kanan.

 

Saya sempat terkecoh disitu. Misalnya ketika kata yang harus di tebak adalah ‘aroma’, dan jawaban yang saya berikan adalah ‘agama’:

 

A, R, O, M, A

A, G, A, M, A

 

Tantangannya adalah membuat kotak untuk huruf ‘A’ di posisi ketiga mempunyai warna kelabu, bukan kuning. Persoalan sederhana, yang seperti wordle itu sendiri, menyenangkan untuk dipecahkan.

 

Setelah masalah tampilan dan algoritma terpecahkan, muncullah perkara berikutnya. Karena saya berniat membuat versi bahasa jawa, tentu saya butuh banyak sekali kata-kata bahasa jawa yang terdiri atas lima huruf. Di sela-sela waktu luang, saya sempat mencoba scrapping satu hingga dua sumber, tapi hasilnya masih terlalu sedikit (cuma 700 kata)….

 

Sampai kemudian saya menemukan repositori ‘Batangan’. Mantab. Kamus Jawa-nya disitu cukup lengkap, ada ribuan entri. Setelah meminta ijin kepada yang empunya repositori, langsung saya pasang datanya. Sip. Selesai. Beres. I'm happy. 

 

Kira-kira begitulah. Ada perasaan nostalgia menyeruak kalau sedang luang lalu mengulik sebuah proyek yang iseng. Nostalgia tentang masa-masa memandang browser dengan penuh rasa takjub. Tapi tentang hal ini, barangkali saya saja yang terlalu sentimentil.

 

N.B 

Jika kamu membaca ini dan belum mendengar wordle, atau katla, silakan meluncur:

 

Wordle - The New York Times (nytimes.com)

Katla - Permainan Tebak Kata | 1 Hari 1 Kata 6 Kesempatan

Katlo | Wordle Boso Jowo

Batangan (lantip.xyz)