create-tinybase 0.2.4 → 0.3.0

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

@@ -1,8 +1,10 @@
 {{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';
+{{addImport "import './canvas.css';"}}
+{{addImport "import {getHlcFunctions} from 'tinybase';"}}
+{{addImport "import type {SettingsStore} from './settingsStore';"}}
+{{addImport "import type {CanvasStore, StrokeRow} from './canvasStore';"}}
+
+const [getNextHlc] = getHlcFunctions();
 
 export const createCanvas = (settingsStore: SettingsStore, canvasStore: CanvasStore): HTMLCanvasElement => {
 const canvas = document.createElement('canvas');
@@ -13,91 +15,87 @@ 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++;
+const sortedIds = canvasStore.getSortedRowIds('strokes');
+sortedIds.forEach((id) => {
+const stroke = canvasStore.getRow('strokes', id) as StrokeRow;
+if (stroke.points) {
+const pointsArray = JSON.parse(stroke.points) as number[];
+if (pointsArray.length >= 2) {
+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(); } } }); }; 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;
+
+  const pointsArray = JSON.parse(canvasStore.getCell('strokes', currentStrokeId, 'points') as string ?? '[]') as number[];
+  pointsArray.push(clientX - rect.left, clientY - rect.top);
+  canvasStore.setCell('strokes', currentStrokeId, 'points', JSON.stringify(pointsArray));
+  };
+
+  const startStroke = (e: MouseEvent | TouchEvent) => {
+  const {brushColor, brushSize} = settingsStore.getValues();
+  currentStrokeId = getNextHlc();
+
+  canvasStore.setRow('strokes', currentStrokeId, {
+  color: brushColor,
+  size: brushSize,
+  points: '[]',
+  });
+
+  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();
   }
-  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;
-    };
+  });
+
+  canvas.addEventListener('touchend', () => {
+  isDrawing = false;
+  currentStrokeId = null;
+  });
+
+  canvasStore.addTablesListener(draw);
+  draw();
+
+  return canvas;
+  };

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

