create-foldkit-app 0.27.3 → 0.28.0

package/dist/templates/examples/pixel-art/src/entry.ts

@@ -0,0 +1,27 @@
+import { Runtime } from 'foldkit'
+
+import {
+  Flags,
+  Message,
+  Model,
+  flags,
+  init,
+  subscriptions,
+  update,
+  view,
+} from './main'
+
+const application = Runtime.makeApplication({
+  Model,
+  Flags,
+  init,
+  update,
+  view,
+  subscriptions,
+  container: document.getElementById('root'),
+  devTools: {
+    Message,
+  },
+})
+
+Runtime.run(application, { flags })

package/dist/templates/examples/pixel-art/src/grid.ts

@@ -0,0 +1,134 @@
+import { Array, Equal, Option, pipe } from 'effect'
+
+import { MAX_HISTORY } from './constant'
+import type { Cell, Grid, MirrorMode, PaletteIndex } from './model'
+
+export const isGridEmpty = (grid: Grid): boolean =>
+  grid.every(row => row.every(Option.isNone))
+
+export const getCell = (grid: Grid, x: number, y: number): Cell =>
+  pipe(
+    grid,
+    Array.get(y),
+    Option.flatMap(Array.get(x)),
+    Option.getOrElse(() => Option.none<PaletteIndex>()),
+  )
+
+export const createEmptyGrid = (size: number): Grid =>
+  Array.makeBy(size, () =>
+    Array.makeBy(size, () => Option.none<PaletteIndex>()),
+  )
+
+export const setPixel = (
+  grid: Grid,
+  x: number,
+  y: number,
+  colorIndex: PaletteIndex,
+): Grid =>
+  Array.map(grid, (row, rowIndex) =>
+    rowIndex === y
+      ? Array.map(row, (cell, colIndex) =>
+          colIndex === x ? Option.some(colorIndex) : cell,
+        )
+      : row,
+  )
+
+export const setPixels = (
+  grid: Grid,
+  positions: ReadonlyArray<readonly [number, number]>,
+  colorIndex: PaletteIndex,
+): Grid =>
+  Array.reduce(positions, grid, (currentGrid, [positionX, positionY]) =>
+    setPixel(currentGrid, positionX, positionY, colorIndex),
+  )
+
+export const erasePixel = (grid: Grid, x: number, y: number): Grid =>
+  Array.map(grid, (row, rowIndex) =>
+    rowIndex === y
+      ? Array.map(row, (cell, colIndex) =>
+          colIndex === x ? Option.none() : cell,
+        )
+      : row,
+  )
+
+export const erasePixels = (
+  grid: Grid,
+  positions: ReadonlyArray<readonly [number, number]>,
+): Grid =>
+  Array.reduce(positions, grid, (currentGrid, [positionX, positionY]) =>
+    erasePixel(currentGrid, positionX, positionY),
+  )
+
+export const getMirroredPositions = (
+  x: number,
+  y: number,
+  gridSize: number,
+  mirrorMode: MirrorMode,
+): ReadonlyArray<readonly [number, number]> => {
+  const mirrorX = gridSize - 1 - x
+  const mirrorY = gridSize - 1 - y
+
+  if (mirrorMode === 'Both') {
+    return [
+      [x, y],
+      [mirrorX, y],
+      [x, mirrorY],
+      [mirrorX, mirrorY],
+    ]
+  }
+  if (mirrorMode === 'Horizontal') {
+    return [
+      [x, y],
+      [mirrorX, y],
+    ]
+  }
+  if (mirrorMode === 'Vertical') {
+    return [
+      [x, y],
+      [x, mirrorY],
+    ]
+  }
+  return [[x, y]]
+}
+
+export const floodFill = (
+  grid: Grid,
+  startX: number,
+  startY: number,
+  fillColorIndex: PaletteIndex,
+): Grid => {
+  const targetCell = getCell(grid, startX, startY)
+  const fillCell: Cell = Option.some(fillColorIndex)
+  if (Equal.equals(targetCell, fillCell)) {
+    return grid
+  }
+
+  const size = grid.length
+  const result = grid.map(row => [...row])
+  const stack: Array<readonly [number, number]> = [[startX, startY]]
+
+  while (true) {
+    const maybePosition = stack.pop()
+    if (maybePosition === undefined) {
+      break
+    }
+    const [x, y] = maybePosition
+    if (x < 0 || x >= size || y < 0 || y >= size) {
+      continue
+    }
+    const row = result[y]
+    if (row === undefined || !Equal.equals(row[x], targetCell)) {
+      continue
+    }
+
+    row[x] = fillCell
+    stack.push([x + 1, y], [x - 1, y], [x, y + 1], [x, y - 1])
+  }
+
+  return result
+}
+
+export const pushHistory = (
+  stack: ReadonlyArray<Grid>,
+  grid: Grid,
+): ReadonlyArray<Grid> => Array.takeRight([...stack, grid], MAX_HISTORY)

