Kimon (鬼門)

Kimon (鬼門)

Next.jsReactTypeScriptTailwind CSSshadcn/uiSupabasePostgreSQLVercel

Qué es

Kimon es un juego de escucha y lectura para personas que aprenden japonés. Eliges una canción y una dificultad, y el video de YouTube se reproduce mientras la letra aparece línea por línea. Cuando llega una línea con una palabra que falta, el video se detiene y eliges la palabra correcta entre cuatro. Las opciones incorrectas suenan igual que la correcta, así que tienes que conocer el kanji, no solo reconocer el sonido.

Kimon (鬼門) significa “puerta de los demonios”: en el folclor japonés, la dirección noreste por la que pasan demonios y espíritus. Juegas como un yurei, un fantasma japonés que eliges al registrarte. Las tres dificultades son rangos de demonio: yokai, oni y kishin. Cada rango más alto deja más palabras en blanco. El tono es travieso, no de miedo, y el texto en japonés siempre va primero: los títulos usan una fuente de pincel, mientras que la letra y las respuestas usan BIZ UDPGothic, una fuente hecha para leerse con facilidad.

Funciones

  • Catálogo de canciones: explora por género (anime, J-pop, city pop, Vocaloid, enka), busca y descubre colecciones elegidas a mano, en vista de tarjetas o de tabla.
  • Pantalla de juego: el video, una línea de letra estilo karaoke y cuatro tarjetas de respuesta que puedes elegir con el ratón o con las teclas 1 a 4.
  • Significado de las palabras: después de responder, un panel lateral muestra qué significa cada opción y enlaza a su página en Jisho, así un error se convierte en una lección.
  • Perfil: partidas anteriores, mejores puntajes, canciones favoritas y logros.
  • Conexión con WaniKani: quienes estudian con WaniKani pueden vincular su cuenta para ver su nivel y los kanji que ya conocen en su perfil.
  • Pedidos de canciones: los jugadores pueden pedir una canción y hablar conmigo sobre ella en un hilo corto de mensajes.

Cómo funciona

El juego. La pantalla de juego usa una pequeña máquina de estados con cuatro pasos: esperando, reproduciendo, pregunta y terminado. Le dice al reproductor de YouTube cuándo reproducir, pausar y saltar. El reproductor solo atiende una orden a la vez, así que cada orden espera a que termine la anterior, y una segunda orden rápida cancela la primera en lugar de competir con ella. El video se detiene un cuarto de segundo antes para compensar el retraso al saltar, así la palabra de la respuesta nunca se escucha antes de que aparezca la pregunta.

El servidor. La app corre en Next.js con el App Router sobre Vercel. Las páginas son componentes de servidor que leen de Supabase, y cada escritura, como guardar una partida o añadir un favorito, es una server action que revisa sus datos en el servidor. Si guardar una partida falla, queda en el navegador y se envía de nuevo en la siguiente visita.

La base de datos. Supabase guarda el catálogo, los jugadores y sus partidas. La seguridad a nivel de fila deja que cualquiera lea el catálogo y que cada jugador lea y escriba solo sus propias filas. Los triggers de la base de datos entregan logros al guardar una partida, limitan cuántos pedidos de canciones puede tener abiertos un jugador y hacen permanente el yurei una vez elegido. Los tokens de WaniKani se guardan cifrados en Supabase Vault y solo el servidor puede leerlos.

Las canciones. La letra sincronizada y sus tiempos vienen de LRCLIB a través de un script que los escribe como SQL. Las preguntas se escriben a mano: una palabra en blanco por línea, cuatro palabras reales como opciones y un rango para cada pregunta. Un segundo script revisa cada opción en un diccionario para encontrar errores.

Diseño

El estilo es “brutalismo de tinta”: bordes negros gruesos, sombras desplazadas y marcadas, y unos pocos colores tomados de tintas japonesas tradicionales, como el bermellón para las acciones principales y el índigo para lo seleccionado. Grabados ukiyo-e de dominio público decoran las páginas, con textura de papel y efectos de impresión hechos en CSS. Los cambios de página usan una transición de pincel de tinta, y cada animación respeta la opción de movimiento reducido.

Galería

Kimon (鬼門): browse
Kimon (鬼門): rank
Kimon (鬼門): gameplay
Kimon (鬼門): results