====== Web UI User Guide - PookyEvent ======

**Last Updated:** July 28, 2026

This guide describes the PookyEvent Web UI from a regular player's perspective. It covers logging in, viewing events, signing up for roles, and browsing your guilds.

> **Note:** This guide is for **regular users** — players who participate in events but do not manage them. If you are an Event Master or Administrator, see the Admin Guide instead.

----

===== 1. Accessing the Web UI =====

Open the Web UI in your browser. The [[https://pookyeventui.claudiapps.de/|URL]] can be seen in the Discord Event Embed, or you can get it from Discord with the ''/pookyweb'' command.

The Web UI is a modern dashboard that runs alongside Discord — you can sign up for events and check details without using Discord buttons.

----

===== 2. Logging In =====

When you first open the Web UI, you will see the login screen with a **"Log in with Discord"** button.

{{ :wiki:pe_login.png?400 |}}

Click the button and authorise the application in the Discord popup. The Web UI uses Discord OAuth with the **identify** scope — it only reads your Discord username and avatar. No messages or server data are accessed through the login.

If your Discord user is already registered with PookyEvent (you have used ''/pookyme'' or signed up for an event before), you will be logged in immediately. If not, a temporary session is created — you can still browse events, but you will need to use ''/pookyme'' in Discord to fully register before signing up.

After successful login, you will see the main dashboard with the navigation drawer on the left side.

{{ :wiki:pe_dashboard.png?400 |}}

----

===== 3. Navigation =====

The **left drawer** contains all pages available to you as a regular user:

^ Icon ^ Page ^ Description ^
| 🏠 | Welcome | Dashboard with active upcoming events |
| 📅 | Events | Full list of events with filters and details |
| 🏰 | Guilds | Overview of Discord servers you belong to |
| 🐞 | Rant | Report bugs or suggest improvements |
| 🚪 | Logout | Sign out of the Web UI |

You can toggle the drawer with the **menu icon** (☰) in the top-left corner.

> **Tip:** Dark mode is enabled by default for a comfortable viewing experience.

----

===== 4. Welcome Dashboard =====

The **Welcome** page is your personal dashboard. It shows all **active events** — events that are:
  * In one of your Discord guilds
  * Not yet finalized (signups still open)
  * Scheduled in the future

Each event is displayed as a card with:

  * **Title** — The event name
  * **Guild** — Which Discord server the event belongs to
  * **Date & Time** — When the event starts, shown in your local timezone
  * **Status chip** — Shows the current signup status:
    * 🟢 **Ready** — All mandatory roles filled and minimum signups reached
    * 🟠 **Partial** — At least half of minimum signups reached
    * 🔴 **Not Ready** — Still needs more signups
  * **Your signup status** — ✅ if you are already signed up, — if not
  * **Description** — Event details
  * **Role count** and **minimum signups**

Click any event card to open its detail page where you can see all roles and sign up.

If you have no active events, you will see a message: "No active events — check the Events page."

----

===== 5. Events Page =====

The **Events** page shows a complete list of all events across your guilds, sorted by date (newest first).

{{ :wiki:pe_events.png?400 |}}
==== 5.1 Filtering by Guild ====

If you belong to multiple guilds, a dropdown at the top lets you filter events by guild. Only the selected guild's events are shown.

==== 5.2 Event List ====

Each event in the list shows:
  * **Title** — Click the search icon (🔍) to view details
  * **Date** — The event date
  * **Actions** — Use the **search** icon to open the event detail page

==== 5.3 Pagination ====

If a guild has more than 10 events, pagination controls appear at the top of the list (e.g. ''1/3'' with ◀ ▶ arrows).

----

===== 6. Event Details & Signing Up =====

This is the most important page for a player. Click an event card or search icon to open it.

{{ :wiki:pe_signup.png?400 |}}

==== 6.1 Event Header ====

The header card shows:
  * **Guild icon and name**
  * **Event title** in large bold text
  * **Status chip**: "🔒 Finalized" (locked) or "🟢 Ready" / "🔴 Not Ready" with reason
  * **Description** (if any)
  * **Date & time** in your local timezone
  * **Builds link** or **Wiki link** (if configured)

==== 6.2 Summary Stats Bar ====

A quick overview of signup numbers:
  * ⭐ **Preferred** and total **sure** players
  * ❓ **Unsure** players (if any)
  * 🚫 **Absent** players (if any)
  * Open **spaces** and **unused roles**
  * Warnings for missing mandatory roles or insufficient signups

==== 6.3 Roles & Signups Table ====

This table lists every role defined for the event. Each row shows:

  * **Role name** with emoji prefix (👑 Lead, ⚡ Speed, ⚔️ Damage, 💣 Bomber, 💉 Healer, 🧪 Support, 🛡️ Tank)
  * **Mandatory roles** are marked with ''(!)'' and shown in amber
  * **System roles** (Bench, Whatever, Absent, etc.) appear in dimmed text
  * **Signed-up players** listed next to each role, with status icons:
    * ⭐ — Preferred signup (the player wants this role)
    * ✔️ — Alternative signup
    * 💭 — On bench / waiting
    * ❔ — Unsure / maybe
    * 🙅 — Absent
    * 💡 — Late
    * 💫 — Favourite

==== 6.4 Signing Up ====

If the event is **not finalized**, is **still in the future**, and you are a member of the guild, you will see **+** and **−** icons next to each role:

  * Click the **+** (add_circle) icon to sign up for a role
  * Click the **−** (remove_circle) icon to remove yourself from a role

When you click **+**, a signup request is sent to the backend. You will see a notification: "Signed up as [Role Name]! Updating Discord..." — the Discord embed is updated automatically to reflect your signup.

You can sign up for multiple roles if the event allows it. To remove all your signups at once, use the **🗑️ Reset** button at the top of the roles section.

> **Tip:** The first role you sign up for becomes your **preferred** (⭐) role. Additional roles become **alternative** (✔️) signups. If you want to change your preferred role, sign up for the desired role first, then remove yourself from the old one.

==== 6.5 Special Signup Roles ====

Some roles have special behaviour:

  * **Absent** (🙅) — Marks you as not attending. Only one player can sign up as absent.
  * **Whatever** / **Bench** (💭) — You are available but flexible about your role.
  * **Maybe** / **Unsure** (❔) — You might attend but are not sure yet.
  * **Late** (💡) — You will arrive late.

----

===== 7. Guilds Page =====

The **Guilds** page lists all Discord servers you are associated with in PookyEvent.

For a regular user, this is a **read-only** view showing:
  * **Name** — The guild name
  * **ID** — The Discord guild ID
  * **Actions** — (not available for regular users)

If you become an Event Master of a guild, you will see edit and delete buttons here.

----

===== 8. Rant / Bug Reporting =====

Found a bug or want to suggest an improvement? Use the **Rant** page.

  * Enter a **short title** for your report
  * Describe **what went wrong** or what you would like to see improved
  * Click **Submit Rant**

Your report is sent directly to the PookyEvent issue tracker. Include as much detail as possible (which event, what you clicked, what happened) to help the developers fix it quickly.

----

===== 9. Signing Out =====

Click **🚪 Logout** in the left drawer to sign out. Your session is cleared, and you will need to log in with Discord again next time.

----

===== Quick Tips =====

  * **Timezone**: The Web UI automatically detects your browser's timezone and shows all event times in your local time.
  * **Dark mode**: Enabled by default — no need to switch.
  * **Session persistence**: Your login is saved in a cookie — you stay logged in even if you close and reopen the browser.
  * **Wiki link**: Click the 📚 icon in the event header to open the PookyEvent documentation.

For setup instructions (inviting the bot, registering your user, adding channels), see the [[pookyeventinstall|Getting Started Guide]].