mirror of
https://github.com/Vale54321/schafkop-neu.git
synced 2026-05-06 17:12:55 +02:00
delete back and frontend
add schafkopf os add build firmware action
This commit is contained in:
@@ -1,10 +0,0 @@
|
||||
node_modules
|
||||
.svelte-kit
|
||||
dist
|
||||
build
|
||||
coverage
|
||||
npm-debug.log
|
||||
.DS_Store
|
||||
.git
|
||||
/.gitignore
|
||||
*.log
|
||||
24
frontend/.gitignore
vendored
24
frontend/.gitignore
vendored
@@ -1,24 +0,0 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
3
frontend/.vscode/extensions.json
vendored
3
frontend/.vscode/extensions.json
vendored
@@ -1,3 +0,0 @@
|
||||
{
|
||||
"recommendations": ["svelte.svelte-vscode"]
|
||||
}
|
||||
@@ -1,48 +0,0 @@
|
||||
######## Combined Frontend + Backend build (single Node runtime) ########
|
||||
# This Dockerfile now builds BOTH the Svelte frontend and the NestJS backend
|
||||
# and serves the compiled frontend through the backend (Express static).
|
||||
|
||||
########################
|
||||
# 1) Frontend build #
|
||||
########################
|
||||
FROM node:20-bookworm-slim AS frontend-build
|
||||
WORKDIR /frontend
|
||||
COPY frontend/package*.json ./
|
||||
RUN npm install --no-audit --no-fund
|
||||
COPY frontend/ .
|
||||
RUN npm run build
|
||||
|
||||
########################
|
||||
# 2) Backend build #
|
||||
########################
|
||||
FROM node:20-bookworm-slim AS backend-build
|
||||
WORKDIR /app
|
||||
COPY backend/package*.json ./
|
||||
RUN npm install --no-audit --no-fund
|
||||
COPY backend/ .
|
||||
# Copy compiled frontend into backend/public (served statically by Nest)
|
||||
COPY --from=frontend-build /frontend/dist ./public
|
||||
RUN npm run build
|
||||
|
||||
########################
|
||||
# 3) Production image #
|
||||
########################
|
||||
FROM node:20-bookworm-slim AS runner
|
||||
ENV NODE_ENV=production
|
||||
WORKDIR /app
|
||||
|
||||
# Install only production deps (reuse original package.json)
|
||||
COPY backend/package*.json ./
|
||||
RUN npm install --omit=dev --no-audit --no-fund
|
||||
|
||||
# Copy backend dist + public assets
|
||||
COPY --from=backend-build /app/dist ./dist
|
||||
COPY --from=backend-build /app/public ./public
|
||||
|
||||
# Environment (override at runtime as needed)
|
||||
ENV PORT=3000 \
|
||||
SERIAL_BAUD=115200
|
||||
|
||||
EXPOSE 3000
|
||||
|
||||
CMD ["node", "dist/main.js"]
|
||||
@@ -1,47 +0,0 @@
|
||||
# Svelte + TS + Vite
|
||||
|
||||
This template should help get you started developing with Svelte and TypeScript in Vite.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
|
||||
|
||||
## Need an official Svelte framework?
|
||||
|
||||
Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
|
||||
|
||||
## Technical considerations
|
||||
|
||||
**Why use this over SvelteKit?**
|
||||
|
||||
- It brings its own routing solution which might not be preferable for some users.
|
||||
- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
|
||||
|
||||
This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
|
||||
|
||||
Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
|
||||
|
||||
**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
|
||||
|
||||
Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
|
||||
|
||||
**Why include `.vscode/extensions.json`?**
|
||||
|
||||
Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
|
||||
|
||||
**Why enable `allowJs` in the TS template?**
|
||||
|
||||
While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
|
||||
|
||||
**Why is HMR not preserving my local component state?**
|
||||
|
||||
HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
|
||||
|
||||
If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
|
||||
|
||||
```ts
|
||||
// store.ts
|
||||
// An extremely simple external store
|
||||
import { writable } from 'svelte/store'
|
||||
export default writable(0)
|
||||
```
|
||||
@@ -1,19 +0,0 @@
|
||||
services:
|
||||
app:
|
||||
build:
|
||||
context: ..
|
||||
dockerfile: Dockerfile
|
||||
container_name: schafkop-app
|
||||
restart: unless-stopped
|
||||
environment:
|
||||
- NODE_ENV=production
|
||||
- PORT=3000
|
||||
# Optionally set SERIAL_PORT or PICO_SERIAL_PORT for auto-open
|
||||
# - SERIAL_PORT=/dev/serial0
|
||||
# - SERIAL_BAUD=115200
|
||||
ports:
|
||||
- "80:3000"
|
||||
# Uncomment and adjust one of the following for hardware access on a Pi:
|
||||
# devices:
|
||||
# - /dev/serial0:/dev/serial0
|
||||
# - /dev/ttyACM0:/dev/ttyACM0
|
||||
@@ -1,13 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Schafkopf Bot — Play & Train</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
1986
frontend/package-lock.json
generated
1986
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,24 +0,0 @@
|
||||
{
|
||||
"name": "frontend",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/vite-plugin-svelte": "^6.1.1",
|
||||
"@tsconfig/svelte": "^5.0.4",
|
||||
"svelte": "^5.38.1",
|
||||
"svelte-check": "^4.3.1",
|
||||
"tailwindcss": "^4.1.12",
|
||||
"typescript": "~5.8.3",
|
||||
"vite": "^7.1.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tailwindcss/vite": "^4.1.12"
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
@@ -1,229 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { writable } from 'svelte/store';
|
||||
import SendBox from './SendBox.svelte';
|
||||
|
||||
const ports = writable<Array<any>>([]);
|
||||
const log = writable<string[]>([]);
|
||||
const connected = writable(false);
|
||||
const portOpen = writable(false);
|
||||
let es: EventSource | null = null;
|
||||
|
||||
function addLog(line: string) {
|
||||
// keep a fairly large history and prefix with an ISO timestamp
|
||||
log.update((l) => [new Date().toISOString() + ' ' + line, ...l].slice(0, 2000));
|
||||
}
|
||||
|
||||
async function list() {
|
||||
console.log('[serial] list() called');
|
||||
const res = await fetch('/serial/ports');
|
||||
const data = await res.json();
|
||||
console.log('[serial] list() ->', data);
|
||||
ports.set(data);
|
||||
}
|
||||
|
||||
async function openPort(path: string) {
|
||||
console.log('[serial] openPort()', path);
|
||||
const res = await fetch('/serial/open', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ path }) });
|
||||
const j = await res.json().catch(() => null);
|
||||
console.log('[serial] openPort result', j);
|
||||
// log result and refresh status
|
||||
if (j?.ok) addLog('PORT: open requested ' + path);
|
||||
else addLog('PORT: open request failed - ' + (j?.error ?? 'unknown'));
|
||||
setTimeout(getStatus, 300);
|
||||
}
|
||||
|
||||
async function closePort() {
|
||||
console.log('[serial] closePort()');
|
||||
const res = await fetch('/serial/close', { method: 'POST' });
|
||||
const j = await res.json().catch(() => null);
|
||||
console.log('[serial] closePort result', j);
|
||||
addLog('PORT: close requested');
|
||||
}
|
||||
|
||||
async function sendLine(txt: string) {
|
||||
console.log('[serial] sendLine()', txt);
|
||||
const res = await fetch('/serial/send', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ payload: txt }) });
|
||||
const j = await res.json().catch(() => null);
|
||||
console.log('[serial] sendLine result', j);
|
||||
if (!j?.ok) addLog('TX error: ' + (j?.error ?? 'unknown'));
|
||||
}
|
||||
|
||||
async function getStatus() {
|
||||
console.log('[serial] getStatus()');
|
||||
try {
|
||||
const res = await fetch('/serial/status');
|
||||
const j = await res.json();
|
||||
console.log('[serial] getStatus ->', j);
|
||||
portOpen.set(!!j.open);
|
||||
} catch (e) {
|
||||
console.warn('[serial] getStatus failed', e);
|
||||
portOpen.set(false);
|
||||
}
|
||||
}
|
||||
|
||||
function startStream() {
|
||||
if (es) return;
|
||||
console.log('[serial] startStream()');
|
||||
es = new EventSource('/serial/stream');
|
||||
// connection lifecycle events - also log them so the serial box shows open/close/errors
|
||||
es.addEventListener('open', () => { console.log('[serial][SSE] open'); connected.set(true); addLog('[SSE] connected'); });
|
||||
es.addEventListener('close', () => { console.log('[serial][SSE] close'); connected.set(false); addLog('[SSE] disconnected'); });
|
||||
es.addEventListener('error', (e: any) => { console.warn('[serial][SSE] error', e); addLog('[SSE] error: ' + (e?.message ?? JSON.stringify(e))); });
|
||||
|
||||
// data events contain the actual lines emitted by the Pico; parse JSON payloads but fall back to raw
|
||||
es.addEventListener('data', (ev: any) => {
|
||||
console.log('[serial][SSE] data event', ev.data);
|
||||
const raw = ev.data as string;
|
||||
let line: string | undefined;
|
||||
try {
|
||||
const parsed = JSON.parse(raw);
|
||||
if (parsed && typeof parsed === 'object' && 'line' in parsed) {
|
||||
line = (parsed as any).line;
|
||||
} else if (typeof parsed === 'string') {
|
||||
line = parsed; // backend sent a plain JSON string
|
||||
}
|
||||
} catch {
|
||||
// not JSON -> treat as plain text
|
||||
}
|
||||
if (!line) line = raw;
|
||||
addLog('RX: ' + line);
|
||||
});
|
||||
}
|
||||
|
||||
function stopStream() {
|
||||
console.log('[serial] stopStream()');
|
||||
es?.close();
|
||||
es = null;
|
||||
connected.set(false);
|
||||
}
|
||||
|
||||
let statusInterval: any;
|
||||
// quick test command defaults
|
||||
let stepVal: string = '4096';
|
||||
let dirVal: string = '1';
|
||||
let speedVal: string = '3000';
|
||||
onMount(() => {
|
||||
list();
|
||||
startStream();
|
||||
statusInterval = setInterval(getStatus, 1000);
|
||||
getStatus();
|
||||
});
|
||||
onDestroy(() => {
|
||||
stopStream();
|
||||
clearInterval(statusInterval);
|
||||
});
|
||||
|
||||
function sendStepCmd() {
|
||||
const steps = Number(stepVal);
|
||||
const dir = Number(dirVal) === 1 ? 1 : 0;
|
||||
if (!Number.isFinite(steps) || steps <= 0) {
|
||||
addLog('TX error: invalid STEP value: ' + stepVal);
|
||||
return;
|
||||
}
|
||||
const line = `STEP ${steps} ${dir}`;
|
||||
sendLine(line);
|
||||
addLog('TX: ' + line);
|
||||
}
|
||||
|
||||
function sendSpeedCmd() {
|
||||
const d = Number(speedVal);
|
||||
if (!Number.isFinite(d) || d <= 0) {
|
||||
addLog('TX error: invalid SPEED value: ' + speedVal);
|
||||
return;
|
||||
}
|
||||
const line = `SPEED ${d}`;
|
||||
sendLine(line);
|
||||
addLog('TX: ' + line);
|
||||
}
|
||||
</script>
|
||||
|
||||
<main class="min-h-screen bg-gradient-to-b from-bg to-surface text-gray-100 p-8">
|
||||
<h1 class="text-3xl font-bold underline">
|
||||
Hello world!
|
||||
</h1>
|
||||
<div class="container mx-auto">
|
||||
<header class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h1 class="text-2xl font-semibold">Raspberry Pico</h1>
|
||||
<p class="text-sm text-gray-400">Serial monitor & command tester</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-sm text-gray-300">SSE: {$connected ? 'connected' : 'disconnected'}</span>
|
||||
<button class="px-3 py-1 bg-primary text-white rounded-md text-sm" on:click={startStream}>Start</button>
|
||||
<button class="px-3 py-1 bg-gray-700 text-white rounded-md text-sm" on:click={stopStream}>Stop</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="grid grid-cols-12 gap-6">
|
||||
<aside class="col-span-4 bg-gray-900/60 p-4 rounded-lg border border-gray-800">
|
||||
<section class="mb-4">
|
||||
<h3 class="text-sm text-gray-300 font-medium">Available ports</h3>
|
||||
<div class="flex items-center gap-2 mt-2">
|
||||
<button class="px-2 py-1 text-sm bg-gray-700 rounded" on:click={list}>Refresh</button>
|
||||
<button class="px-2 py-1 text-sm bg-red-600 rounded" on:click={closePort}>Close port</button>
|
||||
</div>
|
||||
<ul class="mt-3 space-y-2">
|
||||
{#each $ports as p}
|
||||
<li class="flex items-center justify-between bg-gray-800/40 p-2 rounded">
|
||||
<code class="text-xs text-gray-200">{p.path}</code>
|
||||
<button class="px-2 py-1 text-sm bg-primary rounded" on:click={() => openPort(p.path)}>Open</button>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="mb-4">
|
||||
<h3 class="text-sm text-gray-300 font-medium">Send</h3>
|
||||
<div class="mt-2 flex items-center gap-2">
|
||||
<div class="text-xs text-gray-300">Port: <span class="font-medium">{$portOpen ? 'open' : 'closed'}</span></div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<SendBox disabled={!$portOpen} on:send={(e) => { sendLine(e.detail); addLog('TX: ' + e.detail); }} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 class="text-sm text-gray-300 font-medium">Quick commands</h3>
|
||||
<div class="mt-2 space-y-2">
|
||||
<div class="flex gap-2 items-center">
|
||||
<input class="w-28 p-2 rounded bg-gray-800 text-sm" type="number" bind:value={stepVal} min="1" />
|
||||
<select class="p-2 rounded bg-gray-800 text-sm" bind:value={dirVal}>
|
||||
<option value="1">1 (forward)</option>
|
||||
<option value="0">0 (reverse)</option>
|
||||
</select>
|
||||
<button class="px-3 py-1 bg-primary text-white rounded" on:click={sendStepCmd} disabled={!$portOpen}>Send STEP</button>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 items-center">
|
||||
<input class="w-28 p-2 rounded bg-gray-800 text-sm" type="number" bind:value={speedVal} min="1" />
|
||||
<button class="px-3 py-1 bg-primary text-white rounded" on:click={sendSpeedCmd} disabled={!$portOpen}>Send SPEED</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</aside>
|
||||
|
||||
<section class="col-span-8 bg-gray-900/60 p-4 rounded-lg border border-gray-800 flex flex-col">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<h3 class="text-sm text-gray-300 font-medium">Live log</h3>
|
||||
<div class="text-xs text-gray-400">Showing last {2000} lines</div>
|
||||
</div>
|
||||
<div class="flex-1 overflow-auto bg-[#0b0b0b] p-3 rounded text-sm font-mono text-gray-100">
|
||||
{#each $log as l}
|
||||
<div class="py-0.5"><code class="text-xs">{l}</code></div>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
main { padding: 1rem; font-family: system-ui, -apple-system, 'Segoe UI', Roboto; color:#111 }
|
||||
h1 { margin-bottom:0.5rem }
|
||||
section { margin-top:1rem; }
|
||||
button { margin-left:0.5rem }
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
@@ -1,18 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
export let placeholder = 'Type a line to send';
|
||||
export let disabled: boolean = false;
|
||||
const dispatch = createEventDispatcher();
|
||||
let txt = '';
|
||||
function doSend() {
|
||||
if (!txt) return;
|
||||
console.log('[SendBox] dispatch send', txt);
|
||||
dispatch('send', txt);
|
||||
txt = '';
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="mt-2 flex gap-2 items-center">
|
||||
<input class="flex-1 p-2 rounded bg-gray-800 text-sm text-gray-100" bind:value={txt} placeholder={placeholder} on:keydown={(e) => e.key === 'Enter' && doSend()} disabled={disabled} />
|
||||
<button class="px-3 py-1 bg-primary text-white rounded text-sm" on:click={doSend} disabled={disabled}>Send</button>
|
||||
</div>
|
||||
@@ -1,44 +0,0 @@
|
||||
:root {
|
||||
--font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
--bg: #0b0b0b;
|
||||
--surface: #121212;
|
||||
--text: #eaeaea;
|
||||
--muted: #9aa3b2;
|
||||
--accent: #7c6cff;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html, body { height: 100%; }
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--font-family);
|
||||
color: var(--text);
|
||||
background: linear-gradient(180deg, var(--bg), var(--surface));
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a { color: var(--accent); text-decoration: none; }
|
||||
a:hover { opacity: 0.9; }
|
||||
|
||||
/* utility container used by App.svelte */
|
||||
.container { max-width: 1100px; margin: 0 auto; padding: 1.25rem; }
|
||||
|
||||
/* accessible focus styles */
|
||||
:focus { outline: 3px solid rgba(124,108,255,0.18); outline-offset: 2px; }
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root { --bg: #fafafa; --surface:#fff; --text:#111827; --muted:#556; }
|
||||
}
|
||||
|
||||
|
||||
/* small helpers that complement tailwind tokens */
|
||||
.container { max-width: 1100px; margin: 0 auto; padding: 1.25rem; }
|
||||
|
||||
:focus { outline: 3px solid rgba(124,108,255,0.18); outline-offset: 2px; }
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@import "tailwindcss";
|
||||
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.9 KiB |
@@ -1,96 +0,0 @@
|
||||
<script lang="ts">
|
||||
// Simple game starter UI that posts a start command to the backend.
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
type Seat = 'North' | 'East' | 'South' | 'West';
|
||||
|
||||
let robotSeat: Seat = 'South';
|
||||
let difficulty: 'easy' | 'medium' | 'hard' = 'medium';
|
||||
let includeRobot = true;
|
||||
let isStarting = false;
|
||||
const logs = writable<string[]>([]);
|
||||
|
||||
function appendLog(line: string) {
|
||||
logs.update((ls) => {
|
||||
ls.push(line);
|
||||
return ls.slice(-50);
|
||||
});
|
||||
}
|
||||
|
||||
async function startGame() {
|
||||
isStarting = true;
|
||||
appendLog(`Requesting new game (robotSeat=${robotSeat}, difficulty=${difficulty}, includeRobot=${includeRobot})`);
|
||||
|
||||
try {
|
||||
const resp = await fetch('/api/game/start', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ robotSeat, difficulty, includeRobot }),
|
||||
});
|
||||
|
||||
if (!resp.ok) {
|
||||
const text = await resp.text();
|
||||
throw new Error(text || resp.statusText);
|
||||
}
|
||||
|
||||
const data = await resp.json();
|
||||
appendLog('Game started: ' + JSON.stringify(data));
|
||||
} catch (err) {
|
||||
appendLog('Error starting game: ' + String(err));
|
||||
} finally {
|
||||
isStarting = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="game-starter card">
|
||||
<h4>Start a new physical game</h4>
|
||||
<p class="muted">The robot will join as one of the four players and physically plays cards on the table.</p>
|
||||
|
||||
<div class="form-row">
|
||||
<label>Robot seat</label>
|
||||
<select bind:value={robotSeat} aria-label="Robot seat">
|
||||
<option value="North">North</option>
|
||||
<option value="East">East</option>
|
||||
<option value="South">South</option>
|
||||
<option value="West">West</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<label>Difficulty</label>
|
||||
<select bind:value={difficulty} aria-label="Difficulty">
|
||||
<option value="easy">Easy</option>
|
||||
<option value="medium">Medium</option>
|
||||
<option value="hard">Hard</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-row-inline">
|
||||
<label><input type="checkbox" bind:checked={includeRobot} /> Include robot in this game</label>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<button class="btn primary" on:click={startGame} disabled={isStarting}> {isStarting ? 'Starting…' : 'Start game'} </button>
|
||||
</div>
|
||||
|
||||
<div class="log">
|
||||
<h5>Activity</h5>
|
||||
<ul>
|
||||
{#each $logs.slice().reverse() as line}
|
||||
<li>{line}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.game-starter { padding: 1rem; border-radius: 10px; }
|
||||
.muted { color: var(--muted); margin-top: 0.25rem; }
|
||||
.form-row { display:flex; flex-direction:column; gap:0.35rem; margin-top:0.8rem; }
|
||||
.form-row-inline { margin-top:0.8rem; }
|
||||
select { padding:0.5rem; border-radius:8px; background:transparent; color:inherit; border:1px solid rgba(255,255,255,0.04); }
|
||||
.actions { margin-top:1rem; }
|
||||
.log { margin-top:1rem; max-height:160px; overflow:auto; font-size:0.9rem; color:var(--muted); }
|
||||
.log ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0.25rem; }
|
||||
</style>
|
||||
@@ -1,9 +0,0 @@
|
||||
import { mount } from 'svelte'
|
||||
import './app.css'
|
||||
import App from './App.svelte'
|
||||
|
||||
const app = mount(App, {
|
||||
target: document.getElementById('app')!,
|
||||
})
|
||||
|
||||
export default app
|
||||
2
frontend/src/vite-env.d.ts
vendored
2
frontend/src/vite-env.d.ts
vendored
@@ -1,2 +0,0 @@
|
||||
/// <reference types="svelte" />
|
||||
/// <reference types="vite/client" />
|
||||
@@ -1,8 +0,0 @@
|
||||
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
|
||||
|
||||
/** @type {import("@sveltejs/vite-plugin-svelte").SvelteConfig} */
|
||||
export default {
|
||||
// Consult https://svelte.dev/docs#compile-time-svelte-preprocess
|
||||
// for more information about preprocessors
|
||||
preprocess: vitePreprocess(),
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
{
|
||||
"extends": "@tsconfig/svelte/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"resolveJsonModule": true,
|
||||
/**
|
||||
* Typecheck JS in `.svelte` and `.js` files by default.
|
||||
* Disable checkJs if you'd like to use dynamic types in JS.
|
||||
* Note that setting allowJs false does not prevent the use
|
||||
* of JS in `.svelte` files.
|
||||
*/
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force"
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "ES2023",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import { svelte } from '@sveltejs/vite-plugin-svelte'
|
||||
import tailwindcss from '@tailwindcss/vite'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
svelte(),
|
||||
tailwindcss(),
|
||||
],
|
||||
server: {
|
||||
proxy: {
|
||||
// forward serial API calls (including SSE) to backend running on :3000
|
||||
'/serial': {
|
||||
target: 'http://localhost:3000',
|
||||
changeOrigin: true,
|
||||
ws: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user