diff --git a/index.html b/index.html index dc68894..796666c 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,7 @@ + diff --git a/public/fonts/Lato-Black.ttf b/public/fonts/Lato-Black.ttf new file mode 100644 index 0000000..4340502 Binary files /dev/null and b/public/fonts/Lato-Black.ttf differ diff --git a/public/fonts/Lato-Bold.ttf b/public/fonts/Lato-Bold.ttf new file mode 100644 index 0000000..016068b Binary files /dev/null and b/public/fonts/Lato-Bold.ttf differ diff --git a/public/fonts/Lato-Bold.woff b/public/fonts/Lato-Bold.woff new file mode 100644 index 0000000..d37d3b3 Binary files /dev/null and b/public/fonts/Lato-Bold.woff differ diff --git a/public/fonts/Lato-Bold.woff2 b/public/fonts/Lato-Bold.woff2 new file mode 100644 index 0000000..50274ad Binary files /dev/null and b/public/fonts/Lato-Bold.woff2 differ diff --git a/public/fonts/Lato-Light.woff b/public/fonts/Lato-Light.woff new file mode 100644 index 0000000..3f53bab Binary files /dev/null and b/public/fonts/Lato-Light.woff differ diff --git a/public/fonts/Lato-Light.woff2 b/public/fonts/Lato-Light.woff2 new file mode 100644 index 0000000..3f01ef9 Binary files /dev/null and b/public/fonts/Lato-Light.woff2 differ diff --git a/public/fonts/Lato-Regular.ttf b/public/fonts/Lato-Regular.ttf new file mode 100644 index 0000000..bb2e887 Binary files /dev/null and b/public/fonts/Lato-Regular.ttf differ diff --git a/public/fonts/Lato-Regular.woff b/public/fonts/Lato-Regular.woff new file mode 100644 index 0000000..9fb190c Binary files /dev/null and b/public/fonts/Lato-Regular.woff differ diff --git a/public/fonts/Lato-Regular.woff2 b/public/fonts/Lato-Regular.woff2 new file mode 100644 index 0000000..aff3c2f Binary files /dev/null and b/public/fonts/Lato-Regular.woff2 differ diff --git a/public/images/placeholder.jpg b/public/images/placeholder.jpg new file mode 100644 index 0000000..de080be Binary files /dev/null and b/public/images/placeholder.jpg differ diff --git a/src/App.vue b/src/App.vue index 971e296..c4e2212 100644 --- a/src/App.vue +++ b/src/App.vue @@ -54,10 +54,4 @@ h2 { color: #d1d1d1; } - -@media screen and (max-width: $breakpointMd) { - #app { - font-size: calc(0.7rem + 0.75vw); - } -} diff --git a/src/components/app/MainContainer.vue b/src/components/app/MainContainer.vue index f6034d3..7f27d10 100644 --- a/src/components/app/MainContainer.vue +++ b/src/components/app/MainContainer.vue @@ -27,7 +27,7 @@ main { gap: 1em; width: 100%; - max-width: 1500px; + max-width: 1300px; min-height: 75vh; grid-template-columns: 1fr 2fr; diff --git a/src/components/sections/InputsSection.vue b/src/components/sections/InputsSection.vue index e00cd43..337081a 100644 --- a/src/components/sections/InputsSection.vue +++ b/src/components/sections/InputsSection.vue @@ -1,7 +1,7 @@ diff --git a/src/http.ts b/src/http.ts index 2304f45..084d54c 100644 --- a/src/http.ts +++ b/src/http.ts @@ -2,7 +2,7 @@ import axios from "axios"; const http = axios.create({ baseURL: - import.meta.env.VITE_API_DEV === "1" + import.meta.env.VITE_API_DEV === "1" && import.meta.env.DEV ? "http://localhost:5500" : "https://spythere.github.io/api", }); diff --git a/src/locales/en.json b/src/locales/en.json index 25b5abd..000857b 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -29,7 +29,7 @@ "title": "RAILWAY VEHICLE PREVIEW", "loading": "IMAGE LOADING...", "desc": "Choose a railway vehicle above to see its preview", - "sponsor-only": "* SPONSORS ONLY", + "sponsor-only": "* SPONSORS ONLY UNTIL {0}", "loco-e": "ELECTRIC LOCO", "loco-s": "DIESEL LOCO", "loco-ezt": "ELECTRIC M.U.", @@ -128,7 +128,7 @@ "header": { "image": "Image", "type": "Name", - "power": "Type", + "group": "Type group", "constructionType": "Construction", "coldStart": "Cold start", "length": "Length", diff --git a/src/locales/pl.json b/src/locales/pl.json index 0fa9b4c..607d5d0 100644 --- a/src/locales/pl.json +++ b/src/locales/pl.json @@ -29,7 +29,7 @@ "title": "PODGLĄD WYBRANEGO POJAZDU", "loading": "ŁADOWANIE OBRAZU...", "desc": "Wybierz pojazd lub wagon, aby zobaczyć jego podgląd powyżej", - "sponsor-only": "* TYLKO DLA SPONSORÓW", + "sponsor-only": "* TYLKO DLA SPONSORÓW DO {0}", "loco-e": "ELEKTROWÓZ", "loco-s": "SPALINOWÓZ", "loco-ezt": "EZT", @@ -128,7 +128,7 @@ "header": { "image": "Zdjęcie", "type": "Nazwa", - "power": "Rodzaj", + "group": "Rodzaj", "constructionType": "Konstrukcja", "coldStart": "Zimny start", "length": "Długość", diff --git a/src/mixins/stockMixin.ts b/src/mixins/stockMixin.ts index e208256..0dd5295 100644 --- a/src/mixins/stockMixin.ts +++ b/src/mixins/stockMixin.ts @@ -29,7 +29,7 @@ export default defineComponent({ count, imgSrc: vehicle.imageSrc, useType: isLoco ? vehicle.power : vehicle.useType, - supportersOnly: vehicle.supportersOnly, + isSponsorsOnly: vehicle.isSponsorsOnly, constructionType: vehicle.constructionType, }; }, diff --git a/src/mixins/stockPreviewMixin.ts b/src/mixins/stockPreviewMixin.ts index 050ecbe..ba00021 100644 --- a/src/mixins/stockPreviewMixin.ts +++ b/src/mixins/stockPreviewMixin.ts @@ -1,6 +1,7 @@ -import { defineComponent } from "vue"; -import { useStore } from "../store"; -import { ICarWagon, ILocomotive, IStock } from "../types"; +import { defineComponent } from 'vue'; +import { useStore } from '../store'; +import { ICarWagon, ILocomotive, IStock, Vehicle } from '../types'; +import { isLocomotive } from '../utils/vehicleUtils'; export default defineComponent({ setup() { @@ -9,64 +10,20 @@ export default defineComponent({ }; }, - computed: { - locoOptions() { - return this.store.locoDataList - .slice() - .sort((a, b) => (a.type > b.type ? 1 : -1)) - .filter((loco) => loco.power == this.store.chosenLocoPower); - }, - - carOptions() { - return this.store.carDataList - .slice() - .sort((a, b) => (a.type > b.type ? 1 : -1)) - .filter((car) => car.useType == this.store.chosenCarUseType); - }, - }, + computed: {}, methods: { - selectLocoType(locoTypeId: string) { - this.store.chosenLocoPower = locoTypeId; - this.store.chosenVehicle = this.locoOptions[0]; - this.store.chosenLoco = this.locoOptions[0]; - }, - - selectCarWagonType(carWagonTypeId: string) { - this.store.chosenCarUseType = carWagonTypeId; - this.store.chosenVehicle = this.carOptions[0]; - this.store.chosenCar = this.carOptions[0]; - this.store.chosenCargo = null; - }, - - previewVehicleByType(type: "loco" | "car" | "cargo") { - this.$nextTick(() => { - if (!this.store.chosenLoco && !this.store.chosenCar) return; - - this.store.chosenVehicle = - type == "loco" ? this.store.chosenLoco : this.store.chosenCar; - - this.store.chosenCargo = - this.store.chosenCar?.cargoList.find( - (cargo) => cargo.id == this.store.chosenCargo?.id, - ) || null; - }); - }, - previewStock(stock: IStock) { - if (this.store.chosenVehicle?.imageSrc != stock.imgSrc) - this.store.imageLoading = true; + if (this.store.chosenVehicle?.imageSrc != stock.imgSrc) this.store.imageLoading = true; if (stock.isLoco) { - const chosenLoco = - this.store.locoDataList.find((v) => v.type == stock.type) || null; + const chosenLoco = this.store.locoDataList.find((v) => v.type == stock.type) || null; this.store.chosenVehicle = chosenLoco; this.store.chosenLoco = chosenLoco; this.store.chosenCargo = null; this.store.chosenLocoPower = stock.useType; } else { - const chosenCar = - this.store.carDataList.find((v) => v.type == stock.type) || null; + const chosenCar = this.store.carDataList.find((v) => v.type == stock.type) || null; this.store.chosenVehicle = chosenCar; this.store.chosenCar = chosenCar; @@ -89,6 +46,11 @@ export default defineComponent({ this.store.chosenCargo = null; }, + previewVehicle(vehicle: Vehicle) { + if (isLocomotive(vehicle)) this.previewLocomotive(vehicle); + else this.previewCarWagon(vehicle); + }, + resetPreview() { this.store.chosenVehicle = null; this.store.chosenCar = null; diff --git a/src/store.ts b/src/store.ts index f6f692b..280e238 100644 --- a/src/store.ts +++ b/src/store.ts @@ -1,5 +1,5 @@ -import { IStockData, IStore } from "./types"; -import { defineStore } from "pinia"; +import { IStockData, IStore } from './types'; +import { defineStore } from 'pinia'; import { acceptableMass, carDataList, @@ -9,11 +9,11 @@ import { maxStockSpeed, totalLength, totalMass, -} from "./utils/vehicleUtils"; -import http from "./http"; +} from './utils/vehicleUtils'; +import http from './http'; export const useStore = defineStore({ - id: "store", + id: 'store', state: () => ({ chosenCar: null, @@ -26,8 +26,8 @@ export const useStore = defineStore({ showSupporter: false, imageLoading: false, - chosenLocoPower: "loco-e", - chosenCarUseType: "car-passenger", + chosenLocoPower: 'loco-e', + chosenCarUseType: 'car-passenger', stockList: [], cargoOptions: [], @@ -39,20 +39,22 @@ export const useStore = defineStore({ chosenStockListIndex: -1, chosenRealStockName: undefined, - vehiclePreviewSrc: "", + vehiclePreviewSrc: '', - stockSectionMode: "stock-list", + stockSectionMode: 'stock-list', isRandomizerCardOpen: false, isRealStockListCardOpen: false, stockData: undefined, + + lastFocusedElement: null, }) as IStore, getters: { locoDataList: (state) => locoDataList(state), carDataList: (state) => carDataList(state), - vehicleDataList: (state) => ([...locoDataList(state), ...carDataList(state)]), + vehicleDataList: (state) => [...locoDataList(state), ...carDataList(state)], totalMass: (state) => totalMass(state), totalLength: (state) => totalLength(state), maxStockSpeed: (state) => maxStockSpeed(state), @@ -63,21 +65,20 @@ export const useStore = defineStore({ actions: { async fetchStockInfoData() { - const stockData = (await http.get("td2/data/stockInfo.json")) - .data; + const stockData = (await http.get('td2/data/stockInfo.json')).data; this.stockData = stockData; }, handleRouting() { switch (window.location.pathname) { - case "/numgnr": - this.stockSectionMode = "number-generator"; + case '/numgnr': + this.stockSectionMode = 'number-generator'; break; - case "/stockgnr": - this.stockSectionMode = "stock-generator"; + case '/stockgnr': + this.stockSectionMode = 'stock-generator'; break; - case "/vehicles": - this.stockSectionMode = "wiki-list"; + case '/vehicles': + this.stockSectionMode = 'wiki-list'; break; default: break; diff --git a/src/styles/global.scss b/src/styles/global.scss index b5f9711..ed7384c 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -1,5 +1,3 @@ -@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap'); - $breakpointMd: 960px; $breakpointSm: 550px; @@ -8,6 +6,36 @@ $textColor: #fff; $secondaryColor: #222; $accentColor: #e4c428; +@font-face { + font-family: 'Lato'; + src: + url('$fonts/Lato-Light.woff2') format('woff2'), + url('$fonts/Lato-Light.woff') format('woff'); + font-weight: 300; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Lato'; + src: + url('$fonts/Lato-Bold.woff2') format('woff2'), + url('$fonts/Lato-Bold.woff') format('woff'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Lato'; + src: + url('$fonts/Lato-Regular.woff2') format('woff2'), + url('$fonts/Lato-Regular.woff') format('woff'); + font-weight: normal; + font-style: normal; + font-display: swap; +} + ::-webkit-scrollbar { width: 7px; height: 7px; @@ -32,7 +60,7 @@ html { margin: 0; padding: 0; - font-family: 'Lato', sans-serif; + font-family: Lato, sans-serif; background-color: $bgColor; overflow-x: hidden; @@ -64,7 +92,7 @@ select, option, input, button { - font-family: 'Lato', sans-serif; + font-family: Lato, sans-serif; font-size: 1em; } @@ -157,7 +185,7 @@ button { select, input[type='text'], input[type='number'] { - background: none; + background: $bgColor; border: 2px solid #aaa; outline: none; diff --git a/src/types.ts b/src/types.ts index c7bd4f7..4480891 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,5 +1,5 @@ export type Vehicle = ILocomotive | ICarWagon; -export type StockSectionMode = "STOCK_LIST" | "STOCK_GENERATOR"; +export type StockSectionMode = 'STOCK_LIST' | 'STOCK_GENERATOR'; export interface IStore { chosenCar: ICarWagon | null; @@ -28,21 +28,14 @@ export interface IStore { isRandomizerCardOpen: boolean; isRealStockListCardOpen: boolean; - stockSectionMode: - | "stock-list" - | "stock-generator" - | "number-generator" - | "wiki-list"; + stockSectionMode: 'stock-list' | 'stock-generator' | 'number-generator' | 'wiki-list'; stockData?: IStockData; + + lastFocusedElement: HTMLElement | null; } -export type TStockInfoKey = - | "loco-e" - | "loco-s" - | "loco-ezt" - | "loco-szt" - | "car-passenger" - | "car-cargo"; +export type TLocoGroup = 'loco-e' | 'loco-s' | 'loco-ezt' | 'loco-szt'; +export type TCarWagonGroup = 'car-passenger' | 'car-cargo'; export interface IStockProps { type: string; @@ -62,12 +55,12 @@ export interface IStockData { }; info: { - "car-cargo": [string, string, boolean, boolean, string][]; - "car-passenger": [string, string, boolean, boolean, string][]; - "loco-e": [string, string, string, string, boolean][]; - "loco-s": [string, string, string, string, boolean][]; - "loco-szt": [string, string, string, string, boolean][]; - "loco-ezt": [string, string, string, string, boolean][]; + 'car-cargo': [string, string, boolean, number | null, string][]; + 'car-passenger': [string, string, boolean, number | null, string][]; + 'loco-e': [string, string, string, string, number | null][]; + 'loco-s': [string, string, string, string, number | null][]; + 'loco-szt': [string, string, string, string, number | null][]; + 'loco-ezt': [string, string, string, string, number | null][]; }; props: IStockProps[]; @@ -77,11 +70,13 @@ export interface IStockData { export interface ILocomotive { type: string; - power: string; + power: TLocoGroup; + group: TLocoGroup; constructionType: string; cabinType: string; maxSpeed: number; - supportersOnly: boolean; + isSponsorsOnly: boolean; + sponsorsOnlyTimestamp: number; imageSrc: string; mass: number; @@ -90,10 +85,12 @@ export interface ILocomotive { export interface ICarWagon { type: string; - useType: "car-passenger" | "car-cargo"; + useType: TCarWagonGroup; + group: TCarWagonGroup; constructionType: string; loadable: boolean; - supportersOnly: boolean; + isSponsorsOnly: boolean; + sponsorsOnlyTimestamp: number; maxSpeed: number; imageSrc: string; @@ -117,7 +114,8 @@ export interface IStock { maxSpeed: number; cargo?: { id: string; totalMass: number }; isLoco: boolean; - supportersOnly: boolean; + isSponsorsOnly: boolean; + sponsorsOnlyTimestamp: number; count: number; imgSrc?: string; } diff --git a/src/utils/vehicleUtils.ts b/src/utils/vehicleUtils.ts index aaec9e3..232a776 100644 --- a/src/utils/vehicleUtils.ts +++ b/src/utils/vehicleUtils.ts @@ -1,10 +1,8 @@ -import { EVehicleUseType } from "../enums/EVehicleUseType"; -import { ICarWagon, ILocomotive, IStore } from "../types"; -import { LocoType, calculateSpeedLimit } from "./speedLimitUtils"; +import { EVehicleUseType } from '../enums/EVehicleUseType'; +import { ICarWagon, ILocomotive, IStore, TCarWagonGroup, TLocoGroup } from '../types'; +import { LocoType, calculateSpeedLimit } from './speedLimitUtils'; -export function isLocomotive( - vehicle: ILocomotive | ICarWagon, -): vehicle is ILocomotive { +export function isLocomotive(vehicle: ILocomotive | ICarWagon): vehicle is ILocomotive { return (vehicle as ILocomotive).power !== undefined; } @@ -14,39 +12,29 @@ export function locoDataList(state: IStore) { const stockData = state.stockData; return Object.keys(stockData.info).reduce((acc, vehiclePower) => { - if (!vehiclePower.startsWith("loco")) return acc; + if (!vehiclePower.startsWith('loco')) return acc; - const locoVehiclesData = - stockData.info[ - vehiclePower as "loco-e" | "loco-s" | "loco-ezt" | "loco-szt" - ]; + const locoVehiclesData = stockData.info[vehiclePower as TLocoGroup]; locoVehiclesData.forEach((loco) => { if (state.showSupporter && !loco[4]) return; - const [type, constructionType, cabinType, maxSpeed, supportersOnly] = - loco; - const locoProps = stockData.props.find( - (prop) => constructionType == prop.type, - ); + const [type, constructionType, cabinType, maxSpeed, sponsorsTimestamp] = loco; + const locoProps = stockData.props.find((prop) => constructionType == prop.type); acc.push({ - power: vehiclePower, + power: vehiclePower as TLocoGroup, + group: vehiclePower as TLocoGroup, type, constructionType, cabinType, maxSpeed: Number(maxSpeed), - supportersOnly, - imageSrc: "", + isSponsorsOnly: Number(sponsorsTimestamp) > Date.now(), + sponsorsOnlyTimestamp: Number(sponsorsTimestamp), + imageSrc: '', - length: - locoProps?.length && type.startsWith("2EN") - ? locoProps.length * 2 - : locoProps?.length || 0, - mass: - locoProps?.mass && type.startsWith("2EN") - ? 253 - : locoProps?.mass || 0, + length: locoProps?.length && type.startsWith('2EN') ? locoProps.length * 2 : locoProps?.length || 0, + mass: locoProps?.mass && type.startsWith('2EN') ? 253 : locoProps?.mass || 0, }); }); @@ -60,32 +48,33 @@ export function carDataList(state: IStore) { const stockData = state.stockData; return Object.keys(stockData.info).reduce((acc, vehicleUseType) => { - if (!vehicleUseType.startsWith("car")) return acc; + if (!vehicleUseType.startsWith('car')) return acc; - const carVehiclesData = - stockData.info[vehicleUseType as "car-passenger" | "car-cargo"]; + const carVehiclesData = stockData.info[vehicleUseType as TCarWagonGroup]; carVehiclesData.forEach((car) => { - if (state.showSupporter && !car[3]) return; + const [type, constructionType, loadable, sponsorsOnlyTimestamp, maxSpeed] = car; - const carPropsData = stockData.props.find((v) => - car[0].toString().startsWith(v.type), - ); + if (state.showSupporter && Number(sponsorsOnlyTimestamp) <= Date.now()) return; + + const carPropsData = stockData.props.find((v) => type.toString().startsWith(v.type)); acc.push({ - useType: vehicleUseType as "car-passenger" | "car-cargo", - type: car[0], - constructionType: car[1], - loadable: car[2], - supportersOnly: car[3], - maxSpeed: Number(car[4]), - imageSrc: "", + useType: vehicleUseType as TCarWagonGroup, + group: vehicleUseType as TCarWagonGroup, + type, + constructionType, + loadable, + isSponsorsOnly: Number(sponsorsOnlyTimestamp) > Date.now(), + sponsorsOnlyTimestamp: Number(sponsorsOnlyTimestamp), + maxSpeed: Number(maxSpeed), + imageSrc: '', cargoList: !carPropsData || carPropsData.cargo === null ? [] - : carPropsData.cargo.split(";").map((cargo) => ({ - id: cargo.split(":")[0], - totalMass: Number(cargo.split(":")[1]), + : carPropsData.cargo.split(';').map((cargo) => ({ + id: cargo.split(':')[0], + totalMass: Number(cargo.split(':')[1]), })), mass: carPropsData?.mass || 0, @@ -98,46 +87,28 @@ export function carDataList(state: IStore) { } export function totalMass(state: IStore) { - return ~~state.stockList.reduce( - (acc, stock) => - acc + (stock.cargo ? stock.cargo.totalMass : stock.mass) * stock.count, - 0, - ); + return ~~state.stockList.reduce((acc, stock) => acc + (stock.cargo ? stock.cargo.totalMass : stock.mass) * stock.count, 0); } export function totalLength(state: IStore) { - return state.stockList.reduce( - (acc, stock) => acc + stock.length * stock.count, - 0, - ); + return state.stockList.reduce((acc, stock) => acc + stock.length * stock.count, 0); } export function maxStockSpeed(state: IStore) { - const stockSpeedLimit = state.stockList.reduce( - (acc, stock) => (stock.maxSpeed < acc || acc == 0 ? stock.maxSpeed : acc), - 0, - ); - const headingLoco = state.stockList[0]?.isLoco - ? state.stockList[0] - : undefined; + const stockSpeedLimit = state.stockList.reduce((acc, stock) => (stock.maxSpeed < acc || acc == 0 ? stock.maxSpeed : acc), 0); + const headingLoco = state.stockList[0]?.isLoco ? state.stockList[0] : undefined; if (!headingLoco) return stockSpeedLimit; - const locoType = headingLoco.type.split("-")[0]; + const locoType = headingLoco.type.split('-')[0]; if (/^(EN|2EN|SN)/.test(locoType)) return stockSpeedLimit; const stockMass = totalMass(state); - const speedLimitByMass = calculateSpeedLimit( - locoType as LocoType, - stockMass, - isTrainPassenger(state), - ); + const speedLimitByMass = calculateSpeedLimit(locoType as LocoType, stockMass, isTrainPassenger(state)); - return speedLimitByMass - ? Math.min(stockSpeedLimit, speedLimitByMass) - : stockSpeedLimit; + return speedLimitByMass ? Math.min(stockSpeedLimit, speedLimitByMass) : stockSpeedLimit; } export function acceptableMass(state: IStore) { @@ -168,9 +139,7 @@ export function isTrainPassenger(state: IStore) { if (state.stockList.length == 0) return false; if (state.stockList.every((stock) => stock.isLoco)) return false; - return state.stockList - .filter((stock) => !stock.isLoco) - .every((stock) => stock.useType === EVehicleUseType.CAR_PASSENGER); + return state.stockList.filter((stock) => !stock.isLoco).every((stock) => stock.useType === EVehicleUseType.CAR_PASSENGER); } export function chosenRealStock(state: IStore) { @@ -179,11 +148,9 @@ export function chosenRealStock(state: IStore) { for (let i = 0; i < stock.count; i++) acc.push(stock.type); return acc; }, [] as string[]) - .join(";"); + .join(';'); - const realStockObj = state.readyStockList.find( - (readyStock) => readyStock.stockString == currentStockString, - ); + const realStockObj = state.readyStockList.find((readyStock) => readyStock.stockString == currentStockString); state.chosenRealStockName = realStockObj?.stockId ?? undefined; diff --git a/vite.config.ts b/vite.config.ts index 95831bf..6f0819a 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -2,19 +2,26 @@ import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import { VitePWA } from 'vite-plugin-pwa'; +import { resolve } from 'path'; // https://vitejs.dev/config/ export default defineConfig({ server: { port: 2137, }, + resolve: { + alias: { + $fonts: resolve('/fonts'), + $images: resolve('/images'), + }, + }, plugins: [ vue(), VitePWA({ registerType: 'autoUpdate', workbox: { - // globPatterns: ['**/*.{js,css,html,png,svg,img}'], + globPatterns: ['**/*.{js,css,html,png,svg,img,woff,woff2}'], runtimeCaching: [ { @@ -24,10 +31,23 @@ export default defineConfig({ cacheName: 'swdr-images-cache', expiration: { maxEntries: 50, - maxAgeSeconds: 60 * 60 * 24 * 7, // <== 7 days + maxAgeSeconds: 60 * 60 * 24, // <== 1 day }, cacheableResponse: { - statuses: [404], + statuses: [0, 200, 404], + }, + }, + }, + { + urlPattern: /^https:\/\/spythere.github.io\/api\/td2\/.*/i, + handler: 'CacheFirst', + options: { + cacheName: 'spythere-api-cache', + expiration: { + maxAgeSeconds: 60 * 60 * 24, // <== 1 day + }, + cacheableResponse: { + statuses: [0, 200], }, }, }, @@ -36,5 +56,3 @@ export default defineConfig({ }), ], }); - -