diff --git a/package-lock.json b/package-lock.json index b6ac982..bf4b746 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,6 +7,9 @@ "": { "name": "maisie-heardle", "version": "0.0.1", + "dependencies": { + "moment": "^2.30.1" + }, "devDependencies": { "@eslint/compat": "^1.2.5", "@eslint/js": "^9.18.0", @@ -23,6 +26,7 @@ "prettier-plugin-tailwindcss": "^0.6.11", "svelte": "^5.0.0", "svelte-check": "^4.0.0", + "svelte-hero-icons": "^5.2.0", "tailwindcss": "^4.0.0", "typescript": "^5.0.0", "typescript-eslint": "^8.20.0", @@ -1101,6 +1105,13 @@ "win32" ] }, + "node_modules/@steeze-ui/heroicons": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/@steeze-ui/heroicons/-/heroicons-2.4.2.tgz", + "integrity": "sha512-66luL+uaxyC6mcZigewH4phfDxNWj4sH+n6qK2VnY3zcgpMmNAgVQbMGfZYfKhLqrUo13BlqpmhWuHqAUpehlA==", + "dev": true, + "license": "MIT" + }, "node_modules/@sveltejs/acorn-typescript": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.5.tgz", @@ -2964,6 +2975,19 @@ "node": ">=8.6" } }, + "node_modules/micromatch/node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/minimatch": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", @@ -2977,6 +3001,15 @@ "node": "*" } }, + "node_modules/moment": { + "version": "2.30.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz", + "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==", + "license": "MIT", + "engines": { + "node": "*" + } + }, "node_modules/mri": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz", @@ -3121,13 +3154,13 @@ "license": "ISC" }, "node_modules/picomatch": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz", + "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==", "dev": true, "license": "MIT", "engines": { - "node": ">=8.6" + "node": ">=12" }, "funding": { "url": "https://github.com/sponsors/jonschlinkert" @@ -3702,6 +3735,22 @@ } } }, + "node_modules/svelte-hero-icons": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/svelte-hero-icons/-/svelte-hero-icons-5.2.0.tgz", + "integrity": "sha512-KpdMTL0bOnkxciEmDXvyVF/R5nrZ1x1uHCSt9gMrrbEd3g5HSIaaDChOutTOfeI+cZ3EJbb+OcBH/lBzJr1aEw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@steeze-ui/heroicons": "^2.4.0" + }, + "engines": { + "node": ">=18.0.0" + }, + "peerDependencies": { + "svelte": "^3.0.0 || ^4.0.0 || ^5.0.0" + } + }, "node_modules/tailwindcss": { "version": "4.1.4", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.4.tgz", @@ -3736,19 +3785,6 @@ "url": "https://github.com/sponsors/SuperchupuDev" } }, - "node_modules/tinyglobby/node_modules/picomatch": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz", - "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/jonschlinkert" - } - }, "node_modules/to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", @@ -4393,19 +4429,6 @@ "@esbuild/win32-x64": "0.25.2" } }, - "node_modules/vite/node_modules/picomatch": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz", - "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/jonschlinkert" - } - }, "node_modules/vitefu": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-1.0.6.tgz", diff --git a/package.json b/package.json index 83090ba..98a8ece 100644 --- a/package.json +++ b/package.json @@ -29,9 +29,13 @@ "prettier-plugin-tailwindcss": "^0.6.11", "svelte": "^5.0.0", "svelte-check": "^4.0.0", + "svelte-hero-icons": "^5.2.0", "tailwindcss": "^4.0.0", "typescript": "^5.0.0", "typescript-eslint": "^8.20.0", "vite": "^6.2.5" + }, + "dependencies": { + "moment": "^2.30.1" } } diff --git a/src/app.css b/src/app.css index d4b5078..ae32b94 100644 --- a/src/app.css +++ b/src/app.css @@ -1 +1,11 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap'); @import 'tailwindcss'; +/* load any custom fonts here, e.g.: */ + +@tailwind base; +@tailwind components; +@tailwind utilities; + +html { + font-family: 'Inter', sans-serif; +} diff --git a/src/app.html b/src/app.html index 77a5ff5..381bf8f 100644 --- a/src/app.html +++ b/src/app.html @@ -2,9 +2,10 @@ - %sveltekit.head% + +
%sveltekit.body%
diff --git a/src/lib/HeardleGame.svelte b/src/lib/HeardleGame.svelte new file mode 100644 index 0000000..7fa2c39 --- /dev/null +++ b/src/lib/HeardleGame.svelte @@ -0,0 +1,499 @@ + + + +{#if showHowTo} +
+
+
+

+ How to Play +

+ +
+ +
+
+
+{/if} + + +{#if showInfo} +
+
+
+

+ {ARTIST_NAME} – Test your {ARTIST_NAME} knowledge! +

+

+ All songs used are copyrighted and belong to {ARTIST_NAME}. +

+
+

+ Prepared with SoundCloud, Svelte, Tailwind, Inter font,
+ svelte‑hero‑icons +

+

Game version: 1.0.0

+
+ +
+
+
+{/if} + + +
+ +
+ +

+ Heardle – {ARTIST_NAME} +

+ +
+
+ + +
+ {#each attemptInfos as info} +
+ {#if info.status === 'skip'}▢ Skipped + {:else if info.status === 'wrong'}☒ {info.title} + {:else}✓ {info.title}{/if} +
+ {/each} + {#each Array(maxAttempts - attemptInfos.length) as _} +
+ {/each} +
+ + + + +
+
+
+ {#each boundaries as b} +
+ {/each} +
+
+ {formatTime(currentPosition)} + {formatTime(TOTAL_MS)} +
+
+ + +
+ +
+ + + {#if !gameOver} +
+ + {#if suggestions.length} + + {/if} +
+
+ + +
+ {:else} +
+ {message} +
+ {/if} +
+ + diff --git a/src/lib/index.ts b/src/lib/index.ts index 856f2b6..4f605b5 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -1 +1,2 @@ -// place files you want to import through the `$lib` alias in this folder. +// src/lib/index.ts +export { default as HeardleGame } from './HeardleGame.svelte'; diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index b93e9ba..fd62a08 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,7 +1,13 @@ + -{@render children()} + + Heardle – Maisie Peters Edition + + + +
+ +
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index cc88df0..cd03da5 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,2 +1,5 @@ -

Welcome to SvelteKit

-

Visit svelte.dev/docs/kit to read the documentation

+ + + diff --git a/static/favicon-dark.ico b/static/favicon-dark.ico new file mode 100644 index 0000000..b7fbbec Binary files /dev/null and b/static/favicon-dark.ico differ diff --git a/static/favicon-dark.png b/static/favicon-dark.png new file mode 100644 index 0000000..b7fbbec Binary files /dev/null and b/static/favicon-dark.png differ diff --git a/static/favicon.ico b/static/favicon.ico new file mode 100644 index 0000000..094c89a Binary files /dev/null and b/static/favicon.ico differ diff --git a/static/favicon.png b/static/favicon.png index 825b9e6..094c89a 100644 Binary files a/static/favicon.png and b/static/favicon.png differ diff --git a/tailwind.config.cjs b/tailwind.config.cjs new file mode 100644 index 0000000..ed3413a --- /dev/null +++ b/tailwind.config.cjs @@ -0,0 +1,10 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ['./src/**/*.{html,svelte,ts,js}'], + theme: { + extend: { + // put your custom colors, spacing, etc. here + } + }, + plugins: [] +}; diff --git a/vite.config.ts b/vite.config.ts index 2d35c4f..b9f6859 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,7 +1,7 @@ -import tailwindcss from '@tailwindcss/vite'; -import { sveltekit } from '@sveltejs/kit/vite'; import { defineConfig } from 'vite'; +import { sveltekit } from '@sveltejs/kit/vite'; +import tailwindcss from '@tailwindcss/vite'; export default defineConfig({ - plugins: [tailwindcss(), sveltekit()] + plugins: [sveltekit(), tailwindcss()] });