@oddsmith/ui 0.0.0

package/docs/prism-okaidia.css

@@ -0,0 +1,123 @@
+/**
+ * okaidia theme for JavaScript, CSS and HTML
+ * Loosely based on Monokai textmate theme by http://www.monokai.nl/
+ * @author ocodia
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #f8f8f2;
+	background: none;
+	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	font-size: 1em;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+	border-radius: 0.3em;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #272822;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #8292a2;
+}
+
+.token.punctuation {
+	color: #f8f8f2;
+}
+
+.token.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #f92672;
+}
+
+.token.boolean,
+.token.number {
+	color: #ae81ff;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #a6e22e;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+	color: #f8f8f2;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.function,
+.token.class-name {
+	color: #e6db74;
+}
+
+.token.keyword {
+	color: #66d9ef;
+}
+
+.token.regex,
+.token.important {
+	color: #fd971f;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}

package/docs-src/_README.md

@@ -0,0 +1,7 @@
+This directory containts the sources for the static site contained in the /docs/ directory. The site is based on the [eleventy](11ty.dev) static site generator.
+
+The site is intended to be used with GitHub pages. To enable the site go to the GitHub settings and change the GitHub Pages "Source" setting to "master branch /docs folder".
+
+To view the site locally, run `npm run docs:serve`.
+
+To edit the site, add to or edit the files in this directory then run `npm run docs` to build the site. The built files must be checked in and pushed to GitHub to appear on GitHub pages.

package/docs-src/_data/api.11tydata.js

@@ -0,0 +1,8 @@
+const fs = require('fs');
+
+module.exports = () => {
+  const customElements = JSON.parse(fs.readFileSync('custom-elements.json', 'utf-8'));
+  return {
+    customElements,
+  };
+};

package/docs-src/_includes/example.11ty.js

@@ -0,0 +1,35 @@
+const page = require('./page.11ty.js');
+const relative = require('./relative-path.cjs');
+
+/**
+ * This template extends the page template and adds an examples list.
+ */
+module.exports = function(data) {
+
+  return page({
+    ...data,
+    content: renderExample(data),
+  });
+};
+
+const renderExample = ({name, content, collections, page}) => {
+  return `
+    <h1>Example: ${name}</h1>
+    <section class="examples">
+      <nav class="collection">
+        <ul>
+          ${collections.example === undefined
+              ? ''
+              : collections.example.map((post) => `
+                  <li class=${post.url === page.url ? 'selected' : ''}>
+                    <a href="${relative(page.url, post.url)}">${post.data.description.replace('<', '&lt;')}</a>
+                  </li>
+                `).join('')}
+        </ul>
+      </nav>
+      <div>
+        ${content}
+      </div>
+    </section>
+  `;
+};

package/docs-src/_includes/footer.11ty.js

@@ -0,0 +1,6 @@
+module.exports = function () {
+  return `
+<footer>
+  <p>Oddsmith — brandable web components for gaming</p>
+</footer>`;
+};

package/docs-src/_includes/header.11ty.js

@@ -0,0 +1,7 @@
+module.exports = function () {
+  return `
+<header>
+  <h1>&lt;sf-leaderboard&gt;</h1>
+  <h2>Oddsmith web components</h2>
+</header>`;
+};

package/docs-src/_includes/nav.11ty.js

@@ -0,0 +1,11 @@
+const relative = require('./relative-path.cjs');
+
+module.exports = function({page}) {
+  return `
+<nav>
+  <a href="${relative(page.url, '/')}">Home</a>
+  <a href="${relative(page.url, '/examples/')}">Examples</a>
+  <a href="${relative(page.url, '/api/')}">API</a>
+  <a href="${relative(page.url, '/install/')}">Install</a>
+</nav>`;
+};

package/docs-src/_includes/page.11ty.js

@@ -0,0 +1,32 @@
+const header = require('./header.11ty.js');
+const footer = require('./footer.11ty.js');
+const nav = require('./nav.11ty.js');
+const relative = require('./relative-path.cjs');
+
+module.exports = function(data) {
+  const {title, page, content} = data;
+  return `
+<!doctype html>
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>${title}</title>
+    <link rel="stylesheet" href="${relative(page.url, '/docs.css')}">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
+    <link href="${relative(page.url, '/prism-okaidia.css')}" rel="stylesheet" />
+    <script type="module" src="${relative(page.url, '/components.bundle.js')}"></script>
+  </head>
+  <body>
+    ${header()}
+    ${nav(data)}
+    <div id="main-wrapper">
+      <main>
+        ${content}
+      </main>
+    </div>
+    ${footer()}
+  </body>
+</html>`;
+};

