Merge pull request #55 from Spythere/development

Migration to new domain

.github/workflows/deploy.yml

@@ -1,8 +1,13 @@
 name: Build & Deploy to VPS
-'on':
+
+on:
   push:
     branches:
-      - master
+      - main
+
+env:
+  PROJECT_NAME: pojazdownik-td2
+
 jobs:
   build_and_deploy:
     runs-on: ubuntu-latest
@@ -14,9 +19,5 @@ jobs:
         run: |
             mkdir -p ~/.ssh
             echo "${{ secrets.VPS_SSH_PRIVATE_KEY }}" > ~/.ssh/id_rsa && chmod 600 ~/.ssh/id_rsa
-      - name: Remove old assets
+      - name: Send new files
-        run: | 
+        run: rsync -avP -e "ssh -o StrictHostKeyChecking=no -i ~/.ssh/id_rsa -p 2022" ./dist/ ${{ secrets.VPS_USER }}@${{ secrets.VPS_HOST }}:/var/www/$PROJECT_NAME --delete
-            ssh -o StrictHostKeyChecking=no -i ~/.ssh/id_rsa ${{ secrets.VPS_USER }}@${{ secrets.VPS_HOST }} -p 2022 "rm -rf /var/www/pojazdownik/assets"
-      - name: Send the build files to web server 
-        run: | 
-            scp -o StrictHostKeyChecking=no -i ~/.ssh/id_rsa -P 2022 -r ./dist/* ${{ secrets.VPS_USER }}@${{ secrets.VPS_HOST }}:/var/www/pojazdownik

.github/workflows/firebase-hosting-merge.yml

@@ -5,7 +5,7 @@ name: Deploy to Firebase Hosting on merge
 'on':
   push:
     branches:
-      - main
+      - main-old
 jobs:
   build_and_deploy:
     runs-on: ubuntu-latest

package.json

@@ -13,22 +13,22 @@
   },
   "dependencies": {
     "axios": "^1.4.0",
-    "lucide-vue-next": "^0.552.0",
+    "lucide-vue-next": "^0.576.0",
     "pinia": "^3.0.3",
     "prettier": "^3.0.3",
     "vue": "^3.2.37",
-    "vue-i18n": "11.1.12",
+    "vue-i18n": "11.2.8",
-    "vue-router": "4"
+    "vue-router": "5.0.3"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
-    "@types/node": "^24.10.0",
+    "@types/node": "^25.3.3",
     "@vite-pwa/assets-generator": "^1.0.2",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.6.0",
-    "@vue/tsconfig": "^0.8.1",
+    "@vue/tsconfig": "^0.9.0",
-    "eslint": "^9.39.1",
+    "eslint": "^10.0.2",
     "eslint-plugin-vue": "^10.5.1",
     "sass": "^1.59.3",
     "typescript": "^5.0.2",

src/App.vue

@@ -2,82 +2,88 @@
   <AppModals />
   <ImageFullscreenPreview v-if="store.vehiclePreviewSrc" />
 
+  <transition name="slide-bottom-anim">
+    <MigrationInfo v-if="store.isMigrationInfoOpen" />
+  </transition>
+
   <router-view></router-view>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
 import { useStore } from './store';
 import ImageFullscreenPreview from './components/utils/ImageFullscreenPreview.vue';
-import AppContainerView from './views/AppContainerView.vue';
 import AppModals from './components/app/AppModals.vue';
+import { computed, onMounted, watchEffect } from 'vue';
 import { registerSW } from 'virtual:pwa-register';
+import MigrationInfo from './components/app/MigrationInfo.vue';
+
+const store = useStore();
 
 registerSW({
   immediate: true,
-  onNeedRefresh() {
-    console.log('Needs refresh!');
-  },
 });
 
-export default defineComponent({
+onMounted(() => {
-  components: { ImageFullscreenPreview, AppContainerView, AppModals },
+  loadStockDataFromStorage();
-  data() {
+  showMigrationInfo();
-    return { store: useStore() };
+  store.setupAPIData();
-  },
-
-  created() {
-    this.loadStockDataFromStorage();
-    this.store.setupAPIData();
-  },
-
-  computed: {
-    currentStockString() {
-      return this.store.stockString;
-    },
-  },
-
-  watch: {
-    currentStockString(val: string) {
-      if (val != this.store.chosenStorageStockString) {
-        this.store.chosenStorageStockName = '';
-      }
-    },
-  },
-
-  methods: {
-    loadStockDataFromStorage() {
-      const savedData = localStorage.getItem('savedStockData');
-
-      if (!savedData) {
-        localStorage.setItem('savedStockData', JSON.stringify({}));
-        return;
-      }
-
-      try {
-        this.store.storageStockData = JSON.parse(savedData);
-      } catch (error) {
-        console.error('Wystąpił błąd podczas przetwarzania danych o składach z localStorage!', error);
-      }
-    },
-  },
 });
+
+const currentStockString = computed(() => store.stockString);
+
+watchEffect(() => {
+  if (currentStockString.value != store.chosenStorageStockString) {
+    store.chosenStorageStockName = '';
+  }
+});
+
+function showMigrationInfo() {
+  // Show only on old domain
+  if (location.hostname !== 'pojazdownik-td2.web.app' && location.hostname !== 'localhost') return;
+
+  const showInfo = localStorage.getItem('showMigrationInfo');
+
+  // Do not show if already acknowledged
+  if (showInfo === 'false') return;
+  
+  setTimeout(() => {
+    store.isMigrationInfoOpen = true;
+  }, 2000);
+}
+
+function loadStockDataFromStorage() {
+  const savedData = localStorage.getItem('savedStockData');
+
+  if (!savedData) {
+    localStorage.setItem('savedStockData', JSON.stringify({}));
+    return;
+  }
+
+  try {
+    store.storageStockData = JSON.parse(savedData);
+  } catch (error) {
+    console.error('Wystąpił błąd podczas przetwarzania danych o składach z localStorage!', error);
+  }
+}
 </script>
 
 <style lang="scss">
+@use './styles/global';
+@use './styles/responsive';
+
 /* APP */
 #app {
   margin: 0 auto;
 
