create-tinybase 1.0.1 → 1.1.1

package/templates/client/src/chat/MessageInput.svelte.hbs

@@ -0,0 +1,53 @@
+{{includeFile template="client/src/shared/button.css.hbs" output="client/src/button.css"}}
+{{includeFile template="client/src/shared/input.css.hbs" output="client/src/input.css"}}
+{{includeFile template="client/src/chat/messageInput.css.hbs" output="client/src/messageInput.css"}}
+
+<script{{#if typescript}} lang="ts"{{/if}}>
+import './button.css';
+import './input.css';
+import './messageInput.css';
+import {onMount} from 'svelte';
+import {chatStore} from './chatStore';
+import {settingsStore} from './settingsStore';
+
+let message = $state('');
+let input{{#if typescript}}: HTMLInputElement | undefined{{/if}};
+
+const sendMessage = () => {
+const text = message.trim();
+if (!text) {
+return;
+}
+
+const username =
+  {{#if typescript}}(settingsStore.getValue('username') as string | undefined) ?? 'Anonymous'{{else}}settingsStore.getValue('username') ?? 'Anonymous'{{/if}};
+
+chatStore.addRow('messages', {
+username,
+text,
+timestamp: Date.now(),
+});
+
+message = '';
+input?.focus();
+};
+
+const handleSubmit = (event{{#if typescript}}: SubmitEvent{{/if}}) => {
+event.preventDefault();
+sendMessage();
+};
+
+onMount(() => {
+input?.focus();
+});
+</script>
+
+<form id="messageInput" onsubmit={handleSubmit}>
+  <input
+    bind:this={input}
+    bind:value={message}
+    type="text"
+    placeholder="Type a message..."
+  />
+  <button class="primary" type="submit">Send</button>
+</form>

package/templates/client/src/chat/Messages.svelte.hbs

@@ -0,0 +1,34 @@
+{{includeFile template="client/src/chat/messages.css.hbs" output="client/src/messages.css"}}
+{{includeFile template="client/src/chat/Message.svelte.hbs" output="client/src/Message.svelte"}}
+
+<script{{#if typescript}} lang="ts"{{/if}}>
+import './messages.css';
+import {onMount} from 'svelte';
+import Message from './Message.svelte';
+import {chatStore} from './chatStore';
+{{#if typescript}}import type {MessageRow} from './chatStore';{{/if}}
+
+const getMessages = () =>
+  chatStore.getSortedRowIds('messages', 'timestamp').map((id) => ({
+    id,
+    row:
+      {{#if typescript}}chatStore.getRow('messages', id) as MessageRow{{else}}chatStore.getRow('messages', id){{/if}},
+  }));
+
+let messages = $state(getMessages());
+
+const updateMessages = () => {
+messages = getMessages();
+};
+
+onMount(() => {
+chatStore.addTablesListener(updateMessages);
+updateMessages();
+});
+</script>
+
+<div id="messages">
+  {#each messages as message (message.id)}
+    <Message message={message.row} />
+  {/each}
+</div>

package/templates/client/src/chat/UsernameInput.svelte.hbs

@@ -0,0 +1,45 @@
+{{includeFile template="client/src/shared/input.css.hbs" output="client/src/input.css"}}
+{{includeFile template="client/src/chat/usernameInput.css.hbs" output="client/src/usernameInput.css"}}
+
+<script{{#if typescript}} lang="ts"{{/if}}>
+import './input.css';
+import './usernameInput.css';
+import {onMount} from 'svelte';
+import {settingsStore} from './settingsStore';
+
+const getUsername = () =>
+  {{#if typescript}}(settingsStore.getValue('username') as string | undefined) ?? ''{{else}}settingsStore.getValue('username') ?? ''{{/if}};
+
+let username = $state(getUsername());
+
+const updateUsername = () => {
+username = getUsername();
+};
+
+const handleInput = (event{{#if typescript}}: Event{{/if}}) => {
+  {{#if typescript}}
+    const input = event.currentTarget as HTMLInputElement;
+    const nextUsername = input.value;
+  {{else}}
+    const nextUsername = event.currentTarget.value;
+  {{/if}}
+  settingsStore.setValue('username', nextUsername);
+  username = nextUsername;
+};
+
+onMount(() => {
+settingsStore.addValueListener('username', updateUsername);
+updateUsername();
+});
+</script>
+
+<div id="usernameInput">
+  <label for="usernameInputField">Your name:</label>
+  <input
+    id="usernameInputField"
+    type="text"
+    value={username}
+    placeholder="Enter your name"
+    oninput={handleInput}
+  />
+</div>

package/templates/client/src/drawing/App.svelte.hbs

@@ -0,0 +1,28 @@
+{{includeFile template="client/src/drawing/settingsStore.ts.hbs" output="client/src/settingsStore.ts"}}
+{{includeFile template="client/src/drawing/canvasStore.ts.hbs" output="client/src/canvasStore.ts"}}
+{{includeFile template="client/src/shared/Loading.svelte.hbs" output="client/src/Loading.svelte"}}
+{{includeFile template="client/src/drawing/DrawingControls.svelte.hbs" output="client/src/DrawingControls.svelte"}}
+{{includeFile template="client/src/drawing/Canvas.svelte.hbs" output="client/src/Canvas.svelte"}}
+
+<script{{#if typescript}} lang="ts"{{/if}}>
+import {onMount} from 'svelte';
+import Canvas from './Canvas.svelte';
+import DrawingControls from './DrawingControls.svelte';
+import Loading from './Loading.svelte';
+import {canvasStoreReady} from './canvasStore';
+import {settingsStoreReady} from './settingsStore';
+
+let loading = $state(true);
+
+onMount(async () => {
+await Promise.all([settingsStoreReady, canvasStoreReady]);
+loading = false;
+});
+</script>
+
+{#if loading}
+  <Loading />
+{:else}
+  <DrawingControls />
+  <Canvas />
+{/if}

package/templates/client/src/drawing/BrushSize.svelte.hbs

@@ -0,0 +1,45 @@
+{{includeFile template="client/src/drawing/brushSize.css.hbs" output="client/src/brushSize.css"}}
+
+<script{{#if typescript}} lang="ts"{{/if}}>
+import './brushSize.css';
+import {onMount} from 'svelte';
+import {settingsStore} from './settingsStore';
+
+const getBrushSize = () =>
+  {{#if typescript}}(settingsStore.getValue('brushSize') as number | undefined) ?? 5{{else}}settingsStore.getValue('brushSize') ?? 5{{/if}};
+
+let size = $state(getBrushSize());
+
+const updateSize = () => {
+size = getBrushSize();
+};
+
+const handleInput = (event{{#if typescript}}: Event{{/if}}) => {
+  {{#if typescript}}
+    const input = event.currentTarget as HTMLInputElement;
+    const nextSize = parseInt(input.value);
+  {{else}}
+    const nextSize = parseInt(event.currentTarget.value);
+  {{/if}}
+  settingsStore.setValue('brushSize', nextSize);
+  size = nextSize;
+};
+
+onMount(() => {
+settingsStore.addValueListener('brushSize', updateSize);
+updateSize();
+});
+</script>
+
+<div id="brushSize">
+  <label for="brushSizeSlider">Size:</label>
+  <input
+    id="brushSizeSlider"
+    type="range"
+    min="1"
+    max="50"
+    value={size}
+    oninput={handleInput}
+  />
+  <span id="brushSizeValue">{size}</span>
+</div>

package/templates/client/src/drawing/Canvas.svelte.hbs

@@ -0,0 +1,145 @@
+{{includeFile template="client/src/drawing/canvas.css.hbs" output="client/src/canvas.css"}}
+
+<script{{#if typescript}} lang="ts"{{/if}}>
+import './canvas.css';
+import {onMount} from 'svelte';
+import {getHlcFunctions} from 'tinybase';
+import {canvasStore} from './canvasStore';
+{{#if typescript}}import type {StrokeRow} from './canvasStore';{{/if}}
+import {settingsStore} from './settingsStore';
+
+const [getNextHlc] = getHlcFunctions();
+
+let canvas{{#if typescript}}: HTMLCanvasElement | undefined{{/if}};
+let isDrawing = false;
+let currentStrokeId{{#if typescript}}: string | null{{/if}} = null;
+
+const getPoint = (event{{#if typescript}}: MouseEvent | TouchEvent{{/if}}) => {
+if (!canvas) {
+return null;
+}
+
+const rect = canvas.getBoundingClientRect();
+const clientX = 'touches' in event ? event.touches[0]?.clientX : event.clientX;
+const clientY = 'touches' in event ? event.touches[0]?.clientY : event.clientY;
+
+if (clientX == null || clientY == null) {
+return null;
+}
+
+return {
+x: clientX - rect.left,
+y: clientY - rect.top,
+};
+};
+
+const startStroke = (event{{#if typescript}}: MouseEvent | TouchEvent{{/if}}) => {
+isDrawing = true;
+currentStrokeId = getNextHlc();
+
+const point = getPoint(event);
+if (!point || !currentStrokeId) {
+return;
+}
+
+const brushColor =
+  {{#if typescript}}(settingsStore.getValue('brushColor') as string | undefined) ?? '#d81b60'{{else}}settingsStore.getValue('brushColor') ?? '#d81b60'{{/if}};
+const brushSize =
+  {{#if typescript}}(settingsStore.getValue('brushSize') as number | undefined) ?? 5{{else}}settingsStore.getValue('brushSize') ?? 5{{/if}};
+
+canvasStore.setRow('strokes', currentStrokeId, {
+color: brushColor,
+size: brushSize,
+points: JSON.stringify([point.x, point.y]),
+});
+};
+
+const extendStroke = (event{{#if typescript}}: MouseEvent | TouchEvent{{/if}}) => {
+if (!isDrawing || !currentStrokeId) {
+return;
+}
+
+const point = getPoint(event);
+if (!point) {
+return;
+}
+
+const pointsArray = JSON.parse(
+  {{#if typescript}}(canvasStore.getCell('strokes', currentStrokeId, 'points') as string | undefined) ?? '[]'{{else}}canvasStore.getCell('strokes', currentStrokeId, 'points') ?? '[]'{{/if}},
+){{#if typescript}} as number[]{{/if}};
+pointsArray.push(point.x, point.y);
+canvasStore.setCell('strokes', currentStrokeId, 'points', JSON.stringify(pointsArray));
+};
+
+const endStroke = () => {
+isDrawing = false;
+currentStrokeId = null;
+};
+
+const handleTouchStart = (event{{#if typescript}}: TouchEvent{{/if}}) => {
+event.preventDefault();
+startStroke(event);
+};
+
+const handleTouchMove = (event{{#if typescript}}: TouchEvent{{/if}}) => {
+event.preventDefault();
+extendStroke(event);
+};
+
+onMount(() => {
+const draw = () => {
+if (!canvas) {
+return;
+}
+
+const ctx = canvas.getContext('2d');
+if (!ctx) {
+return;
+}
+
+ctx.fillStyle = '#111';
+ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+canvasStore.getSortedRowIds('strokes').forEach((id) => {
+const stroke =
+  {{#if typescript}}canvasStore.getRow('strokes', id) as StrokeRow{{else}}canvasStore.getRow('strokes', id){{/if}};
+if (!stroke?.points) {
+return;
+}
+
+const pointsArray = JSON.parse(stroke.points){{#if typescript}} as number[]{{/if}};
+if (pointsArray.length < 2) {
+return;
+}
+
+ctx.strokeStyle = stroke.color;
+ctx.lineWidth = stroke.size * 2;
+ctx.lineCap = 'round';
+ctx.lineJoin = 'round';
+ctx.beginPath();
+ctx.moveTo(pointsArray[0], pointsArray[1]);
+for (let i = 2; i < pointsArray.length; i += 2) {
+ctx.lineTo(pointsArray[i], pointsArray[i + 1]);
+}
+ctx.stroke();
+});
+};
+
+canvasStore.addTablesListener(draw);
+draw();
+});
+</script>
+
+<canvas
+  bind:this={canvas}
+  id="drawingCanvas"
+  width="600"
+  height="400"
+  onmousedown={startStroke}
+  onmousemove={extendStroke}
+  onmouseup={endStroke}
+  onmouseleave={endStroke}
+  ontouchstart={handleTouchStart}
+  ontouchmove={handleTouchMove}
+  ontouchend={endStroke}
+></canvas>

package/templates/client/src/drawing/ColorPicker.svelte.hbs

@@ -0,0 +1,39 @@
+{{includeFile template="client/src/drawing/colorPicker.css.hbs" output="client/src/colorPicker.css"}}
+
+<script{{#if typescript}} lang="ts"{{/if}}>
+import './colorPicker.css';
+import {onMount} from 'svelte';
+import {settingsStore} from './settingsStore';
+
+const colors = ['#d81b60', '#1976d2', '#388e3c', '#f57c00', '#7b1fa2', '#fff'];
+const getCurrentColor = () =>
+  {{#if typescript}}(settingsStore.getValue('brushColor') as string | undefined) ?? '#d81b60'{{else}}settingsStore.getValue('brushColor') ?? '#d81b60'{{/if}};
+
+let currentColor = $state(getCurrentColor());
+
+const updateActive = () => {
+currentColor = getCurrentColor();
+};
+
+const setColor = (color{{#if typescript}}: string{{/if}}) => {
+settingsStore.setValue('brushColor', color);
+};
+
+onMount(() => {
+settingsStore.addValueListener('brushColor', updateActive);
+updateActive();
+});
+</script>
+
+<div id="colorPicker">
+  {#each colors as color (color)}
+    <button
+      class="colorBtn"
+      class:active={currentColor === color}
+      style={`background: ${color}`}
+      onclick={() => setColor(color)}
+      aria-label={`Select ${color} brush`}
+      title={color}
+    ></button>
+  {/each}
+</div>

package/templates/client/src/drawing/DrawingControls.svelte.hbs

@@ -0,0 +1,22 @@
+{{includeFile template="client/src/shared/button.css.hbs" output="client/src/button.css"}}
+{{includeFile template="client/src/drawing/drawingControls.css.hbs" output="client/src/drawingControls.css"}}
+{{includeFile template="client/src/drawing/ColorPicker.svelte.hbs" output="client/src/ColorPicker.svelte"}}
+{{includeFile template="client/src/drawing/BrushSize.svelte.hbs" output="client/src/BrushSize.svelte"}}
+
+<script>
+import './button.css';
+import './drawingControls.css';
+import BrushSize from './BrushSize.svelte';
+import ColorPicker from './ColorPicker.svelte';
+import {canvasStore} from './canvasStore';
+
+const clearStrokes = () => {
+canvasStore.delTable('strokes');
+};
+</script>
+
+<div id="drawingControls">
+  <ColorPicker />
+  <BrushSize />
+  <button class="primary" onclick={clearStrokes}>Clear</button>
+</div>

package/templates/client/src/game/App.svelte.hbs

@@ -0,0 +1,23 @@
+{{includeFile template="client/src/game/store.ts.hbs" output="client/src/store.ts"}}
+{{includeFile template="client/src/shared/Loading.svelte.hbs" output="client/src/Loading.svelte"}}
+{{includeFile template="client/src/game/Game.svelte.hbs" output="client/src/Game.svelte"}}
+
+<script{{#if typescript}} lang="ts"{{/if}}>
+import {onMount} from 'svelte';
+import Game from './Game.svelte';
+import Loading from './Loading.svelte';
+import {storeReady} from './store';
+
+let loading = $state(true);
+
+onMount(async () => {
+await storeReady;
+loading = false;
+});
+</script>
+
+{#if loading}
+  <Loading />
+{:else}
+  <Game />
+{/if}

package/templates/client/src/game/Board.svelte.hbs

@@ -0,0 +1,71 @@
+{{includeFile template="client/src/game/board.css.hbs" output="client/src/board.css"}}
+{{includeFile template="client/src/game/Square.svelte.hbs" output="client/src/Square.svelte"}}
+
+<script{{#if typescript}} lang="ts"{{/if}}>
+import './board.css';
+import {onMount} from 'svelte';
+import Square from './Square.svelte';
+import {store} from './store';
+
+const getSquares = () => {
+const gameStatus =
+  {{#if typescript}}(store.getValue('gameStatus') as string | undefined) ?? 'playing'{{else}}store.getValue('gameStatus') ?? 'playing'{{/if}};
+const winningLine =
+  {{#if typescript}}(store.getValue('winningLine') as string | undefined) ?? ''{{else}}store.getValue('winningLine') ?? ''{{/if}};
+const currentPlayer =
+  {{#if typescript}}(store.getValue('currentPlayer') as string | undefined) ?? 'X'{{else}}store.getValue('currentPlayer') ?? 'X'{{/if}};
+const winningPositions = new Set(
+winningLine ? winningLine.split(',') : [],
+);
+const disabled = gameStatus !== 'playing';
+
+return Array.from({length: 9}, (_, i) => {
+const position = i.toString();
+const value =
+  {{#if typescript}}(store.getCell('board', position, 'value') as string | undefined) ?? ''{{else}}store.getCell('board', position, 'value') ?? ''{{/if}};
+
+return {
+position,
+value,
+disabled: disabled || !!value,
+winning: winningPositions.has(position),
+currentPlayer,
+};
+});
+};
+
+let squares = $state(getSquares());
+
+const updateBoard = () => {
+squares = getSquares();
+};
+
+const handleSquareClick = (position{{#if typescript}}: string{{/if}}) => {
+const gameStatus =
+  {{#if typescript}}(store.getValue('gameStatus') as string | undefined) ?? 'playing'{{else}}store.getValue('gameStatus') ?? 'playing'{{/if}};
+const currentPlayer =
+  {{#if typescript}}(store.getValue('currentPlayer') as string | undefined) ?? 'X'{{else}}store.getValue('currentPlayer') ?? 'X'{{/if}};
+const value = store.getCell('board', position, 'value');
+
+if (gameStatus === 'playing' && !value && currentPlayer) {
+store.setCell('board', position, 'value', currentPlayer);
+}
+};
+
+onMount(() => {
+store.addValuesListener(updateBoard);
+store.addTableListener('board', updateBoard);
+updateBoard();
+});
+</script>
+
+<div id="board">
+  {#each squares as square (square.position)}
+    <Square
+      value={square.value}
+      disabled={square.disabled}
+      winning={square.winning}
+      handleClick={() => handleSquareClick(square.position)}
+    />
+  {/each}
+</div>

package/templates/client/src/game/Game.svelte.hbs

@@ -0,0 +1,64 @@
+{{includeFile template="client/src/shared/button.css.hbs" output="client/src/button.css"}}
+{{includeFile template="client/src/game/Board.svelte.hbs" output="client/src/Board.svelte"}}
+{{includeFile template="client/src/game/GameStatus.svelte.hbs" output="client/src/GameStatus.svelte"}}
+
+<script>
+import './button.css';
+import {onMount} from 'svelte';
+import Board from './Board.svelte';
+import GameStatus from './GameStatus.svelte';
+import {store} from './store';
+
+const WINNING_LINES = [
+['0', '1', '2'], ['3', '4', '5'], ['6', '7', '8'],
+['0', '3', '6'], ['1', '4', '7'], ['2', '5', '8'],
+['0', '4', '8'], ['2', '4', '6'],
+];
+
+const checkGameState = () => {
+const gameStatus = store.getValue('gameStatus');
+if (gameStatus !== 'playing') {
+return;
+}
+
+for (const line of WINNING_LINES) {
+const [a, b, c] = line;
+const cellA = store.getCell('board', a, 'value');
+const cellB = store.getCell('board', b, 'value');
+const cellC = store.getCell('board', c, 'value');
+
+if (cellA && cellA === cellB && cellA === cellC) {
+store.setValue('gameStatus', 'won');
+store.setValue('winner', cellA);
+store.setValue('winningLine', line.join(','));
+return;
+}
+}
+
+if (store.getRowCount('board') === 9) {
+store.setValue('gameStatus', 'draw');
+return;
+}
+
+const currentPlayer = store.getValue('currentPlayer');
+store.setValue('currentPlayer', currentPlayer === 'X' ? 'O' : 'X');
+};
+
+const resetGame = () => {
+store.delTable('board');
+store.setValues({
+currentPlayer: 'X',
+gameStatus: 'playing',
+});
+};
+
+onMount(() => {
+store.addTableListener('board', checkGameState, true);
+});
+</script>
+
+<GameStatus />
+<Board />
+<div style="text-align: center; margin-top: 2rem;">
+  <button class="primary" onclick={resetGame}>New Game</button>
+</div>

package/templates/client/src/game/GameStatus.svelte.hbs

@@ -0,0 +1,37 @@
+{{includeFile template="client/src/game/gameStatus.css.hbs" output="client/src/gameStatus.css"}}
+
+<script{{#if typescript}} lang="ts"{{/if}}>
+import './gameStatus.css';
+import {onMount} from 'svelte';
+import {store} from './store';
+
+const getStatus = () => ({
+gameStatus:
+  {{#if typescript}}(store.getValue('gameStatus') as string | undefined) ?? 'playing'{{else}}store.getValue('gameStatus') ?? 'playing'{{/if}},
+currentPlayer:
+  {{#if typescript}}(store.getValue('currentPlayer') as string | undefined) ?? 'X'{{else}}store.getValue('currentPlayer') ?? 'X'{{/if}},
+winner:
+  {{#if typescript}}(store.getValue('winner') as string | undefined) ?? ''{{else}}store.getValue('winner') ?? ''{{/if}},
+});
+
+let status = $state(getStatus());
+
+const updateStatus = () => {
+status = getStatus();
+};
+
+onMount(() => {
+store.addValuesListener(updateStatus);
+updateStatus();
+});
+</script>
+
+<div id="gameStatus">
+  {#if status.gameStatus === 'playing'}
+    Player <span class="player">{status.currentPlayer}</span>'s turn
+  {:else if status.gameStatus === 'won'}
+    Player <span class="winner">{status.winner}</span> wins!
+  {:else if status.gameStatus === 'draw'}
+    It's a draw!
+  {/if}
+</div>

package/templates/client/src/game/Square.svelte.hbs

@@ -0,0 +1,25 @@
+{{includeFile template="client/src/game/square.css.hbs" output="client/src/square.css"}}
+
+<script{{#if typescript}} lang="ts"{{/if}}>
+import './square.css';
+
+let {
+value,
+disabled,
+winning,
+handleClick,
+}{{#if typescript}}: {
+value: string;
+disabled: boolean;
+winning: boolean;
+handleClick: () => void;
+}{{/if}} = $props();
+</script>
+
+<button
+  class={`square${disabled ? ' disabled' : ''}${winning ? ' winning' : ''}`}
+  onclick={handleClick}
+  disabled={disabled}
+>
+  {value}
+</button>

package/templates/client/src/index.tsx.hbs

@@ -5,18 +5,29 @@
   }
 {{/if}}
 
+{{#if vanilla}}
+  {{addImport "import {app} from './app';"}}
+  {{includeFile template="client/src/{{appType}}/app.ts.hbs" output="client/src/app.{{scriptExt}}"}}
+  addEventListener('load', () => {
+  app();
+  });
+{{/if}}
 {{#if react}}
   {{addImport "import ReactDOM from 'react-dom/client';"}}
   {{addImport "import {App} from './App';"}}
-  {{includeFile template="client/src/{{appType}}/App.tsx.hbs" output="client/src/App.{{ext}}"}}
+  {{includeFile template="client/src/{{appType}}/App.tsx.hbs" output="client/src/App.{{componentExt}}"}}
   addEventListener('load', () => {
   ReactDOM.createRoot(document.getElementById('app')!).render(
   <App />);
   });
-{{else}}
-  {{addImport "import {app} from './app';"}}
-  {{includeFile template="client/src/{{appType}}/app.ts.hbs" output="client/src/app.{{ext}}"}}
+{{/if}}
+{{#if svelte}}
+  {{addImport "import {mount} from 'svelte';"}}
+  {{addImport "import App from './App.svelte';"}}
+  {{includeFile template="client/src/{{appType}}/App.svelte.hbs" output="client/src/App.{{componentExt}}"}}
   addEventListener('load', () => {
-  app();
+  mount(App, {
+  target: document.getElementById('app')!,
+  });
   });
 {{/if}}