package/dist/templates/examples/pixel-art/src/main.bench.ts

@@ -0,0 +1,133 @@
+import { Option } from 'effect'
+import { bench, describe } from 'vitest'
+
+import { Dialog, Listbox, RadioGroup } from '@foldkit/ui'
+
+import { createEmptyGrid } from './grid'
+import { Message } from './message'
+import type { Model } from './model'
+import { update } from './update'
+
+const GRID_SIZE = 16
+
+const initialModel: Model = {
+  grid: createEmptyGrid(GRID_SIZE),
+  undoStack: [],
+  redoStack: [],
+  selectedColorIndex: 0,
+  gridSize: GRID_SIZE,
+  tool: 'Brush' as const,
+  mirrorMode: 'None' as const,
+  isDrawing: false,
+  maybeHoveredCell: Option.none(),
+  errorDialog: Dialog.init({ id: 'export-error-dialog' }),
+  maybeExportError: Option.none(),
+  paletteThemeIndex: 0,
+  gridSizeConfirmDialog: Dialog.init({ id: 'grid-size-confirm-dialog' }),
+  maybePendingGridSize: Option.none(),
+  themeListbox: Listbox.init({ id: 'theme-picker' }),
+  toolRadioGroup: RadioGroup.init({ id: 'tool-picker' }),
+  gridSizeRadioGroup: RadioGroup.init({ id: 'grid-size-picker' }),
+  paletteRadioGroup: RadioGroup.init({ id: 'palette-picker' }),
+}
+
+const dispatch = (
+  model: Model,
+  ...messages: ReadonlyArray<Parameters<typeof update>[1]>
+): Model =>
+  messages.reduce<Model>(
+    (currentModel, message) => update(currentModel, message)[0],
+    model,
+  )
+
+const buildHistoryModel = (steps: number): Model => {
+  let model = initialModel
+  for (let i = 0; i < steps; i++) {
+    const x = i % GRID_SIZE
+    const y = Math.floor(i / GRID_SIZE) % GRID_SIZE
+    model = dispatch(
+      model,
+      Message.PressedCell({ x, y }),
+      Message.ReleasedMouse(),
+    )
+  }
+  return model
+}
+
+describe('update: single operations', () => {
+  bench('brush stroke (press + release)', () => {
+    dispatch(
+      initialModel,
+      Message.PressedCell({ x: 5, y: 5 }),
+      Message.ReleasedMouse(),
+    )
+  })
+
+  bench('brush drag (5 cells)', () => {
+    dispatch(
+      initialModel,
+      Message.PressedCell({ x: 0, y: 0 }),
+      Message.EnteredCell({ x: 1, y: 0 }),
+      Message.EnteredCell({ x: 2, y: 0 }),
+      Message.EnteredCell({ x: 3, y: 0 }),
+      Message.EnteredCell({ x: 4, y: 0 }),
+      Message.ReleasedMouse(),
+    )
+  })
+
+  bench('flood fill (empty grid)', () => {
+    const fillModel: Model = { ...initialModel, tool: 'Fill' as const }
+    dispatch(fillModel, Message.PressedCell({ x: 0, y: 0 }))
+  })
+})
+
+describe('update: undo/redo with history', () => {
+  const modelWith10Steps = buildHistoryModel(10)
+  const modelWith30Steps = buildHistoryModel(30)
+
+  bench('undo (10 history entries)', () => {
+    dispatch(modelWith10Steps, Message.ClickedUndo())
+  })
+
+  bench('undo (30 history entries)', () => {
+    dispatch(modelWith30Steps, Message.ClickedUndo())
+  })
+
+  bench('5x undo then 5x redo', () => {
+    let model = modelWith10Steps
+    for (let i = 0; i < 5; i++) {
+      model = update(model, Message.ClickedUndo())[0]
+    }
+    for (let i = 0; i < 5; i++) {
+      model = update(model, Message.ClickedRedo())[0]
+    }
+  })
+})
+
+describe('update: paint sequence (16x16 grid)', () => {
+  bench('paint 50 random cells', () => {
+    let model = initialModel
+    for (let i = 0; i < 50; i++) {
+      const x = (i * 7 + 3) % GRID_SIZE
+      const y = (i * 11 + 5) % GRID_SIZE
+      model = dispatch(
+        model,
+        Message.PressedCell({ x, y }),
+        Message.ReleasedMouse(),
+      )
+    }
+  })
+
+  bench('paint 50 cells with mirror mode', () => {
+    let model: Model = { ...initialModel, mirrorMode: 'Both' as const }
+    for (let i = 0; i < 50; i++) {
+      const x = (i * 7 + 3) % GRID_SIZE
+      const y = (i * 11 + 5) % GRID_SIZE
+      model = dispatch(
+        model,
+        Message.PressedCell({ x, y }),
+        Message.ReleasedMouse(),
+      )
+    }
+  })
+})

