dredgy/FlightsAPI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added Notifications

Browse Source
This commit is contained in:
josh
2026-05-16 23:48:18 +10:00
parent 69d72e0912
commit 1d5b9f340f
61 changed files with 4204 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Pages/Profile/Achievements/fun_challenges.airline_alphabet.vue
+278
View File
@@ -0,0 +1,278 @@
<script setup lang="ts">
import { Achievement, Flight, User } from '@/Types/types'
import Panel from '@/Components/FlightsGoneBy/Panels/Panel.vue'
import PanelHeader from '@/Components/FlightsGoneBy/Panels/PanelHeader.vue'
import PanelSubHeader from '@/Components/FlightsGoneBy/Panels/PanelSubHeader.vue'
import AirlineAlphabetTable from '@/Components/FlightsGoneBy/AirlineAlphabetTable.vue'
import { computed, ref } from 'vue'
import { useAlphabetAirlines, type CodeType } from '@/Composables/useAlphabetAirlines'
const props = defineProps<{
achievement: Achievement
user: User
isFollowing: boolean
flights: Flight[]
}>()
const codeType = ref<CodeType>('iata')
const showNumbers = ref(false)
const flightsRef = computed(() => props.flights)
const { flightsByLetter, visitedLetters, allLetters } = useAlphabetAirlines(
flightsRef,
codeType,
showNumbers,
)
// Only count letters (A–Z) towards progress, never digits
const visitedLetterCount = computed(() =>
[...visitedLetters.value].filter(k => isNaN(Number(k))).length
)
const availableYears = computed(() => {
const years = new Set(props.flights.map(f => new Date(f.departure_date).getFullYear()))
return [...years].sort((a, b) => b - a)
})
const yearItems = computed(() => [
{ title: 'None', value: null },
...availableYears.value.map(y => ({ title: String(y), value: y })),
])
const currentYear = new Date().getFullYear()
const selectedYear = ref<number | null>(
availableYears.value.includes(currentYear) ? currentYear : (availableYears.value[0] ?? null)
)
// Copy BBCode
const airlineTable = ref<InstanceType<typeof AirlineAlphabetTable> | null>(null)
const copied = ref(false)
async function copyBBCode() {
const text = airlineTable.value?.toBBCode()
if (text == null) return
try {
await navigator.clipboard.writeText(text)
} catch {
const el = document.createElement('textarea')
el.value = text
el.style.cssText = 'position:fixed;top:-9999px;left:-9999px;opacity:0'
document.body.appendChild(el)
el.focus()
el.select()
document.execCommand('copy')
document.body.removeChild(el)
}
copied.value = true
setTimeout(() => (copied.value = false), 2000)
}
</script>
<template>
<!-- Challenge description -->
<Panel>
<PanelHeader centered>The Airline Alphabet Challenge</PanelHeader>
<PanelSubHeader centered>
<p>
A twist on the classic Alphabet Challenge — instead of airports, you need to fly with
airlines whose <b>IATA codes</b> begin with each letter of the alphabet.
</p>
<p>
You can copy your results as BBCode using the copy icon above the table, and select
a year to highlight airlines that are new for that given year.
</p>
</PanelSubHeader>
</Panel>
<!-- Progress grid -->
<Panel style="display: flex; flex-direction: column; align-items: center; gap: 1rem;">
<PanelHeader centered>Progress</PanelHeader>
<div class="toggle-row">
<div>
<button :class="['code-toggle', codeType === 'iata' ? 'active' : '']" @click="codeType = 'iata'">IATA</button>
<button :class="['code-toggle', codeType === 'icao' ? 'active' : '']" @click="codeType = 'icao'">ICAO</button>
</div>
<button :class="['code-toggle', showNumbers ? 'active' : '']" @click="showNumbers = !showNumbers">
Show 0–9
</button>
</div>
<p class="progress-summary">{{ visitedLetterCount }} / {{allLetters.length}} letters visited</p>
<div class="alphabet-grid">
<div
v-for="letter in allLetters"
:key="letter"
:class="['letter-tile', visitedLetters.has(letter) ? 'visited' : 'unvisited']"
:title="visitedLetters.has(letter) ? 'Visited' : 'Not yet visited'"
>
{{ letter }}
</div>
</div>
</Panel>
<!-- Airlines by letter -->
<Panel>
<div class="table-toolbar">
<PanelHeader>Airlines By Letter</PanelHeader>
<div class="toolbar-right">
<v-select
v-model="selectedYear"
:items="yearItems"
item-title="title"
item-value="value"
label="New For"
density="compact"
variant="outlined"
hide-details
class="year-select"
/>
<v-btn
:icon="copied ? 'mdi-check' : 'mdi-content-copy'"
:color="copied ? 'success' : undefined"
density="compact"
variant="text"
title="Copy as BBCode"
@click="copyBBCode"
/>
</div>
</div>
<AirlineAlphabetTable
ref="airlineTable"
:letters="allLetters"
:flightsByLetter="flightsByLetter"
:codeType="codeType"
:selectedYear="selectedYear"
/>
</Panel>
<!-- Requirements -->
<Panel>
<PanelHeader centered>Requirements</PanelHeader>
<p>
To complete this challenge you must fly with airlines whose IATA codes begin with each
of the 26 letters of the alphabet — A through Z. Airlines without an IATA code do not count.
</p>
<p>
A single flight contributes one letter — the operating airline's IATA code. So a flight
on <strong>QF</strong> (Qantas) counts toward <strong>Q</strong>.
</p>
<p>
ICAO codes do not count towards this challenge, but you can toggle to ICAO view to see
where you're at for fun. Similarly, numeric IATA codes (such as <strong>3U</strong>) exist
but do not count towards the challenge — enable "Show 0–9" to see them.
</p>
<p>
It would unlikely to be possible to complete the challenge with both numbers and letters required.
</p>
</Panel>
<!-- Difficulty -->
<Panel>
<PanelHeader centered>Difficulty</PanelHeader>
<p>
Like the airport version, this challenge is <b>very</b> difficult, but it is slightly easier and most letters have a fair few options.
Some difficulty.
</p>
<ul>
<li><b>X</b> — Very few airlines; worth researching regional carriers in your area.</li>
</ul>
<p>
Most other letters have a reasonable selection of options across different continents,
though some will require deliberate routing to achieve.
</p>
</Panel>
</template>
<style scoped>
.progress-summary {
font-size: 1.2rem;
font-weight: 600;
color: var(--text);
}
.toggle-row {
display: flex;
align-items: center;
gap: 1rem;
}
.code-toggle {
padding: 0.15rem 0.5rem;
border: 1px solid var(--border);
border-radius: 4px;
background: transparent;
color: var(--muted);
cursor: pointer;
font-size: inherit;
transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.code-toggle.active {
background: var(--accent-glow);
color: var(--accent);
border-color: var(--accent);
}
.alphabet-grid {
display: grid;
grid-template-columns: repeat(13, 1fr);
gap: 0.4rem;
width: 100%;
max-width: 520px;
}
@media (max-width: 480px) {
.alphabet-grid {
grid-template-columns: repeat(7, 1fr);
}
}
.letter-tile {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1rem;
border-radius: 6px;
user-select: none;
}
.letter-tile.visited {
background: var(--accent-glow);
color: var(--accent);
border: 1px solid var(--accent-soft);
}
.letter-tile.unvisited {
background: var(--surface-alt);
color: var(--muted);
border: 1px solid var(--border);
}
.table-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.75rem;
}
.toolbar-right {
display: flex;
align-items: center;
gap: 0.5rem;
}
.year-select {
max-width: 140px;
}
</style>