add highlighting for selected field and focus-awareness for board

BingoBoard.py

@@ -1,6 +1,7 @@
 from textual.reactive import reactive
 from textual.widget import Widget
 from textual.app import ComposeResult
+from textual.message import Message
 
 from datetime import datetime
 import random
@@ -12,6 +13,8 @@ class BingoBoard(Widget):
 
     fields = reactive([], recompose = True)
 
+    cursor_x, cursor_y = 2, 2
+
     def __init__(self) -> None:
         self.fieldstate = [False for _ in range(25)]
         self.can_focus = True
@@ -46,6 +49,9 @@ class BingoBoard(Widget):
         self.default_fields = self.fields
         self.roll_board(int(datetime.now().timestamp()))
 
+    def fieldnum_from_cursor(self) -> int:
+        return self.cursor_x + ( self.cursor_y * 5)
+
     def roll_board(self, seed):
         self.seed = seed
         random.seed(seed)
@@ -61,6 +67,15 @@ class BingoBoard(Widget):
         for _ in range(25):
             yield BingoField(_, self.fields[_])
 
+    def on_focus(self, message: Message) -> None:
+        fields = self.query(BingoField)
+        fields[self.fieldnum_from_cursor()].set_highlighted(True)
+
+    def on_blur(self, message: Message) -> None:
+        fields = self.query(BingoField)
+        fields[self.fieldnum_from_cursor()].set_highlighted(False)
+
+
     async def on_bingo_field_selected(self, message: BingoField.Selected) -> None:
         self.fieldstate[message.num] = message.selected
         if self.is_bingo():

BingoField.py

@@ -5,7 +5,6 @@ from textual.reactive import reactive
 class BingoField(Static):
     '''A Bingo field widget.'''
     
-    cursor_x, cursor_y = 2, 2
     text = reactive('')
 
     class Selected(Message):
@@ -18,27 +17,26 @@ class BingoField(Static):
     def __init__(self, num, text: str) -> None:
         self.num = num
         self.selected = False
+        self.highlighted = False
         super().__init__()
         self.text = text
 
-    #def on_mount(self) -> None:
-        #self.styles.content_align = ('center', 'middle')
-        #self.styles.text_align = 'center'
-        #self.styles.border = ('blank', 'green')
-        #self.styles.height = '100%'
-        #self.styles.width = '100%'
-
     def on_click(self) -> None:
         self.selected = not self.selected 
         if self.selected:
-        #    self.styles.animate('background', 'green', duration=0.1)
             self.add_class('field_selected')
         else:
             self.remove_class('field_selected')
-            #self.styles.animate('background', '#1c1c1c', duration=0.1)
 
         # The post_message method sends an event to be handled in the DOM
         self.post_message(self.Selected(self.num, self.selected))
 
+    def set_highlighted(self, new_highlight: bool) -> None:
+        self.highlighted = new_highlight
+        if self.highlighted:
+            self.add_class('field_highlighted')
+        else:
+            self.remove_class('field_highlighted')
+
     def render(self) -> str:
         return str(self.text)

bingo.tcss

@@ -21,6 +21,10 @@ BingoField.field_selected {
     background: $success;
 }
 
+BingoField.field_highlighted {
+    color: $secondary;
+}
+
 BingoDisplay {
     layout: vertical;
     height: 100%;