feature: losowanie obszarów konstr.

src/components/tabs/NumberGeneratorTab.vue

@@ -6,31 +6,40 @@
 
     <div class="tab_content">
       <div class="options">
-        <select v-model="beginRegionName" @change="randomizeTrainNumber">
+        <select v-model="beginRegionName" @change="randomizeTrainNumber()">
           <option :value="null" disabled>Początkowy obszar konstrukcyjny</option>
           <option v-for="(_, name) in genData.regionNumbers" :value="name">{{ name }}</option>
         </select>
 
-        <select v-model="endRegionName" @change="randomizeTrainNumber">
+        <select v-model="endRegionName" @change="randomizeTrainNumber()">
           <option :value="null" disabled>Końcowy obszar konstrukcyjny</option>
           <option v-for="(_, name) in genData.regionNumbers" :value="name">{{ name }}</option>
         </select>
 
-        <select v-model="categoryRules" @change="randomizeTrainNumber">
+        <select v-model="categoryRules" @change="randomizeTrainNumber()">
           <option :value="null" disabled>Kategoria pociągu</option>
           <option v-for="(rules, category) in genData.categories" :value="rules">{{ category }}</option>
         </select>
       </div>
 
       <div class="generated-number">
-        <span v-if="trainNumber">Wygenerowany numer pociągu: <b class="text--accent">{{ trainNumber }}</b></span>
-        <span v-else>Wybierz obszary konstrukcyjne i kategorię!</span>
+        <span v-if="trainNumber">
+          Wygenerowany numer pociągu: <b class="text--accent">{{ trainNumber }}</b>
+        </span>
+        <span v-else>Wybierz kategorię oraz obszary konstrukcyjne (opcjonalnie)</span>
       </div>
 
-      <hr>
-      
+      <div class="tab_links">
+        <a href="https://wiki.td2.info.pl/index.php?title=Zasady_numeracji_poci%C4%85g%C3%B3w" target="_blank">
+          > Szczegółowe zasady numeracji (wikipedia TD2)
+        </a>
+      </div>
+
+      <hr />
+
       <div class="tab_actions">
-        <button class="btn" @click="randomizeTrainNumber">PRZELOSUJ</button>
+        <button class="btn" @click="randomizeTrainNumber(true)">LOSUJ OBSZARY</button>
+        <button class="btn" @click="randomizeTrainNumber(false)">LOSUJ NUMER</button>
       </div>
     </div>
   </div>
@@ -49,22 +58,36 @@ const categoryRules = ref(null) as Ref<string | null>;
 
 const trainNumber = ref(null) as Ref<string | null>;
 
-const randomizeTrainNumber = () => {
-  if (beginRegionName.value == null || endRegionName.value == null || categoryRules.value == null) return '';
+const randomizeTrainNumber = (randomizeRegions = false) => {
+  if (categoryRules.value == null) return;
+
+  const regionKeys = Object.keys(genData.regionNumbers);
+
+  if (beginRegionName.value == null || randomizeRegions)
+    beginRegionName.value = regionKeys[(regionKeys.length * Math.random()) << 0] as RegionName;
+
+  if (endRegionName.value == null || randomizeRegions)
+    endRegionName.value = regionKeys[(regionKeys.length * Math.random()) << 0] as RegionName;
 
   let number = '';
 
   if (beginRegionName.value == endRegionName.value) {
-    const sameRegionsNumbers = genData.sameRegions[beginRegionName.value];
+    const sameRegionsNumbers = genData.sameRegions[beginRegionName.value!];
     const randRegionNumber = sameRegionsNumbers[Math.floor(Math.random() * sameRegionsNumbers.length)];
     number += randRegionNumber.toString();
   } else {
-    const beginRegionNumber = genData.regionNumbers[beginRegionName.value];
-    const endRegionNumber = genData.regionNumbers[endRegionName.value];
+    const beginRegionNumber = genData.regionNumbers[beginRegionName.value!];
+    const endRegionNumber = genData.regionNumbers[endRegionName.value!];
 
     number += `${beginRegionNumber}${endRegionNumber}`;
   }
 
+  // Do not roll the rest of number again if only randomize regions
+  if (randomizeRegions) {
+    trainNumber.value = number + trainNumber.value?.substring(2);
+    return;
+  }
+
   const rulesArray = categoryRules.value.split(';').map((r) => ({
     index: r.split(':')[0],
     rule: r.split(':')[1],
@@ -104,6 +127,9 @@ const randomizeTrainNumber = () => {
 .generated-number {
   font-size: 1.3em;
   font-weight: bold;
+  text-align: center;
+
+  cursor: pointer;
 
   margin: 0.5em 0;
   padding: 0.5em;
@@ -111,11 +137,13 @@ const randomizeTrainNumber = () => {
 }
 
 .tab_actions {
-  margin-top: 0.5em;
+  grid-template-columns: 1fr 1fr;
+  margin: 0.5em 0;
+}
 
-  button {
-    grid-column: 3;
-  }
+.tab_links {
+  display: flex;
+  justify-content: flex-end;
 }
 
 @media screen and (max-width: $breakpointMd) {

src/constants/numberGeneratorData.json

@@ -28,7 +28,7 @@
   "categories": {
     "ekspres krajowy (EI)": "2:00-99:2",
     "(między)wojewódzki pośpieszny (MP/RP)": "2:050-169:3",
-    "wojewódzki osobowy (RO)": "2:200-999:3:",
+    "wojewódzki osobowy (RO)": "2:200-999:3",
     "próżny \"służbowy\" (PW)": "2:6;3:0-899:3",
     "towarowy do przewozów masowych (TM)": "2:4;3:0-899:3",
     "towarowy do obsługi stacji (TK)": "2:3;3:0-899:3",

src/styles/global.scss

@@ -48,6 +48,8 @@ a {
   color: white;
   text-decoration: none;
 
+  transition: color 250ms;
+
   &:visited {
     color: white;
   }