Tinder

Demo: https://campaigns.lucky-cycle.com/game-demo/jeu/tinder

1. Configuration

2. Options

3. Assets

Configuration

JSON

{
  "options": {
    "background_image": "",
    "background_color": "transparent",
    "half_shadow": false,
    "display_arrows": true,
    "display_thumbs": true,
    "thumbs_duration": 1500,
    "questions": {
      "en": [
        {
          "q": "Do you like this?",
          "r": "both",
          "left": "I like 👍",
          "right": "I don't like 👎",
          "card_front_url": "https://statics.lucky-cycle.com/files/_games/tinder/question1-1.png",
          "card_front_background_color": "white",
          "card_front_right_url": "",
          "card_front_right_background_color": "",
          "question_color": "white",
          "question_background_color": "rgba(14, 52, 16, .25)",
          "button_color": "white",
          "button_background_color": "rgba(14, 52, 16, .75)"
        },
        {
          "q": "Which do you prefer?",
          "r": "right",
          "left": "💕💕",
          "right": "🤫🐑",
          "card_front_url": "https://statics.lucky-cycle.com/files/_games/tinder/question2-1.png",
          "card_front_background_color": "white",
          "card_front_right_url": "https://statics.lucky-cycle.com/files/_games/tinder/question2-2.png",
          "card_front_right_background_color": "white",
          "question_color": "white",
          "question_background_color": "rgba(173, 85, 14, .75)",
          "button_color": "white",
          "button_background_color": "rgba(173, 85, 14, .25)"
        }
      ],
      "fr": [
        {
          "q": "Aimez-vous ceci ?",
          "r": "both",
          "left": "J'aime 👍",
          "right": "Je n'aime pas 👎",
          "card_front_url": "https://statics.lucky-cycle.com/files/_games/tinder/question1-1.png",
          "card_front_background_color": "white",
          "card_front_right_url": "",
          "card_front_right_background_color": "",
          "question_color": "white",
          "question_background_color": "rgba(14, 52, 16, .25)",
          "button_color": "white",
          "button_background_color": "rgba(14, 52, 16, .75)"
        },
        {
          "q": "Que préférez-vous ?",
          "r": "right",
          "left": "💕💕",
          "right": "🤫🐑",
          "card_front_url": "https://statics.lucky-cycle.com/files/_games/tinder/question2-1.png",
          "card_front_background_color": "white",
          "card_front_right_url": "https://statics.lucky-cycle.com/files/_games/tinder/question2-2.png",
          "card_front_right_background_color": "white",
          "question_color": "white",
          "question_background_color": "rgba(173, 85, 14, .75)",
          "button_color": "white",
          "button_background_color": "rgba(173, 85, 14, .25)"
        }
      ],
      "nl": [
        {
          "q": "Vind je dit leuk?",
          "r": "both",
          "left": "Ja 👍",
          "right": "Nee 👎",
          "card_front_url": "https://statics.lucky-cycle.com/files/_games/tinder/question1-1.png",
          "card_front_background_color": "white",
          "card_front_right_url": "",
          "card_front_right_background_color": "",
          "question_color": "white",
          "question_background_color": "rgba(14, 52, 16, .25)",
          "button_color": "white",
          "button_background_color": "rgba(14, 52, 16, .75)"
        },
        {
          "q": "Wat heb je liever?",
          "r": "right",
          "left": "💕💕",
          "right": "🤫🐑",
          "card_front_url": "https://statics.lucky-cycle.com/files/_games/tinder/question2-1.png",
          "card_front_background_color": "white",
          "card_front_right_url": "https://statics.lucky-cycle.com/files/_games/tinder/question2-2.png",
          "card_front_right_background_color": "white",
          "question_color": "white",
          "question_background_color": "rgba(173, 85, 14, .75)",
          "button_color": "white",
          "button_background_color": "rgba(173, 85, 14, .25)"
        }
      ]
    },
    "default_lang": "fr"
  },
  "texts": {
    "en": {},
    "fr": {},
    "nl": {}
  },
  "sounds": {},
  "images": {
    "arrow_left": GAME_URL + "/assets/tinder/arrow_left.png",
    "arrow_right": GAME_URL + "/assets/tinder/arrow_right.png",
    "thumbs_up": GAME_URL + "/assets/tinder/good.png",
    "thumbs_down": GAME_URL + "/assets/tinder/bad.png",
    "rewards": {}
  }
}

Options

Key	Type	Explanation	Default
background_color	String	Background color of the game.	"transparent"
background_image	String	Background image of the game (will be on top of the bg_color).	""
half_shadow	Boolean	Display a shadow overlay on the right half of the card.	false
display_arrows	Boolean	Display the arrows icons on the answers area.	true
display_thumbs	Boolean	Display the thumbs visuals (after a submission).	true
thumbs_duration	Integer	Duration of the thumbs' animation (in milliseconds). Only used if "display_thumbs" is set to true.	1500
questions > q	String	Question to be asked to the player.	"..."
questions > r	String	Indicate the good answer (can either be "left", "right" or "both").	"both"
questions > left	String	Left answer (displayed on the clickable zone).	"..."
questions > right	String	Right answer (displayed on the clickable zone).	"..."
card_front_background_color / _right_background_color	String	Background color of the card(s).	white / ""
question_color / _background_color	String	Color / background color of the question.	white / rgb(...)
button_color / _background_color	String	Color / background color of the answers zone.	white / rgb(...)

Assets

Key	Size	Explanation	Default
questions > card_front_url / _right_url	550 x 580px (full card) or 275 x 580px (half card).	Visual(s) of the card. Can either be single, or two halves (vertically).	/assets/tinder/question1-1.png / /assets/tinder/question2-1.png
arrow_left / arrow_right	150 x 150px (can have other sizes)	Visuals on the sides of the labels.	/assets/tinder/arrow_left.png / /assets/tinder/arrow_right.png
thumbs_up / thumbs_down	220 x 220px (can have other sizes)	Visuals displayed after submitting an answer.	/assets/tinder/good.png / /assets/tinder/bad.png