nickpunt / storysynth Goto Github PK

• Randomize or not on a per card/act basis using number (3R for 3rd deck that should be randomized)
• Add tags for cards (e.g. politics for card that establishes politics) - this could also be variables
• Add prerequisites for randomized cards, so they're not shown until tag is set (e.g. politics)

Present DOM includes a few unnecessary divs (⭐️):

body
  #app
    div ⭐️
      .navbar
      .non-footer-content
        .roomLink-section
        div ⭐️
          .game-room
            .full-page-background
            div
              style
            div 📝
              .before-game-card
                .game-meta // heading
              .card.main-card
                .deck-number ⭐️
                  .card-body
                    div ⭐️
                      p
                        // contents of game card
              .after-game-card
      footer

Changes that could be made without breaking anything:

• get rid of div under #app
• get rid of div under .non-footer-content that holds .game-room
• move .deck-number up to .game-room and get rid of its div
• get rid of div under .card-body
• 📝 add class to div under .game-room that contains card items, suggest .card-holder
  Ideally the p tag in .card-body also wouldn't exist for content that was custom html.

After:

body
  #app
    .navbar
    .non-footer-content
      .roomLink-section
      .game-room
        .full-page-background
        div
          style
        .card-holder 📝
          .before-game-card
            .game-meta // heading
          .card.main-card
            .card-body
              p
                // contents of game card
          .after-game-card
    footer

Requirements

• No breaking changes to games, works with all existing ones (possibly move some things into options though)
• Mobile-first, same layout mobile/desktop, but prog enhance for desktop
• Scales well for different mobile sizes
• Improved button layouts
• Adopt template approach to card styles

Basic Layout

Incorporate changes from colony css that are storysynth specific

• mobile breakpoints for small & large mobile that change button sizes & margins

Basic card size requirements

This is for builders of cards to know what to expect

• Card template area is some size min/max
• Card template top 40px shouldn't contain anything important (due to header)
• Card template background goes below buttons
• Font sizes in rems for better scaling?

Better Theming

Can support better theming with variables and a few other changes.

• Add variables for --bg-roomlink, --bg-card, --text-primary, --text-secondary and probably a bunch more
• Let users set button color overrides for individual games, in case their backgrounds are different colors. Problem is svg's are inlined so they cannot be use fill css to target color, so need to refactor buttons

Button Changes

This is to change StorySynth existing buttons to the new button style

Navbar fix

The navbar has wonky padding and bootstrap stuff that is brittle and needs fixing. Should get css grid'd or something.

Heading Refactor

Need to refactor and combine game-link, player count, and before-game-content together into one unified system. This would then allow redesign to accommodate the info box on mobile.

• .game-room header for future player turn (top left) and info button (top right)
• Incorporate Powered by Storysynth here instead, removing footer

Functionality adds (work w Randy)

• Add extensions button ^ to .after-game-card left corner, which when pressed opens scrollable extensions widgets (possibly below card, or in modal)
• Move < & > buttons to .after-game-card
• Move reshuffle, x-card default, game info into .before-game-card
• Mobile: On-click top right info button opens full game info
• If you're on the last card of a given deck the next button should be next act button
• Variable colors!

Later

• Extensions in lower left
• Extensions on per-card basis
• Add extension for 'Prompts' which show possible content
• Add extension for 'X Card super accessible'
• Add extension for collecting / viewing past cards (e.g. planet we selected, ship options we selected)

Functionality

• Specify link to external css and js files: presently you must copy css/js in manually, which adds a few steps to developing layout. If it linked to a file it'd be quicker to develop.
• Cards may auto-advance (user inserted js?) vm.$children[0].$refs.shuffled.nextCard()
• Bug: card-body class added twice

Add Classes

• Each card can have a type or template, which adds the class to the card .card-%type%. This would allow specifying custom colors and layouts for a given template once, rather than per card. (See #11)
• Each card has a unique name, which adds the class to the card .card-%name%.
• H1 Title
• Prev/Next and bottom controls

Layout Refactor

• Header includes Title, Link, Players, and Powered by Storysynth
• Main body is full height, letting content bleed over
• Recommend grid layout, moving top and bottom buttons out of card layout into header/footer areas

Current Structure

#app.style-template-undefined
  .navbar
  .non-footer-content
    .roomLink-section
      .game-room.container.shuffled
        .full-page-background
        div
          .game-meta
          .mb-4 (standard bootstrap class)
            .card.main-card.shadow etc
              .card-body
                div
                  h1
                  p
          .btn-container
  footer

ideal layout

    .navbar
    .non-footer-content
      .roomLink-section
        .game-room
          .full-page-background
          .before-game-card
            .game-meta
            .card-navigation-buttons
          .game-card
          .after-game-card
            .extension-lower (extensions. But should they be here in an absolute positioned element?)
    footer

Add the ability to specify a template within the Google sheet.

Why

• Easier to create cards with less boilerplate HTML
• Need to be able to set card background deeper in DOM

things

• Turn white card with box-shadow into default template
• Come up with default classes for templates
• Come up with some helper classes for positioning items in templates
• Let creator specify a template on a per-row basis in Google sheet
• Background images deeper in DOM, allowing overflow (e.g. a planet offset that breaks out of the card box)

• v1: Current player vs other players
• v2: named players
• As current player affordance to click next when done
• As non-current player a popup to say are you sure you want to take over if you click next/prev

Consider future possible states and potential affordances: individual, decide together

Prerequisite: #5

This moves the extensions to a tray below the main buttons.

• Add button to .game-meta-buttons to open tray. Use class .control-button-tray
• When button is clicked, add class .tray-open to .game-room. This does several things
  • Opens the vertical height of the tray to see extensions and scroll among them
  • Prevents scrolling in the background by adding position:fixed
  • Toggles control-button-tray background image to other direction for affordance
• Add place for extensions in after-game-card using new div with .extensions class
• Remake extension template, getting rid of old card-oriented classes:

.after-game-card
  .extensions  // all extensions
    .extension  // individual extension
      .row  // each option in a separate row including header

Consider whether extension tray should default open on desktop at certain heights