In this challenging homework, we will learn how to use arrays and for loops by implementing a text input field.

A text input field allows a user to type a message inside of a computer program. You've used these things your whole life, but probably haven't given them much thought.

Let's change that. 🙂👍

• Try playing around with one of the search bars on this web page.
  • What happens when you...
    • press the B key on your keyboard?
    • press SHIFT + B?
    • press the LEFT_ARROW_KEY?
    • press the RIGHT_ARROW_KEY?
    • press BACKSPACE?
    • press COMMAND + A (or CONTROL + A on Windows)?
    • press the left mouse button?
    • hold the mouse and drag?
    • press B while some text is highlighted?
    • press BACKSPACE while some text is highlighted?
    • double-click?

We need to store a sequence of characters that we'll be changing a lot.

We will use an array, specifically an array of characters (char[]).

• char[] buffer = new char[8]; is an array of 8 char's called buffer
  • buffer.length will be 8
• for (int i = 0; i < array.length; ++i) { ... } iterates over array forwards
• for (int i = array.length - 1; i >= 0; --i) { ... } iterates over array backwards

• I highly recommend drawing simple little pictures of your array for this assignment
• This will be very useful to work out carefully by hand what should happen to your array, rather than just guessing

• char[] buffer; stores the user's message as an array of characters
  • buffer can store a message of length at most buffer.length
• int length; is the length of the current message stored in buffer
  • if (length == 0) then message is empty
  • if (length == buffer.length) then the message completely fills the buffer
• int cursor; is the current cursor position
  • 0 means all the way to the left
  • 1 means in between buffer[0] and buffer[1]

• the left side of the canvas is $x = 0.0$
• the right side of the canvas is $x = \texttt{buffer.length}$
• we are using a monospaced font; this means each character is the same width;
  • for simplicity, we have each character be $1.0$ unit wide
  • buffer[0] is drawn from $x = 0.0$ to $x = 1.0$
  • cursor should be drawn at $x = \texttt{cursor}$
• example
  • here is the message COW written in a monospaced font, with the cursor all the way to the left
    • buffer.length is 4
    • length is 3
    • cursor is 0

  | #####   #####   #   # 
  | #       #   #   #   # 
  | #       #   #   # # # 
  | #####   #####    # #  
  0       1       2       3       4   -> x
  

• the bottom of the canvas is $y = -1.0$ and the top is $y = 2.0$ (NOTE: you don't need this fact except for the A++, at which point you'll probably want to write your own text drawing function(s) anyway)

• All features must match the behavior of a typical text input field
  • For example, pressing BACKSPACE should turn CO|W (length 3) into C|W (length 2); NOTE: the | is the cursor
  • You are responsible for discovering what the correct behavior of all commands is by experimenting with a real-world text input field

YouTube Link: https://www.youtube.com/watch?v=HTEWeeOiI3s

• You may NOT use any fancy Java standard library functions
  • Use for loops, if statements, and the functions inside Cow.java
