From 9900d4862254213384df4e16fc7b1da5d72efae5 Mon Sep 17 00:00:00 2001 From: Jakob Gegeniger Date: Sat, 9 May 2026 22:31:17 +0200 Subject: [PATCH] step: initial app with chatbot --- src/counter.ts | 9 -- src/main.ts | 187 +++++++++++++++++++-------- src/style.css | 337 +++++++++++-------------------------------------- 3 files changed, 206 insertions(+), 327 deletions(-) delete mode 100644 src/counter.ts diff --git a/src/counter.ts b/src/counter.ts deleted file mode 100644 index 9f629e8..0000000 --- a/src/counter.ts +++ /dev/null @@ -1,9 +0,0 @@ -export function setupCounter(element: HTMLButtonElement) { - let counter = 0 - const setCounter = (count: number) => { - counter = count - element.innerHTML = `Count is ${counter}` - } - element.addEventListener('click', () => setCounter(counter + 1)) - setCounter(0) -} diff --git a/src/main.ts b/src/main.ts index d72bbca..73382a0 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,60 +1,139 @@ import './style.css' -import typescriptLogo from './assets/typescript.svg' -import viteLogo from './assets/vite.svg' -import heroImg from './assets/hero.png' -import { setupCounter } from './counter.ts' -document.querySelector('#app')!.innerHTML = ` -
-
- - TypeScript logo - Vite logo -
-
-

Get started

-

Edit src/main.ts and save to test HMR

-
- -
+type Page = 'players' | 'start' | 'info' -
+const storageKey = 'players' +let players: string[] = loadPlayers() +let currentName = '' -
-
- -

Documentation

-

Your questions, answered

- -
-
- -

Connect with us

-

Join the Vite community

- -
-
+function loadPlayers(): string[] { + const saved = localStorage.getItem(storageKey) + if (!saved) return [] -
-
-` + try { + const parsed = JSON.parse(saved) + if (Array.isArray(parsed)) { + return parsed.filter((item): item is string => typeof item === 'string' && item.trim().length > 0) + } + } catch { + return [] + } -setupCounter(document.querySelector('#counter')!) + return [] +} + +function savePlayers(): void { + localStorage.setItem(storageKey, JSON.stringify(players)) +} + +function getPageFromHash(): Page { + const hash = window.location.hash.replace('#', '') + if (hash === 'start' || hash === 'info' || hash === 'players') { + return hash + } + return 'players' +} + +function render(): void { + const app = document.querySelector('#app') + if (!app) return + + const page = getPageFromHash() + + app.innerHTML = ` +
+

Simple Player Web App

+ +
+ ${renderPage(page)} +
+
+ ` + + attachHandlers(page) +} + +function renderPage(page: Page): string { + if (page === 'players') { + const listItems = players.map((name) => `
  • ${name}
    • `).join('') + + return ` +

    Add players

    +
    + + +
    +
      ${listItems}
    + ` + } + + if (page === 'start') { + const shownName = currentName || 'No name selected yet' + + return ` +

    Start

    + +

    ${shownName}

    + ` + } + + return ` +

    Some text

    +

    This is the third page with static text.

    + ` +} + +function attachHandlers(page: Page): void { + if (page === 'players') { + const input = document.querySelector('#player-input') + const button = document.querySelector('#add-player') + + if (input && button) { + const addPlayer = () => { + const value = input.value.trim() + if (!value) return + + players.push(value) + savePlayers() + input.value = '' + render() + } + + button.addEventListener('click', addPlayer) + input.addEventListener('keydown', (event) => { + if (event.key === 'Enter') { + addPlayer() + } + }) + } + } + + if (page === 'start') { + const button = document.querySelector('#start-btn') + const selectedName = document.querySelector('#selected-name') + + if (button && selectedName) { + button.addEventListener('click', () => { + if (players.length === 0) { + currentName = 'Please add players on page 1 first.' + } else { + const randomIndex = Math.floor(Math.random() * players.length) + currentName = players[randomIndex] + } + selectedName.textContent = currentName + }) + } + } +} + +window.addEventListener('hashchange', render) + +if (!window.location.hash) { + window.location.hash = '#players' +} + +render() diff --git a/src/style.css b/src/style.css index 527d4fb..cf104b3 100644 --- a/src/style.css +++ b/src/style.css @@ -1,296 +1,105 @@ :root { - --text: #6b6375; - --text-h: #08060d; - --bg: #fff; - --border: #e5e4e7; - --code-bg: #f4f3ec; - --accent: #aa3bff; - --accent-bg: rgba(170, 59, 255, 0.1); - --accent-border: rgba(170, 59, 255, 0.5); - --social-bg: rgba(244, 243, 236, 0.5); - --shadow: - rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px; - - --sans: system-ui, 'Segoe UI', Roboto, sans-serif; - --heading: system-ui, 'Segoe UI', Roboto, sans-serif; - --mono: ui-monospace, Consolas, monospace; - - font: 18px/145% var(--sans); - letter-spacing: 0.18px; - color-scheme: light dark; - color: var(--text); - background: var(--bg); - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - - @media (max-width: 1024px) { - font-size: 16px; - } + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + color: #1f2937; + background: #f3f4f6; } -@media (prefers-color-scheme: dark) { - :root { - --text: #9ca3af; - --text-h: #f3f4f6; - --bg: #16171d; - --border: #2e303a; - --code-bg: #1f2028; - --accent: #c084fc; - --accent-bg: rgba(192, 132, 252, 0.15); - --accent-border: rgba(192, 132, 252, 0.5); - --social-bg: rgba(47, 48, 58, 0.5); - --shadow: - rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px; - } - - #social .button-icon { - filter: invert(1) brightness(2); - } +* { + box-sizing: border-box; } body { margin: 0; } -h1, -h2 { - font-family: var(--heading); - font-weight: 500; - color: var(--text-h); +#app { + min-height: 100vh; + display: grid; + place-items: center; + padding: 24px; +} + +.app { + width: 100%; + max-width: 680px; + background: #ffffff; + border: 1px solid #e5e7eb; + border-radius: 12px; + padding: 24px; } h1 { - font-size: 56px; - letter-spacing: -1.68px; - margin: 32px 0; - @media (max-width: 1024px) { - font-size: 36px; - margin: 20px 0; - } + margin: 0 0 16px; + font-size: 28px; } + h2 { - font-size: 24px; - line-height: 118%; - letter-spacing: -0.24px; - margin: 0 0 8px; - @media (max-width: 1024px) { - font-size: 20px; - } -} -p { - margin: 0; + margin: 0 0 12px; + font-size: 20px; } -code, -.counter { - font-family: var(--mono); - display: inline-flex; - border-radius: 4px; - color: var(--text-h); -} - -code { - font-size: 15px; - line-height: 135%; - padding: 4px 8px; - background: var(--code-bg); -} - -.counter { - font-size: 16px; - padding: 5px 10px; - border-radius: 5px; - color: var(--accent); - background: var(--accent-bg); - border: 2px solid transparent; - transition: border-color 0.3s; - margin-bottom: 24px; - - &:hover { - border-color: var(--accent-border); - } - &:focus-visible { - outline: 2px solid var(--accent); - outline-offset: 2px; - } -} - -.hero { - position: relative; - - .base, - .framework, - .vite { - inset-inline: 0; - margin: 0 auto; - } - - .base { - width: 170px; - position: relative; - z-index: 0; - } - - .framework, - .vite { - position: absolute; - } - - .framework { - z-index: 1; - top: 34px; - height: 28px; - transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg) - scale(1.4); - } - - .vite { - z-index: 0; - top: 107px; - height: 26px; - width: auto; - transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg) - scale(0.8); - } -} - -#app { - width: 1126px; - max-width: 100%; - margin: 0 auto; - text-align: center; - border-inline: 1px solid var(--border); - min-height: 100svh; +.nav { display: flex; - flex-direction: column; - box-sizing: border-box; + flex-wrap: wrap; + gap: 8px; + margin-bottom: 20px; } -#center { - display: flex; - flex-direction: column; - gap: 25px; - place-content: center; - place-items: center; - flex-grow: 1; - - @media (max-width: 1024px) { - padding: 32px 20px 24px; - gap: 18px; - } +.nav-link { + text-decoration: none; + color: #111827; + border: 1px solid #d1d5db; + border-radius: 8px; + padding: 8px 10px; + font-size: 14px; } -#next-steps { - display: flex; - border-top: 1px solid var(--border); - text-align: left; - - & > div { - flex: 1 1 0; - padding: 32px; - @media (max-width: 1024px) { - padding: 24px 20px; - } - } - - .icon { - margin-bottom: 16px; - width: 22px; - height: 22px; - } - - @media (max-width: 1024px) { - flex-direction: column; - text-align: center; - } +.nav-link.active { + background: #111827; + color: #ffffff; + border-color: #111827; } -#docs { - border-right: 1px solid var(--border); - - @media (max-width: 1024px) { - border-right: none; - border-bottom: 1px solid var(--border); - } +.page-content { + border: 1px solid #e5e7eb; + border-radius: 10px; + padding: 16px; } -#next-steps ul { - list-style: none; - padding: 0; +.row { display: flex; gap: 8px; - margin: 32px 0 0; - - .logo { - height: 18px; - } - - a { - color: var(--text-h); - font-size: 16px; - border-radius: 6px; - background: var(--social-bg); - display: flex; - padding: 6px 12px; - align-items: center; - gap: 8px; - text-decoration: none; - transition: box-shadow 0.3s; - - &:hover { - box-shadow: var(--shadow); - } - .button-icon { - height: 18px; - width: 18px; - } - } - - @media (max-width: 1024px) { - margin-top: 20px; - flex-wrap: wrap; - justify-content: center; - - li { - flex: 1 1 calc(50% - 8px); - } - - a { - width: 100%; - justify-content: center; - box-sizing: border-box; - } - } + margin-bottom: 12px; } -#spacer { - height: 88px; - border-top: 1px solid var(--border); - @media (max-width: 1024px) { - height: 48px; - } +input, +button { + font: inherit; } -.ticks { - position: relative; - width: 100%; - - &::before, - &::after { - content: ''; - position: absolute; - top: -4.5px; - border: 5px solid transparent; - } - - &::before { - left: 0; - border-left-color: var(--border); - } - &::after { - right: 0; - border-right-color: var(--border); - } +input { + flex: 1; + border: 1px solid #d1d5db; + border-radius: 8px; + padding: 8px 10px; +} + +button { + border: 1px solid #111827; + background: #111827; + color: #ffffff; + border-radius: 8px; + padding: 8px 14px; + cursor: pointer; +} + +.player-list { + margin: 0; + padding-left: 20px; +} + +#selected-name { + margin-top: 12px; + font-size: 18px; + font-weight: 600; }