feat: a button for hints in tutorials

public/styles/components/modal.scss

@@ -18,6 +18,8 @@
   display: flex;
   justify-content: center;
   align-items: center;
+
+  z-index: 15;
 }
 
 .modal__container {

public/styles/index.scss

@@ -21,6 +21,7 @@
 @import "./pages/login.scss";
 @import "./pages/projects.scss";
 @import "./pages/editTutorial.scss";
+@import "./pages/tutorial.scss";
 
 * {
   // we don't want the user to drag stuff

public/styles/pages/tutorial.scss

@@ -0,0 +1,40 @@
+@use "../utils/utils";
+@import "../theme.scss";
+
+.tutorial__hint-button {
+  @include utils.base-input;
+  @include utils.center;
+
+  border-radius: 50%;
+  z-index: 3;
+
+  position: absolute;
+  background: $secondary;
+
+  height: 2.4rem;
+  width: 2.4rem;
+
+  right: 1rem;
+  bottom: 1rem;
+
+  margin: 0;
+  padding: 0;
+
+  cursor: pointer;
+  transition: filter $transition-time, transform $transition-time;
+}
+
+.tutorial__hint-button .material-icons {
+  font-size: 2.4rem;
+
+  color: $primary-dark;
+}
+
+.tutorial__hint-button:hover {
+  filter: brightness(1.4);
+  transform: scale(1.1);
+}
+
+.tutorial__slide.tutorial__slide--active {
+  z-index: 30;
+}

src/Component/Tutorial.purs

@@ -3,7 +3,7 @@ module Lunarbox.Component.Tutorial (component) where
 import Prelude
 import Control.Monad.Reader (class MonadReader)
 import Control.MonadZero (guard)
-import Data.Array ((!!))
+import Data.Array ((!!), (..))
 import Data.Array as Array
 import Data.Const (Const)
 import Data.Foldable (for_)
@@ -14,12 +14,14 @@ import Effect.Aff.Class (class MonadAff, liftAff)
 import Effect.Class (class MonadEffect)
 import Halogen (Component, HalogenM, Slot, defaultEval, fork, get, gets, mkComponent, mkEval, modify_, query, tell)
 import Halogen.HTML as HH
+import Halogen.HTML.Events (onClick)
 import Lunarbox.Capability.Navigate (class Navigate)
 import Lunarbox.Capability.Resource.Gist (class ManageGists, fetchGist)
 import Lunarbox.Capability.Resource.Project (class ManageProjects, getProject)
 import Lunarbox.Capability.Resource.Tutorial (class ManageTutorials, getTutorial)
 import Lunarbox.Component.Editor as Editor
 import Lunarbox.Component.Error (error)
+import Lunarbox.Component.Icon (icon)
 import Lunarbox.Component.Loading (loading)
 import Lunarbox.Component.Modal as Modal
 import Lunarbox.Component.Utils (className, maybeElement)
@@ -49,10 +51,13 @@ type State
 data SlideModalAction
   = Next
   | Previous
+  | Skip
 
 data Action
   = Init
   | HandleSlideModalAction SlideModalAction
+  | OpenCurrent
+  | TryOpeningSlides
 
 type ChildSlots m
   = ( editor :: Slot (Const Void) Editor.Output Unit
@@ -99,22 +104,37 @@ component =
       modify_ _ { tutorial = fromEither response }
       for_ response \response' ->
         for_ setupFetchers \f -> fork $ f response'
-      void
-        $ fork do
-            liftAff $ delay $ Milliseconds 100.0
-            void $ query _slideModal 0 $ tell Modal.Open
+      handleAction TryOpeningSlides
     HandleSlideModalAction action -> do
       { currentSlide, steps } <- get
       for_ steps \{ steps: steps' } -> do
         case action of
+          Skip -> pure unit
           Next ->
             when (Array.length steps' > currentSlide + 1) do
               modify_ _ { currentSlide = currentSlide + 1 }
-              openSlide (currentSlide + 1)
+              handleAction OpenCurrent
           Previous ->
             unless (currentSlide == 0) do
               modify_ _ { currentSlide = currentSlide - 1 }
-              openSlide (currentSlide - 1)
+              handleAction OpenCurrent
+    OpenCurrent -> do
+      a <- gets _.currentSlide
+      gets _.currentSlide >>= openSlide
+    TryOpeningSlides -> do
+      state <- get
+      case state.tutorial, state.gist, state.steps, state.base, state.solution of
+        Success _, Success _, Success _, Success _, Success _ -> handleAction OpenCurrent
+        Failure _, _, _, _, _ -> pure unit
+        _, Failure _, _, _, _ -> pure unit
+        _, _, Failure _, _, _ -> pure unit
+        _, _, _, Failure _, _ -> pure unit
+        _, _, _, _, Failure _ -> pure unit
+        _, _, _, _, _ ->
+          void
+            $ fork do
+                liftAff $ delay $ Milliseconds 300.0
+                handleAction TryOpeningSlides
 
   openSlide value = void $ query _slideModal value $ tell Modal.Open
 
@@ -139,42 +159,71 @@ component =
   render { tutorial, gist, steps, base, solution, currentSlide } = case tutorial, gist, steps, base, solution of
     Success tutorial', Success gist', Success steps', Success base', Success solution' ->
       HH.div_
-        [ HH.main [ className "tutorial__editor" ]
-            [ HH.slot (SProxy :: _ "editor") unit Editor.component base' (const Nothing)
-            ]
-        , HH.slot _slideModal currentSlide Modal.component slideModal handleSlideModalOutput
-        ]
-      where
-      currentStep = steps'.steps !! currentSlide
-
-      next =
-        { text:
-          if (currentSlide + 1 >= Array.length steps'.steps) then
-            "Done"
-          else
-            "Next"
-        , value: Next
-        , primary: true
-        }
-
-      previous = do
-        guard (currentSlide /= 0)
-        pure
-          $ { text: "Previous"
-            , value: Previous
-            , primary: false
-            }
-
-      slideModal =
-        { buttons:
-          previous
-            <> [ next
+        $ [ HH.main [ className "tutorial__editor" ]
+              [ HH.slot (SProxy :: _ "editor") unit Editor.component base' (const Nothing)
               ]
-        , content: \_ -> maybeElement currentStep (HH.text <<< _.content)
-        , id: "slide-modal"
-        , onClose: Next
-        , title: maybe "Cannot find title" _.title currentStep
-        }
+          , HH.button
+              [ className "tutorial__hint-button"
+              , onClick $ const $ Just OpenCurrent
+              ]
+              [ icon "help"
+              ]
+          ]
+        <> slides
+      where
+      slides =
+        (0 .. (slideCount - 1))
+          <#> mkModal
+
+      slideCount = Array.length steps'.steps
+
+      mkModal slideIndex =
+        HH.slot _slideModal
+          slideIndex
+          Modal.component
+          slideModal
+          handleSlideModalOutput
+        where
+        slide = steps'.steps !! slideIndex
+
+        next =
+          { text:
+            if (slideIndex + 1 >= Array.length steps'.steps) then
+              "Done"
+            else
+              "Next"
+          , value: Next
+          , primary: true
+          }
+
+        previous = do
+          guard (slideIndex /= 0)
+          pure
+            $ { text: "Previous"
+              , value: Previous
+              , primary: false
+              }
+
+        slideModal =
+          { buttons:
+            previous
+              <> [ next
+                ]
+          , content:
+            \_ ->
+              maybeElement slide \{ content } ->
+                HH.div
+                  [ className
+                      if slideIndex == currentSlide then
+                        "tutorial__slide tutorial__slide--active"
+                      else
+                        "tutorial__slide"
+                  ]
+                  [ HH.text content ]
+          , id: "slide-modal-" <> show slideIndex
+          , onClose: Skip
+          , title: maybe "Cannot find title" _.title slide
+          }
 
       handleSlideModalOutput = case _ of
         Modal.ClosedWith value -> Just $ HandleSlideModalAction value