package/docs-src/_includes/relative-path.cjs

@@ -0,0 +1,9 @@
+const path = require('path').posix;
+
+module.exports = (base, p) => {
+  const relativePath = path.relative(base, p);
+  if (p.endsWith('/') && !relativePath.endsWith('/') && relativePath !== '') {
+    return relativePath + '/';
+  }
+  return relativePath;
+};

package/docs-src/api.11ty.js

@@ -0,0 +1,85 @@
+/**
+ * This page generates its content from the custom-element.json file as read by
+ * the _data/api.11tydata.js script.
+ */
+module.exports = class Docs {
+  data() {
+    return {
+      layout: 'page.11ty.js',
+      title: '<sf-leaderboard> ⌲ Docs',
+    };
+  }
+
+  render(data) {
+    const customElements = data.api['11tydata'].customElements;
+    const tags = customElements.tags;
+    return `
+      <h1>API</h1>
+      ${tags.map((tag) => `
+        <h2>&lt;${tag.name}></h2>
+        <div>
+          ${tag.description}
+        </div>
+        ${renderTable(
+          'Attributes',
+          ['name', 'description', 'type', 'default'],
+          tag.attributes)}
+        ${renderTable(
+          'Properties',
+          ['name', 'attribute', 'description', 'type', 'default'],
+          tag.properties)}  
+        ${/*
+           * Methods are not output by web-component-analyzer yet (a bug), so
+           * this is a placeholder so that at least _something_ will be output
+           * when that is fixed, and element maintainers will hopefully have a
+           * signal to update this file to add the neccessary columns.
+           */
+          renderTable(
+          'Methods',
+          ['name', 'description'],
+          tag.methods)}
+        ${renderTable(
+          'Events',
+          ['name', 'description'],
+          tag.events)}    
+        ${renderTable(
+          'Slots',
+          ['name', 'description'],
+          tag.slots)}  
+        ${renderTable(
+          'CSS Shadow Parts',
+          ['name', 'description'],
+          tag.cssParts)}
+        ${renderTable(
+          'CSS Custom Properties',
+          ['name', 'description'],
+          tag.cssProperties)}
+        `).join('')}
+    `;
+  }
+}
+
+/**
+ * Renders a table of data, plucking the given properties from each item in
+ * `data`.
+ */
+const renderTable = (name, properties, data) => {
+  if (data === undefined) {
+    return ''
+  }
+  return `
+    <h3>${name}</h3>
+    <table>
+      <tr>
+        ${properties.map((p) => `<th>${capitalize(p)}</th>`).join('')}
+      </tr>
+      ${data.map((i) => `
+        <tr>
+          ${properties.map((p) => `<td>${i[p]}</td>`).join('')}
+        </tr>
+      `).join('')}
+    </table>
+  `
+};
+
+const capitalize = (s) => s[0].toUpperCase() + s.substring(1);

package/docs-src/bundle.ts

@@ -0,0 +1,9 @@
+/**
+ * Registers components for the static docs site.
+ * Bundled to docs/components.bundle.js by vite.docs.config.ts.
+ */
+import { DEFAULT_SF_LEADERBOARD_THEME } from '../src/theme/default-theme.js';
+import { injectTheme } from '../src/theme/inject-theme.js';
+import '../src/components/sf-leaderboard/sf-leaderboard.js';
+
+injectTheme(DEFAULT_SF_LEADERBOARD_THEME);

package/docs-src/docs.css

