RPG_Utilities/src/components/NameGenerator.vue

<template>
  <div class="name-generator-layout">
    <div class="page-header">
      <h2>Name Generator</h2>
      <div class="page-controls">
        <button
          class="button-secondary"
          @click="addGenerator"
          :disabled="generators.length >= 6"
        >
          <svg
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <line
              x1="12"
              y1="5"
              x2="12"
              y2="19"
              stroke="currentColor"
              stroke-width="2"
            />
            <line
              x1="5"
              y1="12"
              x2="19"
              y2="12"
              stroke="currentColor"
              stroke-width="2"
            />
          </svg>
          Add Generator
        </button>
        <button
          class="button-secondary"
          @click="removeGenerator"
          :disabled="generators.length <= 1"
        >
          <svg
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <line
              x1="5"
              y1="12"
              x2="19"
              y2="12"
              stroke="currentColor"
              stroke-width="2"
            />
          </svg>
          Remove Generator
        </button>
      </div>
    </div>

    <div class="generators-grid" :class="`grid-${generators.length}`">
      <NameGeneratorCard
        v-for="id in generators"
        :key="id"
        :card-id="id"
        @show-toast="handleToast"
      />
    </div>

    <!-- Page-level toast notification -->
    <div v-if="showToast" class="page-toast" :class="`toast-${toastType}`">
      {{ toastMessage }}
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import NameGeneratorCard from "./NameGeneratorCard.vue";

const generators = ref([1, 2, 3, 4]);
let nextId = 5;

// Toast state
const showToast = ref(false);
const toastMessage = ref("");
const toastType = ref("success");

function handleToast(event) {
  toastMessage.value = event.message;
  toastType.value = event.type;
  showToast.value = true;
  setTimeout(
    () => {
      showToast.value = false;
    },
    event.type === "error" ? 4000 : 2000
  );
}

function addGenerator() {
  if (generators.value.length < 6) {
    generators.value.push(nextId++);
  }
}

function removeGenerator() {
  if (generators.value.length > 1) {
    generators.value.pop();
  }
}
</script>

<style scoped>
.name-generator-layout {
  padding: var(--spacing-lg);
  max-width: 1400px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border);
}

.page-header h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: 2rem;
}

.page-controls {
  display: flex;
  gap: var(--spacing-sm);
}

.button-secondary {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--surface);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}

.button-secondary:hover:not(:disabled) {
  background: var(--surface-hover);
  border-color: var(--border-hover);
  transform: translateY(-1px);
}

.button-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.generators-grid {
  display: grid;
  gap: var(--spacing-lg);
  width: 100%;
}

.grid-1 {
  grid-template-columns: 1fr;
  max-width: 600px;
  margin: 0 auto;
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.grid-5 {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.grid-6 {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

/* Responsive design */
@media (max-width: 1024px) {
  .grid-3,
  .grid-4,
  .grid-5,
  .grid-6 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
}

@media (max-width: 768px) {
  .name-generator-layout {
    padding: var(--spacing-md);
  }

  .page-header {
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: stretch;
  }

  .page-controls {
    justify-content: center;
  }

  .generators-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
}

@media (max-width: 480px) {
  .page-controls {
    flex-direction: column;
  }

  .button-secondary {
    justify-content: center;
  }
}

/* Page-level toast */
.page-toast {
  position: fixed;
  top: var(--spacing-lg);
  right: var(--spacing-lg);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius);
  font-size: 0.9rem;
  font-weight: 600;
  z-index: 1000;
  animation: slideInRight 0.3s ease;
  max-width: 400px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.toast-success {
  background: #10b981;
  color: white;
  border: 1px solid #059669;
}

.toast-error {
  background: #ef4444;
  color: white;
  border: 1px solid #dc2626;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
</style>