Giter VIP home page Giter VIP logo

carder's People

Contributors

ihh avatar

Stargazers

avatar avatar

Watchers

avatar avatar avatar

carder's Issues

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.

Card text not centered in Safari

To reproduce:

<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>

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

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

Implement card priority

Cards should have an optional numeric "priority", such that if any cards with nonzero weight have a priority defined, then only the cards with the maximum priority are eligible.

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.