Skip to content

Latest commit

 

History

History
57 lines (43 loc) · 3.04 KB

README.md

File metadata and controls

57 lines (43 loc) · 3.04 KB
Raw

Archive of swipecardgame.com functions

preview: https://swipecardgame.webflow.io
live: https://swipecardgame.com

This is a collection of "components" that are on the Swipe👆 website, powered by Webflow.

Each component is separated into its own directory with a relevant script.js file.

Ideally, one would want to copy the contents of each file into their </body> box under the relevant page's settings.

Interactive Header: an interactive demonstration of how the game works.

What is this?

Users are asked to approve or deny a dating profile represented by a combination of cards. This section demonstrates how the main game works through a pleasantly animated interaction.

How was it done?

Driver: /InteractiveHeader/script.js

  1. Create an array of cards and pull card images from this repository.
  2. Initialize an array to represent the player's deck.
  3. Add cards to the deck using getDeck()
  4. render() renders 3 cards from the deck and creates HTML objects that are injected into the DOM with appendChild.
  5. shuffle() randomly shuffles the deck.
  6. A window event listener loads these functions on page load.
  7. Upon clicking "ew no" shuffle() runs which also re-runs render() to display a new set of cards.

About Modal: an about modal that displays information about the game.

What is this?

Users can press a button to toggle the display state of a modal that displays in-depth information about the game.

What does it look like?

AboutModalPreview

How was it done?

Driver: /AboutModal/script.js

  1. Use jQuery to target a class called aboutPopup.
  2. Toggle display state on a button click.

Match Modal: a modal that shows user their most recent match with a call to action.

What is this?

If a user clicks "oh yes" to confirm a match, a popup window opens up re-rendering the deck and presenting more information about the next game state.

What does it look like?

MatchModalPreview

How was it done?

Driver: /MatchModal/script.js

  1. Use jQuery to target a class called rightPopup
  2. Toggle display state on a button click.
  3. On first toggle, popup is displayed and saveDeck() runs, where deck is re-rendered inside popup with cloneNode(true).
  4. Upon clicking ok, deleteDeck(), where deck div is targeted via class name splashFlex and removed with removeChild.

Functions saveDeck() and deleteDeck() are in InteractiveHeader/script.js

Setting up on Webflow

  1. Copy code from script.js files for each component into the </body> box under page settings, ideally separating each script with <script> tags.
  2. Copy entirety of styles.css in /InteractiveHeader into the <head> box under page settings.
  3. Update styles as needed.