diff --git a/index.html b/index.html index 8637a86..c83cfe6 100644 --- a/index.html +++ b/index.html @@ -5,10 +5,65 @@ Lobo +

Lobo

-

Hi

+ +
+
+ +
+ +
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+ +
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+
+ diff --git a/package.json b/package.json index d9ca468..f6be9df 100644 --- 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 index de09c9b..3fc5b22 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -220,6 +220,12 @@ importers: 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 @@ packages: 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'} @@ -1706,6 +1721,13 @@ snapshots: 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: {} oxfmt@0.61.0(vite-plus@0.2.8(@voidzero-dev/vite-plus-core@0.2.8(typescript@6.0.3))(typescript@6.0.3)): diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 00a253f..f4e1165 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -3,12 +3,12 @@ catalog: 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/components/x-card.ts b/src/components/x-card.ts new file mode 100644 index 0000000..bf360c4 --- /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) + }) + }) diff --git a/src/main.ts b/src/main.ts index cab743a..12adf17 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1 +1 @@ -import './style.css' +import '#components/x-card.ts' diff --git a/src/style.css b/src/style.css index 895da94..9b211f0 100644 --- a/src/style.css +++ b/src/style.css @@ -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; +}