create-tinybase 0.1.4 → 0.2.0

package/templates/client/src/drawing/canvas.ts.hbs

@@ -0,0 +1,103 @@
+{{includeFile template="client/src/drawing/canvas.css.hbs" output="client/src/canvas.css"}}
+import './canvas.css';
+import {getUniqueId} from 'tinybase';
+import type {Store as SettingsStore} from './settingsStore';
+import type {Store as CanvasStore} from './canvasStore';
+
+export const createCanvas = (settingsStore: SettingsStore, canvasStore: CanvasStore): HTMLCanvasElement => {
+const canvas = document.createElement('canvas');
+canvas.id = 'drawingCanvas';
+canvas.width = 600;
+canvas.height = 400;
+
+const ctx = canvas.getContext('2d')!;
+let isDrawing = false;
+let currentStrokeId: string | null = null;
+let pointIndex = 0;
+
+const draw = () => {
+ctx.fillStyle = '#111';
+ctx.fillRect(0, 0, canvas!.width, canvas!.height);
+
+const strokes = canvasStore.getTable('strokes');
+Object.entries(strokes).forEach(([id, stroke]: [string, any]) => {
+const points: Array<{x: number; y: number}> = [];
+  let i = 0;
+  while (stroke[`x${i}`] !== undefined && stroke[`y${i}`] !== undefined) {
+  points.push({x: stroke[`x${i}`], y: stroke[`y${i}`]});
+  i++;
+  }
+  if (points.length > 0) {
+  ctx.strokeStyle = stroke.color;
+  ctx.lineWidth = stroke.size * 2;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+  ctx.beginPath();
+  ctx.moveTo(points[0].x, points[0].y);
+  for (let i = 1; i < points.length; i++) { ctx.lineTo(points[i].x, points[i].y); } ctx.stroke(); } }); }; const addPoint=(e: MouseEvent | TouchEvent)=> {
+    if (!currentStrokeId) return;
+
+    const rect = canvas!.getBoundingClientRect();
+    const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+    const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+
+    canvasStore.setCell('strokes', currentStrokeId, `x${pointIndex}`, clientX - rect.left);
+    canvasStore.setCell('strokes', currentStrokeId, `y${pointIndex}`, clientY - rect.top);
+    pointIndex++;
+    };
+
+    const startStroke = (e: MouseEvent | TouchEvent) => {
+    const brush = settingsStore.getValues() as any;
+    currentStrokeId = getUniqueId();
+    pointIndex = 0;
+
+    canvasStore.setRow('strokes', currentStrokeId, {
+    color: brush.brushColor,
+    size: brush.brushSize,
+    });
+
+    addPoint(e);
+    };
+
+    canvas.addEventListener('mousedown', (e) => {
+    isDrawing = true;
+    startStroke(e);
+    });
+
+    canvas.addEventListener('mouseup', () => {
+    isDrawing = false;
+    currentStrokeId = null;
+    });
+
+    canvas.addEventListener('mouseleave', () => {
+    isDrawing = false;
+    currentStrokeId = null;
+    });
+
+    canvas.addEventListener('mousemove', (e) => {
+    if (isDrawing) addPoint(e);
+    });
+
+    canvas.addEventListener('touchstart', (e) => {
+    isDrawing = true;
+    startStroke(e);
+    e.preventDefault();
+    });
+
+    canvas.addEventListener('touchmove', (e) => {
+    if (isDrawing) {
+    addPoint(e);
+    e.preventDefault();
+    }
+    });
+
+    canvas.addEventListener('touchend', () => {
+    isDrawing = false;
+    currentStrokeId = null;
+    });
+
+    canvasStore.addTablesListener(draw);
+    draw();
+
+    return canvas;
+    };

package/templates/client/src/drawing/canvasStore.ts.hbs

