diff --git a/.gitignore b/.gitignore index 79518f7..201b5ec 100644 --- a/.gitignore +++ b/.gitignore @@ -3,6 +3,8 @@ node_modules # Output .output .vercel +.netlify +.wrangler /.svelte-kit /build @@ -19,3 +21,5 @@ Thumbs.db # Vite vite.config.js.timestamp-* vite.config.ts.timestamp-* + +old/ \ No newline at end of file diff --git a/.prettierrc b/.prettierrc index 7ebb855..3f7802c 100644 --- a/.prettierrc +++ b/.prettierrc @@ -3,7 +3,7 @@ "singleQuote": true, "trailingComma": "none", "printWidth": 100, - "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"], + "plugins": ["prettier-plugin-svelte"], "overrides": [ { "files": "*.svelte", diff --git a/README.md b/README.md index af774db..b5b2950 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,38 @@ -# Sprigsy editor +# sv -# planned for v1 -- [ ] ability to play project -- [ ] monaco code editor -- [ ] export project for sprig -- [ ] docs site -- [ ] typescript support (esbuild prob) +Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli). +## Creating a project -# planned for v2 -- [ ] sprite manager -- [ ] level manager -- [ ] build project as a standalone `.html` file -- [ ] run on device -- [ ] downloadable version \ No newline at end of file +If you're seeing this, you've probably already done this step. Congrats! + +```bash +# create a new project in the current directory +npx sv create + +# create a new project in my-app +npx sv create my-app +``` + +## Developing + +Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: + +```bash +npm run dev + +# or start the server and open the app in a new browser tab +npm run dev -- --open +``` + +## Building + +To create a production version of your app: + +```bash +npm run build +``` + +You can preview the production build with `npm run preview`. + +> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment. diff --git a/bun.lockb b/bun.lockb index c65ac98..97762e5 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 187f70a..faea9a5 100644 --- a/package.json +++ b/package.json @@ -1,37 +1,35 @@ { - "name": "sprigsy", - "version": "0.0.1", + "name": "sprig-editor", "private": true, + "version": "0.0.1", + "type": "module", "scripts": { "dev": "vite dev", "build": "vite build", "preview": "vite preview", "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", - "lint": "prettier --check .", - "format": "prettier --write ." + "format": "prettier --write .", + "lint": "prettier --check ." }, "devDependencies": { - "@sveltejs/adapter-auto": "^3.0.0", + "@babel/parser": "^7.26.5", + "@sveltejs/adapter-static": "^3.0.6", "@sveltejs/kit": "^2.0.0", - "@sveltejs/vite-plugin-svelte": "^3.0.0", - "@tailwindcss/typography": "^0.5.14", - "autoprefixer": "^10.4.20", - "babel-walk": "^3.0.0", - "prettier": "^3.1.1", - "prettier-plugin-svelte": "^3.1.2", - "prettier-plugin-tailwindcss": "^0.6.5", - "svelte": "^5.0.0-next.1", - "svelte-check": "^3.6.0", - "tailwindcss": "^3.4.9", - "typescript": "^5.0.0", - "vite": "^5.0.3", - "@babel/parser": "^7.25.3", - "@sveltejs/adapter-static": "^3.0.4", + "@sveltejs/vite-plugin-svelte": "^4.0.0", + "@tailwindcss/postcss": "^4.0.0-beta.9", + "babel-walk": "^3.0.1", "constrained-editor-plugin": "^1.3.0", - "monaco-editor": "^0.50.0", + "daisyui": "^5.0.0-beta.1", + "esbuild-wasm": "^0.24.2", + "monaco-editor": "^0.52.2", + "prettier": "^3.3.2", + "prettier-plugin-svelte": "^3.2.6", "sprig": "^1.1.3", - "sveltekit-adapter-deno": "^0.12.1" - }, - "type": "module" + "svelte": "^5.0.0", + "svelte-check": "^4.0.0", + "tailwindcss": "^4.0.0-beta.9", + "typescript": "^5.0.0", + "vite": "^5.4.11" + } } diff --git a/postcss.config.js b/postcss.config.js index 0f77216..c5c819c 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,6 +1,5 @@ export default { plugins: { - tailwindcss: {}, - autoprefixer: {} + '@tailwindcss/postcss': {}, } }; diff --git a/src/app.css b/src/app.css index f5fc4ac..b932777 100644 --- a/src/app.css +++ b/src/app.css @@ -1,7 +1,21 @@ -@import 'tailwindcss/base'; -@import 'tailwindcss/components'; -@import 'tailwindcss/utilities'; +@import 'tailwindcss'; -body, html { - +@plugin 'daisyui'; + +/* + The default border color has changed to `currentColor` in Tailwind CSS v4, + so we've added these compatibility styles to make sure everything still + looks the same as it did with Tailwind CSS v3. + + If we ever want to remove these styles, we need to add an explicit border + color utility to any element that depends on these defaults. +*/ +@layer base { + *, + ::after, + ::before, + ::backdrop, + ::file-selector-button { + border-color: var(--color-gray-200, currentColor); + } } \ No newline at end of file diff --git a/src/app.d.ts b/src/app.d.ts index 743f07b..da08e6d 100644 --- a/src/app.d.ts +++ b/src/app.d.ts @@ -1,4 +1,4 @@ -// See https://kit.svelte.dev/docs/types#app +// See https://svelte.dev/docs/kit/types#app.d.ts // for information about these interfaces declare global { namespace App { diff --git a/src/app.html b/src/app.html index 5ea8657..77a5ff5 100644 --- a/src/app.html +++ b/src/app.html @@ -3,7 +3,7 @@ - + %sveltekit.head% diff --git a/src/lib/CodeEditor.svelte b/src/lib/CodeEditor.svelte index 993fbff..8e50f54 100644 --- a/src/lib/CodeEditor.svelte +++ b/src/lib/CodeEditor.svelte @@ -1,10 +1,11 @@ - + +
+ {#each Object.entries(tabs) as [tabID]} + + + + (tab = tabID)} + class:tab-active={tabID == tab}>{@render tabs[tabID]()} + {/each} +
diff --git a/src/lib/editorcontext/global.d.ts b/src/lib/editorcontext/global.d.ts deleted file mode 100644 index a7f242b..0000000 --- a/src/lib/editorcontext/global.d.ts +++ /dev/null @@ -1,11 +0,0 @@ -// for some reason this doesn't work, I can't figure out why - -declare global { - declare function tune(template: TemplateStringsArray, ...params: string[]): string - interface Window { - setTimeout: import('./sprig').sprig.FullSprigAPI['setTimeout']; - setInterval: sprig.FullSprigAPI['setInterval']; - clearTimeout: sprig.FullSprigAPI['clearTimeout']; - clearInterval: sprig.FullSprigAPI['clearInterval']; - } -} \ No newline at end of file diff --git a/src/lib/editorcontext/sprig.d.ts b/src/lib/editorcontext/sprig.d.ts index 49772f3..ba51f4b 100644 --- a/src/lib/editorcontext/sprig.d.ts +++ b/src/lib/editorcontext/sprig.d.ts @@ -1,79 +1,79 @@ /** * normal sprig api - * this is provided because your project type is + * this is provided because your project type is */ declare namespace sprig { - export declare const VALID_INPUTS: readonly ["w", "s", "a", "d", "i", "j", "k", "l"]; - export type InputKey = typeof VALID_INPUTS[number]; - export interface AddTextOptions { - x?: number; - y?: number; - color?: string; - } - export declare class SpriteType { - type: string; - x: number; - y: number; - readonly dx: number; - readonly dy: number; - remove(): void; - } - export type Rgba = [number, number, number, number]; - export interface TextElement { - x: number; - y: number; - color: Rgba; - content: string; - } - export interface GameState { - legend: [string, string][]; - texts: TextElement[]; - dimensions: { - width: number; - height: number; - }; - sprites: SpriteType[]; - solids: string[]; - pushable: Record; - background: string | null; - } - export interface PlayTuneRes { - end(): void; - isPlaying(): boolean; - } - // export declare const tones: Record; - // export declare const instruments: readonly ["sine", "triangle", "square", "sawtooth"]; - export type InstrumentType = typeof instruments[number]; - // export declare const instrumentKey: Record; - // export declare const reverseInstrumentKey: Record<"sine" | "triangle" | "square" | "sawtooth", string>; - export type Tune = [number, ...(InstrumentType | number | string)[]][]; - export interface FullSprigAPI { - map(template: TemplateStringsArray, ...params: string[]): string; - bitmap(template: TemplateStringsArray, ...params: string[]): string; - color(template: TemplateStringsArray, ...params: string[]): string; - tune(template: TemplateStringsArray, ...params: string[]): string; - setMap(string: string): void; - addText(str: string, opts?: AddTextOptions): void; - clearText(): void; - addSprite(x: number, y: number, type: string): void; - getGrid(): SpriteType[][]; - getTile(x: number, y: number): SpriteType[]; - tilesWith(...matchingTypes: string[]): SpriteType[][]; - clearTile(x: number, y: number): void; - setSolids(types: string[]): void; - setPushables(map: Record): void; - setBackground(type: string): void; - getFirst(type: string): SpriteType | undefined; - getAll(type: string): SpriteType[]; - width(): number; - height(): number; - setLegend(...bitmaps: [string, string][]): void; - onInput(key: InputKey, fn: () => void): void; - afterInput(fn: () => void): void; - playTune(text: string, n?: number): PlayTuneRes; - setTimeout(fn: TimerHandler, ms: number): number; - setInterval(fn: TimerHandler, ms: number): number; - clearTimeout(id: number): void; - clearInterval(id: number): void; - } -} \ No newline at end of file + export declare const VALID_INPUTS: readonly ['w', 's', 'a', 'd', 'i', 'j', 'k', 'l']; + export type InputKey = (typeof VALID_INPUTS)[number]; + export interface AddTextOptions { + x?: number; + y?: number; + color?: string; + } + export declare class SpriteType { + type: string; + x: number; + y: number; + readonly dx: number; + readonly dy: number; + remove(): void; + } + export type Rgba = [number, number, number, number]; + export interface TextElement { + x: number; + y: number; + color: Rgba; + content: string; + } + export interface GameState { + legend: [string, string][]; + texts: TextElement[]; + dimensions: { + width: number; + height: number; + }; + sprites: SpriteType[]; + solids: string[]; + pushable: Record; + background: string | null; + } + export interface PlayTuneRes { + end(): void; + isPlaying(): boolean; + } + // export declare const tones: Record; + // export declare const instruments: readonly ["sine", "triangle", "square", "sawtooth"]; + export type InstrumentType = (typeof instruments)[number]; + // export declare const instrumentKey: Record; + // export declare const reverseInstrumentKey: Record<"sine" | "triangle" | "square" | "sawtooth", string>; + export type Tune = [number, ...(InstrumentType | number | string)[]][]; + export interface FullSprigAPI { + map(template: TemplateStringsArray, ...params: string[]): string; + bitmap(template: TemplateStringsArray, ...params: string[]): string; + color(template: TemplateStringsArray, ...params: string[]): string; + tune(template: TemplateStringsArray, ...params: string[]): string; + setMap(string: string): void; + addText(str: string, opts?: AddTextOptions): void; + clearText(): void; + addSprite(x: number, y: number, type: string): void; + getGrid(): SpriteType[][]; + getTile(x: number, y: number): SpriteType[]; + tilesWith(...matchingTypes: string[]): SpriteType[][]; + clearTile(x: number, y: number): void; + setSolids(types: string[]): void; + setPushables(map: Record): void; + setBackground(type: string): void; + getFirst(type: string): SpriteType | undefined; + getAll(type?: string): SpriteType[]; + width(): number; + height(): number; + setLegend(...bitmaps: [string, string][]): void; + onInput(key: InputKey, fn: () => void): void; + afterInput(fn: () => void): void; + playTune(text: string, n?: number): PlayTuneRes; + setTimeout(fn: TimerHandler, ms: number): number; + setInterval(fn: TimerHandler, ms: number): number; + clearTimeout(id: number): void; + clearInterval(id: number): void; + } +} diff --git a/src/lib/editorcontext/sprigsy.d.ts b/src/lib/editorcontext/sprigsy.d.ts index 73d1eda..a3050e1 100644 --- a/src/lib/editorcontext/sprigsy.d.ts +++ b/src/lib/editorcontext/sprigsy.d.ts @@ -1,11 +1,13 @@ /** * API for sprigsy - * this is provided because your project has sprigsy v2 enabeled + * this is provided because your project has sprigsy v2 enabeled */ declare namespace sprigsy { - /** - * Retrieve a sprite key for the sprite name - * @param name Sprite name - */ - function spriteKeyFor(name: string): string -} \ No newline at end of file + export interface FullSprigsyAPI { + /** + * Retrieve a sprite key for the sprite name + * @param name Sprite name + */ + spriteKeyFor(name: string): string; + } +} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index e551b53..3b7359a 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,5 +1,6 @@ - - +{@render children()} diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts index 6dd7c0a..2223a9d 100644 --- a/src/routes/+layout.ts +++ b/src/routes/+layout.ts @@ -1,2 +1 @@ -export const prerender = true; -export const ssr = false \ No newline at end of file +export const csr = true; \ No newline at end of file diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 025a4a4..eae1fe2 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,8 +1,58 @@ -
- +
+ + {#if tab === 'code'} + + {:else if ['tunes', 'sprites', 'maps'].includes(tab)} + Not implemented + {:else if tab === 'settings'} + (Settings tab) + {:else if tab === 'test'} + This will have the game screen + {/if}
diff --git a/svelte.config.js b/svelte.config.js index 2466eee..4fbc867 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -3,14 +3,14 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; /** @type {import('@sveltejs/kit').Config} */ const config = { - // Consult https://kit.svelte.dev/docs/integrations#preprocessors + // Consult https://svelte.dev/docs/kit/integrations // for more information about preprocessors preprocess: vitePreprocess(), kit: { - // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. + // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list. // If your environment is not supported, or you settled on a specific environment, switch out the adapter. - // See https://kit.svelte.dev/docs/adapters for more information about adapters. + // See https://svelte.dev/docs/kit/adapters for more information about adapters. adapter: adapter() } }; diff --git a/tailwind.config.ts b/tailwind.config.ts deleted file mode 100644 index 584efba..0000000 --- a/tailwind.config.ts +++ /dev/null @@ -1,11 +0,0 @@ -import type { Config } from 'tailwindcss'; - -export default { - content: ['./src/**/*.{html,js,svelte,ts}'], - - theme: { - extend: {} - }, - - plugins: [ ] -} as Config; diff --git a/tsconfig.json b/tsconfig.json index fc93cbd..0b2d886 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -11,8 +11,8 @@ "strict": true, "moduleResolution": "bundler" } - // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias - // except $lib which is handled by https://kit.svelte.dev/docs/configuration#files + // Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias + // except $lib which is handled by https://svelte.dev/docs/kit/configuration#files // // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes // from the referenced tsconfig.json - TypeScript does not merge them in