From eda2a948d921dce2559f2498fa07a45969faf358 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= Date: Thu, 22 Feb 2024 23:04:48 +0100 Subject: [PATCH] feat: navigation + keyboard, gamepad, camera tests --- package.json | 3 + pnpm-lock.yaml | 43 ++++- src/index.css | 38 ++++- src/lib/BackgroundGrid.svelte | 11 +- src/lib/Spinner.svelte | 22 +++ src/lib/TestCard.svelte | 30 +++- src/routes/+layout.svelte | 77 +++++++++ src/routes/+page.svelte | 75 ++++++++- src/routes/audio/+page.svelte | 0 src/routes/camera/+page.svelte | 259 +++++++++++++++++++++++++++++ src/routes/card/+page.svelte | 25 +++ src/routes/gamepad/+page.svelte | 163 ++++++++++++++++++ src/routes/keyboard/+page.svelte | 59 +++++++ src/routes/microphone/+page.svelte | 0 src/routes/mouse/+page.svelte | 0 src/routes/sensors/+page.svelte | 0 src/routes/video/+page.svelte | 0 17 files changed, 782 insertions(+), 23 deletions(-) create mode 100644 src/lib/Spinner.svelte create mode 100644 src/routes/+layout.svelte create mode 100644 src/routes/audio/+page.svelte create mode 100644 src/routes/camera/+page.svelte create mode 100644 src/routes/card/+page.svelte create mode 100644 src/routes/gamepad/+page.svelte create mode 100644 src/routes/keyboard/+page.svelte create mode 100644 src/routes/microphone/+page.svelte create mode 100644 src/routes/mouse/+page.svelte create mode 100644 src/routes/sensors/+page.svelte create mode 100644 src/routes/video/+page.svelte diff --git a/package.json b/package.json index 01a04b2..8122b9a 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ }, "devDependencies": { "@tsconfig/svelte": "^5.0.2", + "@types/debug": "^4.1.12", "@types/eslint": "8.56.0", "@types/lodash": "^4.14.202", "@typescript-eslint/eslint-plugin": "^6.0.0", @@ -39,6 +40,8 @@ "@sveltejs/adapter-static": "^3.0.1", "@sveltejs/kit": "^2.0.0", "@sveltejs/vite-plugin-svelte": "^3.0.0", + "@tabler/icons-webfont": "^2.47.0", + "debug": "^4.3.4", "lodash": "^4.17.21", "normalize.css": "^8.0.1", "svelte": "^4.2.7", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fdb4133..65c9a26 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,6 +20,12 @@ dependencies: '@sveltejs/vite-plugin-svelte': specifier: ^3.0.0 version: 3.0.2(svelte@4.2.9)(vite@5.0.12) + '@tabler/icons-webfont': + specifier: ^2.47.0 + version: 2.47.0 + debug: + specifier: ^4.3.4 + version: 4.3.4 lodash: specifier: ^4.17.21 version: 4.17.21 @@ -43,6 +49,9 @@ devDependencies: '@tsconfig/svelte': specifier: ^5.0.2 version: 5.0.2 + '@types/debug': + specifier: ^4.1.12 + version: 4.1.12 '@types/eslint': specifier: 8.56.0 version: 8.56.0 @@ -87,7 +96,7 @@ devDependencies: version: 3.6.3(postcss@8.4.33)(svelte@4.2.9) wait-on: specifier: ^7.2.0 - version: 7.2.0 + version: 7.2.0(debug@4.3.4) packages: @@ -674,6 +683,16 @@ packages: - supports-color dev: false + /@tabler/icons-webfont@2.47.0: + resolution: {integrity: sha512-yfV9zDal0iYDmyGz4BS9IlhaaMydtLdyOrY2UAZToP65sVWj7AFIi6symNzsoBaX867xAZWVHdKcocah0BfSog==} + dependencies: + '@tabler/icons': 2.47.0 + dev: false + + /@tabler/icons@2.47.0: + resolution: {integrity: sha512-4w5evLh+7FUUiA1GucvGj2ReX2TvOjEr4ejXdwL/bsjoSkof6r1gQmzqI+VHrE2CpJpB3al7bCTulOkFa/RcyA==} + dev: false + /@tootallnate/quickjs-emscripten@0.23.0: resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==} dev: true @@ -686,6 +705,12 @@ packages: resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==} dev: false + /@types/debug@4.1.12: + resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==} + dependencies: + '@types/ms': 0.7.34 + dev: true + /@types/eslint@8.56.0: resolution: {integrity: sha512-FlsN0p4FhuYRjIxpbdXovvHQhtlG05O1GG/RNWvdAxTboR438IOTwmrY/vLA+Xfgg06BTkP045M3vpFwTMv1dg==} dependencies: @@ -704,6 +729,10 @@ packages: resolution: {integrity: sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==} dev: true + /@types/ms@0.7.34: + resolution: {integrity: sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==} + dev: true + /@types/node@20.11.19: resolution: {integrity: sha512-7xMnVEcZFu0DikYjWOlRq7NTPETrm7teqUT2WkQjrTIkEgUyyGdWsj/Zg8bEJt5TNklzbPD1X3fqfsHw3SpapQ==} requiresBuild: true @@ -947,10 +976,10 @@ packages: resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==} dev: true - /axios@1.6.7: + /axios@1.6.7(debug@4.3.4): resolution: {integrity: sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==} dependencies: - follow-redirects: 1.15.5 + follow-redirects: 1.15.5(debug@4.3.4) form-data: 4.0.0 proxy-from-env: 1.1.0 transitivePeerDependencies: @@ -1618,7 +1647,7 @@ packages: resolution: {integrity: sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==} dev: true - /follow-redirects@1.15.5: + /follow-redirects@1.15.5(debug@4.3.4): resolution: {integrity: sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==} engines: {node: '>=4.0'} peerDependencies: @@ -1626,6 +1655,8 @@ packages: peerDependenciesMeta: debug: optional: true + dependencies: + debug: 4.3.4 dev: true /form-data@4.0.0: @@ -2880,12 +2911,12 @@ packages: vite: 5.0.12 dev: false - /wait-on@7.2.0: + /wait-on@7.2.0(debug@4.3.4): resolution: {integrity: sha512-wCQcHkRazgjG5XoAq9jbTMLpNIjoSlZslrJ2+N9MxDsGEv1HnFoVjOCexL0ESva7Y9cu350j+DWADdk54s4AFQ==} engines: {node: '>=12.0.0'} hasBin: true dependencies: - axios: 1.6.7 + axios: 1.6.7(debug@4.3.4) joi: 17.12.1 lodash: 4.17.21 minimist: 1.2.8 diff --git a/src/index.css b/src/index.css index 442bd2d..9a82237 100644 --- a/src/index.css +++ b/src/index.css @@ -9,9 +9,45 @@ body, html { background-color: black; font-family: 'B612', 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; - font-size: 1.5vw; + font-size: min(1.5vw, 1.5vh); } * { box-sizing: border-box; +} + +a { + color: white; +} + + +h1, h2, h3 { + margin-top: 0; +} + +button, .button { + display: inline-flex; + align-items: center; + gap: 0.25em; + text-decoration: none; + border: 1px solid white; + cursor: pointer; + + padding: 0.25em 0.5em; + border-radius: 0.25em; + + background: black; + color: white; +} + +select { + background: black; + color: white; + padding: 0.25em 0.5em; + border-radius: 0.25em; + border: 1px solid white; + + &:disabled { + opacity: 0.7; + } } \ No newline at end of file diff --git a/src/lib/BackgroundGrid.svelte b/src/lib/BackgroundGrid.svelte index 90b99b9..6f2e438 100644 --- a/src/lib/BackgroundGrid.svelte +++ b/src/lib/BackgroundGrid.svelte @@ -16,7 +16,8 @@ let verticalMargin = MARGIN_SIZE; let unloaded = true; - let transparent = false; + export let transparent = false; + export let subdued = false; function updateCounts() { const gridWidth = window.innerWidth - MARGIN_SIZE; @@ -72,6 +73,7 @@ class="background" class:unloaded class:transparent + class:subdued class:even-vertical={verticalCount % 2 === 0} style="--horizontal-count: {horizontalCount}; --vertical-count: {verticalCount}; @@ -266,6 +268,13 @@ } } + .background.subdued { + & .edge, + & .corner { + opacity: 0.33; + } + } + .grid { display: grid; grid-template-columns: repeat(var(--horizontal-count), var(--block-size)); diff --git a/src/lib/Spinner.svelte b/src/lib/Spinner.svelte new file mode 100644 index 0000000..9c56791 --- /dev/null +++ b/src/lib/Spinner.svelte @@ -0,0 +1,22 @@ + + + + + diff --git a/src/lib/TestCard.svelte b/src/lib/TestCard.svelte index da59543..1d9016f 100644 --- a/src/lib/TestCard.svelte +++ b/src/lib/TestCard.svelte @@ -4,7 +4,10 @@ import Axes from '$lib/Axes.svelte'; import ColorGradient from '$lib/ColorGradient.svelte'; import BrightnessGradient from '$lib/BrightnessGradient.svelte'; - import { onMount } from 'svelte'; + import { createEventDispatcher } from 'svelte'; + const dispatch = createEventDispatcher<{ focus: void }>(); + + export let full = false; let sizes = { blockSize: 64, @@ -20,16 +23,12 @@ $: circleBlocks = 2 * Math.floor((Math.min(sizes.horizontalCount, sizes.verticalCount) * 0.66) / 2) + (sizes.horizontalCount % 2); - - onMount(() => { - window.addEventListener('dblclick', () => { - document.body.requestFullscreen(); - }); - }); +
dispatch('focus') && document.body.requestFullscreen()} > - (sizes = ev.detail)} /> - + (sizes = ev.detail)} subdued={!full} /> + +
+ +
@@ -137,4 +140,13 @@ flex-grow: 1; } } + + .test-card:not(.full) { + & .info, + & .column, + & .axes, + & .inner { + display: none; + } + } diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte new file mode 100644 index 0000000..1a0c709 --- /dev/null +++ b/src/routes/+layout.svelte @@ -0,0 +1,77 @@ + + + goto('/card')} /> +
+ Back + +
+ + diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index ad8eb60..858383d 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,9 +1,72 @@ - + + + diff --git a/src/routes/audio/+page.svelte b/src/routes/audio/+page.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/routes/camera/+page.svelte b/src/routes/camera/+page.svelte new file mode 100644 index 0000000..1b6c9c7 --- /dev/null +++ b/src/routes/camera/+page.svelte @@ -0,0 +1,259 @@ + + +