@@ -0,0 +1,42 @@
+{{#if schemas}}
+  import {createMergeableStore} from 'tinybase/with-schemas';
+{{else}}
+  import {createMergeableStore} from 'tinybase';
+{{/if}}
+import {getUniqueId} from 'tinybase';
+
+const STORE_ID = 'canvas';
+
+{{#if schemas}}
+  const TABLES_SCHEMA = {
+  strokes: {
+  color: {type: 'string'},
+  size: {type: 'number'},
+  },
+  } as const;
+
+{{/if}}
+export const canvasStore = createMergeableStore(STORE_ID){{#if schemas}}
+  .setTablesSchema(TABLES_SCHEMA){{/if}}
+.setDefaultContent([{strokes: {}}, {}]);
+
+{{#if sync}}
+  {{includeFile template="client/src/shared/config.ts.hbs" output="client/src/config.ts"}}
+  {{addImport "import {SERVER} from './config';"}}
+  {{addImport "import ReconnectingWebSocket from 'reconnecting-websocket';"}}
+  {{addImport "import {createWsSynchronizer} from 'tinybase/synchronizers/synchronizer-ws-client';"}}
+
+  const serverPathId = location.pathname;
+  createWsSynchronizer(
+  canvasStore,
+  new ReconnectingWebSocket(SERVER + serverPathId),
+  ).then(async (synchronizer) => {
+  await synchronizer.startSync();
+
+  synchronizer.getWebSocket().addEventListener('open', () => {
+  synchronizer.load().then(() => synchronizer.save());
+  });
+  });
+{{/if}}
+
+export type CanvasStore = typeof canvasStore;

package/templates/client/src/drawing/colorPicker.css.hbs

@@ -0,0 +1,21 @@
+#colorPicker {
+display: flex;
+gap: 0;
+align-items: center;
+}
+
+.colorBtn {
+width: 2rem;
+height: 2rem;
+border: 2px solid var(--border);
+border-radius: 0.25rem;
+cursor: pointer;
+transition: border-color 0.2s;
+margin: 0 0 0 0.5rem;
+padding: 0;
+}
+
+.colorBtn:hover,
+.colorBtn.active {
+border-color: var(--accent);
+}

package/templates/client/src/drawing/colorPicker.ts.hbs

@@ -0,0 +1,34 @@
+{{includeFile template="client/src/drawing/colorPicker.css.hbs" output="client/src/colorPicker.css"}}
+import './colorPicker.css';
+import type {Store as SettingsStore} from './settingsStore';
+
+export const createColorPicker = (store: SettingsStore): HTMLDivElement => {
+const colors = ['#d81b60', '#1976d2', '#388e3c', '#f57c00', '#7b1fa2', '#fff'];
+const container = document.createElement('div');
+container.id = 'colorPicker';
+
+const buttons: HTMLButtonElement[] = [];
+
+colors.forEach((color) => {
+const btn = document.createElement('button');
+btn.className = 'colorBtn';
+btn.style.background = color;
+btn.addEventListener('click', () => {
+store.setValue('brushColor', color);
+});
+container.appendChild(btn);
+buttons.push(btn);
+});
+
+const updateActive = () => {
+const currentColor = store.getValue('brushColor');
+buttons.forEach((btn, i) => {
+btn.classList.toggle('active', colors[i] === currentColor);
+});
+};
+
+store.addValueListener('brushColor', updateActive);
+updateActive();
+
+return container;
+};

package/templates/client/src/drawing/drawingControls.css.hbs

@@ -0,0 +1,12 @@
+#drawingControls {
+display: flex;
+flex-wrap: wrap;
+gap: 0.75rem;
+align-items: center;
+margin: 0 auto 1rem;
+padding: 0.75rem;
+border: 1px solid var(--border);
+border-radius: 0.375rem;
+justify-content: space-between;
+max-width: 600px;
+}

package/templates/client/src/drawing/drawingControls.ts.hbs

@@ -0,0 +1,26 @@
+{{includeFile template="client/src/drawing/drawingControls.css.hbs" output="client/src/drawingControls.css"}}
+import './drawingControls.css';
+import type {Store as SettingsStore} from './settingsStore';
+import type {Store as CanvasStore} from './canvasStore';
+
+{{includeFile template="client/src/shared/button.ts.hbs" output="client/src/button.{{ext}}"}}
+import {createButton} from './button';
+
+{{includeFile template="client/src/drawing/colorPicker.ts.hbs" output="client/src/colorPicker.{{ext}}"}}
+import {createColorPicker} from './colorPicker';
+
+{{includeFile template="client/src/drawing/brushSize.ts.hbs" output="client/src/brushSize.{{ext}}"}}
+import {createBrushSize} from './brushSize';
+
+export const createDrawingControls = (settingsStore: SettingsStore, canvasStore: CanvasStore): HTMLDivElement => {
+const controls = document.createElement('div');
+controls.id = 'drawingControls';
+
+controls.appendChild(createColorPicker(settingsStore));
+controls.appendChild(createBrushSize(settingsStore));
+
+const clearButton = createButton('Clear', () => canvasStore.delTable('strokes'), 'primary');
+controls.appendChild(clearButton);
+
+return controls;
+};

package/templates/client/src/drawing/settingsStore.ts.hbs

@@ -0,0 +1,21 @@
+{{#if schemas}}
+  import {createStore} from 'tinybase/with-schemas';
+{{else}}
+  import {createStore} from 'tinybase';
+{{/if}}
+
+const STORE_ID = 'settings';
+
+{{#if schemas}}
+  const VALUES_SCHEMA = {
+  brushColor: {type: 'string'},
+  brushSize: {type: 'number'},
+  } as const;
+
+{{/if}}
+export const settingsStore = createStore(){{#if schemas}}
+  .setValuesSchema(VALUES_SCHEMA){{/if}}
+.setValue('brushColor', '#d81b60')
+.setValue('brushSize', 5);
+
+export type SettingsStore = typeof settingsStore;

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

@@ -0,0 +1,28 @@
+import {StrictMode} from 'react';
+
+{{#if schemas}}
+  import {Provider} from 'tinybase/ui-react/with-schemas';
+{{else}}
+  import {Provider} from 'tinybase/ui-react';
+{{/if}}
+import {Inspector} from 'tinybase/ui-react-inspector';
+
+{{includeFile template="client/src/game/Store.tsx.hbs" output="client/src/Store.{{ext}}"}}
+import {Store} from './Store';
+
+{{includeFile template="client/src/game/Game.tsx.hbs" output="client/src/Game.{{ext}}"}}
+import {Game} from './Game';
+
+const App = () => {
+return (
+<StrictMode>
+  <Provider>
+    <Store />
+    <Game />
+    <Inspector />
+  </Provider>
+</StrictMode>
+);
+};
+
+export {App};

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

@@ -0,0 +1,27 @@
+{{includeFile template="client/src/game/board.css.hbs" output="client/src/board.css"}}
+import './board.css';
+import {useMemo} from 'react';
+import {useValue, STORE_ID} from './Store';
+
+{{includeFile template="client/src/game/Square.tsx.hbs" output="client/src/Square.{{ext}}"}}
+import {Square} from './Square';
+
+export const Board = () => {
+const gameStatus = useValue('gameStatus', STORE_ID);
+const winningLine = useValue('winningLine', STORE_ID);
+
+const winningPositions = useMemo(() => {
+if (!winningLine) return new Set();
+return new Set(winningLine.split(',').map(Number));
+}, [winningLine]);
+
+const disabled = gameStatus !== 'playing';
+
+return (
+<div id="board">
+  {Array.from({length: 9}, (_, i) => (
+  <Square key={i} position={i} disabled={disabled} winning={winningPositions.has(i)} />
+  ))}
+</div>
+);
+};

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

@@ -0,0 +1,78 @@
+import {useStore, useSetValuesCallback, useTableListener, STORE_ID} from './Store';
+
+{{includeFile template="client/src/shared/Button.tsx.hbs" output="client/src/Button.{{ext}}"}}
+import {Button} from './Button';
+
+{{includeFile template="client/src/game/Board.tsx.hbs" output="client/src/Board.{{ext}}"}}
+import {Board} from './Board';
+
+{{includeFile template="client/src/game/GameStatus.tsx.hbs" output="client/src/GameStatus.{{ext}}"}}
+import {GameStatus} from './GameStatus';
+
+const WINNING_LINES = [
+[0, 1, 2], [3, 4, 5], [6, 7, 8], // rows
+[0, 3, 6], [1, 4, 7], [2, 5, 8], // columns
+[0, 4, 8], [2, 4, 6], // diagonals
+];
+
+export const Game = () => {
+const store = useStore(STORE_ID);
+
+useTableListener(
+'board',
+() => {
+const gameStatus = store.getValue('gameStatus');
+if (gameStatus !== 'playing') return;
+
+const board = store.getTable('board');
+
+// Check for winner
+for (const line of WINNING_LINES) {
+const [a, b, c] = line;
+const cellA = board[a]?.value;
+const cellB = board[b]?.value;
+const cellC = board[c]?.value;
+
+if (cellA && cellA === cellB && cellA === cellC) {
+store.setValue('gameStatus', 'won');
+store.setValue('winner', cellA);
+store.setValue('winningLine', line.join(','));
+return;
+}
+}
+
+// Check for draw
+const filledCells = Object.values(board).filter((cell: any) => cell.value).length;
+if (filledCells === 9) {
+store.setValue('gameStatus', 'draw');
+return;
+}
+
+// Switch player after each move
+const currentPlayer = store.getValue('currentPlayer');
+store.setValue('currentPlayer', currentPlayer === 'X' ? 'O' : 'X');
+},
+[],
+true,
+STORE_ID,);
+
+const resetGame = useSetValuesCallback(
+() => {
+store.delTable('board');
+return {currentPlayer: 'X',
+gameStatus: 'playing',
+};
+},
+[],
+);
+
+return (
+<>
+  <GameStatus />
+  <Board />
+  <div style=\{{textAlign: 'center', marginTop: '2rem'}}>
+    <Button onClick={resetGame} variant="primary">New Game</Button>
+  </div>
+</>
+);
+};

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

@@ -0,0 +1,21 @@
+{{includeFile template="client/src/game/gameStatus.css.hbs" output="client/src/gameStatus.css"}}
+import './gameStatus.css';
+import {useValue, STORE_ID} from './Store';
+
+export const GameStatus = () => {
+const gameStatus = useValue('gameStatus', STORE_ID);
+const currentPlayer = useValue('currentPlayer', STORE_ID);
+const winner = useValue('winner', STORE_ID);
+
+return (
+<div id="gameStatus">
+  {gameStatus === 'playing' && (
+  <>Player <span className="player">{currentPlayer}</span>'s turn</>
+  )}
+  {gameStatus === 'won' && (
+  <>Player <span className="winner">{winner}</span> wins!</>
+  )}
+  {gameStatus === 'draw' && <>It's a draw!</>}
+</div>
+);
+};

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

@@ -0,0 +1,23 @@
+{{includeFile template="client/src/game/square.css.hbs" output="client/src/square.css"}}
+import './square.css';
+import {useCell, useStore, useValue, STORE_ID} from './Store';
+
+export const Square = ({position, disabled, winning}: {position: number; disabled: boolean; winning: boolean}) => {
+const store = useStore(STORE_ID);
+const value = useCell('board', position.toString(), 'value', STORE_ID);
+const currentPlayer = useValue('currentPlayer', STORE_ID);
+
+const isDisabled = disabled || !!value;
+
+const handleClick = () => {
+if (!isDisabled) {
+store.setCell('board', position.toString(), 'value', currentPlayer);
+}
+};
+
+return (
+<button className={`square${isDisabled ? ' disabled' : '' }${winning ? ' winning' : '' }`} onClick={handleClick} disabled={isDisabled}>
+  {value || ''}
+</button>
+);
+};

package/templates/client/src/game/Store.tsx.hbs

@@ -0,0 +1,67 @@
+{{#if schemas}}
+  import {createMergeableStore} from 'tinybase/with-schemas';
+  import * as UiReact from 'tinybase/ui-react/with-schemas';
+  import {type NoTablesSchema} from 'tinybase/with-schemas';
+{{else}}
+  import {createMergeableStore} from 'tinybase';
+  import {useCreateStore, useProvideStore, useStore, useSetValuesCallback, useTableListener, useCell, useValue} from 'tinybase/ui-react';
+{{/if}}
+
+export const STORE_ID = 'game';
+
+{{#if schemas}}
+  const VALUES_SCHEMA = {
+  currentPlayer: {type: 'string'},
+  gameStatus: {type: 'string'},
+  winner: {type: 'string', default: ''},
+  winningLine: {type: 'string', default: ''},
+  } as const;
+
+  type Schemas = [NoTablesSchema, typeof VALUES_SCHEMA];
+
+  const {useCreateStore, useProvideStore, useStore, useSetValuesCallback, useTableListener, useCell, useValue} = UiReact as UiReact.WithSchemas<Schemas>;
+{{/if}}
+
+export {useStore, useSetValuesCallback, useTableListener, useCell, useValue};
+
+export const Store = () => {
+const store = useCreateStore(() =>
+createMergeableStore(STORE_ID){{#if schemas}}
+  .setValuesSchema(VALUES_SCHEMA){{/if}}
+.setDefaultContent([
+{},
+{
+currentPlayer: 'X',
+gameStatus: 'playing',
+},
+]),
+);
+
+useProvideStore(STORE_ID, store);
+
+{{#if sync}}
+  {{includeFile template="client/src/shared/config.ts.hbs" output="client/src/config.ts"}}
+  {{addImport "import {SERVER} from './config';"}}
+  {{addImport "import ReconnectingWebSocket from 'reconnecting-websocket';"}}
+  {{addImport "import {createWsSynchronizer} from 'tinybase/synchronizers/synchronizer-ws-client';"}}
+  {{addImport "import {useCreateSynchronizer} from 'tinybase/ui-react';"}}
+  {{addImport "import type {MergeableStore} from 'tinybase';"}}
+
+  useCreateSynchronizer(store, async (store: MergeableStore) => {
+  const serverPathId = location.pathname;
+  const synchronizer = await createWsSynchronizer(
+  store,
+  new ReconnectingWebSocket(SERVER + serverPathId),
+  );
+  await synchronizer.startSync();
+
+  synchronizer.getWebSocket().addEventListener('open', () => {
+  synchronizer.load().then(() => synchronizer.save());
+  });
+
+  return synchronizer;
+  });
+{{/if}}
+
+return null;
+};

package/templates/client/src/game/app.ts.hbs

@@ -0,0 +1,12 @@
+{{includeFile template="client/src/game/store.ts.hbs" output="client/src/store.ts"}}
+import {store} from './store';
+
+{{includeFile template="client/src/game/game.ts.hbs" output="client/src/game.{{ext}}"}}
+import {createGame} from './game';
+
+const app = () => {
+const appContainer = document.getElementById('app')!;
+appContainer.appendChild(createGame(store));
+};
+
+export {app};

package/templates/client/src/game/board.css.hbs

@@ -0,0 +1,13 @@
+#board {
+display: grid;
+grid-template-columns: repeat(3, 100px);
+grid-template-rows: repeat(3, 100px);
+gap: 1px;
+background: var(--border);
+border: 2px solid var(--border);
+border-radius: 0.5rem;
+overflow: hidden;
+margin: 0 auto 2rem;
+width: fit-content;
+padding: 1px;
+}

package/templates/client/src/game/board.ts.hbs

@@ -0,0 +1,39 @@
+{{includeFile template="client/src/game/board.css.hbs" output="client/src/board.css"}}
+import './board.css';
+import type {GameStore} from './store';
+
+{{includeFile template="client/src/game/square.ts.hbs" output="client/src/square.{{ext}}"}}
+import {createSquare} from './square';
+
+export const createBoard = (store: GameStore): HTMLDivElement => {
+const board = document.createElement('div');
+board.id = 'board';
+
+const render = () => {
+const gameStatus = store.getValue('gameStatus');
+const winningLine = store.getValue('winningLine');
+const currentPlayer = store.getValue('currentPlayer');
+const winningPositions = new Set(
+winningLine ? winningLine.split(',').map(Number) : []
+);
+const disabled = gameStatus !== 'playing';
+
+board.innerHTML = '';
+for (let i = 0; i < 9; i++) { const cell=store.getCell('board', i.toString(), 'value' ); const square=createSquare( i, cell, ()=> {
+  if (gameStatus === 'playing' && !cell) {
+  store.setCell('board', i.toString(), 'value', currentPlayer);
+  }
+  },
+  disabled || !!cell,
+  winningPositions.has(i)
+  );
+  board.appendChild(square);
+  }
+  };
+
+  store.addValuesListener(render);
+  store.addTableListener('board', render);
+  render();
+
+  return board;
+  };

package/templates/client/src/game/game.ts.hbs

@@ -0,0 +1,74 @@
+import type {GameStore} from './store';
+
+{{includeFile template="client/src/shared/button.ts.hbs" output="client/src/button.{{ext}}"}}
+import {createButton} from './button';
+
+{{includeFile template="client/src/game/board.ts.hbs" output="client/src/board.{{ext}}"}}
+import {createBoard} from './board';
+
+{{includeFile template="client/src/game/gameStatus.ts.hbs" output="client/src/gameStatus.{{ext}}"}}
+import {createGameStatus} from './gameStatus';
+
+const WINNING_LINES = [
+[0, 1, 2], [3, 4, 5], [6, 7, 8], // rows
+[0, 3, 6], [1, 4, 7], [2, 5, 8], // columns
+[0, 4, 8], [2, 4, 6], // diagonals
+];
+
+export const createGame = (store: GameStore): HTMLDivElement => {
+const checkGameState = () => {
+const gameStatus = store.getValue('gameStatus');
+if (gameStatus !== 'playing') return;
+
+const board = store.getTable('board');
+
+// Check for winner
+for (const line of WINNING_LINES) {
+const [a, b, c] = line;
+const cellA = board[a]?.value;
+const cellB = board[b]?.value;
+const cellC = board[c]?.value;
+
+if (cellA && cellA === cellB && cellA === cellC) {
+store.setValue('gameStatus', 'won');
+store.setValue('winner', cellA);
+store.setValue('winningLine', line.join(','));
+return;
+}
+}
+
+// Check for draw
+const filledCells = Object.values(board).filter((cell: any) => cell.value).length;
+if (filledCells === 9) {
+store.setValue('gameStatus', 'draw');
+return;
+}
+
+// Switch player after each move
+const currentPlayer = store.getValue('currentPlayer');
+store.setValue('currentPlayer', currentPlayer === 'X' ? 'O' : 'X');
+};
+
+store.addTableListener('board', checkGameState, true);
+
+const resetGame = () => {
+store.delTable('board');
+store.setValues({
+currentPlayer: 'X',
+gameStatus: 'playing',
+});
+};
+
+const gameContainer = document.createElement('div');
+
+gameContainer.appendChild(createGameStatus(store));
+gameContainer.appendChild(createBoard(store));
+
+const buttonContainer = document.createElement('div');
+buttonContainer.style.textAlign = 'center';
+buttonContainer.style.marginTop = '2rem';
+buttonContainer.appendChild(createButton('New Game', resetGame, 'primary'));
+gameContainer.appendChild(buttonContainer);
+
+return gameContainer;
+};

package/templates/client/src/game/gameStatus.css.hbs

@@ -0,0 +1,21 @@
+#gameStatus {
+text-align: center;
+font-size: 1.5rem;
+font-weight: 800;
+margin: 2rem 0 1rem;
+color: var(--accent);
+}
+
+#gameStatus .winner {
+color: var(--accent);
+animation: pulse 1s ease-in-out infinite;
+}
+
+@keyframes pulse {
+0%, 100% {
+opacity: 1;
+}
+50% {
+opacity: 0.7;
+}
+}