@@ -0,0 +1,162 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  color: #333;
+  font-family: 'Open Sans', arial, sans-serif;
+  min-width: min-content;
+  min-height: 100vh;
+  font-size: 18px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+#main-wrapper {
+  flex-grow: 1;
+}
+
+main {
+  max-width: 1024px;
+  margin: 0 auto;
+}
+
+a:visited {
+  color: inherit;
+}
+
+header {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 360px;
+  margin: 0;
+  background: linear-gradient(0deg, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
+  color: white;
+}
+
+footer {
+  width: 100%;
+  min-height: 120px;
+  background: gray;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 12px;
+  margin-top: 64px;
+}
+
+h1 {
+  font-size: 2.5em;
+  font-weight: 400;
+}
+
+h2 {
+  font-size: 1.6em;
+  font-weight: 300;
+  margin: 64px 0 12px;
+}
+
+h3 {
+  font-weight: 300;
+}
+
+header h1 {
+  width: auto;
+  font-size: 2.8em;
+  margin: 0;
+}
+
+header h2 {
+  width: auto;
+  margin: 0;
+}
+
+nav {
+  display: grid;
+  width: 100%;
+  max-width: 100%;
+  grid-template-columns: repeat(auto-fit, 240px);
+  justify-content: center;
+  border-bottom: 1px solid #efefef;
+}
+
+nav > a {
+  color: #444;
+  display: block;
+  flex: 1;
+  font-size: 18px;
+  padding: 20px 0;
+  text-align: center;
+  text-decoration: none;
+}
+
+nav > a:hover {
+  text-decoration: underline;
+}
+
+nav.collection {
+  border: none;
+}
+
+nav.collection > ul {
+  padding: 0;
+  list-style: none;
+}
+
+nav.collection > ul > li {
+  padding: 4px 0;
+}
+
+nav.collection > ul > li.selected {
+  font-weight: 600;
+}
+
+nav.collection a {
+  text-decoration: none;
+}
+
+nav.collection a:hover {
+  text-decoration: underline;
+}
+
+section.columns {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 488px));
+  grid-gap: 48px;
+  justify-content: center;
+}
+
+section.columns > div {
+  flex: 1;
+}
+
+section.examples {
+  display: grid;
+  grid-template-columns: 240px minmax(400px, 784px);
+  grid-gap: 48px;
+  justify-content: center;
+}
+
+section.examples h2:first-of-type {
+  margin-top: 0;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+th {
+  font-weight: 600;
+}
+
+td, th {
+  border: solid 1px #aaa;
+  padding: 4px;
+  text-align: left;
+}

package/docs-src/examples/index.md

@@ -0,0 +1,15 @@
+---
+layout: example.11ty.js
+title: <sf-leaderboard> ⌲ Examples ⌲ Basic
+tags: example
+name: Basic
+description: Default leaderboard
+---
+
+<sf-leaderboard></sf-leaderboard>
+
+<h3>HTML</h3>
+
+```html
+<sf-leaderboard></sf-leaderboard>
+```

package/docs-src/index.md

@@ -0,0 +1,39 @@
+---
+layout: page.11ty.js
+title: <sf-leaderboard> ⌲ Home
+---
+
+# &lt;sf-leaderboard&gt;
+
+`<sf-leaderboard>` is a themeable leaderboard web component built with Lit. Use it in any app that supports custom elements.
+
+## As easy as HTML
+
+<section class="columns">
+  <div>
+
+`<sf-leaderboard>` is a custom element. Drop it anywhere you use HTML.
+
+```html
+<sf-leaderboard></sf-leaderboard>
+```
+
+  </div>
+  <div>
+
+<sf-leaderboard></sf-leaderboard>
+
+  </div>
+</section>
+
+## With npm
+
+Install the package and import the component entry so it registers itself:
+
+```js
+import '@oddsmith/core/sf-leaderboard';
+```
+
+```html
+<sf-leaderboard></sf-leaderboard>
+```

package/docs-src/install.md

@@ -0,0 +1,28 @@
+---
+layout: page.11ty.js
+title: <sf-leaderboard> ⌲ Install
+---
+
+# Install
+
+Components are published as ES modules from the `@oddsmith/core` package.
+
+## Local installation
+
+```bash
+npm i @oddsmith/core
+```
+
+```js
+import '@oddsmith/core/sf-leaderboard';
+```
+
+## From `dist/` after building this repo
+
+```js
+import '../dist/sf-leaderboard/index.js';
+```
+
+```html
+<sf-leaderboard></sf-leaderboard>
+```

package/docs-src/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Oddsmith Core — dev</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700;900&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="/main.css" />
+  </head>
+  <body>
+    <!-- Shell mounts here; only main.ts runs before any component code loads -->
+    <div id="app"></div>
+    <script type="module" src="/main.ts"></script>
+  </body>
+</html>

package/karma.conf.cjs

@@ -0,0 +1,24 @@
+const {createDefaultConfig} = require('@open-wc/testing-karma');
+const merge = require('deepmerge');
+
+module.exports = (config) => {
+  config.set(
+    merge(createDefaultConfig(config), {
+      frameworks: ['mocha', 'chai'],
+      client: {
+        mocha: {ui: 'tdd'},
+      },
+      files: [
+        {
+          pattern: config.grep ? config.grep : 'test/**/*_test.js',
+          type: 'module',
+        },
+      ],
+      // See the karma-esm docs for all options
+      esm: {
+        nodeResolve: true,
+      },
+    })
+  );
+  return config;
+};