Camera test

+ +
+ + +
+ + +
+ +
+ + + {#if snapshot} + + + + + {/if} +
+ +
+ {#if !currentDevice} + No camera selected + {:else} +
    + {#key currentDevice} +
  • + Resolution: {deviceInfo.resolution || '???'} +
    • +
  • + Frame rate: {deviceInfo.frameRate || '???'} +
    • + {/key} +
+
+ + +
+ {/if} +
+ + diff --git a/src/routes/card/+page.svelte b/src/routes/card/+page.svelte new file mode 100644 index 0000000..b7b9fd7 --- /dev/null +++ b/src/routes/card/+page.svelte @@ -0,0 +1,25 @@ + + + Back + + diff --git a/src/routes/gamepad/+page.svelte b/src/routes/gamepad/+page.svelte new file mode 100644 index 0000000..67d73ed --- /dev/null +++ b/src/routes/gamepad/+page.svelte @@ -0,0 +1,163 @@ + + +

Gamepad & Joystick Tests

+
+ + +
+ +{#if currentGamepad} +
+

Buttons

+
    + {#each buttons as button, i} +
  • {i}
    • + {/each} +
+
+
+

Axes

+
+ {#each axes as axis, i (i)} +
+
+ {i} + + {axis.toFixed(2)} +
+
+ {/each} +
+
+{/if} + + diff --git a/src/routes/keyboard/+page.svelte b/src/routes/keyboard/+page.svelte new file mode 100644 index 0000000..9527b5a --- /dev/null +++ b/src/routes/keyboard/+page.svelte @@ -0,0 +1,59 @@ + + +

Keyboard testing

+

Press a key on the keyboard to see the event object and the key code.

+
+ {#if key} + {key} + {/if} + {#if code} + ({code}) + {/if} +
+ +

Pressed keys:

+
    + {#each pressedKeys as key} +
  • {key}
    • + {/each} +
+ + diff --git a/src/routes/microphone/+page.svelte b/src/routes/microphone/+page.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/routes/mouse/+page.svelte b/src/routes/mouse/+page.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/routes/sensors/+page.svelte b/src/routes/sensors/+page.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/routes/video/+page.svelte b/src/routes/video/+page.svelte new file mode 100644 index 0000000..e69de29