Rebuild flashcard study screen from mockup, with real backend-backed stats

Study screen now matches the provided mockup's layout: a "Current
Deck" panel with a circular mastery-progress ring, and a "Spaced
Repetition" panel (New/Due/Learning/Review counts, streak, daily
goal) on either side of the card. Kept the app's real global sidebar
rather than the mockup's own nav, per direction.

Mastery/Streak/Daily Goal weren't tracked anywhere, so this adds real
backend support rather than showing fabricated numbers:
- Mastered = graduated to review state AND FSRS stability >= 21 days
  (FlashcardScheduleStore.MasteryStabilityDaysThreshold), stricter
  than the plain Review-state count
- CurrentStreakDays = consecutive UTC days with a review, computed
  from review-log timestamps in the new pure FlashcardScheduling
  .ComputeStreakDays (unit tested, habit-streak semantics: doesn't
  reset to 0 the instant a new day starts before today's first review)
- DailyGoal/ReviewsToday reuse the account's existing ReviewsPerDay
  setting rather than inventing a new one
Also removes the exit "X" button in favor of the same Escape/pause
menu the question-player flow uses (main.gd's shared app_menu, with
an "Exit Study Session" action), and adds a new circular_progress.gd
reusable ring control plus a real "Options" menu (bury/suspend the
current card) wired to schedule endpoints that had no UI before.
This commit is contained in:
hz
2026-07-21 23:20:14 -05:00
parent 72fb6e4776
commit 70aa425fde
10 changed files with 600 additions and 23 deletions
+50
View File
@@ -0,0 +1,50 @@
extends Control
const Brand := preload("res://scripts/ui/medmind_style.gd")
var ring_value := 0.0
var track_color := Color("26324a")
var fill_color := Color("2563eb")
var ring_width := 8.0
var value_label: Label
var caption_label: Label
func _init() -> void:
custom_minimum_size = Vector2(112, 112)
var center := CenterContainer.new()
center.set_anchors_and_offsets_preset(Control.PRESET_FULL_RECT)
center.mouse_filter = Control.MOUSE_FILTER_IGNORE
add_child(center)
var stack := VBoxContainer.new()
stack.add_theme_constant_override("separation", 0)
center.add_child(stack)
value_label = Label.new()
value_label.horizontal_alignment = HORIZONTAL_ALIGNMENT_CENTER
value_label.add_theme_font_size_override("font_size", 24)
stack.add_child(value_label)
caption_label = Label.new()
caption_label.horizontal_alignment = HORIZONTAL_ALIGNMENT_CENTER
caption_label.add_theme_font_size_override("font_size", 12)
stack.add_child(caption_label)
func configure(fill_fraction: float, value_text: String, caption_text: String, accent: Color, dark: bool) -> void:
ring_value = clampf(fill_fraction, 0.0, 1.0)
track_color = Color("26324a") if dark else Color("e2e8f0")
fill_color = accent
value_label.text = value_text
value_label.add_theme_color_override("font_color", Brand.text_color(dark))
caption_label.text = caption_text
caption_label.add_theme_color_override("font_color", Brand.muted_color(dark))
queue_redraw()
func _draw() -> void:
var radius := minf(size.x, size.y) / 2.0 - ring_width / 2.0
if radius <= 0.0:
return
var center := size / 2.0
draw_arc(center, radius, 0.0, TAU, 64, track_color, ring_width, true)
if ring_value > 0.0:
draw_arc(center, radius, -PI / 2.0, -PI / 2.0 + TAU * ring_value, 64, fill_color, ring_width, true)
+335 -18
View File
@@ -3,6 +3,9 @@ extends Control
const Brand := preload("res://scripts/ui/medmind_style.gd")
const Style := preload("res://scripts/ui/ui_style.gd")
const Cloze := preload("res://scripts/ui/flashcard_cloze.gd")
const CircularProgress := preload("res://scripts/ui/circular_progress.gd")
const MASTERY_STABILITY_LABEL := "Cards graduate to \"mastered\" once they've held up in review for a few weeks straight."
var main
@@ -22,8 +25,8 @@ var due_remaining := 0
var new_remaining := 0
var progress_label: Label
var exit_button: Button
var paused_banner: Label
var main_row: HBoxContainer
var card_panel: PanelContainer
var front_label: Label
var divider: ColorRect
@@ -35,9 +38,30 @@ var reveal_button: Button
var grade_row: HBoxContainer
var grade_buttons: Dictionary = {}
var undo_button: Button
var options_button: Button
var options_menu: PanelContainer
var options_backdrop: Control
var empty_label: Label
var compact_layout := false
var deck_panel: PanelContainer
var deck_name_label: Label
var deck_ring: Control
var deck_mastered_label: Label
var change_deck_button: Button
var stats_panel: PanelContainer
var stats_new_ring: Control
var stats_due_label: Label
var stats_learning_label: Label
var stats_review_label: Label
var streak_label: Label
var daily_goal_label: Label
var daily_goal_bar: ProgressBar
var decks: Array = []
var latest_counts: Dictionary = {}
func _ready() -> void:
set_anchors_and_offsets_preset(Control.PRESET_FULL_RECT)
@@ -50,6 +74,8 @@ func _ready() -> void:
FlashcardService.review_synced.connect(_on_review_synced)
FlashcardService.review_paused.connect(_on_review_paused)
FlashcardService.review_resumed.connect(_on_review_resumed)
FlashcardService.decks_changed.connect(_on_decks_changed)
FlashcardService.counts_changed.connect(_on_counts_changed)
UIThemeService.theme_changed.connect(func(_dark: bool): refresh_theme_controls())
@@ -63,8 +89,11 @@ func on_show(payload: Variant = null) -> void:
last_client_review_id = ""
last_card_id = ""
undo_button.visible = false
_close_options_menu()
_render_loading()
_load_next()
FlashcardService.fetch_decks()
FlashcardService.fetch_counts()
func on_hide() -> void:
@@ -79,20 +108,11 @@ func _build() -> void:
var top_row := HBoxContainer.new()
root.add_child(top_row)
exit_button = Button.new()
exit_button.icon = preload("res://assets/icons/lucide/x.svg")
exit_button.tooltip_text = "Exit study session"
exit_button.custom_minimum_size = Vector2(44, 44)
exit_button.pressed.connect(func(): main.show_screen("flashcards_hub"))
top_row.add_child(exit_button)
progress_label = Label.new()
progress_label.size_flags_horizontal = Control.SIZE_EXPAND_FILL
progress_label.horizontal_alignment = HORIZONTAL_ALIGNMENT_CENTER
progress_label.add_theme_font_size_override("font_size", 15)
top_row.add_child(progress_label)
var spacer := Control.new()
spacer.custom_minimum_size = Vector2(44, 44)
top_row.add_child(spacer)
paused_banner = Label.new()
paused_banner.horizontal_alignment = HORIZONTAL_ALIGNMENT_CENTER
@@ -100,10 +120,24 @@ func _build() -> void:
paused_banner.visible = false
root.add_child(paused_banner)
main_row = HBoxContainer.new()
main_row.size_flags_vertical = Control.SIZE_EXPAND_FILL
main_row.size_flags_horizontal = Control.SIZE_EXPAND_FILL
main_row.add_theme_constant_override("separation", 20)
root.add_child(main_row)
_build_deck_panel()
var center_column := VBoxContainer.new()
center_column.size_flags_horizontal = Control.SIZE_EXPAND_FILL
center_column.size_flags_vertical = Control.SIZE_EXPAND_FILL
center_column.add_theme_constant_override("separation", 16)
main_row.add_child(center_column)
var center := CenterContainer.new()
center.size_flags_vertical = Control.SIZE_EXPAND_FILL
center.size_flags_horizontal = Control.SIZE_EXPAND_FILL
root.add_child(center)
center_column.add_child(center)
card_panel = PanelContainer.new()
card_panel.custom_minimum_size = Vector2(720, 420)
@@ -159,12 +193,12 @@ func _build() -> void:
reveal_button.custom_minimum_size = Vector2(0, 52)
_style_gradient_button(reveal_button)
reveal_button.pressed.connect(_reveal)
root.add_child(reveal_button)
center_column.add_child(reveal_button)
grade_row = HBoxContainer.new()
grade_row.add_theme_constant_override("separation", 10)
grade_row.visible = false
root.add_child(grade_row)
center_column.add_child(grade_row)
for spec in [["again", "Again", "1", Style.RED], ["hard", "Hard", "2", Style.AMBER], ["good", "Good", "3", Style.CYAN], ["easy", "Easy", "4", Style.LIME]]:
var button := Button.new()
button.custom_minimum_size = Vector2(0, 64)
@@ -174,12 +208,21 @@ func _build() -> void:
grade_row.add_child(button)
grade_buttons[spec[0]] = button
var footer_row := HBoxContainer.new()
footer_row.add_theme_constant_override("separation", 10)
center_column.add_child(footer_row)
undo_button = Button.new()
undo_button.text = "Undo last review"
undo_button.custom_minimum_size = Vector2(0, 36)
undo_button.visible = false
undo_button.pressed.connect(_undo)
root.add_child(undo_button)
footer_row.add_child(undo_button)
var footer_spacer := Control.new()
footer_spacer.size_flags_horizontal = Control.SIZE_EXPAND_FILL
footer_row.add_child(footer_spacer)
_build_options_menu(footer_row)
_build_stats_panel()
refresh_theme_controls()
@@ -211,6 +254,211 @@ func _style_ghost_button(button: Button, dark: bool) -> void:
button.add_theme_color_override("font_hover_color", Brand.text_color(dark))
func _side_panel_box(dark: bool) -> StyleBoxFlat:
var box := StyleBoxFlat.new()
box.bg_color = Color("081426") if dark else Color.WHITE
box.border_color = Color("26344f") if dark else Brand.LIGHT_BORDER
box.set_border_width_all(1)
box.set_corner_radius_all(10)
box.content_margin_left = 18
box.content_margin_right = 18
box.content_margin_top = 18
box.content_margin_bottom = 18
return box
func _panel_caption(text: String) -> Label:
var label := Label.new()
label.text = text
label.add_theme_font_size_override("font_size", 12)
return label
# ---------- Left panel: current deck ----------
func _build_deck_panel() -> void:
deck_panel = PanelContainer.new()
deck_panel.custom_minimum_size = Vector2(220, 0)
main_row.add_child(deck_panel)
var content := VBoxContainer.new()
content.add_theme_constant_override("separation", 10)
deck_panel.add_child(content)
content.add_child(_panel_caption("CURRENT DECK"))
deck_name_label = Label.new()
deck_name_label.text = "All decks"
deck_name_label.add_theme_font_size_override("font_size", 18)
deck_name_label.autowrap_mode = TextServer.AUTOWRAP_WORD_SMART
content.add_child(deck_name_label)
var ring_center := CenterContainer.new()
content.add_child(ring_center)
deck_ring = CircularProgress.new()
deck_ring.tooltip_text = MASTERY_STABILITY_LABEL
ring_center.add_child(deck_ring)
deck_mastered_label = Label.new()
deck_mastered_label.text = "-- cards mastered"
deck_mastered_label.add_theme_font_size_override("font_size", 12)
deck_mastered_label.autowrap_mode = TextServer.AUTOWRAP_WORD_SMART
content.add_child(deck_mastered_label)
change_deck_button = Button.new()
change_deck_button.text = "Change Deck"
change_deck_button.custom_minimum_size = Vector2(0, 44)
change_deck_button.pressed.connect(func(): main.show_screen("flashcards_hub"))
content.add_child(change_deck_button)
# ---------- Right panel: spaced repetition stats ----------
func _build_stats_panel() -> void:
stats_panel = PanelContainer.new()
stats_panel.custom_minimum_size = Vector2(220, 0)
main_row.add_child(stats_panel)
var content := VBoxContainer.new()
content.add_theme_constant_override("separation", 10)
stats_panel.add_child(content)
content.add_child(_panel_caption("SPACED REPETITION"))
var ring_center := CenterContainer.new()
content.add_child(ring_center)
stats_new_ring = CircularProgress.new()
ring_center.add_child(stats_new_ring)
stats_due_label = _stat_row(content, "Due")
stats_learning_label = _stat_row(content, "Learning")
stats_review_label = _stat_row(content, "Review")
var streak_row := HBoxContainer.new()
streak_row.add_theme_constant_override("separation", 10)
content.add_child(streak_row)
var streak_caption := VBoxContainer.new()
streak_caption.add_theme_constant_override("separation", 0)
streak_row.add_child(streak_caption)
streak_caption.add_child(_panel_caption("STREAK"))
streak_label = Label.new()
streak_label.text = "-- days"
streak_label.add_theme_font_size_override("font_size", 16)
streak_caption.add_child(streak_label)
var goal_block := VBoxContainer.new()
goal_block.add_theme_constant_override("separation", 4)
content.add_child(goal_block)
goal_block.add_child(_panel_caption("DAILY GOAL"))
daily_goal_label = Label.new()
daily_goal_label.text = "-- / --"
daily_goal_label.add_theme_font_size_override("font_size", 16)
goal_block.add_child(daily_goal_label)
daily_goal_bar = ProgressBar.new()
daily_goal_bar.custom_minimum_size = Vector2(0, 8)
daily_goal_bar.show_percentage = false
daily_goal_bar.min_value = 0
daily_goal_bar.max_value = 1
goal_block.add_child(daily_goal_bar)
func _stat_row(parent: VBoxContainer, caption: String) -> Label:
var row := HBoxContainer.new()
parent.add_child(row)
var caption_label := Label.new()
caption_label.text = caption
caption_label.size_flags_horizontal = Control.SIZE_EXPAND_FILL
row.add_child(caption_label)
var value := Label.new()
value.text = "--"
value.add_theme_font_size_override("font_size", 15)
row.add_child(value)
return value
# ---------- Options menu (suspend / bury current card) ----------
func _build_options_menu(footer_row: HBoxContainer) -> void:
options_backdrop = Control.new()
options_backdrop.visible = false
options_backdrop.top_level = true
options_backdrop.mouse_filter = Control.MOUSE_FILTER_STOP
options_backdrop.set_anchors_and_offsets_preset(Control.PRESET_FULL_RECT)
options_backdrop.gui_input.connect(func(event: InputEvent):
if event is InputEventMouseButton and event.pressed:
_close_options_menu())
add_child(options_backdrop)
options_button = Button.new()
options_button.text = "Options"
options_button.custom_minimum_size = Vector2(0, 36)
options_button.pressed.connect(_toggle_options_menu)
footer_row.add_child(options_button)
options_menu = PanelContainer.new()
options_menu.visible = false
options_menu.top_level = true
add_child(options_menu)
var list := VBoxContainer.new()
list.add_theme_constant_override("separation", 2)
options_menu.add_child(list)
for item in [
["Bury card until tomorrow", func(): _bury_current_card()],
["Suspend card", func(): _suspend_current_card()],
]:
var button := Button.new()
button.text = str(item[0])
button.custom_minimum_size = Vector2(200, 40)
button.alignment = HORIZONTAL_ALIGNMENT_LEFT
var action: Callable = item[1]
button.pressed.connect(func():
_close_options_menu()
action.call())
list.add_child(button)
func _toggle_options_menu() -> void:
if options_menu.visible:
_close_options_menu()
return
if current_card.is_empty():
return
options_menu.visible = true
options_backdrop.visible = true
options_menu.position = options_button.get_global_position() - Vector2(0, options_menu.size.y + 4)
func _close_options_menu() -> void:
if options_menu != null:
options_menu.visible = false
if options_backdrop != null:
options_backdrop.visible = false
func _bury_current_card() -> void:
if current_card.is_empty():
return
var card_id := str(current_card.get("id", ""))
FlashcardService.bury_cards([card_id], _bury_until_tomorrow_utc())
if not seen_card_ids.has(card_id):
seen_card_ids.append(card_id)
_load_next()
_render_loading()
func _suspend_current_card() -> void:
if current_card.is_empty():
return
var card_id := str(current_card.get("id", ""))
FlashcardService.suspend_cards([card_id], true)
if not seen_card_ids.has(card_id):
seen_card_ids.append(card_id)
_load_next()
_render_loading()
func _bury_until_tomorrow_utc() -> String:
var study_day_unix := Time.get_unix_time_from_datetime_string(study_day_start_utc.trim_suffix("Z"))
return "%sZ" % Time.get_datetime_string_from_unix_time(study_day_unix + 86400, false)
func refresh_theme_controls() -> void:
if card_panel == null:
return
@@ -222,15 +470,82 @@ func refresh_theme_controls() -> void:
extra_caption.add_theme_color_override("font_color", Brand.muted_color(dark))
extra_label.add_theme_color_override("font_color", Brand.muted_color(dark))
_style_ghost_button(undo_button, dark)
deck_panel.add_theme_stylebox_override("panel", _side_panel_box(dark))
stats_panel.add_theme_stylebox_override("panel", _side_panel_box(dark))
options_menu.add_theme_stylebox_override("panel", Brand.panel_box(dark))
_refresh_deck_panel()
_refresh_stats_panel()
func _update_responsive_layout() -> void:
if card_panel == null:
return
compact_layout = size.x < 720.0
var available := maxf(size.x - 48.0, 240.0)
compact_layout = size.x < 1080.0
deck_panel.visible = not compact_layout
stats_panel.visible = not compact_layout
var available := maxf((size.x - 48.0) if compact_layout else (size.x - 520.0), 240.0)
card_panel.custom_minimum_size.x = minf(720.0, available)
card_panel.custom_minimum_size.y = 340.0 if compact_layout else 420.0
card_panel.custom_minimum_size.y = 340.0 if size.x < 720.0 else 420.0
# ---------- Deck / stats data ----------
func _on_decks_changed(loaded_decks: Array) -> void:
decks = loaded_decks
_refresh_deck_panel()
func _refresh_deck_panel() -> void:
if deck_ring == null:
return
var dark := UIThemeService.is_dark_mode()
var name := "All decks"
var total := 0
var mastered := 0
if deck_id.is_empty():
for summary in decks:
total += int(summary.get("total", 0))
mastered += int(summary.get("mastered", 0))
else:
for summary in decks:
var deck: Dictionary = summary.get("deck", {})
if str(deck.get("id", "")) == deck_id:
name = str(deck.get("name", "Deck"))
total = int(summary.get("total", 0))
mastered = int(summary.get("mastered", 0))
break
deck_name_label.text = name
var fraction := float(mastered) / float(total) if total > 0 else 0.0
deck_ring.configure(fraction, "%d%%" % roundi(fraction * 100.0), "Mastery", Brand.ROYAL_BLUE, dark)
deck_mastered_label.text = "%d / %d cards mastered" % [mastered, total]
func _on_counts_changed(counts: Dictionary) -> void:
latest_counts = counts
_refresh_stats_panel()
func _refresh_stats_panel() -> void:
if stats_new_ring == null or latest_counts.is_empty():
return
var dark := UIThemeService.is_dark_mode()
var due := int(latest_counts.get("due", 0))
var new_available := int(latest_counts.get("newAvailable", 0))
var learning := int(latest_counts.get("learning", 0))
var review := int(latest_counts.get("review", 0))
var streak := int(latest_counts.get("currentStreakDays", 0))
var reviews_today := int(latest_counts.get("reviewsToday", 0))
var daily_goal := int(latest_counts.get("dailyGoal", 0))
var new_fraction := float(new_available) / float(new_available + due) if (new_available + due) > 0 else 0.0
stats_new_ring.configure(new_fraction, str(new_available), "New", Brand.ROYAL_BLUE, dark)
stats_due_label.text = str(due)
stats_learning_label.text = str(learning)
stats_review_label.text = str(review)
streak_label.text = "%d day%s" % [streak, "" if streak == 1 else "s"]
daily_goal_label.text = "%d / %d" % [reviews_today, daily_goal]
daily_goal_bar.max_value = maxf(1.0, float(daily_goal))
daily_goal_bar.value = float(reviews_today)
func _load_next() -> void:
@@ -350,6 +665,7 @@ func _grade(rating: String) -> void:
seen_card_ids.append(card_id)
_load_next()
_render_loading()
FlashcardService.fetch_counts()
func _on_review_synced(_card_id: String, _updated_card: Dictionary) -> void:
@@ -364,7 +680,8 @@ func _undo() -> void:
last_client_review_id = ""
undo_button.visible = false
seen_card_ids.erase(last_card_id)
_load_next())
_load_next()
FlashcardService.fetch_counts())
func _on_review_paused(message: String) -> void:
+10 -3
View File
@@ -717,7 +717,7 @@ func _input(event: InputEvent) -> void:
_close_account_menu()
get_viewport().set_input_as_handled()
return
if current_screen_name in ["player", "ccs_player"]:
if current_screen_name in ["player", "ccs_player", "flashcards_study"]:
_toggle_app_menu()
get_viewport().set_input_as_handled()
@@ -895,9 +895,13 @@ func _toggle_app_menu() -> void:
app_menu.visible = true
app_menu.size = app_menu.custom_minimum_size
app_menu.position = (get_viewport_rect().size - app_menu.size) * 0.5
menu_exit_button.visible = (current_screen_name == "player" and BlockSessionService.block_started) or current_screen_name == "ccs_player"
menu_exit_button.visible = (current_screen_name == "player" and BlockSessionService.block_started) or current_screen_name in ["ccs_player", "flashcards_study"]
if menu_exit_button.visible:
menu_exit_button.text = "Leave Case" if current_screen_name == "ccs_player" else "Leave (timer continues)" if BlockSessionService.session_kind == "simulation" else "Exit Run"
menu_exit_button.text = (
"Leave Case" if current_screen_name == "ccs_player"
else "Exit Study Session" if current_screen_name == "flashcards_study"
else "Leave (timer continues)" if BlockSessionService.session_kind == "simulation"
else "Exit Run")
Style.style_chip(menu_exit_button, Style.AMBER)
if current_screen_name == "player": BlockSessionService.pause_current_question_timer()
@@ -914,6 +918,9 @@ func _exit_run() -> void:
var ccs_player = screens.get("ccs_player")
if ccs_player != null and ccs_player.has_method("leave_case"): ccs_player.leave_case()
return
if current_screen_name == "flashcards_study":
show_screen("flashcards_hub")
return
var was_core_run := BlockSessionService.session_kind == "core"
var was_review_run := BlockSessionService.session_kind == "review"
if BlockSessionService.block_started and BlockSessionService.session_kind != "simulation":