vilmibm feedbacks part 1: colours, wrapping

app/editor.go

@@ -15,15 +15,13 @@ type Editor struct {
 	loaded bool
 }
 
-func (view *Editor) Draw(state *ui.State) {
+func (view *Editor) Draw(state *ui.State) (row int) {
-	win := state.Window()
+	win := state.Window().New(0, 0, 80, state.Window().Height)
 	user, _ := user.Current()
-	win.Print(
+	_, row = win.Wrap(
 		vaxis.Segment{Text: `──── editing your homepage ────
 
-nice work! you'll get used to the shell in no time. one of the main things
+`, Style: vaxis.Style{Foreground: vaxis.IndexColor(5)}}, vaxis.Segment{Text: `nice work! you'll get used to the shell in no time. one of the main things you're going to do in town is editing text files. the program we use to do this is aptly called an `},
-you're going to do in town is editing text files. the program we use to do this
-is aptly called an `},
 		vaxis.Segment{Text: "editor", Style: vaxis.Style{Foreground: vaxis.IndexColor(3)}},
 		vaxis.Segment{Text: `.
 
@@ -40,11 +38,9 @@ looks pretty barren, doesn't it? let's edit it to add some more words.
 
 type `},
 		vaxis.Segment{Text: "nano public_html/index.html", Style: vaxis.Style{Foreground: vaxis.IndexColor(3)}},
-		vaxis.Segment{Text: ` to open nano, our text editor of choice. in it,
+		vaxis.Segment{Text: ` to open nano, our text editor of choice. in it, make some changes, and press `},
-make some changes, and press `},
 		vaxis.Segment{Text: "Ctrl+O", Style: vaxis.Style{Foreground: vaxis.IndexColor(3)}},
-		vaxis.Segment{Text: ` to save and look at the changes in your
+		vaxis.Segment{Text: ` to save and look at the changes in your browser. press `},
-browser. press `},
 		vaxis.Segment{Text: "Ctrl+X", Style: vaxis.Style{Foreground: vaxis.IndexColor(3)}},
 		vaxis.Segment{Text: ` to save and exit nano.
 
@@ -52,6 +48,7 @@ like before, when you're done, type `},
 		vaxis.Segment{Text: "exit", Style: vaxis.Style{Foreground: vaxis.IndexColor(3)}},
 		vaxis.Segment{Text: ` in your shell to continue.`},
 	)
+	return
 }
 
 func (view *Editor) Event(state *ui.State, event vaxis.Event) (processed bool) {
@@ -60,8 +57,8 @@ func (view *Editor) Event(state *ui.State, event vaxis.Event) (processed bool) {
 	}
 	view.loaded = true
 
-	win := state.Window().New(0, 16, 80, 80)
+	row := view.Draw(state)
-	view.Draw(state)
+	win := state.Window().New(0, row+2, 80, 80)
 
 	vt := term.New()
 	vt.TERM = os.Getenv("TERM")

app/help.go

@@ -15,13 +15,11 @@ func (view *Help) Event(state *ui.State, event vaxis.Event) (processed bool) {
 		}
 		processed = true
 	}
-	win := state.Window()
+	win := state.Window().New(0, 0, 80, state.Window().Height)
-	win.Print(
+	win.Wrap(
 		vaxis.Segment{Text: `──── links, help, & goodbye ────
 
-good job on getting all the way through this tutorial! i knew you could do it.
+`, Style: vaxis.Style{Foreground: vaxis.IndexColor(5)}}, vaxis.Segment{Text: `good job on getting all the way through this tutorial! while there's a lot of things you can do in town, the tools you just received should help you traverse the land and get further help if you need it.
-while there's a lot of things you can do in town, the tools you just received
-should help you traverse the land and get further help if you need it.
 
 • to join our chatroom and ask for help or just say hi, run `},
 		vaxis.Segment{Text: "town chat", Style: vaxis.Style{Foreground: vaxis.IndexColor(3)}},

app/introduction.go

@@ -17,18 +17,13 @@ func (view *Introduction) Event(state *ui.State, event vaxis.Event) (processed b
 		}
 		processed = true
 	}
-	win := state.Window()
+	win := state.Window().New(0, 0, 80, state.Window().Height)
-	win.Print(vaxis.Segment{Text: `                        ──── welcome to tilde town ────
+	win.Wrap(vaxis.Segment{Text: `──── welcome to tilde town ────
 
-welcome to tilde town! we're glad you're here.
+`, Style: vaxis.Style{Foreground: vaxis.IndexColor(5)}}, vaxis.Segment{Text: `welcome to tilde town! we're glad you're here.
 
-this short tutorial will help you get accustomed to the terminal — 
+this short tutorial will help you get accustomed to the terminal — the text-based user interface that you will do most of your interacting with town on. if you're here, this means you've successfully connected to town over ssh — good job! you can handle the rest. i believe in you <3
-the text-based user interface that you will do most of your interacting with
-town on. if you're here, this means you've successfully connected to town over
-ssh — good job! you can handle the rest. i believe in you <3
 
-press ↲ to continue to the next page. if you know what you're doing, you can
+press ↲ to continue to the next page. if you know what you're doing, you can press C-c or C-d at any point to exit to a shell.`})
-press C-c or C-d at any point to exit to a shell.
-`})
 	return
 }

app/settings.go

@@ -65,27 +65,24 @@ func (view *Settings) Event(state *ui.State, event vaxis.Event) (processed bool)
 		enterStyle = vaxis.AttrReverse
 	}
 
-	win := state.Window()
+	win := state.Window().New(0, 0, 80, state.Window().Height)
-	win.Print(vaxis.Segment{Text: `                           ──── initial settings ────
+	_, q1 := win.Wrap(vaxis.Segment{Text: `──── initial settings ────
 
-let's get you set up with some useful settings. you can press ↑ or ↓ to move
+`, Style: vaxis.Style{Foreground: vaxis.IndexColor(5)}}, vaxis.Segment{Text: `let's get you set up with some useful settings. you can press ↑ or ↓ to move between the inputs. feel free to leave any of them empty! you can always set them later, or leave them unset.
-between the inputs. feel free to leave any of them empty! you can always set
-them later, or leave them unset.
 
-1. what are your pronouns? this is useful information for folks to be able to
+1. `}, vaxis.Segment{Text: "what are your pronouns?", Style: vaxis.Style{Foreground: vaxis.IndexColor(1)}}, vaxis.Segment{Text: ` this is useful information for folks to be able to refer to you in the third person. common pronoun sets are he/him, she/her, and they/them.
-   refer to you in the third person. common pronoun sets are he/him, she/her,
-   and they/them.
 
-   >
+   >`})
+	_, q2 := win.New(0, q1, 80, state.Window().Height).Wrap(vaxis.Segment{Text: `
 
-2. when's your birthday? this will show up in certain places, so people can wish
+2. `}, vaxis.Segment{Text: "when's your birthday?", Style: vaxis.Style{Foreground: vaxis.IndexColor(1)}}, vaxis.Segment{Text: ` this will show up in certain places, so people can wish you a happy birthday :) format is MM/DD.
-   you a happy birthday :) format is MM/DD.
 
-   >
+   >`})
+
+	_, q3 := win.New(0, q1+q2, 80, state.Window().Height).Wrap(vaxis.Segment{Text: `
+
+3. `}, vaxis.Segment{Text: "what's your timezone?", Style: vaxis.Style{Foreground: vaxis.IndexColor(1)}}, vaxis.Segment{Text: ` this will change all times you view in town to your local timezone, so you don't have to convert from utc in your head. the format for timezones can be found here:
 
-3. what's your timezone? this will change all times you view in town to your
-   local timezone, so you don't have to convert from utc in your head.
-   the format for timezones can be found here:
 `},
 		vaxis.Segment{
 			Text: "https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List",
@@ -95,6 +92,7 @@ them later, or leave them unset.
 			},
 		},
 		vaxis.Segment{Text: ` 
+
 it should look something like America/New_York.
 
    >
@@ -103,7 +101,7 @@ them later, or leave them unset.
 		vaxis.Segment{Text: " press ↲ to continue ", Style: vaxis.Style{Attribute: enterStyle}},
 	)
 
-	rows := [3]int{10, 15, 23}
+	rows := [3]int{q1, q1 + q2, q1 + q2 + q3 - 2}
 	for i, input := range view.inputs {
 		input.Draw(vaxis.Window{win.Vx, &win, 5, rows[i], 74, 1})
 		if i == view.index {

app/shell.go

@@ -13,36 +13,29 @@ type Shell struct {
 	loaded bool
 }
 
-func (view *Shell) Draw(state *ui.State) {
+func (view *Shell) Draw(state *ui.State) (row int) {
-	win := state.Window()
+	win := state.Window().New(0, 0, 80, state.Window().Height)
-	win.Print(vaxis.Segment{Text: `                           ──── using the shell ────
+	_, row = win.Wrap(vaxis.Segment{Text: `──── using the shell ────
 
-as mentioned before, interaction with stuff on tilde town is done primarily via
+`, Style: vaxis.Style{Foreground: vaxis.IndexColor(5)}}, vaxis.Segment{Text: `as mentioned before, interaction with stuff on tilde town is done primarily via the `},
-the `},
 		vaxis.Segment{Text: "terminal", Style: vaxis.Style{Foreground: vaxis.IndexColor(3)}},
-		vaxis.Segment{Text: `. good news, you've been using the terminal this whole time! it's
+		vaxis.Segment{Text: `. good news, you've been using the terminal this whole time! it's the text application with which you've been talking to the server so far.
-simply the text application with which you've been talking to the server so far.
 
-the method of navigation between programs inside our shared computer, however,
+the method of navigation between programs inside our shared computer, however, is called a `},
-is called a `},
 		vaxis.Segment{Text: "shell", Style: vaxis.Style{Foreground: vaxis.IndexColor(3)}},
-		vaxis.Segment{Text: `. it's an interface that takes in commands, like "open a text
+		vaxis.Segment{Text: `. it's an interface that takes in commands, like "open a text editor" or "show me my flower", in a language that doesn't take too long to get used to. the most popular shell is called `},
-editor" or "show me my flower", in a language that doesn't take too long to get
-used to. the most popular shell is called `},
 		vaxis.Segment{Text: "bash", Style: vaxis.Style{Foreground: vaxis.IndexColor(3)}},
-		vaxis.Segment{Text: `, and while there are more,
+		vaxis.Segment{Text: `, and while there are more, there's no reason to switch unless you're looking for something different.
-there's no reason to switch unless you're looking for something different.
 
 below is a terminal session. try typing `},
 		vaxis.Segment{Text: "ls", Style: vaxis.Style{Foreground: vaxis.IndexColor(3)}},
 		vaxis.Segment{Text: ` to list a folder, or `},
 		vaxis.Segment{Text: "echo", Style: vaxis.Style{Foreground: vaxis.IndexColor(3)}},
-		vaxis.Segment{Text: ` to make the
+		vaxis.Segment{Text: ` to make the shell say anything you want it to. run `},
-shell say anything you want it to. run `},
 		vaxis.Segment{Text: "exit", Style: vaxis.Style{Foreground: vaxis.IndexColor(3)}},
-		vaxis.Segment{Text: ` to continue the tutorial, whenever
+		vaxis.Segment{Text: ` to continue the tutorial, whenever you're ready.`},
-you're ready.`},
 	)
+	return
 }
 
 func (view *Shell) Event(state *ui.State, event vaxis.Event) (processed bool) {
@@ -51,8 +44,8 @@ func (view *Shell) Event(state *ui.State, event vaxis.Event) (processed bool) {
 	}
 	view.loaded = true
 
-	win := state.Window().New(0, 16, 80, 80)
+	row := view.Draw(state)
-	view.Draw(state)
+	win := state.Window().New(0, row+2, 80, 80)
 
 	vt := term.New()
 	vt.TERM = os.Getenv("TERM")