package/dist/templates/examples/pixel-art/src/main.ts

@@ -0,0 +1,85 @@
+import { Effect, Option, Schema as S } from 'effect'
+import { KeyValueStore } from 'effect/unstable/persistence'
+import { Runtime } from 'foldkit'
+
+import { BrowserKeyValueStore } from '@effect/platform-browser'
+import { Dialog, Listbox, RadioGroup } from '@foldkit/ui'
+
+import {
+  DEFAULT_COLOR_INDEX,
+  DEFAULT_GRID_SIZE,
+  DEFAULT_PALETTE_THEME_INDEX,
+  STORAGE_KEY,
+} from './constant'
+import { createEmptyGrid } from './grid'
+import { Message } from './message'
+import { Model, SavedCanvas, SavedCanvasJsonString } from './model'
+import { subscriptions } from './subscription'
+import { update } from './update'
+import { view } from './view'
+import {
+  GRID_SIZE_RADIO_GROUP_ID,
+  PALETTE_RADIO_GROUP_ID,
+  TOOL_RADIO_GROUP_ID,
+} from './view/toolbar'
+
+// FLAGS
+
+export const Flags = S.Struct({
+  maybeSavedCanvas: S.Option(SavedCanvas),
+})
+export type Flags = typeof Flags.Type
+
+export const flags: Effect.Effect<Flags> = Effect.gen(function* () {
+  const store = yield* KeyValueStore.KeyValueStore
+  const json = yield* Effect.fromOption(
+    Option.fromNullishOr(yield* store.get(STORAGE_KEY)),
+  )
+  const decoded = yield* S.decodeEffect(SavedCanvasJsonString)(json)
+  return Flags.make({ maybeSavedCanvas: Option.some(decoded) })
+}).pipe(
+  Effect.catch(() =>
+    Effect.succeed(Flags.make({ maybeSavedCanvas: Option.none() })),
+  ),
+  Effect.provide(BrowserKeyValueStore.layerLocalStorage),
+)
+
+// INIT
+
+export const init: Runtime.ApplicationInit<Model, Message, Flags> = flags => [
+  {
+    grid: Option.match(flags.maybeSavedCanvas, {
+      onNone: () => createEmptyGrid(DEFAULT_GRID_SIZE),
+      onSome: ({ grid }) => grid,
+    }),
+    undoStack: [],
+    redoStack: [],
+    selectedColorIndex: Option.match(flags.maybeSavedCanvas, {
+      onNone: () => DEFAULT_COLOR_INDEX,
+      onSome: ({ selectedColorIndex }) => selectedColorIndex,
+    }),
+    gridSize: Option.match(flags.maybeSavedCanvas, {
+      onNone: () => DEFAULT_GRID_SIZE,
+      onSome: ({ gridSize }) => gridSize,
+    }),
+    tool: 'Brush',
+    mirrorMode: 'None',
+    isDrawing: false,
+    maybeHoveredCell: Option.none(),
+    errorDialog: Dialog.init({ id: 'export-error-dialog' }),
+    maybeExportError: Option.none(),
+    paletteThemeIndex: Option.match(flags.maybeSavedCanvas, {
+      onNone: () => DEFAULT_PALETTE_THEME_INDEX,
+      onSome: ({ paletteThemeIndex }) => paletteThemeIndex,
+    }),
+    gridSizeConfirmDialog: Dialog.init({ id: 'grid-size-confirm-dialog' }),
+    maybePendingGridSize: Option.none(),
+    themeListbox: Listbox.init({ id: 'theme-picker' }),
+    toolRadioGroup: RadioGroup.init({ id: TOOL_RADIO_GROUP_ID }),
+    gridSizeRadioGroup: RadioGroup.init({ id: GRID_SIZE_RADIO_GROUP_ID }),
+    paletteRadioGroup: RadioGroup.init({ id: PALETTE_RADIO_GROUP_ID }),
+  },
+  [],
+]
+
+export { Message, Model, subscriptions, update, view }

package/dist/templates/examples/pixel-art/src/message.ts

@@ -0,0 +1,36 @@
+import { Schema as S } from 'effect'
+import { defineMessageUnion } from 'foldkit/message'
+
+import { Dialog, Listbox, RadioGroup } from '@foldkit/ui'
+
+import { PaletteIndex, Tool } from './model'
+
+export const Message = defineMessageUnion({
+  PressedCell: { x: S.Number, y: S.Number },
+  EnteredCell: { x: S.Number, y: S.Number },
+  LeftCanvas: {},
+  ReleasedMouse: {},
+  SelectedColor: { colorIndex: PaletteIndex },
+  SelectedTool: { tool: Tool },
+  SelectedGridSize: { size: S.Number },
+  ToggledMirrorHorizontal: {},
+  ToggledMirrorVertical: {},
+  ClickedUndo: {},
+  ClickedRedo: {},
+  ClickedHistoryStep: { stepIndex: S.Number },
+  ClickedRedoStep: { stepIndex: S.Number },
+  ClickedClear: {},
+  ClickedExport: {},
+  SucceededExportPng: {},
+  FailedExportPng: { error: S.String },
+  GotErrorDialogMessage: { message: Dialog.Message },
+  GotThemeListboxMessage: { message: Listbox.Message },
+  GotToolRadioGroupMessage: { message: RadioGroup.Message },
+  GotGridSizeRadioGroupMessage: { message: RadioGroup.Message },
+  GotPaletteRadioGroupMessage: { message: RadioGroup.Message },
+  ConfirmedGridSizeChange: {},
+  GotGridSizeConfirmDialogMessage: { message: Dialog.Message },
+  CompletedSaveCanvas: {},
+})
+
+export type Message = typeof Message.Type

package/dist/templates/examples/pixel-art/src/model.ts

