Skip to content

getting-started.md

Latest commit

 

History

History
137 lines (108 loc) · 3.78 KB

getting-started.md

File metadata and controls

137 lines (108 loc) · 3.78 KB
Raw

Getting Started with Croupier

In this tutorial, you'll build a working swipe deck to review a list of articles. By the end, you'll have a functional Croupier instance running in your browser.

Before you start

  • A modern browser (Chrome 120+, Safari 17+, Firefox 121+)
  • A text editor
  • No build tools, no npm, no frameworks required

Step 1: Download Croupier

Download the IIFE bundle and save it alongside your HTML file:

  • IIFE (script tag): dist/croupier.js
  • CSS: src/croupier.css

Or use the CDN:

<script src="https://cdn.jsdelivr.net/gh/nicolaslima/croupier@v1.0.0/dist/croupier.js"></script>

Step 2: Create your HTML page

Create a file called index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Croupier</title>
  <link rel="stylesheet" href="path/to/croupier.css">
</head>
<body>
  <div id="deck"></div>
  <script src="path/to/croupier.js"></script>
  <script>
    // Your code goes here
  </script>
</body>
</html>

Step 3: Define your data

Each item in your array can be any shape you want. For this tutorial, we'll use articles:

const articles = [
  {
    title: 'SQLite is not a toy database',
    author: 'Anton Zhiyanov',
    summary: 'Why SQLite is a perfect tool for developers and data analysts.',
    url: 'https://antonz.org/sqlite-is-not-a-toy-database/',
  },
  {
    title: 'The Grug Brained Developer',
    author: 'Grug',
    summary: "A layman's guide to thinking like the self-aware smol brained.",
    url: 'https://grugbrain.dev/',
  },
  {
    title: 'Building a Second Brain',
    author: 'Forte Labs',
    summary: 'The proven method to organize your digital life.',
    url: 'https://fortelabs.com/blog/basboverview/',
  },
];

Step 4: Write a render function

The renderCard function tells Croupier how to display each item. It receives the item and a context object, and returns HTML or an HTMLElement:

function renderArticle(article) {
  return `
    <div style="padding:1.5rem;display:flex;flex-direction:column;height:100%;gap:0.5rem;">
      <h3 style="font-size:1.3rem;font-weight:700;">${article.title}</h3>
      <p style="color:#666;font-size:0.85rem;">by ${article.author}</p>
      <p style="flex:1;font-size:0.9rem;">${article.summary}</p>
    </div>
  `;
}

Step 5: Create the deck

Add this inside your <script> tag:

const deck = Croupier.create('#deck', {
  items: articles,
  renderCard: renderArticle,
  actions: {
    reject: { label: 'Skip',    keys: ['ArrowLeft'],  theme: 'negative' },
    accept: { label: 'Read',   keys: ['ArrowRight'], theme: 'positive' },
    save:   { label: 'Save',   keys: ['ArrowUp'],    theme: 'neutral' },
  },
  hooks: {
    onAction: ({ action, item }) => {
      console.log(`${action}: ${item.title}`);
    },
  },
});

Step 6: Open in your browser

Open index.html in your browser. You should see:

  1. A header with the Croupier brand and a counter ("1 of 3")
  2. A stack of cards showing your articles
  3. Action buttons (✕ ✓ ★) and a keyboard hint
  4. A stats bar at the bottom

Try these interactions:

  • Press → (ArrowRight) to accept an article
  • Press ← (ArrowLeft) to skip it
  • Press ↑ (ArrowUp) to save it for later
  • Press Z to undo your last action
  • Click and drag a card left, right, or up

What you built

You have a working swipe deck that presents articles one at a time and lets you triage them with keyboard, mouse, or touch. The same code works for any data shape — just change items and renderCard.

Next steps