From 60e293dc2d714ad962663aba01a1123830e1372a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Br=C3=BCbach=2C=20Lukas?= Date: Sat, 6 Dec 2025 20:50:16 +0100 Subject: [PATCH] [App] First-run tutorial Took 3 seconds Took 10 minutes Took 1 minute Took 4 minutes Took 23 minutes --- cockatrice/CMakeLists.txt | 3 + .../interface/widgets/general/home_widget.cpp | 51 ++- .../interface/widgets/general/home_widget.h | 12 +- .../tutorial/tutorial_bubble_widget.cpp | 107 +++++ .../general/tutorial/tutorial_bubble_widget.h | 33 ++ .../general/tutorial/tutorial_controller.cpp | 368 +++++++++++++++++ .../general/tutorial/tutorial_controller.h | 97 +++++ .../general/tutorial/tutorial_overlay.cpp | 372 ++++++++++++++++++ .../general/tutorial/tutorial_overlay.h | 65 +++ .../tab_deck_editor_visual.cpp | 39 ++ .../tab_deck_editor_visual.h | 6 + ...l_database_display_filter_toolbar_widget.h | 5 + .../visual_database_display_widget.cpp | 89 ++++- .../visual_database_display_widget.h | 3 + .../visual_deck_display_options_widget.cpp | 57 +++ .../visual_deck_display_options_widget.h | 2 + .../visual_deck_editor_widget.cpp | 81 ++++ .../visual_deck_editor_widget.h | 2 + 18 files changed, 1380 insertions(+), 12 deletions(-) create mode 100644 cockatrice/src/interface/widgets/general/tutorial/tutorial_bubble_widget.cpp create mode 100644 cockatrice/src/interface/widgets/general/tutorial/tutorial_bubble_widget.h create mode 100644 cockatrice/src/interface/widgets/general/tutorial/tutorial_controller.cpp create mode 100644 cockatrice/src/interface/widgets/general/tutorial/tutorial_controller.h create mode 100644 cockatrice/src/interface/widgets/general/tutorial/tutorial_overlay.cpp create mode 100644 cockatrice/src/interface/widgets/general/tutorial/tutorial_overlay.h diff --git a/cockatrice/CMakeLists.txt b/cockatrice/CMakeLists.txt index d675b809d..1855e1bc0 100644 --- a/cockatrice/CMakeLists.txt +++ b/cockatrice/CMakeLists.txt @@ -199,6 +199,9 @@ set(cockatrice_SOURCES src/interface/widgets/general/layout_containers/flow_widget.cpp src/interface/widgets/general/layout_containers/overlap_control_widget.cpp src/interface/widgets/general/layout_containers/overlap_widget.cpp + src/interface/widgets/general/tutorial/tutorial_bubble_widget.cpp + src/interface/widgets/general/tutorial/tutorial_controller.cpp + src/interface/widgets/general/tutorial/tutorial_overlay.cpp src/interface/widgets/menus/deck_editor_menu.cpp src/interface/widgets/printing_selector/all_zones_card_amount_widget.cpp src/interface/widgets/printing_selector/card_amount_widget.cpp diff --git a/cockatrice/src/interface/widgets/general/home_widget.cpp b/cockatrice/src/interface/widgets/general/home_widget.cpp index 269326257..d202a4e52 100644 --- a/cockatrice/src/interface/widgets/general/home_widget.cpp +++ b/cockatrice/src/interface/widgets/general/home_widget.cpp @@ -5,6 +5,7 @@ #include "../../window_main.h" #include "background_sources.h" #include "home_styled_button.h" +#include "tutorial/tutorial_controller.h" #include #include @@ -13,6 +14,7 @@ #include #include #include +#include HomeWidget::HomeWidget(QWidget *parent, TabSupervisor *_tabSupervisor) : QWidget(parent), tabSupervisor(_tabSupervisor), background("theme:backgrounds/home"), overlay("theme:cockatrice") @@ -44,10 +46,45 @@ HomeWidget::HomeWidget(QWidget *parent, TabSupervisor *_tabSupervisor) &HomeWidget::initializeBackgroundFromSource); connect(&SettingsCache::instance(), &SettingsCache::homeTabBackgroundShuffleFrequencyChanged, this, &HomeWidget::onBackgroundShuffleFrequencyChanged); + + auto mainWindow = QtUtils::findParentOfType(this); + + if (mainWindow) { + tutorialController = new TutorialController(mainWindow); + } else { + tutorialController = new TutorialController(this); + } + auto sequence = TutorialSequence(); + sequence.addStep({connectButton, "Connect to a server to play here!"}); + auto vdeStep = TutorialStep(visualDeckEditorButton, "Create a new deck from cards in the database here!"); + vdeStep.requiresInteraction = true; + vdeStep.allowClickThrough = true; + vdeStep.validationHint = "Open the deck editor to try it out!"; + sequence.addStep(vdeStep); + sequence.addStep({visualDeckStorageButton, "Browse the decks in your local collection."}); + sequence.addStep({visualDatabaseDisplayButton, "View the card database here."}); + sequence.addStep( + {edhrecButton, "Browse EDHRec, an external service designed to provide card recommendations for decks."}); + sequence.addStep({archidektButton, "Browse Archidekt, an external service that allows users to store " + "decklists and import them to your local collection."}); + sequence.addStep({replaybutton, "View replays of your past games here."}); + sequence.addStep({exitButton, "Exit the application."}); + tutorialController->addSequence(sequence); + // Lambda is cleaner to read than overloading this connect(&SettingsCache::instance(), &SettingsCache::homeTabDisplayCardNameChanged, this, [this] { repaint(); }); } +void HomeWidget::showEvent(QShowEvent *event) +{ + QWidget::showEvent(event); + if (!tutorialStarted) { + tutorialStarted = true; + // Start on next event loop iteration so everything is fully painted + QTimer::singleShot(3, tutorialController, [this] { tutorialController->start(); }); + } +} + void HomeWidget::initializeBackgroundFromSource() { if (CardDatabaseManager::getInstance()->getLoadStatus() != LoadStatus::Ok) { @@ -185,29 +222,29 @@ QGroupBox *HomeWidget::createButtons() connectButton = new HomeStyledButton("Connect/Play", gradientColors); boxLayout->addWidget(connectButton); - auto visualDeckEditorButton = new HomeStyledButton(tr("Create New Deck"), gradientColors); + visualDeckEditorButton = new HomeStyledButton(tr("Create New Deck"), gradientColors); connect(visualDeckEditorButton, &QPushButton::clicked, tabSupervisor, [this] { tabSupervisor->openDeckInNewTab(LoadedDeck()); }); boxLayout->addWidget(visualDeckEditorButton); - auto visualDeckStorageButton = new HomeStyledButton(tr("Browse Decks"), gradientColors); + visualDeckStorageButton = new HomeStyledButton(tr("Browse Decks"), gradientColors); connect(visualDeckStorageButton, &QPushButton::clicked, tabSupervisor, [this] { tabSupervisor->actTabVisualDeckStorage(true); }); boxLayout->addWidget(visualDeckStorageButton); - auto visualDatabaseDisplayButton = new HomeStyledButton(tr("Browse Card Database"), gradientColors); + visualDatabaseDisplayButton = new HomeStyledButton(tr("Browse Card Database"), gradientColors); connect(visualDatabaseDisplayButton, &QPushButton::clicked, tabSupervisor, &TabSupervisor::addVisualDatabaseDisplayTab); boxLayout->addWidget(visualDatabaseDisplayButton); - auto edhrecButton = new HomeStyledButton(tr("Browse EDHRec"), gradientColors); + edhrecButton = new HomeStyledButton(tr("Browse EDHRec"), gradientColors); connect(edhrecButton, &QPushButton::clicked, tabSupervisor, &TabSupervisor::addEdhrecMainTab); boxLayout->addWidget(edhrecButton); - auto archidektButton = new HomeStyledButton(tr("Browse Archidekt"), gradientColors); + archidektButton = new HomeStyledButton(tr("Browse Archidekt"), gradientColors); connect(archidektButton, &QPushButton::clicked, tabSupervisor, &TabSupervisor::addArchidektTab); boxLayout->addWidget(archidektButton); - auto replaybutton = new HomeStyledButton(tr("View Replays"), gradientColors); + replaybutton = new HomeStyledButton(tr("View Replays"), gradientColors); connect(replaybutton, &QPushButton::clicked, tabSupervisor, [this] { tabSupervisor->actTabReplays(true); }); boxLayout->addWidget(replaybutton); if (qobject_cast(tabSupervisor->parentWidget())) { - auto exitButton = new HomeStyledButton(tr("Quit"), gradientColors); + exitButton = new HomeStyledButton(tr("Quit"), gradientColors); connect(exitButton, &QPushButton::clicked, qobject_cast(tabSupervisor->parentWidget()), &MainWindow::actExit); boxLayout->addWidget(exitButton); diff --git a/cockatrice/src/interface/widgets/general/home_widget.h b/cockatrice/src/interface/widgets/general/home_widget.h index 233fda543..6db827902 100644 --- a/cockatrice/src/interface/widgets/general/home_widget.h +++ b/cockatrice/src/interface/widgets/general/home_widget.h @@ -24,9 +24,18 @@ public: HomeWidget(QWidget *parent, TabSupervisor *tabSupervisor); void updateRandomCard(); QPair extractDominantColors(const QPixmap &pixmap); + HomeStyledButton *connectButton; + HomeStyledButton *visualDeckEditorButton; + HomeStyledButton *visualDeckStorageButton; + HomeStyledButton *visualDatabaseDisplayButton; + HomeStyledButton *edhrecButton; + HomeStyledButton *archidektButton; + HomeStyledButton *replaybutton; + HomeStyledButton *exitButton; public slots: void paintEvent(QPaintEvent *event) override; + void showEvent(QShowEvent *event) override; void initializeBackgroundFromSource(); void onBackgroundShuffleFrequencyChanged(); void updateBackgroundProperties(); @@ -39,11 +48,12 @@ private: QTimer *cardChangeTimer; TabSupervisor *tabSupervisor; QPixmap background; + TutorialController *tutorialController; + bool tutorialStarted = false; CardInfoPictureArtCropWidget *backgroundSourceCard = nullptr; DeckList backgroundSourceDeck; QPixmap overlay; QPair gradientColors; - HomeStyledButton *connectButton; void loadBackgroundSourceDeck(); }; diff --git a/cockatrice/src/interface/widgets/general/tutorial/tutorial_bubble_widget.cpp b/cockatrice/src/interface/widgets/general/tutorial/tutorial_bubble_widget.cpp new file mode 100644 index 000000000..288b5cb24 --- /dev/null +++ b/cockatrice/src/interface/widgets/general/tutorial/tutorial_bubble_widget.cpp @@ -0,0 +1,107 @@ +#include "tutorial_bubble_widget.h" + +BubbleWidget::BubbleWidget(QWidget *parent) : QFrame(parent) +{ + setFrameStyle(QFrame::StyledPanel | QFrame::Raised); + setStyleSheet("QFrame { background:white; border-radius:8px; }" + "QLabel { color:black; }"); + + layout = new QGridLayout(this); + layout->setContentsMargins(12, 10, 12, 10); + layout->setHorizontalSpacing(8); + layout->setVerticalSpacing(8); + + // Step counter (e.g., "Step 2 of 5") + counterLabel = new QLabel(this); + counterLabel->setSizePolicy(QSizePolicy::Minimum, QSizePolicy::Minimum); + counterLabel->setStyleSheet("color: #555; font-size: 11px;"); + + // Overall progress (e.g., "12 of 45 total") + progressLabel = new QLabel(this); + progressLabel->setSizePolicy(QSizePolicy::Minimum, QSizePolicy::Minimum); + progressLabel->setStyleSheet("color: #888; font-size: 10px;"); + progressLabel->setAlignment(Qt::AlignRight); + + // Main tutorial text + textLabel = new QLabel(this); + textLabel->setWordWrap(true); + textLabel->setTextInteractionFlags(Qt::TextSelectableByMouse); + textLabel->setSizePolicy(QSizePolicy::Preferred, QSizePolicy::Preferred); + textLabel->setStyleSheet("color:black;"); + + // Interaction hint (e.g., "Click the highlighted area") + interactionLabel = new QLabel(this); + interactionLabel->setWordWrap(true); + interactionLabel->setStyleSheet("color: #0066cc; font-style: italic; font-size: 11px;"); + interactionLabel->hide(); + + // Validation hint (error message) + validationLabel = new QLabel(this); + validationLabel->setWordWrap(true); + validationLabel->setStyleSheet("color: #cc3300; background: #ffe6e6; padding: 6px; " + "border-radius: 4px; font-size: 11px;"); + validationLabel->hide(); + + // Layout + layout->addWidget(counterLabel, 0, 0, Qt::AlignLeft | Qt::AlignVCenter); + layout->addWidget(progressLabel, 0, 1, Qt::AlignRight | Qt::AlignVCenter); + layout->addWidget(textLabel, 1, 0, 1, 2); + layout->addWidget(interactionLabel, 2, 0, 1, 2); + layout->addWidget(validationLabel, 3, 0, 1, 2); + + layout->setColumnStretch(1, 1); + + setMaximumWidth(420); + + // Timer for auto-hiding validation hints + validationTimer = new QTimer(this); + validationTimer->setSingleShot(true); + connect(validationTimer, &QTimer::timeout, this, &BubbleWidget::clearValidationHint); +} + +void BubbleWidget::setText(const QString &text) +{ + textLabel->setText(text); + update(); +} + +void BubbleWidget::setProgress(int stepNum, int totalSteps, int overallStep, int overallTotal) +{ + // Per-sequence progress + counterLabel->setText(QString("Step %1 of %2").arg(stepNum).arg(totalSteps)); + + // Overall progress across all sequences + progressLabel->setText(QString("(%1 of %2 total)").arg(overallStep).arg(overallTotal)); + progressLabel->show(); +} + +void BubbleWidget::setInteractionHint(const QString &hint) +{ + if (hint.isEmpty()) { + interactionLabel->hide(); + } else { + interactionLabel->setText(hint); + interactionLabel->show(); + } + adjustSize(); +} + +void BubbleWidget::setValidationHint(const QString &hint) +{ + if (hint.isEmpty()) { + clearValidationHint(); + } else { + validationLabel->setText("⚠️ " + hint); + validationLabel->show(); + adjustSize(); + + // Auto-hide after 4 seconds + validationTimer->start(4000); + } +} + +void BubbleWidget::clearValidationHint() +{ + validationLabel->hide(); + adjustSize(); +} \ No newline at end of file diff --git a/cockatrice/src/interface/widgets/general/tutorial/tutorial_bubble_widget.h b/cockatrice/src/interface/widgets/general/tutorial/tutorial_bubble_widget.h new file mode 100644 index 000000000..fea72413e --- /dev/null +++ b/cockatrice/src/interface/widgets/general/tutorial/tutorial_bubble_widget.h @@ -0,0 +1,33 @@ +#ifndef COCKATRICE_TUTORIAL_BUBBLE_WIDGET_H +#define COCKATRICE_TUTORIAL_BUBBLE_WIDGET_H +#include +#include +#include +#include +#include + +class BubbleWidget : public QFrame +{ + Q_OBJECT + +public: + explicit BubbleWidget(QWidget *parent = nullptr); + + void setText(const QString &text); + void setProgress(int stepNum, int totalSteps, int overallStep, int overallTotal); + void setInteractionHint(const QString &hint); + void setValidationHint(const QString &hint); + +private: + void clearValidationHint(); + + QLabel *counterLabel; + QLabel *textLabel; + QLabel *interactionLabel; // Shows "Click to continue" + QLabel *validationLabel; // Shows validation errors + QLabel *progressLabel; // Shows overall progress + QGridLayout *layout; + QTimer *validationTimer; // Auto-hide validation hint +}; + +#endif // COCKATRICE_TUTORIAL_BUBBLE_WIDGET_H diff --git a/cockatrice/src/interface/widgets/general/tutorial/tutorial_controller.cpp b/cockatrice/src/interface/widgets/general/tutorial/tutorial_controller.cpp new file mode 100644 index 000000000..c927816ce --- /dev/null +++ b/cockatrice/src/interface/widgets/general/tutorial/tutorial_controller.cpp @@ -0,0 +1,368 @@ +#include "tutorial_controller.h" + +#include +#include +#include +#include +#include +#include + +TutorialController::TutorialController(QWidget *_tutorializedWidget) + : QObject(_tutorializedWidget), tutorializedWidget(_tutorializedWidget) +{ + tutorialOverlay = new TutorialOverlay(tutorializedWidget->window()); + + tutorialOverlay->setWindowFlags(tutorialOverlay->windowFlags() | Qt::FramelessWindowHint); + tutorialOverlay->hide(); + + connect(tutorialOverlay, &TutorialOverlay::nextStep, this, &TutorialController::attemptAdvance); + connect(tutorialOverlay, &TutorialOverlay::prevStep, this, &TutorialController::prevStep); + connect(tutorialOverlay, &TutorialOverlay::nextSequence, this, &TutorialController::nextSequence); + connect(tutorialOverlay, &TutorialOverlay::prevSequence, this, &TutorialController::prevSequence); + connect(tutorialOverlay, &TutorialOverlay::skipTutorial, this, &TutorialController::exitTutorial); + connect(tutorialOverlay, &TutorialOverlay::targetClicked, this, &TutorialController::handleTargetClicked); +} + +void TutorialController::addSequence(const TutorialSequence &seq) +{ + sequences.append(seq); +} + +void TutorialController::start() +{ + if (sequences.isEmpty()) { + return; + } + + QTimer::singleShot(0, this, [this]() { + QWidget *win = tutorializedWidget->window(); + + // Reparent to make absolutely sure + tutorialOverlay->setParent(win); + tutorialOverlay->setGeometry(0, 0, win->width(), win->height()); + + // Stack order + tutorialOverlay->stackUnder(nullptr); + tutorialOverlay->show(); + tutorialOverlay->raise(); + + currentSequence = 0; + currentStep = 0; + showStep(); + }); +} + +void TutorialController::handleTargetClicked() +{ + if (currentSequence < 0 || currentStep < 0) { + return; + } + + const auto &step = sequences[currentSequence].steps[currentStep]; + + // If this step requires interaction AND uses OnAdvance validation, advance when clicked + // For OnSignal/OnChange, the click just triggers the action - validation happens via signal + if (step.requiresInteraction && step.validationTiming == ValidationTiming::OnAdvance) { + attemptAdvance(); + } +} + +void TutorialController::attemptAdvance() +{ + if (currentSequence < 0 || currentStep < 0) { + return; + } + + const auto &step = sequences[currentSequence].steps[currentStep]; + + // Only validate on advance if timing is set to OnAdvance + if (step.validationTiming == ValidationTiming::OnAdvance) { + if (!validateCurrentStep()) { + return; // Validation failed, stay on current step + } + } + + // Validation passed or not required, proceed to next step + nextStep(); +} + +bool TutorialController::validateCurrentStep() +{ + if (currentSequence < 0 || currentSequence >= sequences.size()) { + return true; // No validation needed + } + + const auto &step = sequences[currentSequence].steps[currentStep]; + + // If there's a validator function, check it + if (step.validator) { + bool valid = step.validator(); + if (!valid) { + // Show validation hint + tutorialOverlay->showValidationHint(step.validationHint); + return false; + } + } + + return true; +} + +void TutorialController::nextStep() +{ + currentStep++; + + if (currentSequence < 0) { + return; + } + + if (currentStep >= sequences[currentSequence].steps.size()) { + nextSequence(); + return; + } + + showStep(); +} + +void TutorialController::prevStep() +{ + if (currentSequence < 0) { + return; + } + + if (currentStep == 0) { + prevSequence(); + return; + } + + currentStep--; + showStep(); +} + +void TutorialController::nextSequence() +{ + if (currentSequence < 0) { + return; + } + + currentSequence++; + currentStep = 0; + + if (currentSequence >= sequences.size()) { + exitTutorial(); + return; + } + + showStep(); +} + +void TutorialController::prevSequence() +{ + if (currentSequence <= 0) { + currentStep = 0; + showStep(); + return; + } + + currentSequence--; + currentStep = 0; + showStep(); +} + +void TutorialController::exitTutorial() +{ + if (currentSequence >= 0 && currentStep >= 0 && currentSequence < sequences.size() && + currentStep < sequences[currentSequence].steps.size()) { + const auto &curStep = sequences[currentSequence].steps[currentStep]; + if (curStep.onExit) { + curStep.onExit(); + } + } + + cleanupValidationMonitoring(); + tutorialOverlay->hide(); + currentSequence = -1; + currentStep = -1; +} + +void TutorialController::updateProgress() +{ + if (currentSequence < 0 || currentSequence >= sequences.size()) { + return; + } + + const auto &seq = sequences[currentSequence]; + + // Calculate total steps across all sequences + int totalSteps = 0; + int currentOverallStep = 0; + + for (int i = 0; i < sequences.size(); ++i) { + int seqSteps = sequences[i].steps.size(); + totalSteps += seqSteps; + + if (i < currentSequence) { + currentOverallStep += seqSteps; + } + } + + currentOverallStep += currentStep + 1; // +1 because steps are 0-indexed + + // Update overlay with progress info + tutorialOverlay->setProgress(currentStep + 1, // Current step in sequence (1-indexed) + seq.steps.size(), // Total steps in sequence + currentOverallStep, // Overall step number + totalSteps, // Total steps in tutorial + seq.name); // Sequence title +} + +void TutorialController::showStep() +{ + if (currentSequence < 0 || currentSequence >= sequences.size()) { + return; + } + const auto &seq = sequences[currentSequence]; + if (currentStep < 0 || currentStep >= seq.steps.size()) { + return; + } + + // Clean up validation monitoring from previous step + cleanupValidationMonitoring(); + + // Run onExit for the previous step + if (!(currentSequence == 0 && currentStep == 0)) { + int prevSeq = currentSequence; + int prevStepIndex = currentStep - 1; + if (prevStepIndex < 0) { + prevSeq = currentSequence - 1; + if (prevSeq >= 0) { + prevStepIndex = sequences[prevSeq].steps.size() - 1; + } else { + prevStepIndex = -1; + } + } + + if (prevSeq >= 0 && prevStepIndex >= 0) { + const auto &previousStep = sequences[prevSeq].steps[prevStepIndex]; + if (previousStep.onExit) { + previousStep.onExit(); + } + } + } + + const auto &step = seq.steps[currentStep]; + + if (step.onEnter) { + step.onEnter(); + } + + tutorialOverlay->setTargetWidget(step.targetWidget); + tutorialOverlay->setText(step.text); + tutorialOverlay->setInteractive(step.requiresInteraction, step.allowClickThrough); + + // Set custom interaction hint if provided + if (!step.customInteractionHint.isEmpty()) { + tutorialOverlay->setInteractionHint(step.customInteractionHint); + } else if (step.requiresInteraction) { + tutorialOverlay->setInteractionHint("👆 Click the highlighted area to continue"); + } else { + tutorialOverlay->setInteractionHint(""); + } + + // Setup validation monitoring for this step + setupValidationMonitoring(); + + updateProgress(); + + tutorialOverlay->parentResized(); + tutorialOverlay->raise(); + tutorialOverlay->update(); +} + +void TutorialController::setupValidationMonitoring() +{ + if (currentSequence < 0 || currentSequence >= sequences.size()) { + return; + } + if (currentStep < 0 || currentStep >= sequences[currentSequence].steps.size()) { + return; + } + + const auto &step = sequences[currentSequence].steps[currentStep]; + + // Handle OnSignal validation - connect to any custom signal + if (step.validationTiming == ValidationTiming::OnSignal && step.validator) { + if (step.signalSource && step.signalName) { + qInfo() << "Setting up signal-based validation for signal:" << step.signalName; + validationConnection = connect(step.signalSource, step.signalName, this, SLOT(checkValidation())); + if (!validationConnection) { + qInfo() << "Warning: Failed to connect to signal" << step.signalName; + } + } else { + qInfo() << "Warning: OnSignal validation timing set but signalSource or signalName is null"; + } + return; + } + + // Handle OnChange validation - widget-specific + if (step.validationTiming == ValidationTiming::OnChange && step.validator) { + if (QLineEdit *lineEdit = qobject_cast(step.targetWidget)) { + qInfo() << "Setting up validation monitoring for QLineEdit"; + validationConnection = + connect(lineEdit, &QLineEdit::textChanged, this, &TutorialController::checkValidation); + } else if (QTextEdit *textEdit = qobject_cast(step.targetWidget)) { + qInfo() << "Setting up validation monitoring for QTextEdit"; + validationConnection = + connect(textEdit, &QTextEdit::textChanged, this, &TutorialController::checkValidation); + } else if (QPlainTextEdit *plainText = qobject_cast(step.targetWidget)) { + qInfo() << "Setting up validation monitoring for QPlainTextEdit"; + validationConnection = + connect(plainText, &QPlainTextEdit::textChanged, this, &TutorialController::checkValidation); + } else if (QComboBox *combo = qobject_cast(step.targetWidget)) { + qInfo() << "Setting up validation monitoring for QComboBox"; + validationConnection = connect(combo, QOverload::of(&QComboBox::currentIndexChanged), this, + &TutorialController::checkValidation); + } else { + qInfo() << "Warning: OnChange validation timing set but widget type not supported:" + << (step.targetWidget ? step.targetWidget->metaObject()->className() : "null"); + } + } +} + +void TutorialController::cleanupValidationMonitoring() +{ + if (validationConnection) { + qInfo() << "Cleaning up validation connection"; + disconnect(validationConnection); + validationConnection = QMetaObject::Connection(); + } +} + +void TutorialController::checkValidation() +{ + qInfo() << "checkValidation() called"; + + if (currentSequence < 0 || currentSequence >= sequences.size()) { + return; + } + if (currentStep < 0 || currentStep >= sequences[currentSequence].steps.size()) { + return; + } + + const auto &step = sequences[currentSequence].steps[currentStep]; + + if (step.validator) { + bool isValid = step.validator(); + qInfo() << "Validation result:" << isValid; + + if (isValid) { + // Clear any validation hints + tutorialOverlay->showValidationHint(""); + + // Auto-advance if enabled + if (step.autoAdvanceOnValid) { + qInfo() << "Auto-advancing to next step"; + QTimer::singleShot(500, this, &TutorialController::nextStep); + } + } + } +} \ No newline at end of file diff --git a/cockatrice/src/interface/widgets/general/tutorial/tutorial_controller.h b/cockatrice/src/interface/widgets/general/tutorial/tutorial_controller.h new file mode 100644 index 000000000..838756e3a --- /dev/null +++ b/cockatrice/src/interface/widgets/general/tutorial/tutorial_controller.h @@ -0,0 +1,97 @@ +#ifndef COCKATRICE_TUTORIAL_CONTROLLER_H +#define COCKATRICE_TUTORIAL_CONTROLLER_H + +#include "tutorial_overlay.h" + +#include +#include +#include + +enum class ValidationTiming +{ + OnAdvance, // Validate when user clicks next/clicks target (default) + OnChange, // Validate whenever target widget changes (for text input) + OnSignal, // Validate when a specific signal is emitted + Manual // Only validate when explicitly triggered +}; + +struct TutorialStep +{ + QWidget *targetWidget = nullptr; + QString text; + std::function onEnter = nullptr; + std::function onExit = nullptr; + + // Interactive features + bool requiresInteraction = false; // Must click target to advance + bool allowClickThrough = false; // Clicks pass through to target widget + std::function validator = nullptr; // Check if task completed + QString validationHint = ""; // Show if validation fails + ValidationTiming validationTiming = ValidationTiming::OnAdvance; + + // Auto-advance when validation passes (useful for text input) + bool autoAdvanceOnValid = false; + + // Custom interaction hint (overrides default "Click to continue") + QString customInteractionHint = nullptr; + + // Signal-based validation (for ValidationTiming::OnSignal) + QObject *signalSource = nullptr; // Object that emits the signal + const char *signalName = nullptr; // Signal to connect to (use SIGNAL() macro) +}; + +struct TutorialSequence +{ + QString name; + QVector steps; + + void addStep(const TutorialStep &step) + { + steps.append(step); + } +}; + +class TutorialController : public QObject +{ + Q_OBJECT + +public: + explicit TutorialController(QWidget *_tutorializedWidget); + + void addSequence(const TutorialSequence &seq); + void start(); + + TutorialOverlay *getOverlay() + { + return tutorialOverlay; + }; + +public slots: + void nextStep(); + void prevStep(); + void nextSequence(); + void prevSequence(); + void exitTutorial(); + void handleTargetClicked(); // Handle clicks on highlighted widget + void attemptAdvance(); // Try to advance with validation + void checkValidation(); // Check validation for OnChange timing + +private: + void showStep(); + void updateProgress(); // Update progress indicators + bool validateCurrentStep(); // Check if step requirements met + void setupValidationMonitoring(); // Setup automatic validation checking + void cleanupValidationMonitoring(); // Cleanup validation watchers + + QWidget *tutorializedWidget; + TutorialOverlay *tutorialOverlay; + QVector sequences; + + int currentSequence = -1; + int currentStep = -1; + + // For OnChange validation monitoring + QMetaObject::Connection validationConnection; +}; + +#endif // COCKATRICE_TUTORIAL_CONTROLLER_H diff --git a/cockatrice/src/interface/widgets/general/tutorial/tutorial_overlay.cpp b/cockatrice/src/interface/widgets/general/tutorial/tutorial_overlay.cpp new file mode 100644 index 000000000..d201b6bf0 --- /dev/null +++ b/cockatrice/src/interface/widgets/general/tutorial/tutorial_overlay.cpp @@ -0,0 +1,372 @@ +#include "tutorial_overlay.h" + +#include "tutorial_bubble_widget.h" + +#include +#include +#include +#include +#include +#include +#include +#include +#include +#include +#include +#include +#include +#include +#include + +TutorialOverlay::TutorialOverlay(QWidget *parent) : QWidget(parent) +{ + setAttribute(Qt::WA_TranslucentBackground, true); + setAttribute(Qt::WA_TransparentForMouseEvents, false); + + setAttribute(Qt::WA_OpaquePaintEvent, false); + setAutoFillBackground(false); + + if (parent) { + parent->installEventFilter(this); + setGeometry(parent->rect()); + raise(); + } + + controlBar = new QFrame(this); + controlBar->setStyleSheet( + "QFrame { background: rgba(30,30,30,200); border-radius: 6px; }" + "QPushButton { padding: 6px 10px; border: 1px solid #aaa; border-radius: 4px; background:#f5f5f5; }" + "QPushButton:hover { background:#eaeaea; }"); + + QHBoxLayout *barLayout = new QHBoxLayout(controlBar); + barLayout->setContentsMargins(8, 4, 8, 4); + + titleLabel = new QLabel("Tutorial", controlBar); + titleLabel->setStyleSheet("color:white; font-weight:bold;"); + barLayout->addWidget(titleLabel); + barLayout->addStretch(); + + auto mkBtn = [&](const QString &t, const QString &tip) { + QPushButton *b = new QPushButton(t, controlBar); + b->setToolTip(tip); + return b; + }; + + QPushButton *prevSeq = mkBtn("⏮", "Previous chapter"); + QPushButton *prev = mkBtn("◀", "Previous step"); + nextButton = mkBtn("▶", "Next step"); + nextSeqButton = mkBtn("⏭", "Next chapter"); + QPushButton *close = mkBtn("✕", "Exit tutorial"); + + barLayout->addWidget(prevSeq); + barLayout->addWidget(prev); + barLayout->addWidget(nextButton); + barLayout->addWidget(nextSeqButton); + barLayout->addWidget(close); + + connect(prev, &QPushButton::clicked, this, &TutorialOverlay::prevStep); + connect(nextButton, &QPushButton::clicked, this, &TutorialOverlay::nextStep); + connect(prevSeq, &QPushButton::clicked, this, &TutorialOverlay::prevSequence); + connect(nextSeqButton, &QPushButton::clicked, this, &TutorialOverlay::nextSequence); + connect(close, &QPushButton::clicked, this, &TutorialOverlay::skipTutorial); + + bubble = new BubbleWidget(this); + bubble->hide(); + + controlBar->hide(); +} + +void TutorialOverlay::showEvent(QShowEvent *event) +{ + QWidget::showEvent(event); + + if (parentWidget()) { + QWidget *parent = parentWidget(); + setGeometry(0, 0, parent->width(), parent->height()); + } + + raise(); + parentResized(); +} + +void TutorialOverlay::setTitle(const QString &title) +{ + titleLabel->setText(title); +} + +void TutorialOverlay::setBlocking(bool block) +{ + blockInput = block; + setAttribute(Qt::WA_TransparentForMouseEvents, !blockInput); +} + +void TutorialOverlay::setInteractive(bool interactive, bool clickThrough) +{ + isInteractive = interactive; + allowClickThrough = clickThrough; + + if (nextButton) { + nextButton->setEnabled(!interactive); + if (interactive) { + nextButton->setToolTip("Complete the highlighted action to continue"); + } else { + nextButton->setToolTip("Next step"); + } + } + + if (nextSeqButton) { + nextSeqButton->setEnabled(!interactive); + if (interactive) { + nextSeqButton->setToolTip("Complete the highlighted action to continue"); + } else { + nextSeqButton->setToolTip("Next chapter"); + } + } + + // Update mask when clickThrough changes + updateMask(); +} + +void TutorialOverlay::setInteractionHint(const QString &hint) +{ + bubble->setInteractionHint(hint); +} + +void TutorialOverlay::showValidationHint(const QString &hint) +{ + if (!hint.isEmpty()) { + bubble->setValidationHint(hint); + } +} + +void TutorialOverlay::setProgress(int stepNum, + int totalSteps, + int overallStep, + int overallTotal, + const QString &sequenceTitle) +{ + bubble->setProgress(stepNum, totalSteps, overallStep, overallTotal); + + if (!sequenceTitle.isEmpty()) { + titleLabel->setText(sequenceTitle); + } +} + +void TutorialOverlay::setTargetWidget(QWidget *w) +{ + if (targetWidget) + targetWidget->removeEventFilter(this); + + targetWidget = w; + + if (targetWidget) + targetWidget->installEventFilter(this); + + recomputeLayout(); +} + +void TutorialOverlay::setText(const QString &t) +{ + tutorialText = t; + bubble->setText(t); + bubble->adjustSize(); + recomputeLayout(); +} + +QRect TutorialOverlay::currentHoleRect() const +{ + if (!targetWidget || !targetWidget->isVisible()) + return QRect(); + + QPoint targetGlobal = targetWidget->mapToGlobal(QPoint(0, 0)); + QPoint targetInOverlay = mapFromGlobal(targetGlobal); + + return QRect(targetInOverlay, targetWidget->size()).adjusted(-6, -6, 6, 6); +} + +void TutorialOverlay::mousePressEvent(QMouseEvent *event) +{ + QRect hole = currentHoleRect(); + + // Check if click is in the highlighted area + if (hole.contains(event->pos())) { + // For non-clickthrough steps, emit targetClicked for advancement + if (!allowClickThrough && isInteractive && !qobject_cast(targetWidget) && + !qobject_cast(targetWidget) && !qobject_cast(targetWidget) && + !qobject_cast(targetWidget)) { + QTimer::singleShot(100, this, [this]() { emit targetClicked(); }); + } + // If allowClickThrough, the mask ensures events pass through + return; + } + + // Click outside highlighted area - block it + event->accept(); +} + +void TutorialOverlay::updateMask() +{ + if (allowClickThrough) { + QRect hole = currentHoleRect(); + if (!hole.isEmpty()) { + // Create a mask that excludes the hole area + QRegion fullRegion(rect()); + QRegion holeRegion(hole); + QRegion maskRegion = fullRegion.subtracted(holeRegion); + setMask(maskRegion); + } else { + clearMask(); + } + } else { + clearMask(); + } +} + +bool TutorialOverlay::event(QEvent *event) +{ + // Update mask on any event that might change geometry + if (event->type() == QEvent::Move || event->type() == QEvent::Resize) { + updateMask(); + } + return QWidget::event(event); +} + +void TutorialOverlay::resizeEvent(QResizeEvent *) +{ + recomputeLayout(); +} + +bool TutorialOverlay::eventFilter(QObject *obj, QEvent *event) +{ + if (obj == parentWidget() && (event->type() == QEvent::Resize || event->type() == QEvent::Move)) { + parentResized(); + } + + if (obj == targetWidget) { + if (event->type() == QEvent::Show) { + QMetaObject::invokeMethod(this, [this]() { recomputeLayout(); }, Qt::QueuedConnection); + } else if (event->type() == QEvent::Hide || event->type() == QEvent::Move || event->type() == QEvent::Resize) { + recomputeLayout(); + } + } + + return QWidget::eventFilter(obj, event); +} + +void TutorialOverlay::parentResized() +{ + if (!parentWidget()) + return; + + setGeometry(0, 0, parentWidget()->width(), parentWidget()->height()); + recomputeLayout(); +} + +void TutorialOverlay::recomputeLayout() +{ + QRect hole = currentHoleRect(); + + if (hole.isEmpty()) { + if (bubble) { + bubble->hide(); + } + if (controlBar) { + controlBar->hide(); + } + hide(); + return; + } + + show(); + raise(); + + QSize bsize = bubble->sizeHint().expandedTo(QSize(160, 60)); + highlightBubbleRect = computeBubbleRect(hole, bsize); + bubble->setGeometry(highlightBubbleRect); + bubble->show(); + bubble->raise(); + + controlBar->adjustSize(); + controlBar->show(); + + const int margin = 8; + QRect r = rect(); + + QList positions = {{r.right() - controlBar->width() - margin, r.bottom() - controlBar->height() - margin}, + {r.right() - controlBar->width() - margin, margin}, + {margin, r.bottom() - controlBar->height() - margin}, + {margin, margin}}; + + for (const QPoint &pos : positions) { + QRect proposed(pos, controlBar->size()); + if (!proposed.intersects(hole)) { + controlBar->move(pos); + break; + } + } + + controlBar->raise(); + update(); + updateMask(); // Update mask after layout changes +} + +QRect TutorialOverlay::computeBubbleRect(const QRect &hole, const QSize &bubbleSize) const +{ + const int margin = 16; + QRect r = rect(); + QRect bubble; + + if (hole.isEmpty()) { + bubble = QRect(r.center() - QPoint(bubbleSize.width() / 2, bubbleSize.height() / 2), bubbleSize); + } else { + bubble = QRect(hole.right() + margin, hole.top(), bubbleSize.width(), bubbleSize.height()); + + if (!r.contains(bubble)) + bubble.moveLeft(hole.left() - margin - bubbleSize.width()); + + if (!r.contains(bubble)) { + bubble.moveLeft(hole.center().x() - bubbleSize.width() / 2); + bubble.moveTop(hole.top() - margin - bubbleSize.height()); + } + + if (!r.contains(bubble)) + bubble.moveTop(hole.bottom() + margin); + } + + int maxLeft = qMax(r.left(), r.right() - bubble.width()); + int maxTop = qMax(r.top(), r.bottom() - bubble.height()); + + bubble.moveLeft(qBound(r.left(), bubble.left(), maxLeft)); + bubble.moveTop(qBound(r.top(), bubble.top(), maxTop)); + + return bubble; +} + +void TutorialOverlay::paintEvent(QPaintEvent *) +{ + QPainter p(this); + p.setRenderHint(QPainter::Antialiasing, true); + + QRect hole = currentHoleRect(); + + if (hole.isEmpty()) { + p.fillRect(rect(), QColor(0, 0, 0, 160)); + } else { + QPainterPath fullPath; + fullPath.addRect(rect()); + + QPainterPath holePath; + holePath.addRoundedRect(hole, 8, 8); + + QPainterPath overlayPath = fullPath.subtracted(holePath); + p.fillPath(overlayPath, QColor(0, 0, 0, 160)); + + if (isInteractive) { + QPen pen(QColor(100, 200, 255, 180), 2); + pen.setStyle(Qt::DashLine); + p.setPen(pen); + p.setBrush(Qt::NoBrush); + p.drawRoundedRect(hole, 8, 8); + } + } +} \ No newline at end of file diff --git a/cockatrice/src/interface/widgets/general/tutorial/tutorial_overlay.h b/cockatrice/src/interface/widgets/general/tutorial/tutorial_overlay.h new file mode 100644 index 000000000..eb92196e6 --- /dev/null +++ b/cockatrice/src/interface/widgets/general/tutorial/tutorial_overlay.h @@ -0,0 +1,65 @@ +#ifndef TUTORIAL_OVERLAY_H +#define TUTORIAL_OVERLAY_H + +#include + +class QFrame; +class QLabel; +class QPushButton; +class BubbleWidget; + +class TutorialOverlay : public QWidget +{ + Q_OBJECT + +public: + explicit TutorialOverlay(QWidget *parent = nullptr); + + void setTitle(const QString &title); + void setBlocking(bool block); + void setTargetWidget(QWidget *w); + void setText(const QString &t); + void setInteractive(bool interactive, bool clickThrough); + void setInteractionHint(const QString &hint); + void showValidationHint(const QString &hint); + void setProgress(int stepNum, int totalSteps, int overallStep, int overallTotal, const QString &sequenceTitle); + + void parentResized(); + QRect currentHoleRect() const; + +signals: + void nextStep(); + void prevStep(); + void nextSequence(); + void prevSequence(); + void skipTutorial(); + void targetClicked(); + +protected: + void showEvent(QShowEvent *event) override; + bool event(QEvent *event) override; + void resizeEvent(QResizeEvent *event) override; + void paintEvent(QPaintEvent *event) override; + void mousePressEvent(QMouseEvent *event) override; + void updateMask(); + bool eventFilter(QObject *obj, QEvent *event) override; + +private: + void recomputeLayout(); + QRect computeBubbleRect(const QRect &hole, const QSize &bubbleSize) const; + + QWidget *targetWidget = nullptr; + QFrame *controlBar = nullptr; + QLabel *titleLabel = nullptr; + QPushButton *nextButton = nullptr; + QPushButton *nextSeqButton = nullptr; + BubbleWidget *bubble = nullptr; + + QString tutorialText; + QRect highlightBubbleRect; + bool blockInput = true; + bool isInteractive = false; + bool allowClickThrough = false; +}; + +#endif // TUTORIAL_OVERLAY_H \ No newline at end of file diff --git a/cockatrice/src/interface/widgets/tabs/visual_deck_editor/tab_deck_editor_visual.cpp b/cockatrice/src/interface/widgets/tabs/visual_deck_editor/tab_deck_editor_visual.cpp index 74c1021fb..c08dd27e7 100644 --- a/cockatrice/src/interface/widgets/tabs/visual_deck_editor/tab_deck_editor_visual.cpp +++ b/cockatrice/src/interface/widgets/tabs/visual_deck_editor/tab_deck_editor_visual.cpp @@ -6,6 +6,7 @@ #include "../../interface/pixel_map_generator.h" #include "../../interface/widgets/cards/card_info_frame_widget.h" #include "../../interface/widgets/deck_analytics/deck_analytics_widget.h" +#include "../../interface/widgets/general/tutorial/tutorial_controller.h" #include "../../interface/widgets/visual_deck_editor/visual_deck_editor_widget.h" #include "../tab_deck_editor.h" #include "../tab_supervisor.h" @@ -51,6 +52,44 @@ TabDeckEditorVisual::TabDeckEditorVisual(TabSupervisor *_tabSupervisor) : Abstra loadLayout(); cardDatabaseDockWidget->setHidden(true); + tutorialController = new TutorialController(this); + + auto sequence = TutorialSequence(); + + sequence.addStep({tabContainer->tabBar(), + "The Visual Deck Editor has multiple different functionalities.\n\nYou can cycle " + "through them by using these tabs.\n\nLet's start with the Visual Deck View."}); + sequence.addStep({tabContainer->visualDeckView, + "The cards in your deck will be displayed here, allowing for an easy overview.\n\nLet's try " + "adding some now, so you can see it in action!", + [this]() { tabContainer->setCurrentWidget(tabContainer->visualDeckView); }}); + + // sequence.addStep({printingSelectorDockWidget, "Change the printings in your deck here."}); + + tutorialController->addSequence(sequence); + + auto vdeSequence = tabContainer->visualDeckView->addTutorialSteps(); + vdeSequence.addStep({tabContainer->tabBar(), "Let's look at the database tab now."}); + tutorialController->addSequence(vdeSequence); + + auto vddSequence = tabContainer->visualDatabaseDisplay->addTutorialSteps(); + vddSequence.steps.prepend( + {tabContainer->visualDatabaseDisplay, + "You can view the database here, either as card images or in the old table display " + "style.\n\nAdditionally, there are many powerful and easy to use filters available.\n\nLet's dive in!", + [this]() { tabContainer->setCurrentWidget(tabContainer->visualDatabaseDisplay); }}); + + tutorialController->addSequence(vddSequence); +} + +void TabDeckEditorVisual::showEvent(QShowEvent *ev) +{ + QWidget::showEvent(ev); + if (!tutorialStarted) { + tutorialStarted = true; + // Start on next event loop iteration so everything is fully painted + QTimer::singleShot(0, tutorialController, [this] { tutorialController->start(); }); + } } /** @brief Creates the central frame containing the tab container. */ diff --git a/cockatrice/src/interface/widgets/tabs/visual_deck_editor/tab_deck_editor_visual.h b/cockatrice/src/interface/widgets/tabs/visual_deck_editor/tab_deck_editor_visual.h index 371699c4d..2f1ad2847 100644 --- a/cockatrice/src/interface/widgets/tabs/visual_deck_editor/tab_deck_editor_visual.h +++ b/cockatrice/src/interface/widgets/tabs/visual_deck_editor/tab_deck_editor_visual.h @@ -4,6 +4,7 @@ #include "../tab.h" #include "tab_deck_editor_visual_tab_widget.h" +class TutorialController; /** * @class TabDeckEditorVisual * @ingroup DeckEditorTabs @@ -55,7 +56,12 @@ class TabDeckEditorVisual : public AbstractTabDeckEditor { Q_OBJECT +private: + TutorialController *tutorialController = nullptr; + bool tutorialStarted = false; + protected slots: + void showEvent(QShowEvent *ev) override; /** * @brief Load the editor layout from settings. */ diff --git a/cockatrice/src/interface/widgets/visual_database_display/visual_database_display_filter_toolbar_widget.h b/cockatrice/src/interface/widgets/visual_database_display/visual_database_display_filter_toolbar_widget.h index a6c614656..2bf07e9b0 100644 --- a/cockatrice/src/interface/widgets/visual_database_display/visual_database_display_filter_toolbar_widget.h +++ b/cockatrice/src/interface/widgets/visual_database_display/visual_database_display_filter_toolbar_widget.h @@ -22,6 +22,11 @@ public: void initialize(); void retranslateUi(); + SettingsButtonWidget *getSetFilterWidget() + { + return quickFilterSetWidget; + }; + private: VisualDatabaseDisplayWidget *visualDatabaseDisplay; diff --git a/cockatrice/src/interface/widgets/visual_database_display/visual_database_display_widget.cpp b/cockatrice/src/interface/widgets/visual_database_display/visual_database_display_widget.cpp index 44a9e98a0..23b511c1a 100644 --- a/cockatrice/src/interface/widgets/visual_database_display/visual_database_display_widget.cpp +++ b/cockatrice/src/interface/widgets/visual_database_display/visual_database_display_widget.cpp @@ -5,14 +5,14 @@ #include "../../../filters/syntax_help.h" #include "../../pixel_map_generator.h" #include "../cards/card_info_picture_with_text_overlay_widget.h" +#include "../deck_editor/deck_state_manager.h" +#include "../general/tutorial/tutorial_controller.h" #include "../quick_settings/settings_button_widget.h" +#include "../tabs/visual_deck_editor/tab_deck_editor_visual.h" #include "../utility/custom_line_edit.h" #include "visual_database_display_color_filter_widget.h" #include "visual_database_display_filter_save_load_widget.h" -#include "visual_database_display_main_type_filter_widget.h" -#include "visual_database_display_name_filter_widget.h" #include "visual_database_display_set_filter_widget.h" -#include "visual_database_display_sub_type_filter_widget.h" #include #include @@ -20,7 +20,7 @@ #include #include #include -#include +#include VisualDatabaseDisplayWidget::VisualDatabaseDisplayWidget(QWidget *parent, AbstractTabDeckEditor *_deckEditor, @@ -135,6 +135,87 @@ VisualDatabaseDisplayWidget::VisualDatabaseDisplayWidget(QWidget *parent, retranslateUi(); } +TutorialSequence VisualDatabaseDisplayWidget::addTutorialSteps() +{ + auto sequence = TutorialSequence(); + sequence.addStep({colorFilterWidget, "Filter the database by colors with these controls"}); + TutorialStep displayModeStep; + displayModeStep.targetWidget = displayModeButton; + displayModeStep.text = tr("You can change back to the old table display-style with this button."); + displayModeStep.allowClickThrough = true; + sequence.addStep(displayModeStep); + sequence.addStep({filterContainer, "Use these controls for quick access to common filters."}); + + TutorialStep setFilterStep; + setFilterStep.targetWidget = filterContainer->getSetFilterWidget(); + setFilterStep.text = tr("Let's try it out now by selecting a set filter!"); + setFilterStep.allowClickThrough = true; + setFilterStep.requiresInteraction = true; + setFilterStep.autoAdvanceOnValid = true; + setFilterStep.validationTiming = ValidationTiming::OnSignal; + setFilterStep.signalSource = filterModel; + setFilterStep.signalName = SIGNAL(layoutChanged()); + setFilterStep.validator = [] { return true; }; + sequence.addStep(setFilterStep); + + TutorialStep explorationStep; + explorationStep.targetWidget = this; + explorationStep.text = tr( + "Try it out!\n\nWe've cleared the previous deck. Add 5 different new cards to the deck by clicking on them!"); + explorationStep.allowClickThrough = true; + explorationStep.requiresInteraction = true; + explorationStep.autoAdvanceOnValid = true; + explorationStep.validationTiming = ValidationTiming::OnSignal; + if (QtUtils::findParentOfType(this)) { + explorationStep.onEnter = [this] { + QtUtils::findParentOfType(this)->deckStateManager->clearDeck(); + }; + explorationStep.signalSource = + QtUtils::findParentOfType(this)->deckStateManager->getModel(); + explorationStep.signalName = SIGNAL(cardNodesChanged()); + explorationStep.validator = [this] { + if (QtUtils::findParentOfType(this)) { + return QtUtils::findParentOfType(this) + ->deckStateManager->getModel() + ->getDeckList() + ->getCardList() + .size() >= 5; + } + return true; + }; + } + + sequence.addStep(explorationStep); + + TutorialStep conclusionStep; + conclusionStep.targetWidget = this; + conclusionStep.text = tr( + "Great!\n\nLet's look at them in the deck view before we conclude this tutorial with the analytics widgets."); + conclusionStep.onExit = [this]() { + auto tabWidget = QtUtils::findParentOfType(this); + if (tabWidget) { + tabWidget->setCurrentWidget(tabWidget->visualDeckView); + } + }; + + sequence.addStep(conclusionStep); + + /*sequence.addStep( + {quickFilterSaveLoadWidget, "This button will let you save and load all currently applied filters to files."}); + sequence.addStep({quickFilterNameWidget, + "This button will let you apply name filters. Optionally, you can import every card in " + "your deck as a name filter and then save this as a filter using the save/load button " + "to make your own quick access collections!"}); + sequence.addStep({mainTypeFilterWidget, "Use these buttons to quickly filter by card types."}); + sequence.addStep({quickFilterSubTypeWidget, "This button will let you apply filters for card sub-types."}); + sequence.addStep( + {quickFilterSetWidget, + "This button will let you apply filters for card sets. You can also filter to the X most recent sets. " + "Filtering to a set will display all printings of a card within that set."});*/ + + return sequence; +} + void VisualDatabaseDisplayWidget::initialize() { databaseLoadIndicator->setVisible(false); diff --git a/cockatrice/src/interface/widgets/visual_database_display/visual_database_display_widget.h b/cockatrice/src/interface/widgets/visual_database_display/visual_database_display_widget.h index 3aa8d7f8e..d9440a3a6 100644 --- a/cockatrice/src/interface/widgets/visual_database_display/visual_database_display_widget.h +++ b/cockatrice/src/interface/widgets/visual_database_display/visual_database_display_widget.h @@ -14,6 +14,7 @@ #include "../cards/card_size_widget.h" #include "../general/layout_containers/flow_widget.h" #include "../general/layout_containers/overlap_control_widget.h" +#include "../general/tutorial/tutorial_controller.h" #include "../utility/custom_line_edit.h" #include "visual_database_display_color_filter_widget.h" #include "visual_database_display_filter_toolbar_widget.h" @@ -26,6 +27,7 @@ #include #include +class TutorialController; inline Q_LOGGING_CATEGORY(VisualDatabaseDisplayLog, "visual_database_display"); class VisualDatabaseDisplayWidget : public QWidget @@ -70,6 +72,7 @@ public: VisualDatabaseDisplayColorFilterWidget *colorFilterWidget; public slots: + TutorialSequence addTutorialSteps(); void onSearchModelChanged(); signals: diff --git a/cockatrice/src/interface/widgets/visual_deck_editor/visual_deck_display_options_widget.cpp b/cockatrice/src/interface/widgets/visual_deck_editor/visual_deck_display_options_widget.cpp index f0bee5d7d..c9c65c75f 100644 --- a/cockatrice/src/interface/widgets/visual_deck_editor/visual_deck_display_options_widget.cpp +++ b/cockatrice/src/interface/widgets/visual_deck_editor/visual_deck_display_options_widget.cpp @@ -121,3 +121,60 @@ void VisualDeckDisplayOptionsWidget::updateDisplayType() } emit displayTypeChanged(currentDisplayType); } + +TutorialSequence VisualDeckDisplayOptionsWidget::generateTutorialSequence(TutorialSequence sequence) +{ + TutorialStep introStep; + introStep.targetWidget = this; + introStep.text = tr("You can change how the deck is displayed, grouped, and sorted here."); + + sequence.addStep(introStep); + + TutorialStep displayTypeStep; + displayTypeStep.targetWidget = displayTypeButton; + displayTypeStep.text = + tr("You can change the layout of the displayed cards by clicking on this button.\n\nThe overlap type will " + "stack cards on top of each other, leaving the top exposed for easy skimming.\nYou can always hover your " + "mouse over a card to display a zoomed version of it.\n\nThe flat layout will display cards next to each " + "other, without any overlap.\n\nLet's switch to flat now!"); + displayTypeStep.allowClickThrough = true; + displayTypeStep.requiresInteraction = true; + displayTypeStep.validationTiming = ValidationTiming::OnSignal; + displayTypeStep.signalSource = displayTypeButton; + displayTypeStep.signalName = SIGNAL(clicked()); + displayTypeStep.autoAdvanceOnValid = true; + displayTypeStep.validator = [] { return true; }; + + sequence.addStep(displayTypeStep); + + TutorialStep groupStep; + groupStep.targetWidget = groupByComboBox; + groupStep.text = tr("You can change how cards are grouped here.\n\nLet's change cards to be grouped by 'Color'"); + groupStep.allowClickThrough = true; + groupStep.requiresInteraction = true; + groupStep.validationTiming = ValidationTiming::OnChange; + groupStep.autoAdvanceOnValid = true; + groupStep.validator = [this]() { return groupByComboBox->currentIndex() == 2; }; + groupStep.validationHint = tr("Select the 'Color' option"); + + sequence.addStep(groupStep); + + TutorialStep sortStep; + sortStep.targetWidget = sortCriteriaButton; + sortStep.text = + tr("Let's check out sorting now. In the visual deck view, sort modifiers are hierarchical,\n meaning " + "that the cards will first be sorted using the top-most criteria\nand then, if cards are equal using this " + "criteria,\nthe next criteria in the list will be used as a tie-breaker.\n\n" + "Change the sorting to be based primarily on converted mana cost (cmc) by dragging it to the top."); + sortStep.allowClickThrough = true; + sortStep.requiresInteraction = true; + sortStep.autoAdvanceOnValid = true; + sortStep.validationTiming = ValidationTiming::OnSignal; + sortStep.signalSource = this; + sortStep.signalName = SIGNAL(sortCriteriaChanged(const QStringList &)); + sortStep.validator = []() { return true; }; + + sequence.addStep(sortStep); + + return sequence; +} diff --git a/cockatrice/src/interface/widgets/visual_deck_editor/visual_deck_display_options_widget.h b/cockatrice/src/interface/widgets/visual_deck_editor/visual_deck_display_options_widget.h index 7a447753f..0b6965100 100644 --- a/cockatrice/src/interface/widgets/visual_deck_editor/visual_deck_display_options_widget.h +++ b/cockatrice/src/interface/widgets/visual_deck_editor/visual_deck_display_options_widget.h @@ -85,6 +85,8 @@ public: return activeSortCriteria; } + TutorialSequence generateTutorialSequence(TutorialSequence sequence); + private slots: /** * @brief Slot triggered whenever the sort list is reordered. diff --git a/cockatrice/src/interface/widgets/visual_deck_editor/visual_deck_editor_widget.cpp b/cockatrice/src/interface/widgets/visual_deck_editor/visual_deck_editor_widget.cpp index d6afb5f22..200afd49b 100644 --- a/cockatrice/src/interface/widgets/visual_deck_editor/visual_deck_editor_widget.cpp +++ b/cockatrice/src/interface/widgets/visual_deck_editor/visual_deck_editor_widget.cpp @@ -24,6 +24,7 @@ #include #include #include +#include #include VisualDeckEditorWidget::VisualDeckEditorWidget(QWidget *parent, @@ -413,4 +414,84 @@ void VisualDeckEditorWidget::onSelectionChanged(const QItemSelection &selected, } } } +} + +TutorialSequence VisualDeckEditorWidget::addTutorialSteps() +{ + TutorialSequence sequence; + sequence.name = "Adding Cards to Your Deck"; + + TutorialStep introStep; + introStep.targetWidget = displayOptionsAndSearch; + introStep.text = "There are two ways of adding cards to your deck:\n\n" + "The first is by using the quick search bar in the deck view tab.\n" + "This is helpful if you already know which card you would like to add " + "and will provide name suggestions as you type.\n\n" + "We'll look at the second way, through the database tab, later."; + sequence.addStep(introStep); + + TutorialStep searchStep; + searchStep.targetWidget = searchBar; + searchStep.text = "Let's try it out now!\nType the name of a card into the search bar."; + searchStep.allowClickThrough = true; + searchStep.requiresInteraction = true; + searchStep.autoAdvanceOnValid = true; + searchStep.validationTiming = ValidationTiming::OnChange; // Make sure this is set! + searchStep.validator = [this]() { + return CardDatabaseManager::query()->getCard({searchBar->text()}) != ExactCard(); + }; + searchStep.validationHint = "Please enter a valid card name."; + searchStep.customInteractionHint = "✏️ Type a valid card name to continue"; + + sequence.addStep(searchStep); + + TutorialStep addStep; + addStep.targetWidget = searchPushButton; + addStep.text = "Click this button to add the card to your deck."; + addStep.allowClickThrough = true; + addStep.requiresInteraction = true; + addStep.autoAdvanceOnValid = true; + addStep.validationTiming = ValidationTiming::OnSignal; + addStep.signalSource = deckListModel; + addStep.signalName = SIGNAL(cardAddedAt(const QModelIndex &)); + addStep.validator = [this]() { return deckListModel->getCardNodes().size() >= 1; }; + + sequence.addStep(addStep); + + TutorialStep organizationStep; + organizationStep.targetWidget = this; + organizationStep.text = "Let's look at how cards are organized and displayed now.\n\nWe'll add some random cards " + "from the database to your deck, so you can see it in action properly."; + organizationStep.onExit = [this]() { + while (deckListModel->getDeckList()->getCardList().size() < 60) { + deckListModel->addCard(CardDatabaseManager::query()->getRandomCard(), DECK_ZONE_MAIN); + } + }; + + sequence.addStep(organizationStep); + + TutorialStep hoverStep; + hoverStep.targetWidget = this; + hoverStep.text = "Great! Take some time to explore these new cards in the current display mode.\n\nYou can select " + "a card by clicking on it with the left mouse button.\nYou can select multiple cards by holding " + "down CTRL or Shift.\nYou can clear the current selection by clicking on an area without a " + "card.\nDouble-clicking a card will move it between main and sideboard.\nRight-clicking a card " + "will remove it from the deck.\n\nYou can hover over a card to see a zoomed version of it."; + hoverStep.allowClickThrough = true; + + sequence.addStep(hoverStep); + + sequence = displayOptionsWidget->generateTutorialSequence(sequence); + + TutorialStep conclusionStep; + conclusionStep.targetWidget = this; + conclusionStep.text = + "Great!\n\nNow that you've learned about all the different ways of displaying the cards in " + "your deck, it's time to move on to searching for new cards for your deck in style and ease.\n\nYou can stay " + "on this screen to play around with the display options and advance when you are ready."; + conclusionStep.allowClickThrough = true; + + sequence.addStep(conclusionStep); + + return sequence; } \ No newline at end of file diff --git a/cockatrice/src/interface/widgets/visual_deck_editor/visual_deck_editor_widget.h b/cockatrice/src/interface/widgets/visual_deck_editor/visual_deck_editor_widget.h index 13065d623..94c0c4081 100644 --- a/cockatrice/src/interface/widgets/visual_deck_editor/visual_deck_editor_widget.h +++ b/cockatrice/src/interface/widgets/visual_deck_editor/visual_deck_editor_widget.h @@ -10,6 +10,7 @@ #include "../cards/card_info_picture_with_text_overlay_widget.h" #include "../cards/card_size_widget.h" #include "../general/layout_containers/overlap_control_widget.h" +#include "../general/tutorial/tutorial_controller.h" #include "../quick_settings/settings_button_widget.h" #include "visual_deck_editor_placeholder_widget.h" @@ -45,6 +46,7 @@ public: void setSelectionModel(QItemSelectionModel *model); void onSelectionChanged(const QItemSelection &selected, const QItemSelection &deselected); + TutorialSequence addTutorialSteps(); void updatePlaceholderVisibility(); QItemSelectionModel *getSelectionModel() const {