diff --git a/front/index.html b/front/index.html index 96bc0ba..fbacb71 100644 --- a/front/index.html +++ b/front/index.html @@ -1,12 +1,12 @@ - - - - TastyBites - - -
- - + + + + TastyBites + + +
+ + diff --git a/front/src/lib/api.js b/front/src/lib/api.js index 3987eb8..5ef33bc 100644 --- a/front/src/lib/api.js +++ b/front/src/lib/api.js @@ -1,13 +1,13 @@ -import TestData from '%/lib/test-data.ts'; +import TestData from "%/lib/test-data.ts"; export async function getPopularToday() { - const res = await fetch("/api/items") - const data = res.json() + const res = await fetch("/api/items"); + const data = res.json(); if (res.ok) { - return data + return data; } else { - throw new Error("Failed to fetch popular today") + throw new Error("Failed to fetch popular today"); } } diff --git a/front/src/lib/cart.ts b/front/src/lib/cart.ts index fc60d55..6377d9e 100644 --- a/front/src/lib/cart.ts +++ b/front/src/lib/cart.ts @@ -1,9 +1,8 @@ import { type Writable, get, writable } from "svelte/store"; -import {type CartItem, type Item } from './types'; +import { type CartItem, type Item } from "./types"; import { getItemByUUID, postVerifyCart } from "./test-api"; - // Load content from localstorage let local: Record = {}; try { @@ -16,7 +15,7 @@ try { throw error; // Hot potato style }); } catch { - console.error("Failed to load cart") + console.error("Failed to load cart"); } // Store function @@ -30,16 +29,17 @@ function createCartStore() { return cart; }); } else { - await getItemByUUID(uuid) - .then((data: Item) => { - cart.update((cart: Record) => - Object.assign({}, cart, {[uuid]: { + await getItemByUUID(uuid).then((data: Item) => { + cart.update((cart: Record) => + Object.assign({}, cart, { + [uuid]: { uuid: uuid, amount: amount, data: data, - }}) - ); - }); + }, + }) + ); + }); } cart.update((cart: Record) => { @@ -47,7 +47,7 @@ function createCartStore() { delete cart[uuid]; } return cart; - }) + }); } function getEntries(): [string, CartItem][] { @@ -69,7 +69,7 @@ function createCartStore() { function getTotalPrice(): number { let totalCartPrice: number = 0; Object.values(get(cart)).forEach((item: CartItem) => { - totalCartPrice += (item.amount * item.data.price); + totalCartPrice += item.amount * item.data.price; }); return totalCartPrice; } @@ -78,7 +78,7 @@ function createCartStore() { cart.update((cart) => { delete cart[uuid]; return cart; - }) + }); } return { @@ -89,7 +89,7 @@ function createCartStore() { getTotalLength, getTotalPrice, removeByUUID, - } + }; } // Create store diff --git a/front/src/lib/test-api.ts b/front/src/lib/test-api.ts index e5b2317..0804d24 100644 --- a/front/src/lib/test-api.ts +++ b/front/src/lib/test-api.ts @@ -1,18 +1,15 @@ -import { type CartItem, type Item } from './types'; -import TestData from './test-data'; - +import { type CartItem, type Item } from "./types"; +import TestData from "./test-data"; let cache: Record = {}; - // @ts-ignore async function fakeDelay(timeout: number = 1000) { // @ts-ignore await new Promise((resolve: TimerHandler) => setTimeout(resolve, timeout)); } - -export async function getAnnouncements(): Promise<{image: string}> { +export async function getAnnouncements(): Promise<{ image: string }> { if (cache["announcement_banner"] !== undefined) { return cache["announcement_banner"]; } @@ -26,7 +23,6 @@ export async function getAnnouncements(): Promise<{image: string}> { return data; } - export async function getPopularToday(): Promise { if (cache["popular_today"] !== undefined) { return cache["popular_today"]; @@ -39,8 +35,9 @@ export async function getPopularToday(): Promise { return data; } - -export async function getMenuItems(): Promise<{name: string, items: Item[]}[]> { +export async function getMenuItems(): Promise< + { name: string; items: Item[] }[] +> { await fakeDelay(20); return [ { @@ -58,7 +55,6 @@ export async function getMenuItems(): Promise<{name: string, items: Item[]}[]> { ]; } - export async function getItemsByUUID(items: string[]): Promise { await fakeDelay(200); @@ -79,7 +75,6 @@ export async function getItemsByUUID(items: string[]): Promise { return data; } - export async function getItemByUUID(uuid: string): Promise { let data: Item[]; @@ -98,8 +93,11 @@ export async function getItemByUUID(uuid: string): Promise { return data[0]; } - -export async function postContactEmail(name: string, email: string, message: string): Promise { +export async function postContactEmail( + name: string, + email: string, + message: string +): Promise { await fakeDelay(200); if (!name) { @@ -117,7 +115,9 @@ export async function postContactEmail(name: string, email: string, message: str return "Check your email to confirm the message!"; } -export async function postVerifyCart(currentCartData: Record): Promise> { +export async function postVerifyCart( + currentCartData: Record +): Promise> { let verifiedItems: Item[] = []; await getItemsByUUID(Object.keys(currentCartData)) diff --git a/front/src/lib/test-data.ts b/front/src/lib/test-data.ts index a62f50c..b9f5e28 100644 --- a/front/src/lib/test-data.ts +++ b/front/src/lib/test-data.ts @@ -1,4 +1,4 @@ -import type { Item } from './types'; +import type { Item } from "./types"; import { Labels } from "./types"; const TestData: Item[] = [ diff --git a/front/src/lib/types.ts b/front/src/lib/types.ts index c2ef630..4dc36d8 100644 --- a/front/src/lib/types.ts +++ b/front/src/lib/types.ts @@ -7,18 +7,18 @@ export enum Labels { } export interface Item { - uuid: string, - name: string, - price: number, - detail?: string, - labels: Labels[], - image?: string, + uuid: string; + name: string; + price: number; + detail?: string; + labels: Labels[]; + image?: string; } // UUID is stored in both Item and CartItem, this isn't the best, I don't like it // But it's the simplest way of doing this shit export interface CartItem { - uuid: string, - amount: number, - data: Item, + uuid: string; + amount: number; + data: Item; } diff --git a/front/src/lib/utils.js b/front/src/lib/utils.js index 05bb3a5..7ff3337 100644 --- a/front/src/lib/utils.js +++ b/front/src/lib/utils.js @@ -1,6 +1,6 @@ export function expandOnTyping(element) { element.oninput = (event) => { event.target.style.height = ""; - event.target.style.height = (event.target.scrollHeight + 2) + "px"; - } + event.target.style.height = event.target.scrollHeight + 2 + "px"; + }; } diff --git a/front/src/main.js b/front/src/main.js index 3467c48..a484599 100644 --- a/front/src/main.js +++ b/front/src/main.js @@ -1,8 +1,8 @@ -import './styles/main.scss' -import App from './App.svelte' +import "./styles/main.scss"; +import App from "./App.svelte"; const app = new App({ - target: document.getElementById('app'), -}) + target: document.getElementById("app"), +}); -export default app +export default app; diff --git a/front/src/routes.js b/front/src/routes.js index 90caa80..fda495d 100644 --- a/front/src/routes.js +++ b/front/src/routes.js @@ -9,53 +9,53 @@ const routes = { asyncComponent: () => import("./pages/PageIndex.svelte"), loadingComponent: PageLoading, conditions: [], - userData: { showNavBar: true, fullWidth: false, }, + userData: { showNavBar: true, fullWidth: false }, }), "/menu": wrap({ asyncComponent: () => import("./pages/PageMenu.svelte"), loadingComponent: PageLoading, conditions: [], - userData: { showNavBar: true, fullWidth: true, }, + userData: { showNavBar: true, fullWidth: true }, }), "/item/:uuid": wrap({ asyncComponent: () => import("./pages/PageItem.svelte"), loadingComponent: PageLoading, conditions: [], - userData: { showNavBar: true, fullWidth: true, }, + userData: { showNavBar: true, fullWidth: true }, }), "/contact": wrap({ asyncComponent: () => import("./pages/PageContact.svelte"), loadingComponent: PageLoading, conditions: [], - userData: { showNavBar: true, fullWidth: false, }, + userData: { showNavBar: true, fullWidth: false }, }), "/about": wrap({ component: PageLoading, loadingComponent: PageLoading, conditions: [], - userData: { showNavBar: true, fullWidth: false, }, + userData: { showNavBar: true, fullWidth: false }, }), "/cart": wrap({ asyncComponent: () => import("./pages/PageCart.svelte"), loadingComponent: PageLoading, conditions: [], - userData: { showNavBar: true, fullWidth: false, }, + userData: { showNavBar: true, fullWidth: false }, }), "/ForOhFor": wrap({ component: Page404, conditions: [], - userData: { showNavBar: true, fullWidth: false, }, + userData: { showNavBar: true, fullWidth: false }, }), "/ServerError": wrap({ component: Page500, conditions: [], - userData: { showNavBar: true, fullWidth: false, }, + userData: { showNavBar: true, fullWidth: false }, }), "*": wrap({ component: Page404, conditions: [], - userData: { showNavBar: true, fullWidth: false, }, + userData: { showNavBar: true, fullWidth: false }, }), -} +}; export default routes; diff --git a/front/src/styles/_announcement_banner.scss b/front/src/styles/_announcement_banner.scss index 8b78342..db502c7 100644 --- a/front/src/styles/_announcement_banner.scss +++ b/front/src/styles/_announcement_banner.scss @@ -7,7 +7,7 @@ overflow: hidden; - img{ + img { width: 100%; height: 400px; @@ -29,4 +29,4 @@ //aspect-ratio: 16 / 9; } } -} \ No newline at end of file +} diff --git a/front/src/styles/_container.scss b/front/src/styles/_container.scss index 0985eeb..b0dd7d6 100644 --- a/front/src/styles/_container.scss +++ b/front/src/styles/_container.scss @@ -1,6 +1,6 @@ .container { border-radius: $border-radius-normal; - background-image: url('/BackgroundTextureAlt.svg'); + background-image: url("/BackgroundTextureAlt.svg"); background-repeat: no-repeat; background-size: 200px 250px; background-position: 5px -43px; @@ -22,4 +22,4 @@ .section { padding: $spacing-normal; } -} \ No newline at end of file +} diff --git a/front/src/styles/_footer.scss b/front/src/styles/_footer.scss index 82c5932..e027442 100644 --- a/front/src/styles/_footer.scss +++ b/front/src/styles/_footer.scss @@ -58,4 +58,4 @@ footer { > h4 { margin-bottom: $spacing-xsmall; } -} \ No newline at end of file +} diff --git a/front/src/styles/_form_element.scss b/front/src/styles/_form_element.scss index e60f55f..bb5e4c3 100644 --- a/front/src/styles/_form_element.scss +++ b/front/src/styles/_form_element.scss @@ -66,4 +66,4 @@ &.error { color: $color-error; } -} \ No newline at end of file +} diff --git a/front/src/styles/_loading_bar.scss b/front/src/styles/_loading_bar.scss index c7d57a3..5f4dd04 100644 --- a/front/src/styles/_loading_bar.scss +++ b/front/src/styles/_loading_bar.scss @@ -6,16 +6,16 @@ height: 4px; border-radius: 999px; overflow: hidden; - animation: start .3s ease-in; + animation: start 0.3s ease-in; &.bottom { top: unset; - bottom: 2px + bottom: 2px; } .bar { position: absolute; - transition: transform .2s linear; + transition: transform 0.2s linear; left: 0; top: 0; bottom: 0; @@ -24,12 +24,16 @@ &.bar-1 { background-color: $color-dark; - animation: growBar1 2.5s infinite, moveBar1 2.5s infinite; + animation: + growBar1 2.5s infinite, + moveBar1 2.5s infinite; } &.bar-2 { background-color: $color-primary; - animation: growBar2 2.5s infinite, moveBar2 2.5s infinite; + animation: + growBar2 2.5s infinite, + moveBar2 2.5s infinite; } } } @@ -62,7 +66,12 @@ } 69.15% { left: 21.5%; - animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); + animation-timing-function: cubic-bezier( + 0.30244, + 0.38135, + 0.55, + 0.95635 + ); } 100% { left: 95.44444%; @@ -70,15 +79,30 @@ } @keyframes growBar2 { 0% { - animation-timing-function: cubic-bezier(0.20503, 0.05705, 0.57661, 0.45397); + animation-timing-function: cubic-bezier( + 0.20503, + 0.05705, + 0.57661, + 0.45397 + ); transform: scaleX(0.1); } 19.15% { - animation-timing-function: cubic-bezier(0.15231, 0.19643, 0.64837, 1.00432); + animation-timing-function: cubic-bezier( + 0.15231, + 0.19643, + 0.64837, + 1.00432 + ); transform: scaleX(0.57); } 44.15% { - animation-timing-function: cubic-bezier(0.25776, -0.00316, 0.21176, 1.38179); + animation-timing-function: cubic-bezier( + 0.25776, + -0.00316, + 0.21176, + 1.38179 + ); transform: scaleX(0.91); } 100% { diff --git a/front/src/styles/_navigation_bar.scss b/front/src/styles/_navigation_bar.scss index 5119b05..64af487 100644 --- a/front/src/styles/_navigation_bar.scss +++ b/front/src/styles/_navigation_bar.scss @@ -101,4 +101,4 @@ nav { justify-content: space-around; } } -} \ No newline at end of file +} diff --git a/front/src/styles/_reset.scss b/front/src/styles/_reset.scss index 389f278..1574209 100644 --- a/front/src/styles/_reset.scss +++ b/front/src/styles/_reset.scss @@ -1,4 +1,6 @@ -*, *::before, *::after { +*, +*::before, +*::after { margin: 0; text-rendering: optimizeLegibility; box-sizing: border-box; @@ -10,7 +12,8 @@ html { font-family: $font-family; } -body, #app { +body, +#app { min-height: 100vh; display: flex; flex-direction: column; @@ -23,8 +26,12 @@ body { color: $color-on-background; } - -h1, h2, h3, h4, h5, h6 { +h1, +h2, +h3, +h4, +h5, +h6 { padding-bottom: $spacing-small; text-shadow: 0 1px 0.5px rgba($color-dark, 0.3); } diff --git a/front/src/styles/vars.scss b/front/src/styles/vars.scss index bcc4977..2020931 100644 --- a/front/src/styles/vars.scss +++ b/front/src/styles/vars.scss @@ -5,7 +5,7 @@ $color-dark: #443023; $color-on-dark: #e1dcd3; $color-light: #fff8eb; $color-on-light: #33251a; -$color-primary: #6A9343; +$color-primary: #6a9343; $color-on-primary: #fffbf4; $color-error: #ab5642; $color-on-error: #fffbf4; @@ -33,7 +33,7 @@ $spacing-normal: 16px; $spacing-large: 32px; // FONT -$font-family: 'Erode', serif; +$font-family: "Erode", serif; $font-size-very-fucking-big: 50px; $font-size-h1: 32.44px; diff --git a/front/svelte.config.js b/front/svelte.config.js index d8c1bae..f470eeb 100644 --- a/front/svelte.config.js +++ b/front/svelte.config.js @@ -1,11 +1,8 @@ -import { vitePreprocess } from '@sveltejs/vite-plugin-svelte' -import { phosphorSvelteOptimize } from "phosphor-svelte/preprocessor" +import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"; +import { phosphorSvelteOptimize } from "phosphor-svelte/preprocessor"; export default { // Consult https://svelte.dev/docs#compile-time-svelte-preprocess // for more information about preprocessors - preprocess: [ - phosphorSvelteOptimize(), - vitePreprocess() - ], -} + preprocess: [phosphorSvelteOptimize(), vitePreprocess()], +}; diff --git a/front/vite.config.js b/front/vite.config.js index d52af1b..59cde5a 100644 --- a/front/vite.config.js +++ b/front/vite.config.js @@ -1,12 +1,10 @@ -import { defineConfig } from 'vite' -import { svelte } from '@sveltejs/vite-plugin-svelte' +import { defineConfig } from "vite"; +import { svelte } from "@sveltejs/vite-plugin-svelte"; // https://vitejs.dev/config/ export default defineConfig({ - base: './', - plugins: [ - svelte(), - ], + base: "./", + plugins: [svelte()], optimizeDeps: { exclude: ["phosphor-svelte"], }, @@ -15,4 +13,4 @@ export default defineConfig({ // '%': __dirname + '/src', // } // }, -}) +});