ihh / carder Goto Github PK

Lightweight wrapper to Gajus Kuizinas' Swing for building card-swiping interactive fiction on the web.

CSS 2.62% HTML 0.46% JavaScript 96.92%

carder's Issues

Add dealer limits

Dealer should be able to limit the number of times a particular card is dealt.

It should also be possible to specify that a card should not be dealt until (or after) N turns in the current stage (total, or just this visit) or game.

{limit,minTurnsAtStage,maxTurnsAtStage,minTotalTurnsAtStage,maxTotalTurnsAtStage,minTurns,maxTurns}

Implementation will require that gameState contains...

a counter for each card that has a limit property
a turn counter that is an array the same length as gameState.stage
a turn counter that is an object keyed by stage
a global turn counter

Auto-shrink card, hint, and preview text to fit containers

A possible workaround is to autoshrink the text until there is no overflow, and set height:100% on inner.
If shrinking the text fails to prevent overflow, add height: 0; min-height: 100%.

Can test for overflow by comparing scrollHeight and clientHeight on inner.

Avoid repeating cards

To do this "properly":

maintain an array gameState.history.byStage, same length as gameState.stage and gameState.turns.byStage, of the cardIndex-es of all cards visited at each stage
a card can then have an optional cool property, signifying a cooling-off period; if set, then this represents the number of other cards that must be dealt at that stage before the card can be dealt again

Disallow landscape orientation

Print a “Please rotate” message instead

Add a status page

Give Carder a status callback that returns HTML for status page.

Try a flip animation to transition between cardtable & status.

Overflow grief

To prevent cards with lots of text overflowing past the bottom of the screen, try the following magic CSS on .inner

height: 0;
min-height: 100%;

However, this breaks iOS Safari (the cardtable overflows beyond the bottom of the screen even for cards with minimal text),
AND it prevents .carder-bottom-pad from working.

To complicate matters further, I can't seem to reproduce this bug on desktop in responsive mode in Chrome or Safari. But it shows up on the device.

Reproduce with the following files in the repo:

bug.html long text, magic CSS, overflows on mobile, fine on desktop
bug2.html short text, magic CSS, overflows on mobile, fine on desktop
bug3.html short text, no magic CSS, fine on mobile and desktop

<html>
  <head>
    <style>
      html, body {
	  height: 100%;
	  overflow: hidden;
	  margin: 0;
	  padding: 0;
      }

      body {
	  position: relative;
      }

      .page {
	  background: midnightblue;

	  width: 100%;
	  height: 100%;
	  display: flex;
	  flex-direction: row;
	  justify-content: center;
      }

      .central-column {
	  display: flex;
	  flex-direction: column;
      }

      .bottombar {
	  background: orange;

	  height: 80px;
	  z-index: 30;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-around;

	  font-size: 2vh;
	  text-align: center;
      }

      .foo {
	  background: pink;
	  position: relative;
	  flex-grow: 1;

	  display: flex;
	  flex-direction: column;
      }

      .foo,
      .central-column {
	  width: 800px;
	  max-width: 800px;
	  height: 100%;
      }

      .foo .topbar {
	  background: red;
	  position: relative;
	  display: flex;
	  flex-direction: row;
	  justify-content: space-around;
	  min-height: 90px;
	  height: 15vh;
	  max-height: 90px;
      }

      .foo .cardbar {
	  position: relative;
	  
	  flex-grow: 1;
	  display: flex;
	  flex-direction: column;

	  padding: 4px 20px;
      }

      .foo .cardtable {
	  background: green;
	  
	  position: relative;

	  flex-grow: 1;
	  display: flex;
	  flex-direction: column;

	  padding: 4px;
      }

      .foo .stack {
	  flex-grow: 1;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-around;
	  z-index: 6;
	  position: relative;
	  padding: 4px 20px;
      }

      .foo .stack .card {
	  background: cyan;
	  position:relative;
	  max-height: 160vw;
	  flex-grow: 1;
	  display: flex;
	  flex-direction: column;
	  overflow: hidden;
	  border-radius: 2vh;
	  border-width: 1px;
	  border-style: solid;
      }

      .foo .stack .card .inner {

	  position: relative;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-evenly;

	  height: 0;
	  min-height: 100%;

	  text-align: center;
	  overflow: hidden;

	  margin: 4px;
      }
    </style>
  </head>

  <body>
    <div class="page">
      <div class="central-column">
	<div class="foo">
	  <div class="topbar">
	  </div>
	  <div class="cardbar">
	    <div class="cardtable">
	      <div class="stack">
		<div class="card">
		  <div class="inner">
		    <div class="content">
		      this text should be vertically centered in the cyan box
		    </div>
		  </div>
		</div>
	      </div>
	    </div>
	  </div>
	  <div class="bottombar"></div>
	</div>
      </div>
    </div>
  </body>

</html>

ihh / carder Goto Github PK

carder's Issues

Add dealer limits

Auto-shrink card, hint, and preview text to fit containers

Avoid repeating cards

Disallow landscape orientation

Add a status page

Overflow grief

Carder: gameState should persist via localStorage

Move arrows & hand animation lower

Implement card priority

Card text not centered in Safari

Vertically center arrow hint text

Map swipe gestures on MacOS to throw events

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent