Adding flavor to a Ruby CLI application
Tags: ruby, cli, design, jeopardy
Published: 2020-10-25 23:57:20

The CLI terminal is a technology infamous for its ability to repel and render useless the sharpest of minds raised in a graphical environment like Windows and iOS.  The absence of color, abrupt flow of text, no-nonsense and matter-of-fact atmosphere that pervades its very essence.  These are the cornerstones of what makes the terminal such an intimidating force for those unfamiliar with its hidden power and potential.

I have only recently begun my journey towards understanding the nuance and mystery of one of the most fundamentally instrumental tools developed across the history of computers.  The first 'major' project I built from scratch was a Jeopardy game, meant to be played by one player in the terminal.  As someone who comes from a Windows-only household, the lack of graphics and animation in an application (especially a game) is unsettling to me, and so it was only natural that I try to inject some stylistic elements into my program to make it a bit more approachable.

There are a number of tools available to one wishing to spice up a terminal application.  I've put together a short list of some of the things I was able to exploit to bring my solo-Jeopardy game from "technically playable" to "nearly enjoyable".


# Alignment

By default, the terminal justifies all text to the left side of the screen.  This is fine in most scenarios, but for the purpose of my program, I wanted most of my output to appear centered in the screen.

I thought myself clever to just add a carefully counted number of spaces in front of every single line of text to be output in my program, until I stumbled upon the very handy [`.center()`](https://ruby-doc.org/core-2.7.2/String.html#method-i-center) method, which can be called on a string to be output.  This method centers the string in a provided argument of width as a number of characters.

I used the Ubuntu terminal for my Jeopardy application, so I went into Ubuntu's settings on full-screen and determined the maximum width of my terminal to be 172 characters on my 13.3" laptop screen.  Then, centering the text of my program was as easy as appending `.center(172)` to each string in my code which I wanted to be centered when output.

If you add a second argument to `.center()`, the padding on each side of your string will be changed from empty spaces to the character provided as a second argument!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qnwbe15s4k7mihzb7apo.png)


# Colorize

A useful and well-known Ruby gem is [Colorize](https://github.com/fazibear/colorize).  Colorize allows programmers to add colorful output to their CLI application with varying degrees of customization.  The simplest use of the gem, once installed, is to append the method `.blue` or `.red`, or any other color supported by the gem, to change the color of output text. Follow the text color method with `.on_green` or `.on_white` etc to give the output a background color!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k1p3vu1sqilocjl0g28g.png)


# .sleep

To a user unfamiliar with a text-based terminal, it is sometimes shocking to be faced with an enormous wall of text after entering a single input.  "Where do I even begin to start reading?  Where did my input end up?"  Something I like to utilize in order to make outputs more digestible is the [sleep()](https://apidock.com/ruby/Kernel/sleep) method.  This method, simply put, tells the program to sleep for a number of seconds (including floats with fractional seconds), given as an argument.  The program will wait that number of seconds, and then resume.  A few well placed `sleep(0.5)` or `sleep(1)` can make a long wall of text much more readable for users, instead of spitting the text out all at once.

## Put it all together!

Throw in a few `30.times {puts ""}` and you've got yourself a simple but refined introduction screen that would make even Trebek proud!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rwgdt427e3z58bdjjzdo.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6ge9xvvsde2dw8zwatpm.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/khh98j0my00jcm69qsn2.png)