msgTemplate.js

exports.go = (result) => ({
  "type": "text",
  "text": "OK, Let's GO!"
})

exports.ready = () => ({
    "type": "flex",
    "altText": "Are you ready to run?",
    "contents": {
        "type": "bubble",
        "size": "micro",
        "hero": {
          "type": "image",
          "url": "YOUR-IMAGE",
          "size": "full",
          "aspectRatio": "16:9",
          "aspectMode": "cover"
        },
        "body": {
          "type": "box",
          "layout": "vertical",
          "contents": [
            {
              "type": "text",
              "text": "Are you ready?",
              "weight": "bold",
              "size": "lg"
            }
          ]
        },
        "footer": {
          "type": "box",
          "layout": "vertical",
          "contents": [
            {
              "type": "button",
              "action": {
                "type": "postback",
                "label": "I'm ready, GO!",
                "data": "running",
                "displayText": "GO! GO! GO!"
              },
              "style": "primary"
            }
          ]
        }
      }
})

exports.submitDistance = (distance) => ({
    "type": "flex",
    "altText": `${distance} KM. Great! Keep going! 👏🏼👏🏼👏🏼`,
    "contents": {
      "type": "bubble",
      "size": "micro",
      "hero": {
        "type": "image",
        "url": "YOUR-IMAGE",
        "size": "full",
        "aspectRatio": "16:9",
        "aspectMode": "cover"
      },
      "body": {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "text": `${distance} KM`,
            "weight": "bold",
            "size": "3xl"
          },
          {
            "type": "text",
            "text": "Great! Keep going!",
            "weight": "bold",
            "size": "sm",
            "color": "#888888"
          }
        ]
      },
      "footer": {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "button",
            "action": {
              "type": "postback",
              "label": "I'm done",
              "data": "finish",
              "displayText": "I'm done"
            },
            "style": "secondary"
          }
        ]
      }
    }
})

exports.leaderboardHeader = (body,date) => ({
    "type": "flex",
    "altText": "Leaderboard 🏆",
    "contents": {
        "type": "bubble",
        "size": "mega",
        "hero": {
            "type": "image",
            "url": "https://images.unsplash.com/photo-1552674605-db6ffd4facb5",
            "size": "full",
            "aspectRatio": "21:9",
            "aspectMode": "cover"
        },
        "body": {
            "type": "box",
            "layout": "vertical",
            "spacing": "md",
            "contents": [
                {
                    "type": "text",
                    "text": "Leaderboard 🏆",
                    "size": "xl",
                    "weight": "bold"
                },
                {
                    "type": "text",
                    "text": date,
                    "margin": "none",
                    "size": "xs",
                    "color": "#aaaaaa"
                },
                {
                    "type": "box",
                    "layout": "vertical",
                    "spacing": "sm",
                    "contents": body
                },
                {
                    "type": "text",
                    "text": "🏅 Good Job, Keep Going!",
                    "wrap": true,
                    "color": "#aaaaaa",
                    "size": "xxs"
                }
            ]
        }
    }
})

exports.leaderboardBody = (pictureUrl, displayName, totalDistance) => ({
    "type": "box",
    "layout": "baseline",
    "contents": [
        {
            "type": "icon",
            "url": pictureUrl,
            "size": "lg"
        },
        {
            "type": "text",
            "text": displayName,
            "weight": "bold",
            "margin": "sm",
            "flex": 0
        },
        {
            "type": "text",
            "text": totalDistance + " KM",
            "align": "end",
            "color": "#aaaaaa",
            "size": "sm"
        }
    ]
})