@@ -1,42 +1,109 @@
 {{#if schemas}}
-  import {createMergeableStore} from 'tinybase/with-schemas';
+  {{addImport "import {createMergeableStore, type Row} from 'tinybase/with-schemas';"}}
 {{else}}
-  import {createMergeableStore} from 'tinybase';
+  {{addImport "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'},
+  color: {type: 'string', default: ''},
+  size: {type: 'number', default: 1},
+  points: {type: 'string', default: '[]'},
   },
   } as const;
 
 {{/if}}
-export const canvasStore = createMergeableStore(STORE_ID){{#if schemas}}
+export const canvasStore = createMergeableStore(){{#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());
-  });
+export type StrokeRow = {{#if schemas}}Row<typeof TABLES_SCHEMA, 'strokes'>{{else}}{color: string; size: number; points: string}{{/if}};
+
+let resolveCanvasReady: () => void;
+export const canvasStoreReady = new Promise<void>((resolve) => {
+  resolveCanvasReady = resolve;
   });
-{{/if}}
 
-export type CanvasStore = typeof canvasStore;
+  {{#if persist}}
+    {{#if persistLocalStorage}}
+      {{#if schemas}}
+        {{addImport "import {createLocalPersister} from 'tinybase/persisters/persister-browser/with-schemas';"}}
+      {{else}}
+        {{addImport "import {createLocalPersister} from 'tinybase/persisters/persister-browser';"}}
+      {{/if}}
+
+      const canvasPersister = createLocalPersister(canvasStore, 'canvas');
+      canvasPersister.load().then(() => {
+      canvasPersister.startAutoSave();
+      resolveCanvasReady();
+      });
+    {{/if}}
+    {{#if persistSqlite}}
+      {{#if schemas}}
+        {{addImport "import {createSqliteWasmPersister} from 'tinybase/persisters/persister-sqlite-wasm/with-schemas';"}}
+      {{else}}
+        {{addImport "import {createSqliteWasmPersister} from 'tinybase/persisters/persister-sqlite-wasm';"}}
+      {{/if}}
+      {{includeFile template="client/src/shared/sqlite.ts.hbs" output="client/src/sqlite.ts"}}
+      {{addImport "import {getDb} from './sqlite';"}}
+
+      getDb().then(({sqlite3, db}) => {
+      const canvasPersister = createSqliteWasmPersister(canvasStore, sqlite3, db, 'canvas');
+      canvasPersister.load().then(() => {
+      canvasPersister.startAutoSave();
+      resolveCanvasReady();
+      });
+      });
+    {{/if}}
+    {{#if persistPglite}}
+      {{#if schemas}}
+        {{addImport "import {createPglitePersister} from 'tinybase/persisters/persister-pglite/with-schemas';"}}
+      {{else}}
+        {{addImport "import {createPglitePersister} from 'tinybase/persisters/persister-pglite';"}}
+      {{/if}}
+      {{includeFile template="client/src/shared/pglite.ts.hbs" output="client/src/pglite.{{ext}}"}}
+      {{addImport "import {getPgLite} from './pglite';"}}
+
+      getPgLite().then((pgLite) => {
+      createPglitePersister(canvasStore, pgLite, 'canvas').then((canvasPersister) => {
+      canvasPersister.load().then(() => {
+      canvasPersister.startAutoSave();
+      resolveCanvasReady();
+      });
+      });
+      });
+    {{/if}}
+  {{/if}}
+
+  {{#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';"}}
+    {{#if schemas}}
+      {{addImport "import {createWsSynchronizer} from 'tinybase/synchronizers/synchronizer-ws-client/with-schemas';"}}
+    {{else}}
+      {{addImport "import {createWsSynchronizer} from 'tinybase/synchronizers/synchronizer-ws-client';"}}
+    {{/if}}
+
+    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();
+    {{#unless persist}}resolveCanvasReady();{{/unless}}
+    });
+    });
+    });
+  {{/if}}
+
+  {{#unless persist}}{{#unless sync}}
+      resolveCanvasReady();
+    {{/unless}}{{/unless}}
+
+  export type CanvasStore = typeof canvasStore;

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

@@ -1,6 +1,6 @@
 {{includeFile template="client/src/drawing/colorPicker.css.hbs" output="client/src/colorPicker.css"}}
-import './colorPicker.css';
-import type {Store as SettingsStore} from './settingsStore';
+{{addImport "import './colorPicker.css';"}}
+{{addImport "import type {SettingsStore} from './settingsStore';"}}
 
 export const createColorPicker = (store: SettingsStore): HTMLDivElement => {
 const colors = ['#d81b60', '#1976d2', '#388e3c', '#f57c00', '#7b1fa2', '#fff'];
@@ -31,4 +31,4 @@ store.addValueListener('brushColor', updateActive);
 updateActive();
 
 return container;
-};
+};

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

@@ -1,16 +1,16 @@
 {{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';
+{{addImport "import './drawingControls.css';"}}
+{{addImport "import type {SettingsStore} from './settingsStore';"}}
+{{addImport "import type {CanvasStore} from './canvasStore';"}}
 
 {{includeFile template="client/src/shared/button.ts.hbs" output="client/src/button.{{ext}}"}}
-import {createButton} from './button';
+{{addImport "import {createButton} from './button';"}}
 
 {{includeFile template="client/src/drawing/colorPicker.ts.hbs" output="client/src/colorPicker.{{ext}}"}}
-import {createColorPicker} from './colorPicker';
+{{addImport "import {createColorPicker} from './colorPicker';"}}
 
 {{includeFile template="client/src/drawing/brushSize.ts.hbs" output="client/src/brushSize.{{ext}}"}}
-import {createBrushSize} from './brushSize';
+{{addImport "import {createBrushSize} from './brushSize';"}}
 
 export const createDrawingControls = (settingsStore: SettingsStore, canvasStore: CanvasStore): HTMLDivElement => {
 const controls = document.createElement('div');
@@ -23,4 +23,4 @@ const clearButton = createButton('Clear', () => canvasStore.delTable('strokes'),
 controls.appendChild(clearButton);
 
 return controls;
-};
+};

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

@@ -1,11 +1,9 @@
 {{#if schemas}}
-  import {createStore} from 'tinybase/with-schemas';
+  {{addImport "import {createStore} from 'tinybase/with-schemas';"}}
 {{else}}
-  import {createStore} from 'tinybase';
+  {{addImport "import {createStore} from 'tinybase';"}}
 {{/if}}
 
-const STORE_ID = 'settings';
-
 {{#if schemas}}
   const VALUES_SCHEMA = {
   brushColor: {type: 'string'},
@@ -14,8 +12,65 @@ const STORE_ID = 'settings';
 
 {{/if}}
 export const settingsStore = createStore(){{#if schemas}}
-  .setValuesSchema(VALUES_SCHEMA){{/if}}
-.setValue('brushColor', '#d81b60')
-.setValue('brushSize', 5);
+  .setValuesSchema(VALUES_SCHEMA){{/if}};
+
+let resolveSettingsReady: () => void;
+export const settingsStoreReady = new Promise<void>((resolve) => {
+  resolveSettingsReady = resolve;
+  });
+
+  {{#if persist}}
+    {{#if persistLocalStorage}}
+      {{#if schemas}}
+        {{addImport "import {createLocalPersister} from 'tinybase/persisters/persister-browser/with-schemas';"}}
+      {{else}}
+        {{addImport "import {createLocalPersister} from 'tinybase/persisters/persister-browser';"}}
+      {{/if}}
+
+      const settingsPersister = createLocalPersister(settingsStore, 'settings');
+      settingsPersister.load([{}, {brushColor: '#d81b60', brushSize: 5}]).then(() => {
+      settingsPersister.startAutoSave();
+      resolveSettingsReady();
+      });
+    {{/if}}
+    {{#if persistSqlite}}
+      {{#if schemas}}
+        {{addImport "import {createSqliteWasmPersister} from 'tinybase/persisters/persister-sqlite-wasm/with-schemas';"}}
+      {{else}}
+        {{addImport "import {createSqliteWasmPersister} from 'tinybase/persisters/persister-sqlite-wasm';"}}
+      {{/if}}
+      {{includeFile template="client/src/shared/sqlite.ts.hbs" output="client/src/sqlite.ts"}}
+      {{addImport "import {getDb} from './sqlite';"}}
+
+      getDb().then(({sqlite3, db}) => {
+      const settingsPersister = createSqliteWasmPersister(settingsStore, sqlite3, db, 'settings');
+      settingsPersister.load([{}, {brushColor: '#d81b60', brushSize: 5}]).then(() => {
+      settingsPersister.startAutoSave();
+      resolveSettingsReady();
+      });
+      });
+    {{/if}}
+    {{#if persistPglite}}
+      {{#if schemas}}
+        {{addImport "import {createPglitePersister} from 'tinybase/persisters/persister-pglite/with-schemas';"}}
+      {{else}}
+        {{addImport "import {createPglitePersister} from 'tinybase/persisters/persister-pglite';"}}
+      {{/if}}
+      {{includeFile template="client/src/shared/pglite.ts.hbs" output="client/src/pglite.{{ext}}"}}
+      {{addImport "import {getPgLite} from './pglite';"}}
+
+      getPgLite().then((pgLite) => {
+      createPglitePersister(settingsStore, pgLite, 'settings').then((settingsPersister) => {
+      settingsPersister.load([{}, {brushColor: '#d81b60', brushSize: 5}]).then(() => {
+      settingsPersister.startAutoSave();
+      resolveSettingsReady();
+      });
+      });
+      });
+    {{/if}}
+  {{else}}
+    settingsStore.setValue('brushColor', '#d81b60').setValue('brushSize', 5);
+    resolveSettingsReady();
+  {{/if}}
 
-export type SettingsStore = typeof settingsStore;
+  export type SettingsStore = typeof settingsStore;

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

@@ -1,28 +1,32 @@
-import {StrictMode} from 'react';
+{{addImport "import {StrictMode, useState} from 'react';"}}
+{{includeFile template="client/src/shared/Loading.tsx.hbs" output="client/src/Loading.{{ext}}"}}
+{{addImport "import {Loading} from './Loading';"}}
 
-{{#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';
+{{addImport "import {Provider} from 'tinybase/ui-react';"}}
+{{addImport "import {Inspector} from 'tinybase/ui-react-inspector';"}}
 
 {{includeFile template="client/src/game/Store.tsx.hbs" output="client/src/Store.{{ext}}"}}
-import {Store} from './Store';
+{{addImport "import {Store} from './Store';"}}
 
 {{includeFile template="client/src/game/Game.tsx.hbs" output="client/src/Game.{{ext}}"}}
-import {Game} from './Game';
+{{addImport "import {Game} from './Game';"}}
+
+export const App = () => {
+const [loading, setLoading] = useState(true);
 
-const App = () => {
 return (
 <StrictMode>
   <Provider>
-    <Store />
-    <Game />
-    <Inspector />
+    <Store onReady={()=> setLoading(false)} />
+      {loading ? (
+      <Loading />
+      ) : (
+      <>
+        <Game />
+        <Inspector />
+      </>
+      )}
   </Provider>
 </StrictMode>
 );
-};
-
-export {App};
+};

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

@@ -1,18 +1,18 @@
 {{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';
+{{addImport "import './board.css';"}}
+{{addImport "import {useMemo} from 'react';"}}
+{{addImport "import {useValue, STORE_ID} from './Store';"}}
 
 {{includeFile template="client/src/game/Square.tsx.hbs" output="client/src/Square.{{ext}}"}}
-import {Square} from './Square';
+{{addImport "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));
+if (!winningLine || typeof winningLine !== 'string') return new Set();
+return new Set(winningLine.split(','));
 }, [winningLine]);
 
 const disabled = gameStatus !== 'playing';
@@ -20,8 +20,8 @@ const disabled = gameStatus !== 'playing';
 return (
 <div id="board">
   {Array.from({length: 9}, (_, i) => (
-  <Square key={i} position={i} disabled={disabled} winning={winningPositions.has(i)} />
+  <Square key={i} position={i.toString()} disabled={disabled} winning={winningPositions.has(i.toString())} />
   ))}
 </div>
 );
-};
+};

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

@@ -1,37 +1,32 @@
-import {useStore, useSetValuesCallback, useTableListener, STORE_ID} from './Store';
+{{addImport "import {useSetValuesCallback, useTableListener, STORE_ID} from './Store';"}}
 
 {{includeFile template="client/src/shared/Button.tsx.hbs" output="client/src/Button.{{ext}}"}}
-import {Button} from './Button';
+{{addImport "import {Button} from './Button';"}}
 
 {{includeFile template="client/src/game/Board.tsx.hbs" output="client/src/Board.{{ext}}"}}
-import {Board} from './Board';
+{{addImport "import {Board} from './Board';"}}
 
 {{includeFile template="client/src/game/GameStatus.tsx.hbs" output="client/src/GameStatus.{{ext}}"}}
-import {GameStatus} from './GameStatus';
+{{addImport "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
+['0', '1', '2'], ['3', '4', '5'], ['6', '7', '8'],
+['0', '3', '6'], ['1', '4', '7'], ['2', '5', '8'],
+['0', '4', '8'], ['2', '4', '6'],
 ];
 
 export const Game = () => {
-const store = useStore(STORE_ID);
-
 useTableListener(
 'board',
-() => {
+(store) => {
 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;
+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');
@@ -41,14 +36,11 @@ return;
 }
 }
 
-// Check for draw
-const filledCells = Object.values(board).filter((cell: any) => cell.value).length;
-if (filledCells === 9) {
+if (store.getRowCount('board') === 9) {
 store.setValue('gameStatus', 'draw');
 return;
 }
 
-// Switch player after each move
 const currentPlayer = store.getValue('currentPlayer');
 store.setValue('currentPlayer', currentPlayer === 'X' ? 'O' : 'X');
 },
@@ -57,13 +49,14 @@ true,
 STORE_ID,);
 
 const resetGame = useSetValuesCallback(
-() => {
+(_, store) => {
 store.delTable('board');
 return {currentPlayer: 'X',
 gameStatus: 'playing',
 };
 },
 [],
+STORE_ID,
 );
 
 return (

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

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