diff --git a/BingoField.py b/BingoField.py index a8caf20..28e5ca5 100644 --- a/BingoField.py +++ b/BingoField.py @@ -21,20 +21,21 @@ class BingoField(Static): super().__init__() self.text = text - def on_mount(self) -> None: - self.styles.content_align = ('center', 'middle') - self.styles.border = ('solid', 'green') - self.styles.height = '100%' - self.styles.width = '100%' + #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.styles.border = ('solid', 'black') + # self.styles.animate('background', 'green', duration=0.1) + self.add_class('field_selected') else: - self.styles.animate('background', '#1c1c1c', duration=0.1) - self.styles.border = ('solid', 'green') + 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)) diff --git a/bingo.py b/bingo.py index c4c8e98..e197259 100644 --- a/bingo.py +++ b/bingo.py @@ -18,6 +18,10 @@ class BingoApp(App): yield Header() yield BingoDisplay() + def on_mount(self) -> None: + self.title = 'CCC Bingo' + self.sub_title = 'GPN22 Edition' + def action_toggle_dark(self) -> None: '''An action to toggle dark mode.''' self.dark = not self.dark diff --git a/bingo.tcss b/bingo.tcss index 5161d28..4ab573e 100644 --- a/bingo.tcss +++ b/bingo.tcss @@ -4,6 +4,19 @@ BingoBoard { height: 100%; } +BingoField { + content-align: center middle; + text-align: center; + height: 100%; + width: 100%; + background: $panel; + border: thick $background; +} + +BingoField.field_selected { + background: $success; +} + BingoDisplay { layout: vertical; height: 100%; @@ -17,18 +30,12 @@ BingoDisplay { .seed_input { width: 70%; border-title-align: left; + background: $background; } .roll_btn { width: 30%; } -.box { - height: 100%; - border: solid green; - text-align: center; - content-align: center middle; -} - Input.-valid { border: tall $success 60%; }