422 lines
8.8 KiB
Vue
422 lines
8.8 KiB
Vue
<template>
|
|
<div class="gamemaster-manager">
|
|
<div class="container">
|
|
<div class="header">
|
|
<router-link to="/" class="back-button"> ← Back Home </router-link>
|
|
<h1>Gamemaster Manager</h1>
|
|
</div>
|
|
<p class="description">
|
|
Fetch the latest Pokemon GO gamemaster data from PokeMiners and break it
|
|
up into separate files for easier processing.
|
|
</p>
|
|
|
|
<!-- Fetch Section -->
|
|
<div class="section">
|
|
<h2>1. Fetch Latest Gamemaster</h2>
|
|
<button
|
|
@click="fetchGamemaster"
|
|
:disabled="loading"
|
|
class="btn btn-primary"
|
|
>
|
|
{{ loading ? 'Fetching...' : 'Fetch from PokeMiners' }}
|
|
</button>
|
|
|
|
<div v-if="error" class="error">
|
|
{{ error }}
|
|
</div>
|
|
|
|
<div v-if="rawGamemaster" class="success">
|
|
✅ Fetched {{ rawGamemaster.length.toLocaleString() }} items from
|
|
gamemaster
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Break Up Section -->
|
|
<div v-if="rawGamemaster" class="section">
|
|
<h2>2. Break Up Gamemaster</h2>
|
|
<button @click="processGamemaster" class="btn btn-primary">
|
|
Process & Break Up Data
|
|
</button>
|
|
|
|
<div v-if="processedData" class="stats-grid">
|
|
<div class="stat-card">
|
|
<h3>Pokemon (Filtered)</h3>
|
|
<p class="stat-number">
|
|
{{ stats.pokemonCount.toLocaleString() }}
|
|
</p>
|
|
<p class="stat-detail">{{ stats.pokemonSize }}</p>
|
|
<p class="stat-info">Base forms + regional variants</p>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<h3>All Forms & Costumes</h3>
|
|
<p class="stat-number">
|
|
{{ stats.allFormsCount.toLocaleString() }}
|
|
</p>
|
|
<p class="stat-detail">{{ stats.allFormsSize }}</p>
|
|
<p class="stat-info">Every variant, costume, form</p>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<h3>Moves</h3>
|
|
<p class="stat-number">{{ stats.movesCount.toLocaleString() }}</p>
|
|
<p class="stat-detail">{{ stats.movesSize }}</p>
|
|
<p class="stat-info">All quick & charged moves</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Download Section -->
|
|
<div v-if="processedData" class="section">
|
|
<h2>3. Download Files</h2>
|
|
<div class="button-group">
|
|
<button @click="downloadPokemon" class="btn btn-success">
|
|
📥 Download pokemon.json
|
|
</button>
|
|
<button @click="downloadAllForms" class="btn btn-success">
|
|
📥 Download pokemon-allFormsCostumes.json
|
|
</button>
|
|
<button @click="downloadMoves" class="btn btn-success">
|
|
📥 Download pokemon-moves.json
|
|
</button>
|
|
<button @click="downloadAll" class="btn btn-primary">
|
|
📦 Download All Files
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Info Section -->
|
|
<div class="section info-section">
|
|
<h2>About This Tool</h2>
|
|
<p>
|
|
This tool fetches the latest Pokemon GO gamemaster data from
|
|
<a
|
|
href="https://github.com/PokeMiners/game_masters"
|
|
target="_blank"
|
|
rel="noopener"
|
|
>PokeMiners GitHub</a
|
|
>
|
|
and processes it into three separate files:
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
<strong>pokemon.json</strong> - Base Pokemon forms plus regional
|
|
variants (Alola, Galarian, Hisuian, Paldea)
|
|
</li>
|
|
<li>
|
|
<strong>pokemon-allFormsCostumes.json</strong> - Complete dataset
|
|
including all costumes, event forms, shadows, etc.
|
|
</li>
|
|
<li>
|
|
<strong>pokemon-moves.json</strong> - All quick and charged moves
|
|
available in Pokemon GO
|
|
</li>
|
|
</ul>
|
|
<p class="note">
|
|
💡 The filtered pokemon.json is ideal for most use cases, while
|
|
allFormsCostumes is comprehensive for complete data analysis.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue';
|
|
import {
|
|
fetchLatestGamemaster,
|
|
breakUpGamemaster,
|
|
downloadJson,
|
|
getGamemasterStats
|
|
} from '../utilities/gamemaster-utils.js';
|
|
|
|
const loading = ref(false);
|
|
const error = ref(null);
|
|
const rawGamemaster = ref(null);
|
|
const processedData = ref(null);
|
|
|
|
const stats = computed(() => {
|
|
if (!processedData.value) return null;
|
|
return getGamemasterStats(processedData.value);
|
|
});
|
|
|
|
async function fetchGamemaster() {
|
|
loading.value = true;
|
|
error.value = null;
|
|
rawGamemaster.value = null;
|
|
processedData.value = null;
|
|
|
|
try {
|
|
const data = await fetchLatestGamemaster();
|
|
rawGamemaster.value = data;
|
|
} catch (err) {
|
|
error.value = `Failed to fetch gamemaster: ${err.message}`;
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
|
|
function processGamemaster() {
|
|
if (!rawGamemaster.value) return;
|
|
|
|
try {
|
|
processedData.value = breakUpGamemaster(rawGamemaster.value);
|
|
} catch (err) {
|
|
error.value = `Failed to process gamemaster: ${err.message}`;
|
|
}
|
|
}
|
|
|
|
function downloadPokemon() {
|
|
downloadJson(processedData.value.pokemon, 'pokemon.json');
|
|
}
|
|
|
|
function downloadAllForms() {
|
|
downloadJson(
|
|
processedData.value.pokemonAllForms,
|
|
'pokemon-allFormsCostumes.json'
|
|
);
|
|
}
|
|
|
|
function downloadMoves() {
|
|
downloadJson(processedData.value.moves, 'pokemon-moves.json');
|
|
}
|
|
|
|
function downloadAll() {
|
|
downloadPokemon();
|
|
setTimeout(() => downloadAllForms(), 500);
|
|
setTimeout(() => downloadMoves(), 1000);
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.gamemaster-manager {
|
|
min-height: 100vh;
|
|
padding: 2rem 1rem;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 2rem;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
margin-bottom: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.back-button {
|
|
padding: 0.5rem 1rem;
|
|
background: #667eea;
|
|
color: white;
|
|
text-decoration: none;
|
|
border-radius: 6px;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
display: inline-block;
|
|
}
|
|
|
|
.back-button:hover {
|
|
background: #5568d3;
|
|
transform: translateX(-2px);
|
|
}
|
|
|
|
h1 {
|
|
color: #333;
|
|
margin: 0;
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.description {
|
|
color: #666;
|
|
font-size: 1.1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.section {
|
|
margin: 2rem 0;
|
|
padding: 1.5rem;
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
border: 1px solid #e9ecef;
|
|
}
|
|
|
|
h2 {
|
|
color: #495057;
|
|
margin-bottom: 1rem;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.btn {
|
|
padding: 0.75rem 1.5rem;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
margin-right: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.btn:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: #667eea;
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover:not(:disabled) {
|
|
background: #5568d3;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
|
}
|
|
|
|
.btn-success {
|
|
background: #10b981;
|
|
color: white;
|
|
}
|
|
|
|
.btn-success:hover {
|
|
background: #059669;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
|
|
}
|
|
|
|
.button-group {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.error {
|
|
margin-top: 1rem;
|
|
padding: 1rem;
|
|
background: #fee;
|
|
color: #c33;
|
|
border-radius: 6px;
|
|
border-left: 4px solid #c33;
|
|
}
|
|
|
|
.success {
|
|
margin-top: 1rem;
|
|
padding: 1rem;
|
|
background: #d1fae5;
|
|
color: #065f46;
|
|
border-radius: 6px;
|
|
border-left: 4px solid #10b981;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 1rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.stat-card {
|
|
background: white;
|
|
padding: 1.5rem;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-card h3 {
|
|
font-size: 1rem;
|
|
color: #666;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 2.5rem;
|
|
font-weight: bold;
|
|
color: #667eea;
|
|
margin: 0.5rem 0;
|
|
}
|
|
|
|
.stat-detail {
|
|
font-size: 1rem;
|
|
color: #999;
|
|
margin: 0.25rem 0;
|
|
}
|
|
|
|
.stat-info {
|
|
font-size: 0.875rem;
|
|
color: #666;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.info-section {
|
|
background: #e7f3ff;
|
|
border-color: #667eea;
|
|
}
|
|
|
|
.info-section h2 {
|
|
color: #667eea;
|
|
}
|
|
|
|
.info-section ul {
|
|
margin: 1rem 0;
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
.info-section li {
|
|
margin: 0.5rem 0;
|
|
color: #495057;
|
|
}
|
|
|
|
.info-section a {
|
|
color: #667eea;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.info-section a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.note {
|
|
margin-top: 1rem;
|
|
padding: 0.75rem;
|
|
background: white;
|
|
border-radius: 6px;
|
|
font-size: 0.95rem;
|
|
color: #495057;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
padding: 1rem;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.stats-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.button-group {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.btn {
|
|
width: 100%;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
</style>
|