• You may NOT use the Java String class anywhere.
• You may NOT create any new arrays (just modify the contents of buffer)
• You may NOT use excessive repetition (for example, don't use separate if statements for c == 'A', c == 'B', c == 'C', ...)
• You may NOT have any out of bounds errors

• A-

  • Update Cow
  • User can press A-Z (any of the keys A, B, ...)
  • Draw the cursor bar (location of cursor as a vertical line)
  • User can press 0-9
  • User can press SHIFT + A, SHIFT + B ...
  • User can press the space bar
    • HINT: this is the character ' '
  • User can press LEFT_ARROW
  • User can press RIGHT_ARROW
  • User can press BACKSPACE

• A

  • Make the cursor bar blink
    • HINT: You will want to introduce a frame or time variable to keep track of the current frame / time
    • NOTE: Making the cursor bar not blink for a bit after keyAnyPressed is an optional good idea
  • Click the mouse to move cursor to the closest int
  • If the user presses ENTER while the buffer contains Passw0rd, replace the contents of the buffer with accepted
    • HINT: some repetition here is OK

• A+

  • Click and drag the mouse to select/highlight a sequence of characters
    • HINT: int select = 0; can be the "selection cursor"; if (cursor == select) is true, then nothing is selected (and the cursor should be blink as usual); it it is false, then the characters in between the two numbers are selected
      • MIN(...) and MAX(...) may be useful
    • NOTE: pressing BACKSPACE while characters are selected must do the right thing
    • NOTE: pressing A, B, ... should also do the right thing
  • Press COMMAND + A or CONTROL + A to select all characters
    • NOTE: we want our app to be "cross platform" (work on both Mac and Windows)
  • (Optional, but put in free response if you did it) Double-click the mouse to select all characters
    • HINT: Be careful about the built-in mouseHeld (NOTE: mouseHeld is true for the first frame mousePressed is true--and likely for a few frames after that as well)
  • Improve the animations of the cursor; Inspo: https://diskvoyager.com; Additional very important inspo: https://www.youtube.com/watch?v=emjuqqyq_qc

• A++ (105)

  • Build a full raw text editor like TextEdit/Notepad
    • Copy and paste from system clipboard
    • Multiple lines

class HW02 extends Cow {
    public static void main(String[] arguments) {

        char[] buffer = new char[8];
        int length = 0;
        int cursor = 0;

        canvasConfig(0.0, -1.0, buffer.length, 2.0, WHITE, 512);
        while (beginFrame()) {

            // TODO

            // NOTE: This function draws the first length-many characters of the buffer
            HW02_drawText(buffer, length, BLACK);
        }
    }
}

for (char c = 'A'; c <= 'Z'; ++c) { ... }

(char)('a' + (c - 'A'))

for (char c = 'A'; c <= 'Z'; ++c) {
    if (keyPressed(c)) {
         ... // Complicated logic for inserting a character
    }
}

for (char c = '1'; c <= '9'; ++c) {
    if (keyPressed(c)) {
        ... // Complicated logic for inserting a character
    }
}

if (keyPressed(' ')) {
    ... // Complicated logic for inserting a character
}

char newCharacter = 0; // initialize to the null (0) character

for (char c = 'A'; c <= 'Z'; ++c) {
    ... // Simple logic to setting newCharacter
    // NOTE: this one also has to handle shift
}

for (char c = '0'; c <= '9'; ++c) {
    ... // Simple logic for setting newCharacter
}

if (keyPressed(' ')) {
    ... // Simple logic for setting newCharacter
}


if (newCharacter != 0) {
    ... // Complicated logic for inserting a character
}

class HW02A extends Cow {

	public static void main(String[] arguments) {

		final char[] buffer = new char[8];
		int length = 0;
		int cursor = 0;

		// NOTE: each character is 1 unit wide
		canvasConfig(0.0, -1.0, buffer.length, 2.0, WHITE, 512);

		int blinkCounter = 0;

		while (beginFrame()) {
			boolean insertCharacterValid = (length != buffer.length);
			boolean backspaceValid = ((length != 0) && (cursor != 0));
			boolean leftArrowKeyValid = (cursor != 0);
			boolean rightArrowKeyValid = (cursor != length);
			
			if (keyAnyPressed) {
				blinkCounter = 0;
			}

			if (insertCharacterValid) {
				char newCharacter; {
					newCharacter = 0;
					for (char c = 'A'; c <= 'Z'; ++c) {
						if (keyPressed(c)) {
							if (!keyHeld(SHIFT)) {
								newCharacter = (char)('a' + (c - 'A'));
							} else {
								newCharacter = c;
							}
						}
					}
					for (char c = '0'; c <= '9'; ++c) {
						if (keyPressed(c)) newCharacter = c;
					}
					if (keyPressed(' ')) newCharacter = ' ';
				}
				if (newCharacter != 0) {
					for (int i = length; i > cursor; --i) buffer[i] = buffer[i - 1];
					buffer[cursor] = newCharacter;
					++cursor;
					++length;
				}
			}

			if (backspaceValid && keyPressed(BACKSPACE)) {
				for (int i = cursor; i < length; ++i) buffer[i - 1] = buffer[i];
				--cursor;
				--length;
			}

			if (leftArrowKeyValid && keyPressed(LEFT_ARROW)) {
				--cursor;
			}

			if (rightArrowKeyValid && keyPressed(RIGHT_ARROW)) {
				++cursor;
			}

			if (mousePressed) {
				cursor = length;
				for (int i = 0; i < length; ++i) {
					if (mouseX < i + 0.5) {
						cursor = i;
						blinkCounter = 0;
						break;
					}
				}
			}

			if (keyPressed(ENTER)) {
				if (true
						&& (buffer[0] == 'P')
						&& (buffer[1] == 'a')
						&& (buffer[2] == 's')
						&& (buffer[3] == 's')
						&& (buffer[4] == 'w')
						&& (buffer[5] == '0')
						&& (buffer[6] == 'r')
						&& (buffer[7] == 'd')) {
					buffer[0] = 'a';
					buffer[1] = 'c';
					buffer[2] = 'c';
					buffer[3] = 'e';
					buffer[4] = 'p';
					buffer[5] = 't';
					buffer[6] = 'e';
					buffer[7] = 'd';
				}
			}

			{ // draw
				if ((blinkCounter++ % 14) < 7) drawLine(cursor, -0.5, cursor, 1.5, PURPLE, 5.0);
				HW02_drawText(buffer, length, BLACK);
			}
		}

	}
}