@@ -0,0 +1,79 @@
+import { Option, Schema as S } from 'effect'
+
+import { Dialog, Listbox, RadioGroup } from '@foldkit/ui'
+
+// CONSTANT
+
+export const PaletteIndex = S.Literals([
+  0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15,
+])
+export type PaletteIndex = typeof PaletteIndex.Type
+
+export const HexColor = S.String.check(S.isPattern(/^#[0-9a-f]{6}$/)).pipe(
+  S.brand('HexColor'),
+)
+export type HexColor = typeof HexColor.Type
+
+export const Tool = S.Literals(['Brush', 'Fill', 'Eraser'])
+export type Tool = typeof Tool.Type
+
+export const MirrorMode = S.Literals(['None', 'Horizontal', 'Vertical', 'Both'])
+export type MirrorMode = typeof MirrorMode.Type
+
+export const Cell = S.Option(PaletteIndex)
+export type Cell = typeof Cell.Type
+
+const Row = S.Array(Cell)
+export const Grid = S.Array(Row)
+export type Grid = typeof Grid.Type
+
+export const Position = S.Struct({ x: S.Number, y: S.Number })
+
+const SavedCell = S.Option(PaletteIndex)
+const SavedRow = S.Array(SavedCell)
+const SavedGrid = S.Array(SavedRow)
+
+export const SavedCanvas = S.Struct({
+  grid: SavedGrid,
+  gridSize: S.Number,
+  paletteThemeIndex: S.Number,
+  selectedColorIndex: PaletteIndex,
+})
+export type SavedCanvas = typeof SavedCanvas.Type
+
+export const SavedCanvasJsonString = S.fromJsonString(
+  S.toCodecJson(SavedCanvas),
+)
+
+// MODEL
+
+export const Model = S.Struct({
+  grid: Grid,
+  undoStack: S.Array(Grid),
+  redoStack: S.Array(Grid),
+  selectedColorIndex: PaletteIndex,
+  gridSize: S.Number,
+  tool: Tool,
+  mirrorMode: MirrorMode,
+  isDrawing: S.Boolean,
+  maybeHoveredCell: S.Option(Position),
+  errorDialog: Dialog.Model,
+  maybeExportError: S.Option(S.String),
+  paletteThemeIndex: S.Number,
+  gridSizeConfirmDialog: Dialog.Model,
+  maybePendingGridSize: S.Option(S.Number),
+  themeListbox: Listbox.Model,
+  toolRadioGroup: RadioGroup.Model,
+  gridSizeRadioGroup: RadioGroup.Model,
+  paletteRadioGroup: RadioGroup.Model,
+})
+export type Model = typeof Model.Type
+
+export const paletteIndexFromValue = (
+  value: string,
+  fallback: PaletteIndex,
+): PaletteIndex =>
+  Option.getOrElse(
+    S.decodeUnknownOption(PaletteIndex)(Number(value)),
+    () => fallback,
+  )

package/dist/templates/examples/pixel-art/src/palette.ts

@@ -0,0 +1,134 @@
+import { Array, Option, pipe } from 'effect'
+
+import { EMPTY_COLOR } from './constant'
+import { type Cell, type HexColor, HexColor as HexColorSchema } from './model'
+
+export type PaletteTheme = Readonly<{
+  name: string
+  colors: ReadonlyArray<HexColor>
+}>
+
+export const hex = (value: string): HexColor => HexColorSchema.make(value)
+
+export const PALETTE_THEMES: Array.NonEmptyReadonlyArray<PaletteTheme> = [
+  {
+    name: 'Syntax',
+    colors: [
+      '#262427',
+      '#545452',
+      '#8a869c',
+      '#fcfcfa',
+      '#ff7272',
+      '#ff9eb0',
+      '#bcdf59',
+      '#ffca58',
+      '#f5a623',
+      '#49cae4',
+      '#a093e2',
+      '#6b5ce7',
+      '#e06cc0',
+      '#3d8b6e',
+      '#9e6a3f',
+      '#1c1a20',
+    ].map(hex),
+  },
+  {
+    name: 'ISO50',
+    colors: [
+      '#2b2b2b',
+      '#5c4b3e',
+      '#8b6f4e',
+      '#c49a6c',
+      '#e8c88a',
+      '#f2dfa7',
+      '#c0785c',
+      '#a85c3b',
+      '#7b8f6a',
+      '#a3b18a',
+      '#6b8e8e',
+      '#8fa4a9',
+      '#c4b4a0',
+      '#e8d5c0',
+      '#d4a574',
+      '#f5efe6',
+    ].map(hex),
+  },
+  {
+    name: 'Sunset',
+    colors: [
+      '#1a1033',
+      '#2d1b4e',
+      '#5c2d82',
+      '#8b3fa0',
+      '#c9406c',
+      '#e85d75',
+      '#ff7b5a',
+      '#ff9e3d',
+      '#ffc233',
+      '#ffe066',
+      '#fff4b8',
+      '#3d1f6d',
+      '#ffa0b4',
+      '#ff6b8a',
+      '#ffccd5',
+      '#1e0f3d',
+    ].map(hex),
+  },
+  {
+    name: 'Ocean',
+    colors: [
+      '#0a1628',
+      '#132b4a',
+      '#1a4a6e',
+      '#2274a5',
+      '#30a5c8',
+      '#5ec4d4',
+      '#8edce6',
+      '#b8efe8',
+      '#e0f7ef',
+      '#f5a962',
+      '#e87843',
+      '#d4bc94',
+      '#f0e6d0',
+      '#2a6b5a',
+      '#c45b3d',
+      '#ffffff',
+    ].map(hex),
+  },
+  {
+    name: 'Mono',
+    colors: [
+      '#000000',
+      '#111111',
+      '#222222',
+      '#444444',
+      '#666666',
+      '#888888',
+      '#aaaaaa',
+      '#cccccc',
+      '#eeeeee',
+      '#ffffff',
+      '#e63946',
+      '#457b9d',
+      '#2a9d8f',
+      '#e9c46a',
+      '#264653',
+      '#f4a261',
+    ].map(hex),
+  },
+]
+
+export const resolveColor = (cell: Cell, theme: PaletteTheme): HexColor =>
+  Option.match(cell, {
+    onNone: () => EMPTY_COLOR,
+    onSome: index => theme.colors[index] ?? EMPTY_COLOR,
+  })
+
+export const currentPaletteTheme = (
+  model: Readonly<{ paletteThemeIndex: number }>,
+): PaletteTheme =>
+  pipe(
+    PALETTE_THEMES,
+    Array.get(model.paletteThemeIndex),
+    Option.getOrElse(() => Array.headNonEmpty(PALETTE_THEMES)),
+  )