-  color: global.$textColor;
+  color: var(--textColor);
   font-size: 1em;
   padding: 0;
 
-  @media screen and (max-width: global.$breakpointMd) {
+  @include responsive.midScreen {
     font-size: calc(0.7rem + 0.75vw);
   }
 
-  @media screen and (orientation: landscape) and (max-width: global.$breakpointMd) {
+  @include responsive.midScreenLandscape {
     font-size: calc(0.75rem + 0.4vw);
   }
 }

src/components/app/AppModals.vue

@@ -6,19 +6,9 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
 import { useStore } from '../../store';
 import RealStockCard from '../cards/RealStockCard.vue';
 
-export default defineComponent({
+const store = useStore();
-  components: { RealStockCard },
-  data() {
-    return {
-      store: useStore(),
-    };
-  },
-});
 </script>
-
-<style scoped></style>

src/components/app/MainContainer.vue

@@ -20,6 +20,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@use '@/styles/responsive';
+
 main {
   display: grid;
   gap: 1em;
@@ -30,7 +32,7 @@ main {
   grid-template-columns: 1fr 2fr;
   grid-template-rows: auto 360px minmax(300px, 1fr);
 
-  background-color: global.$bgColorDarker;
+  background-color: var(--bgColorDarker);
   border-radius: 1em;
 
   min-height: 950px;
@@ -38,7 +40,7 @@ main {
   padding: 1em;
 }
 
-@media screen and (max-width: global.$breakpointMd) {
+@include responsive.midScreen {
   main {
     display: flex;
     flex-direction: column;

src/components/app/MigrationInfo.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="migrate-info">
+    <i18n-t keypath="migrate-info.line-1" for="migrate-info">
+      <a href="https://pojazdownik-td2.spythere.eu/" target="_blank">{{ $t('migrate-info.link') }}</a>
+    </i18n-t>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped>
+.migrate-info {
+  position: fixed;
+  z-index: 100;
+  bottom: 0;
+  left: 0;
+
+  padding: 0.25em;
+  text-align: center;
+
+  width: 100%;
+  background-color: var(--accentColor);
+  color: black;
+  font-weight: bold;
+
+  font-size: 1.1em;
+}
+
+a {
+  color: black;
+  text-decoration: underline;
+
+  &:hover {
+    color: black;
+  }
+}
+</style>

src/components/cards/RealStockCard.vue

@@ -220,6 +220,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@use '@/styles/responsive';
+
 .action-exit {
   display: flex;
   background-color: #333;
@@ -247,7 +249,7 @@ export default defineComponent({
 
   z-index: 100;
 
-  @media screen and (max-width: global.$breakpointSm) {
+  @include responsive.smallScreen {
     height: 80vh;
   }
 }
@@ -279,7 +281,7 @@ export default defineComponent({
     width: 35%;
   }
 
-  @media screen and (max-width: global.$breakpointSm) {
+  @include responsive.smallScreen {
     flex-wrap: wrap;
 
     input {
@@ -307,7 +309,7 @@ ul {
     padding: 0.1em;
 
     &[data-last-selected='true'] .stock-title {
-      border: 1px solid global.$accentColor;
+      border: 1px solid var(--accentColor);
     }
 
     .stock-title {
@@ -323,7 +325,7 @@ ul {
       background: #222;
     }
 
-    @media screen and (max-width: global.$breakpointSm) {
+    @include responsive.smallScreen {
       grid-template-columns: 1fr;
       // grid-template-rows: 1fr 1fr;
     }

src/components/sections/InputsSection.vue

@@ -224,6 +224,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@use '@/styles/responsive';
+
 .inputs-section {
   display: flex;
   justify-content: center;
@@ -242,7 +244,7 @@ button.btn--choice {
   padding: 0.3em 0.6em;
 
   &[data-selected='true'] {
-    background-color: global.$accentColor;
+    background-color: var(--accentColor);
     color: black;
   }
 
@@ -260,12 +262,12 @@ button.btn--choice {
     display: block;
 
     font-weight: bold;
-    color: global.$accentColor;
+    color: var(--accentColor);
     margin-bottom: 0.3em;
   }
 
   select:focus {
-    border-color: global.$accentColor;
+    border-color: var(--accentColor);
   }
 }
 
@@ -290,7 +292,7 @@ button.btn--choice {
   }
 }
 
-@media screen and (max-width: global.$breakpointMd) {
+@include responsive.midScreen {
   .inputs-section {
     justify-content: center;
     text-align: center;

src/components/sections/LogoSection.vue

@@ -58,7 +58,7 @@ export default {
 
   button[data-selected='true'] {
     font-weight: bold;
-    color: global.$accentColor;
+    color: var(--accentColor);
     text-decoration: underline;
   }
 }

src/components/sections/TabsSection.vue

@@ -69,6 +69,8 @@ onMounted(() => {
 </script>
 
 <style lang="scss">
+@use '@/styles/responsive';
+
 // Tab change animation
 .tab-change {
   &-enter-from,
@@ -105,7 +107,7 @@ onMounted(() => {
   margin-bottom: 1em;
 }
 
-@media screen and (max-width: global.$breakpointSm) {
+@include responsive.smallScreen {
   .tabs-modes {
     grid-template-areas:
       'stock wiki'

src/components/sections/TrainImageSection.vue

@@ -152,7 +152,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-
+@use '@/styles/responsive';
 
 .train-image-section {
   display: flex;
@@ -178,11 +178,11 @@ img {
   }
 
   &[data-sponsor-only='true'] {
-    border: 1px solid global.$sponsorColor;
+    border: 1px solid var(--accentColor);
   }
 
   &[data-team-only='true'] {
-    border: 1px solid global.$teamColor;
+    border: 1px solid var(--teamColor);
   }
 }
 
@@ -216,25 +216,25 @@ img {
   width: 100%;
   max-width: 380px;
 
-  background-color: global.$secondaryColor;
+  background-color: var(--secondaryColor);
   font-weight: bold;
 }
 
 .placeholder {
   height: 250px;
 
-  background-color: global.$bgColor;
+  background-color: var(--bgColor);
 }
 
 .sponsor-only {
-  color: global.$sponsorColor;
+  color: var(--accentColor);
 }
 
 .team-only {
-  color: global.$teamColor;
+  color: var(--teamColor);
 }
 
-@media screen and (max-width: global.$breakpointMd) {
+@include responsive.midScreen {
   .train-image-section {
     justify-content: center;
   }

src/components/tabs/NumberGeneratorTab.vue

@@ -224,7 +224,8 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
 </script>
 
 <style lang="scss" scoped>
-@use '../../styles/tab';
+@use '@/styles/tab';
+@use '@/styles/responsive';
 
 .category-select {
   select {
@@ -263,7 +264,7 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
 
   margin: 0.5em 0;
   padding: 0.5em;
-  background-color: global.$secondaryColor;
+  background-color: var(--secondaryColor);
 }
 
 .category-rules {
@@ -281,13 +282,13 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
   margin: 0.25em 0;
 }
 
-@media screen and (max-width: global.$breakpointMd) {
+@include responsive.midScreen {
   .number-generator {
     min-height: 100vh;
   }
 }
 
-@media screen and (max-width: global.$breakpointSm) {
+@include responsive.smallScreen {
   .regions-select {
     flex-wrap: wrap;
   }

src/components/tabs/StockGeneratorTab.vue

@@ -81,27 +81,15 @@
       <hr />
 
       <div class="tab_actions">
-        <button
+        <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock()">
-          class="btn"
-          :data-disabled="computedChosenCarTypes.size == 0"
-          @click="generateStock()"
-        >
           {{ $t('stockgen.action-generate') }}
         </button>
 
-        <button
+        <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock(true)">
-          class="btn"
-          :data-disabled="computedChosenCarTypes.size == 0"
-          @click="generateStock(true)"
-        >
           {{ $t('stockgen.action-generate-empty') }}
         </button>
 
-        <button
+        <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="resetChosenCargo">
-          class="btn"
-          :data-disabled="computedChosenCarTypes.size == 0"
-          @click="resetChosenCargo"
-        >
           {{ $t('stockgen.action-reset') }}
         </button>
       </div>
@@ -183,9 +171,7 @@ export default defineComponent({
       if (!this.isCarGroupingEnabled) return false;
 
       stockList.sort((s1, s2) => {
-        return (s1.vehicleRef.constructionType + s1.cargo?.id).localeCompare(
+        return (s1.vehicleRef.constructionType + s1.cargo?.id).localeCompare(s2.vehicleRef.constructionType + s2.cargo?.id);
-          s2.vehicleRef.constructionType + s2.cargo?.id
-        );
       });
     },
 
@@ -202,14 +188,11 @@ export default defineComponent({
 
               if (!cargoType || empty) cargoObjs.push(undefined);
               else if (cargoType == 'all') cargoObjs.push(...carWagonObjs[0]!.cargoTypes);
-              else
+              else cargoObjs.push(carWagonObjs[0]?.cargoTypes.find((cargo) => cargo.id == cargoType));
-                cargoObjs.push(carWagonObjs[0]?.cargoTypes.find((cargo) => cargo.id == cargoType));
 
               carWagonObjs.forEach((cw) => {
                 cargoObjs.forEach((cargoObj) => {
-                  const chosenStock = acc.find((a) =>
+                  const chosenStock = acc.find((a) => a.constructionType.includes(cw.constructionType));
-                    a.constructionType.includes(cw.constructionType)
-                  );
 
                   if (!chosenStock)
                     acc.push({
@@ -229,24 +212,15 @@ export default defineComponent({
       let bestGeneration: { stockList: IStock[]; value: number } = { stockList: [], value: 0 };
 
       for (let i = 0; i < 10; i++) {
-        this.store.stockList.splice(
+        this.store.stockList.splice(this.store.stockList.length > 0 && isTractionUnit(this.store.stockList[0].vehicleRef) ? 1 : 0);
-          this.store.stockList.length > 0 && isTractionUnit(this.store.stockList[0].vehicleRef)
-            ? 1
-            : 0
-        );
 
         let carCount = 0;
-        const maxWeight =
+        const maxWeight = this.store.acceptableWeight > 0 ? Math.min(this.store.acceptableWeight, this.maxTons * 1000) : this.maxTons * 1000;
-          this.store.acceptableWeight > 0
-            ? Math.min(this.store.acceptableWeight, this.maxTons * 1000)
-            : this.maxTons * 1000;
 
         // eslint-disable-next-line no-constant-condition
         while (true) {
-          const randomStockType =
+          const randomStockType = generatedChosenStockList[~~(Math.random() * generatedChosenStockList.length)];
-            generatedChosenStockList[~~(Math.random() * generatedChosenStockList.length)];
+          const { carWagon, cargo } = randomStockType.carPool[~~(Math.random() * randomStockType.carPool.length)];
-          const { carWagon, cargo } =
-            randomStockType.carPool[~~(Math.random() * randomStockType.carPool.length)];
 
           if (
             this.store.totalWeight + (carWagon.weight + (cargo?.weight ?? 0)) > maxWeight ||
@@ -335,8 +309,6 @@ h2 {
     text-transform: uppercase;
     font-weight: bold;
 
-    background-color: global.$secondaryColor;
-
     &[data-excluded='true'] {
       background-color: gray;
       box-shadow: none;
@@ -349,7 +321,7 @@ h2 {
       padding: 5px;
 
       transform: translate(-8px, -50%);
-      background-color: global.$bgColor;
+      background-color: var(--bgColor);
       color: white;
     }
   }
@@ -390,7 +362,7 @@ h2 {
 }
 
 .generator_warning {
-  background-color: global.$accentColor;
+  background-color: var(--accentColor);
   padding: 0.5em;
   text-align: justify;
   font-weight: bold;

src/components/tabs/StorageTab.vue

@@ -165,7 +165,7 @@ ul.storage-list {
 
 ul.storage-list > li {
   padding: 0.5em;
-  background-color: global.$secondaryColor;
+  background-color: var(--secondaryColor);
 
   &[data-current='true'] {
     background-color: #3b3b3b;

src/components/tabs/WikiListTab.vue

@@ -245,6 +245,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @use '@/styles/tab';
+@use '@/styles/responsive';
 
 .actions {
   display: grid;
@@ -318,7 +319,7 @@ export default defineComponent({
 }
 
 .sponsor-only {
-  color: global.$sponsorColor;
+  color: var(--accentColor);
 
   &::after {
     content: '*';
@@ -326,7 +327,7 @@ export default defineComponent({
 }
 
 .team-only {
-  color: global.$teamColor;
+  color: var(--teamColor);
 
   &::after {
     content: '*';
@@ -343,7 +344,7 @@ export default defineComponent({
   background-color: #161c2e;
 }
 
-@media screen and (max-width: global.$breakpointSm) {
+@include responsive.smallScreen {
   .actions-panel {
     align-items: stretch;
     flex-direction: column;

src/components/tabs/stock-list/StockList.vue

@@ -20,13 +20,7 @@
           @keydown.backspace="stockListUtils.removeStock(i)"
           ref="itemRefs"
         >
-          <div
+          <div class="stock-info" @dragstart="onDragStart(i)" @drop="onDrop($event, i)" @dragover="allowDrop" draggable="true">
-            class="stock-info"
-            @dragstart="onDragStart(i)"
-            @drop="onDrop($event, i)"
-            @dragover="allowDrop"
-            draggable="true"
-          >
             <span class="stock-info-no" :data-selected="i == store.chosenStockListIndex">
               <span v-if="i == store.chosenStockListIndex">&bull;&nbsp;</span>
               {{ i + 1 }}.
@@ -34,17 +28,10 @@
 
             <span
               class="stock-info-type"
-              :data-sponsor-only="
+              :data-sponsor-only="stock.vehicleRef.sponsorOnlyTimestamp && stock.vehicleRef.sponsorOnlyTimestamp > Date.now()"
-                stock.vehicleRef.sponsorOnlyTimestamp &&
-                stock.vehicleRef.sponsorOnlyTimestamp > Date.now()
-              "
               :data-team-only="stock.vehicleRef.teamOnly"
             >
-              {{
+              {{ isTractionUnit(stock.vehicleRef) ? stock.vehicleRef.type : getCarSpecFromType(stock.vehicleRef.type) }}
-                isTractionUnit(stock.vehicleRef)
-                  ? stock.vehicleRef.type
-                  : getCarSpecFromType(stock.vehicleRef.type)
-              }}
             </span>
 
             <span class="stock-info-cargo" v-if="stock.cargo">
@@ -53,9 +40,7 @@
 
             <span class="stock-info-length">{{ stock.vehicleRef.length }}m</span>
 
-            <span class="stock-info-mass">
+            <span class="stock-info-mass"> {{ ((stock.vehicleRef.weight + (stock.cargo?.weight ?? 0)) / 1000).toFixed(1) }}t </span>
-              {{ ((stock.vehicleRef.weight + (stock.cargo?.weight ?? 0)) / 1000).toFixed(1) }}t
-            </span>
             <span class="stock-info-speed">{{ stock.vehicleRef.maxSpeed }}km/h</span>
           </div>
         </li>
@@ -123,10 +108,7 @@ export default defineComponent({
       const stock = this.store.stockList[stockID];
 
       this.store.chosenStockListIndex =
-        this.store.chosenStockListIndex == stockID &&
+        this.store.chosenStockListIndex == stockID && this.store.chosenVehicle?.type == stock.vehicleRef.type ? -1 : stockID;
-        this.store.chosenVehicle?.type == stock.vehicleRef.type
-          ? -1
-          : stockID;
 
       if (this.store.chosenStockListIndex == -1) {
         this.store.chosenVehicle = null;
@@ -154,12 +136,14 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@use '@/styles/responsive';
+
 .list-wrapper {
   position: relative;
 }
 
 .list-empty {
-  background-color: global.$secondaryColor;
+  background-color: var(--secondaryColor);
   border-radius: 0.5em;
   padding: 0.75em;
   font-weight: bold;
@@ -202,14 +186,14 @@ li > .stock-info {
 
 .stock-info-no,
 .stock-info-type {
-  background-color: global.$secondaryColor;
+  background-color: var(--secondaryColor);
 
   &[data-team-only='true'] {
-    color: global.$teamColor;
+    color: var(--teamColor);
   }
 
   &[data-sponsor-only='true'] {
-    color: global.$sponsorColor;
+    color: var(--accentColor);
   }
 }
 
@@ -218,7 +202,7 @@ li > .stock-info {
   text-align: right;
 
   &[data-selected='true'] {
-    color: global.$accentColor;
+    color: var(--accentColor);
   }
 }
 
@@ -253,7 +237,7 @@ li > .stock-info {
   }
 }
 
-@media screen and (max-width: global.$breakpointMd) {
+@include responsive.midScreen {
   ul {
     min-height: auto;
   }

src/components/tabs/stock-list/StockThumbnails.vue

@@ -199,11 +199,11 @@ ul {
   }
 
   &[data-sponsor-only='true'] > b {
-    color: global.$sponsorColor;
+    color: var(--accentColor);
   }
 
   &[data-team-only='true'] > b {
-    color: global.$teamColor;
+    color: var(--teamColor);
   }
 
   img {

src/components/tabs/stock-list/StockWarnings.vue

@@ -91,7 +91,7 @@ export default defineComponent({
 .warning {
   padding: 0.25em;
   margin: 0.25em 0;
-  background: global.$accentColor;
+  background: var(--accentColor);
   color: black;
 
   font-weight: bold;

src/locales/en.json

@@ -339,5 +339,13 @@
     "warning_un1965_tn": "TN: LPG - empty tank (UN 1965)",
     "warning_un1202_tn": "TN: diesel fuel (UN 1202)",
     "warning_military_pn": "PN: military transport"
+  },
+  "migrate-info": {
+    "tooltip-content": "Information about migration of\nStacjownik site!",
+    "header-text": "Information about the site migration",
+    "paragraph-1-html": "Due to the migration of all my applications to a common dedicated domain, <b>Pojazdownik is being moved to:</b>",
+    "paragraph-2-link-text": "https://pojazdownik-td2.spythere.eu/",
+    "paragraph-3-text": "This website will no longer receive future updates and <b>after March 14th</b> it will only redirect to the address above.",
+    "confirm-btn": "ROGER THAT!"
   }
-}
+}

src/locales/pl.json

@@ -338,5 +338,9 @@
     "warning_un1965_tn": "TN: gazy węglowodorowe skroplone - puste cysterny (UN 1965)",
     "warning_un1202_tn": "TN: olej napędowy (UN 1202)",
     "warning_military_pn": "PN: transport wojskowy"
+  },
+  "migrate-info": {
+    "line-1": "Pojazdownik zostaje przeniesiony na nową domenę - {0}! Możesz korzystać z obecnej strony, jednak nie będzie ona otrzymywać już aktualizacji i w przyszłości zostanie wyłączona!",
+    "link": "https://pojazdownik-td2.spythere.eu/"
   }
-}
+}

src/store.ts

@@ -52,6 +52,7 @@ export const useStore = defineStore('store', {
 
     vehiclePreviewSrc: '',
 
+    isMigrationInfoOpen: false,
     isRandomizerCardOpen: false,
     isRealStockListCardOpen: false,
 

src/styles/_fonts.scss

@@ -0,0 +1,19 @@
+@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;
+}

src/styles/_global.scss

@@ -1,33 +1,15 @@
-$breakpointMd: 960px;
+@use 'fonts';
-$breakpointSm: 550px;
+@use 'responsive';
 
-$bgColor: #2b3552;
+:root {
-$bgColorDarker: #1f263b;
+  --bgColor: #2b3552;
-$textColor: #fff;
+  --bgColorDarker: #1f263b;
-$secondaryColor: #1b1b1b;
+  --textColor: #fff;
-$accentColor: #e4c428;
+  --secondaryColor: #1b1b1b;
+  --accentColor: #e4c428;
 
-$sponsorColor: gold;
+  --sponsorColor: gold;
-$teamColor: #ff4848;
+  --teamColor: #ff4848;
-
-@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 {
@@ -56,7 +38,7 @@ html {
 
   font-family: Lato, sans-serif;
 
-  background-color: $bgColor;
+  background-color: var(--bgColor);
   overflow-x: hidden;
 }
 
@@ -71,15 +53,6 @@ a {
   text-decoration: none;
 
   transition: color 250ms;
-
-  &:visited {
-    color: white;
-  }
-
-  &:hover,
-  &:focus {
-    color: $accentColor;
-  }
 }
 
 select,
@@ -104,11 +77,11 @@ button {
   color: white;
 
   &:hover {
-    color: $accentColor;
+    color: var(--accentColor);
   }
 
   &:focus-visible {
-    outline: 1px solid $accentColor;
+    outline: 1px solid var(--accentColor);
   }
 }
 
@@ -130,7 +103,7 @@ button {
 
     z-index: 100;
 
-    @media screen and (max-width: $breakpointSm) {
+    @include responsive.smallScreen {
       left: 50%;
       transform: translate(-50%, 3ex);
       text-align: center;
@@ -165,7 +138,7 @@ button {
   padding: 0.4em 0.75em;
 
   outline: none;
-  background-color: $secondaryColor;
+  background-color: var(--secondaryColor);
   border-radius: 8px;
   font-weight: bold;
 
@@ -174,25 +147,25 @@ button {
     background-color 150ms;
 
   &:hover {
-    color: $accentColor;
+    color: var(--accentColor);
   }
 
   &.btn--outline {
     background: none;
     font-weight: bold;
-    outline: 1px solid $accentColor;
+    outline: 1px solid var(--accentColor);
   }
 
   &:focus-visible {
-    color: $accentColor;
+    color: var(--accentColor);
     outline: 1px solid white;
   }
 
   &[data-chosen='true'] {
-    background-color: $accentColor;
+    background-color: var(--accentColor);
     color: black;
 
-    box-shadow: 0 0 5px 1px $accentColor;
+    box-shadow: 0 0 5px 1px var(--accentColor);
   }
 
   &[data-disabled='true'] {
@@ -240,13 +213,13 @@ button {
 }
 
 .link-btn.router-link-exact-active {
-  color: $accentColor;
+  color: var(--accentColor);
 }
 
 select,
 input[type='text'],
 input[type='number'] {
-  background: $bgColor;
+  background: var(--bgColor);
   border: 2px solid #aaa;
   outline: none;
 
@@ -257,7 +230,7 @@ input[type='number'] {
   font-size: 1em;
 
   &:focus-visible {
-    border-color: $accentColor;
+    border-color: var(--accentColor);
   }
 
   &::placeholder {
@@ -268,7 +241,7 @@ input[type='number'] {
 option {
   color: white;
   border: none;
-  background-color: $bgColor;
+  background-color: var(--bgColor);
 }
 
 ul {
@@ -279,7 +252,7 @@ ul {
 
 .text {
   &--accent {
-    color: $accentColor;
+    color: var(--accentColor);
   }
 
   &--grayed {
@@ -336,19 +309,18 @@ hr {
   }
 
   span:focus {
-    color: $accentColor;
+    color: var(--accentColor);
     outline: none;
   }
 
-  label>input:checked+span {
+  label > input:checked + span {
-    color: $accentColor;
+    color: var(--accentColor);
-    border-color: $accentColor;
+    border-color: var(--accentColor);
   }
 }
 
 // Vue Transition anims
-.slide-top {
+.slide-top-anim {
-
   &-enter-from,
   &-leave-to {
     transform: translateY(-100%);
@@ -360,8 +332,19 @@ hr {
   }
 }
 
-.card-appear {
+.slide-bottom-anim {
+  &-enter-from,
+  &-leave-to {
+    transform: translateY(100%);
+  }
 
+  &-enter-active,
+  &-leave-active {
+    transition: transform 100ms ease-in-out;
+  }
+}
+
+.card-appear-anim {
   &-enter-from,
   &-leave-to {
     opacity: 0;
@@ -371,4 +354,4 @@ hr {
   &-leave-active {
     transition: all 100ms ease-in-out;
   }
-}
+}

src/styles/_responsive.scss

@@ -0,0 +1,20 @@
+$breakpointMd: 960px;
+$breakpointSm: 550px;
+
+@mixin smallScreen() {
+  @media only screen and (max-width: $breakpointSm) {
+    @content;
+  }
+}
+
+@mixin midScreen() {
+  @media only screen and (max-width: $breakpointMd) {
+    @content;
+  }
+}
+
+@mixin midScreenLandscape() {
+  @media only screen and (orientation: landscape) and (max-device-height: $breakpointMd) {
+    @content;
+  }
+}

src/styles/_tab.scss

@@ -1,5 +1,3 @@
-@use 'global';
-
 .tab {
   height: 100%;
   margin-top: 1px;
@@ -7,7 +5,7 @@
   &_header {
     padding: 0.5em 1em;
 
-    background-color: global.$secondaryColor;
+    background-color: var(--secondaryColor);
     text-align: center;
 
     h2 {

vite.config.ts

@@ -10,7 +10,7 @@ export default defineConfig({
   preview: { port: 4138 },
   css: {
     preprocessorOptions: {
-      scss: { additionalData: `@use '@/styles/global';`, silenceDeprecations: ['legacy-js-api'] },
+      scss: { silenceDeprecations: ['legacy-js-api'] },
     },
   },
   resolve: {
@@ -23,13 +23,11 @@ export default defineConfig({
     VitePWA({
       registerType: 'autoUpdate',
 
-      includeAssets: ['/images/*.{png,svg,jpg}', '/fonts/*.{woff,woff2,ttf}'],
-
       devOptions: { suppressWarnings: true, enabled: true },
 
       workbox: {
         cleanupOutdatedCaches: true,
-        globPatterns: ['**/*.{js,css,html,jpg,png,svg,img,woff,woff2}'],
+        globPatterns: ['**/*.{js,css,html,ico,woff,woff2,ttf}', '**/*.{png,jpg,jpeg,svg,webp,gif}'],
 
         runtimeCaching: [
           {