birthday-bingo

Play a game of Birthday Bingo!

The player will see a list of friends participating on the left of a bingo board populated with any of our current offerings. Pretty simple, they have to guess the name of the friend that put the clue in the bingo tile by clicking on the dice symbol or a picture if present. On a successful bingo you can configure a remote prize! (Eg: A video/link/message/both/all) - if they guess the entire board right, they unlock the final prize.

Made especially for those honouring the stay home stay safe policy! Share your screen with your friends and have fun with this little game of Birthday Bingo (:

Current offerings

Select what kind of bingo you want or mix and match! Current offerings are:

1. Song Bingo -> song
   Friends will choose songs for the player to guess. The bingo tile will have the name of the song, its artist, and a quote from the song. Click on the dice symbol in the tile to guess the name of the person who chose this song! The player will also be able to click a play button to play this song via youtube if they need a refresher!
   eg: birthday-bingo.azurewebsites.net
   
2. Quote Bingo -> quote
   Friends will choose quotes for the player to guess. The bingo tile will consist of the quote - and the player will click on the dice symbol in the tile to guess the name of the person who put in the quote for them.
   eg: quote-bingo.azurewebsites.net
   
3. Photo Bingo -> photo
   Friends will choose photos of themselves with the player, and also save a version in which they have cropped themselves out. Pretty simple, the player can share their screen and guess the person who was in that picture with them, and click on the picture to enter their guess.
   eg: photo-bingo.azurewebsites.net
   

Front page setup

If you would like to add pictures on the front page:

1. Add their location to this file
   

{
    "url": "data/index/name-of-photo.jpg"
}

2. Add the pictures in this location in the repo

Configure your bingo!

1. Locate the file bingo.txt and the images folder as this is where you will be putting most of your data

2. Each bingo tile can contain any of the current offerings Collect a json array of data from friends and family with the following recommended fields:
   Each bingo tile may contain any of the three current offerings -
   

a. For a song

{
    "id": 123,
    "type": "song",
    "friend": "name-of-person-choosing-song",
    "song": "name-of-song",
    "artist": "songs-artist",
    "quote": "a-quote-from-the-song",
    "link": "youtube-hash"
}

b. For a quote

{
    "id": 123,
    "type": "quote",
    "friend": "name-of-person-providing-quote",
    "quote": "quote-goes-here"
}

c. For a photo...

{
    "id": 123,
    "type": "photo",
    "friend": "name-of-friend-in-photo",
    "photo_cropped": "data/images/name-of-friend-in-photo_cropped.jpg",
    "photo_full": "data/images/name-of-friend-in-photo_full.jpeg"
}

3. Populate this file
   a. put the json array under data1
   b. the number of columns in the bingo grid under N1
   c. the number of rows in the bingo grid under M1
   d. put the number of wrong guesses you would like to allow before the person is asked if they want to give up under wrong_guess_max1
   e. OPTIONAL: If you would like to change the theme of the website, tackle this file.
   f. OPTIONAL: If you are interested, you can also change values in the self explanatory fields wrong_guess_color, correct_guess_color, specific_instructions1

4. If you have any pictures for photo bingo, put them in the images folder and verify that the image name exactly matches the one you put in the json in step 2

5. Configure a prize!

6. Upload this code to a web app server (we chose Microsoft Azure)

7. BINGO! Send your website link to the birthday boy/girl and get on a video call, ask them to share their screen, and play this game of bingo!

Configuring the prize

Your prize can be a youtube video, and/or a google drive video or picture, and/or a simple link to another webpage, and/or an image used from any online website (Be cautious of copyright issues). It can be one or two or all of them. Exactly how to configure this is described below. If you have any trouble with image dimensions, change the width and height allowance in this file.

1. Youtube links
   a. Navigate to the video you want to embed as a prize. Eg: Link = https://www.youtube.com/watch?v=_A70SfWAO18
   b. Copy the part of the link that comes after v= (_A70SfWAO18 in this case)
   c. Put it in this file in the youtube_video_hash variable (enclosed in quotes)

2. Google drive video/picture
   a. Navigate to the video/picture you want to embed as a prize. Open it in a new window. You will see a link eg: https://drive.google.com/file/d/1J_sO-qjA4_42r_aDT-F1EAebZiSSo98u/view
   b. Copy the part of the link that comes between /d/ and /view (1J_sO-qjA4_42r_aDT-F1EAebZiSSo98u in this case)
   c. Put it in this file in the google_drive_media_hash variable (enclosed in quotes)

3. Simple link to another website
   a. Put the link in this file in the hyperlink variable (enclosed in quotes)
   b. Put the text you want the link to appear as in the same file in the hyperlink_text variable (enclosed in quotes)
   

4. Simple image from another website
   a. Put the link in this file in the google_image_link variable (enclosed in quotes)
   

Owner

Saloni Goel, 2020

Credits

Abhinav Nair and Shivom Thakkar, 2020

References:

1. https://gist.github.com/wernsey/faaed0e409efb236642aa621f9e4e623
2. https://www.w3schools.com/
3. https://color.adobe.com/create/color-wheel
4. https://fonts.google.com/
5. https://fontawesome.com/