From 487c869afbc2f6fa794793ba08acffc9ce84665e Mon Sep 17 00:00:00 2001 From: Mark Hernandez Date: Fri, 07 Aug 2026 05:22:13 +0000 Subject: [PATCH] Add card and board layout styles --- index.html | 57 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++- package.json | 5 ++++- pnpm-lock.yaml | 22 ++++++++++++++++++++++ pnpm-workspace.yaml | 8 ++++---- src/main.ts | 2 +- src/style.css | 52 ++++++++++++++++++++++++++++++++++++++++++++++++++++ src/components/x-card.ts | 14 ++++++++++++++ 7 file(s) changed, 153 insertion(s)(+), 7 deletion(s)(-) diff --git a/index.html b/index.html --- a/index.html +++ b/index.html @@ -5,10 +5,65 @@ Lobo +

Lobo

-

Hi

+ +
+
+ +
+ +
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+ +
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+
+ diff --git a/package.json b/package.json --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "private": true, "type": "module", "imports": { + "#components/*": "./src/components/*", "#core/*": "./src/core/*", "#lobo/*": "./src/lobo/*", "#types/*": "./src/types/*", @@ -16,7 +17,9 @@ "prepare": "vp config" }, "dependencies": { - "modern-normalize": "^3.0.1" + "modern-normalize": "^3.0.1", + "nanostores": "^1.4.2", + "nanotags": "^0.15.2" }, "devDependencies": { "typescript": "~6.0.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -220,6 +220,12 @@ modern-normalize: specifier: ^3.0.1 version: 3.0.1 + nanostores: + specifier: ^1.4.2 + version: 1.4.2 + nanotags: + specifier: ^0.15.2 + version: 0.15.2(nanostores@1.4.2) devDependencies: typescript: specifier: ~6.0.2 @@ -1020,6 +1026,15 @@ engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} hasBin: true + nanostores@1.4.2: + resolution: {integrity: sha512-Wxv8Roefr2nqtiRG0bnaFlpYqpIVtOEeJZHaH+4nGgOK1/7n6OHOuHCb/bhqrNQgZM8fyd0s1PqhdrJc9Ib44g==} + engines: {node: ^20.0.0 || >=22.0.0} + + nanotags@0.15.2: + resolution: {integrity: sha512-CGWafcNQ5aV/ghZmOvWkWGByzMiEGIioGzL/05et8krDzQIJBxUnA48TD1rbdcRtVx3xyLwMk9iNfM6touT1/g==} + peerDependencies: + nanostores: ^1.1.1 + obug@2.1.4: resolution: {integrity: sha512-4a+OsYv9UktOJKE+l1A4OufDgdRF9PifWj+tJnHURo/P+WOxpG4GzUFL9qCalmWauao6ogiG+QvnCovwPoyAWA==} engines: {node: '>=12.20.0'} @@ -1705,6 +1720,13 @@ mrmime@2.0.1: {} nanoid@3.3.17: {} + + nanostores@1.4.2: {} + + nanotags@0.15.2(nanostores@1.4.2): + dependencies: + '@standard-schema/spec': 1.1.0 + nanostores: 1.4.2 obug@2.1.4: {} diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -3,12 +3,12 @@ vitest: 4.1.9 vite-plus: latest overrides: - vite: "catalog:" - vitest: "catalog:" + vite: 'catalog:' + vitest: 'catalog:' peerDependencyRules: allowAny: - vite - vitest allowedVersions: - vite: "*" - vitest: "*" + vite: '*' + vitest: '*' diff --git a/src/main.ts b/src/main.ts --- a/src/main.ts +++ b/src/main.ts @@ -1,1 +1,1 @@ -import './style.css' +import '#components/x-card.ts' diff --git a/src/style.css b/src/style.css --- a/src/style.css +++ b/src/style.css @@ -1,1 +1,53 @@ @import url('../node_modules/modern-normalize/modern-normalize.css'); + +.board { + gap: 6rem; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: center; +} + +.card-preview { + filter: invert(); +} + +.hand-list { + display: flex; + flex-direction: column; + gap: 3rem; + overflow-x: hidden; +} + +.hand { + overflow-x: auto; +} + +.card-list { + list-style: none; + margin: 0; + padding: 0; + display: flex; + flex-direction: row; + gap: 1.5rem; +} +.card-list li:last-child { + padding-inline-end: 1.5rem; +} + +x-card { + color: #222; + background-color: #fff; + display: inline-flex; + padding: 1lh; + font-size: 1rem; + flex-direction: column; + aspect-ratio: 5 / 7; + border: 2px solid currentColor; + border-radius: 12.5%; + font-variant-numeric: tabular-nums; +} + +x-card [data-ref='display'] { + min-width: 3ch; +} diff --git a/src/components/x-card.ts b/src/components/x-card.ts new file mode 100644 --- /dev/null +++ b/src/components/x-card.ts @@ -0,0 +1,14 @@ +import { define } from 'nanotags' + +export const Card = define('x-card') + .withProps((p) => ({ + value: p.number(), + })) + .withRefs((p) => ({ + display: p.one('span'), + })) + .setup((ctx) => { + ctx.effect(ctx.props.$value, (value) => { + ctx.refs.display.textContent = String(value) + }) + }) -- tangled.sh