packages feed

monomer-1.0.0.0: examples/tutorial/Tutorial04_Tasks.hs

{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE TemplateHaskell #-}

module Tutorial04_Tasks where

import Control.Lens
import Data.Text (Text)
import Monomer
import System.Random

import qualified Monomer.Lens as L

data AppModel = AppModel {
  _selected :: Int,
  _hoverButton :: Bool
} deriving (Eq, Show)

data AppEvent
  = AppGenRandom
  | AppSaveRandom Int
  | AppOnEnterBtn
  | AppOnLeaveBtn
  deriving (Eq, Show)

makeLenses 'AppModel

buildUI
  :: WidgetEnv AppModel AppEvent
  -> AppModel
  -> WidgetNode AppModel AppEvent
buildUI wenv model = widgetTree where
  pushLayers = zstack [
      image_ "./assets/images/red-button.png" [fitFill] `nodeVisible` not (model ^. hoverButton),
      image_ "./assets/images/red-button-hover.png" [fitFill] `nodeVisible` model ^. hoverButton,
      label "Push!" `styleBasic` [textFont "Bold", textSize 20, textCenter]
    ]
  pushButton = box_ [onClick AppGenRandom, onEnter AppOnEnterBtn, onLeave AppOnLeaveBtn] pushLayers
    `styleBasic` [width 160, height 160, cursorHand]
  numberLabel = labelS (model ^. selected)
    `styleBasic` [textFont "Bold", textSize 100, textColor black, textCenter, width 160]
  numberedImage url idx = scroll (image_ url [fitNone])
    `nodeVisible` (model ^. selected == idx)
  imageSet = hstack [
      numberedImage "https://picsum.photos/id/1020/800/600" 1,
      numberedImage "https://picsum.photos/id/1047/800/600" 2,
      numberedImage "https://picsum.photos/id/1047/800/600" 3,
      numberedImage "https://picsum.photos/id/1025/800/600" 4,
      numberedImage "https://picsum.photos/id/1080/800/600" 5,
      numberedImage "https://picsum.photos/id/1059/800/600" 6
    ] `styleBasic` [padding 10]
  widgetTree = vstack [
      hstack [
        tooltip "Click to pick a random number" pushButton
          `styleBasic` [textSize 16, bgColor steelBlue, paddingH 5, radius 5],
        numberLabel
      ],
      imageSet
    ] `styleBasic` [bgColor moccasin]

handleEvent
  :: WidgetEnv AppModel AppEvent
  -> WidgetNode AppModel AppEvent
  -> AppModel
  -> AppEvent
  -> [AppEventResponse AppModel AppEvent]
handleEvent wenv node model evt = case evt of
  AppGenRandom -> [Task $
      AppSaveRandom <$> randomRIO (1, 6)
    ]
  AppSaveRandom value -> [Model $ model & selected .~ value]
  AppOnEnterBtn -> [Model $ model & hoverButton .~ True]
  AppOnLeaveBtn -> [Model $ model & hoverButton .~ False]

main04 :: IO ()
main04 = do
  startApp model handleEvent buildUI config
  where
    config = [
      appWindowTitle "Tutorial 04 - Tasks",
      appTheme darkTheme,
      appFontDef "Regular" "./assets/fonts/Roboto-Regular.ttf",
      appFontDef "Bold" "./assets/fonts/Roboto-Bold.ttf"
      ]
    model = AppModel {
      _selected = 0,
      _hoverButton = False
    }