✨ Add API version selector component for Challonge integration

code/websites/pokedex.online/src/components/challonge/ApiVersionSelector.vue

@@ -0,0 +1,207 @@
+<template>
+  <div class="api-version-selector">
+    <!-- API Version Radio Buttons -->
+    <div class="control-group">
+      <label class="control-label">API Version:</label>
+      <div class="radio-group">
+        <label class="radio-option">
+          <input 
+            type="radio" 
+            :checked="modelValue === 'v1'" 
+            @change="$emit('update:modelValue', 'v1')"
+          />
+          <span>v1 (Legacy)</span>
+        </label>
+        <label class="radio-option">
+          <input 
+            type="radio" 
+            :checked="modelValue === 'v2.1'" 
+            @change="$emit('update:modelValue', 'v2.1')"
+          />
+          <span>v2.1 (Current)</span>
+        </label>
+      </div>
+      <span 
+        class="version-badge" 
+        :class="'badge-' + modelValue.replace('.', '-')"
+      >
+        Using API {{ modelValue }}
+      </span>
+    </div>
+
+    <!-- Results Per Page (v2.1 only) -->
+    <div v-if="modelValue === 'v2.1' && showPerPage" class="control-group">
+      <label class="control-label">Results per page:</label>
+      <select
+        :value="perPage"
+        @change="$emit('update:perPage', Number($event.target.value))"
+        class="select-input"
+      >
+        <option :value="10">10</option>
+        <option :value="25">25</option>
+        <option :value="50">50</option>
+        <option :value="100">100</option>
+      </select>
+    </div>
+
+    <!-- Tournament Scope (v2.1 only) -->
+    <div v-if="modelValue === 'v2.1' && showScope" class="control-group">
+      <label class="control-label">Tournament scope:</label>
+      <select 
+        :value="scope" 
+        @change="$emit('update:scope', $event.target.value)"
+        class="select-input"
+      >
+        <option value="user">User (default)</option>
+        <option value="app">
+          Application (requires application:manage token)
+        </option>
+      </select>
+      <div class="info-badge" v-if="scope === 'user'">
+        ✓ USER scope - tournaments you created or administer
+      </div>
+      <div class="info-badge warning" v-else>
+        ⓘ APPLICATION scope requires a client-credentials token with application:manage
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  modelValue: {
+    type: String,
+    default: 'v2.1',
+    validator: value => ['v1', 'v2.1'].includes(value)
+  },
+  perPage: {
+    type: Number,
+    default: 100
+  },
+  scope: {
+    type: String,
+    default: 'user'
+  },
+  showPerPage: {
+    type: Boolean,
+    default: true
+  },
+  showScope: {
+    type: Boolean,
+    default: true
+  }
+});
+
+defineEmits(['update:modelValue', 'update:perPage', 'update:scope']);
+</script>
+
+<style scoped>
+.api-version-selector {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1.5rem;
+}
+
+.control-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.control-label {
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: #333;
+}
+
+.radio-group {
+  display: flex;
+  gap: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.radio-option {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  padding: 0.5rem;
+  border-radius: 6px;
+  transition: background 0.2s;
+}
+
+.radio-option:hover {
+  background: rgba(102, 126, 234, 0.1);
+}
+
+.radio-option input[type="radio"] {
+  cursor: pointer;
+  width: 18px;
+  height: 18px;
+}
+
+.radio-option span {
+  font-size: 0.95rem;
+  color: #333;
+}
+
+.version-badge {
+  display: inline-block;
+  padding: 0.25rem 0.75rem;
+  border-radius: 16px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  width: fit-content;
+}
+
+.badge-v1 {
+  background: #e0e0e0;
+  color: #666;
+}
+
+.badge-v2-1 {
+  background: #667eea;
+  color: white;
+}
+
+.select-input {
+  padding: 0.5rem;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  font-size: 0.95rem;
+  background: white;
+  cursor: pointer;
+  transition: border-color 0.2s;
+}
+
+.select-input:hover {
+  border-color: #667eea;
+}
+
+.select-input:focus {
+  outline: none;
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.info-badge {
+  padding: 0.5rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  background: #e8f5e9;
+  color: #2e7d32;
+  border-left: 3px solid #4caf50;
+}
+
+.info-badge.warning {
+  background: #fff8e1;
+  color: #f57f17;
+  border-left: 3px solid #ffc107;
+}
+
+@media (min-width: 769px) {
+  .api-version-selector {
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  }
+}
+</style>