show expected and actual output

src/editor.rs

@@ -290,18 +290,6 @@ impl Editor {
 			Color::new(32, 32, 32, 255),
 		);
 
-		d.gui_check_box(
-			Rectangle::new(5., footer_top + 5., 25., 25.),
-			Some(rstr!("output as text")),
-			&mut self.output_as_text,
-		);
-		let out_text = if self.output_as_text {
-			String::from_utf8_lossy(self.machine.output()).to_string()
-		} else {
-			format!("{:?}", self.machine.output())
-		};
-		d.draw_text(&out_text, 5, footer_top as i32 + 35, 20, Color::WHITE);
-
 		let mut input_text = String::from_utf8_lossy(self.machine.input()).to_string();
 		if text_input(
 			d,
@@ -367,6 +355,59 @@ impl Editor {
 			&Tile::Powerable(PTile::Gate(self.tool_menu_gate), false).texture(),
 			Tool::Gate,
 		);
+
+		let y = footer_top as i32 + 5;
+		if simple_button(d, 600, y + 70, 65, 15) {
+			self.output_as_text = !self.output_as_text
+		}
+		let output_mode_text = if self.output_as_text {
+			"show bytes"
+		} else {
+			"show text"
+		};
+		d.draw_text(output_mode_text, 605, y + 72, 10, Color::WHITE);
+		let output_start = self.machine.output().len().saturating_sub(8);
+		let output_end = output_start + 8;
+		for (box_index, index) in (output_start..output_end).enumerate() {
+			let x = 600 + 35 * box_index as i32;
+
+			let expected_byte = self.level.outputs().get(index);
+			let real_byte = self.machine.output().get(index);
+
+			let (top_color, bottom_color) =
+				if let (Some(&real_byte), Some(&expected_byte)) = (real_byte, expected_byte) {
+					if expected_byte == real_byte {
+						(Color::GREEN, Color::DARKGREEN)
+					} else {
+						(Color::RED, Color::DARKRED)
+					}
+				} else {
+					(Color::DARKGRAY, Color::DIMGRAY)
+				};
+
+			d.draw_rectangle(x, y, 30, 30, top_color);
+			d.draw_rectangle(x, y + 35, 30, 30, bottom_color);
+			if let Some(&expected_byte) = expected_byte {
+				let top_text = if self.output_as_text
+					&& (expected_byte.is_ascii_graphic() || expected_byte.is_ascii_whitespace())
+				{
+					format!("{:?}", expected_byte as char)
+				} else {
+					format!("{}", expected_byte)
+				};
+				d.draw_text(&top_text, x + 2, y + 5, 20, Color::WHITE);
+			}
+			if let Some(&real_byte) = real_byte {
+				let bottom_text = if self.output_as_text
+					&& (real_byte.is_ascii_graphic() || real_byte.is_ascii_whitespace())
+				{
+					format!("{:?}", real_byte as char)
+				} else {
+					format!("{}", real_byte)
+				};
+				d.draw_text(&bottom_text, x + 2, y + 40, 20, Color::WHITE);
+			}
+		}
 	}
 
 	fn board_overlay(&mut self, d: &mut RaylibDrawHandle, textures: &Textures) {