Highlight games
1. What this page is for
The Highlight games page is used to create and manage featured game rows paired with vertical picture sliders on the lobby home page. Highlight sections showcase eye-catching promotional artwork (including animated WebP and GIF formats) alongside a curated list of up to 10 games. When players click either a slider slide or a game card, they are launched directly into that game. This is ideal for promoting weekly featured games, new arrivals, or special marketing campaigns.
2. Before you start
- Permissions: You must have the 'Hit and highlight games' permission granted by an administrator to view, create, edit, or delete highlight entries.
- What to prepare:
- List of up to 10 games you wish to highlight (games and their providers must be active in the system).
- Vertical slider artwork with an aspect ratio of 3:4 (recommended
900 × 1200px; supports WebP, GIF, PNG, or JPG up to 32 MB) for at least one game, or verify whether system presets are available for your chosen games.
3. Screen layout
When opened to the main list, you will see the following sections from top to bottom:
- Page Header: Displays the title Highlight games, description, and top action buttons: Arrange home order (links to the home layout organizer) and Add highlight section.
- Filter Tabs: Filter sections by status: All sections, Active (green), Inactive (gray), and Deleted (dark gray).
- Search & Filter Bar: Text input for search, with toggleable advanced filters for creation and update dates and staff users.
- Data Table: Lists all highlight game configurations with on/off status switches and row action menus.
- Pagination Bar: Located at the bottom to navigate pages and adjust records per page.
When creating or editing:
- Live Preview: Displays a real-time rendering of the vertical slider and companion game row as players will see it, with Thai and English language switches.
- Main Form (Left): Name inputs, game selector (up to 10 games), and slide image upload cards for each game.
- Display Settings Card (Right): Status switch (Active / Inactive), Show on home switch, and Show ranking numbers switch.
4. Search and filters
| Field / Filter | Type | Choices & Usage | Result |
|---|---|---|---|
| Status Tabs | Tab toggle | Choose: All sections, Active, Inactive, or Deleted | Filters table to sections matching the selected status |
| Search Bar | Text input | Type Thai or English section title | Filters table to entries matching your search keywords |
| Created date | Date range picker | Select From date and To date | Displays sections created within the specified range |
| Last updated date | Date range picker | Select From date and To date | Displays sections updated within the specified range |
| Created by | User typeahead | Search and select a staff member username | Shows only sections created by that user |
| Updated by | User typeahead | Search and select a staff member username | Shows only sections last updated by that user |
| Clear filters | Button | Click Clear in the search bar | Resets all active search terms and filters to default |
5. Data table
Table Columns
| Column | What you see | Meaning | Badge or color |
|---|---|---|---|
| Name | Gamepad icon with Thai and English titles | Configured highlight section title | Click title to open the edit page |
| In lobby | Badge indicating placement on site | Where and how this section appears to players | • Home row + hit badge: Green badge (Home icon) • Hit badge only: Orange badge (Flame icon) • Not shown: Gray badge (Circle off icon) |
| Rule | Mode chip and summary text | Configuration mode and item count | • Custom chip (Hand icon) • Highlight chip (Purple-pink) • Summary text such as "6 chosen" |
| Showing | Active game count | Number of games currently active and visible | • Count text like 6 games• If games are disabled: Orange warning X hidden |
| Last edited | Date, time, and staff name | Timestamp and author of latest modification | Shows staff username or "System" |
| Status | Toggle switch or deleted badge | Current operational status | • Switch: Active (green) / Inactive (gray) • Badge: Deleted (dark gray) |
| Actions | Action buttons | Available commands for that row | See details below |
Row Actions
| Button | Icon / Color | What happens when clicked | Condition / Notes |
|---|---|---|---|
| Edit / View | Pencil icon (or Eye icon) | Opens the edit form (or read-only view for deleted sections) | Always available |
| Action menu (⋮) | Three vertical dots | Opens secondary commands menu | Shown only for active/inactive sections |
| Delete | Red trash icon (in ⋮ menu) | Opens confirmation dialog to delete the highlight section | Only clickable when the section switch is set to Inactive |
6. Step-by-step instructions
1. Creating a new highlight section
- Navigate to Games > Highlight games from the left sidebar.
- Click Add highlight section in the top-right corner.
- In the basic info section:
- Enter Title (TH) (required, up to 100 characters).
- Enter Title (EN) (optional, up to 100 characters).
- Under Choose games:
- Click Add games to open the game picker modal.
- Select the games you wish to highlight (choose between 1 and up to 10 games).
- Reorder games by dragging handles or clicking Up / Down arrows.
- Under Slider pictures:
- For each game, click Upload picture to upload your vertical artwork (3:4 ratio, e.g. 900 × 1200 px, max 32 MB).
- Or if a system preset is available, click Use our picture to apply the preset artwork.
- Requirement: At least 1 slider picture must be configured before the section can be saved.
- In the right-hand settings card:
- Set Status to Active or Inactive.
- Turn Show on home on if you want the section to appear on the home page.
- Turn Show ranking numbers on if you want 1, 2, 3... numbered overlays.
- Review the live preview box at the top, then click Save at the bottom.
2. Editing an existing highlight section
- In the table, click the Edit button (pencil icon) in the row of the section.
- Update titles, games, slider pictures, or visibility settings as needed.
- Click Save on the bottom action bar.
3. Arranging highlight section placement on the home page
- From the highlight games list, click Arrange home order at the top right (or click Arrange home order from the right card in the edit form).
- The system redirects to Lobby pages > Home page order.
- Drag the highlight section block to your preferred position among other home page sections, then save.
4. Deleting a highlight section
- In the table, locate the Status switch of the section you wish to delete.
- Switch it to Inactive (gray) first.
- Click the action menu ⋮ at the end of the row and select Delete.
- In the confirmation dialog, click the red Delete button.
- The section is moved to the Deleted tab for historical reference.
7. Form fields and settings
Summary of all fields on the create and edit pages:
| Field | Required? | What to enter | Example | Rules & limits |
|---|---|---|---|---|
| Title (TH) | Required | Thai heading displayed above the slider row | เกมเด่นประจำสัปดาห์ | 1–100 characters; cannot be blank |
| Title (EN) | Optional | English heading displayed when players use English | Weekly Highlights | Up to 100 characters; falls back to Thai title if blank |
| Choose games | Required | Games included in the highlight section | Selected from picker modal | Between 1 and up to 10 games |
| Slider pictures | At least 1 slide | Vertical slider artwork for each game | Image upload or preset selection | 900 × 1200 px (3:4 ratio) recommended; WebP (animated), GIF, PNG, JPG up to 32 MB |
| Status | Optional | Switch to activate or pause the highlight section | Active | 2 states: Active / Inactive |
| Show on home | Optional | Switch to show or hide the slider row on the home page | Turned on | If off, the row is hidden from home, but games keep hit badges |
| Show ranking numbers | Optional | Switch to display 1, 2, 3... numbers on game covers | Turned off | Toggle on or off |
8. Popups and dialogs
1. Hit Item Picker Modal
- When it appears: Triggered when clicking Add games in the form.
- What you see: Search input bar and list of active games with cover artwork and provider tags.
- What to do: Search for games by title or code and click to add them to your selection.
- Result: Selected games are immediately added to the highlight sequence.
2. Confirm Modal (Deletion)
- When it appears: Triggered when clicking Delete from the row menu ⋮ in the table.
- What you see: Warning dialog asking you to confirm deletion of the highlight section.
- What to do: Confirm the section name and click Delete (or click Cancel).
- Result: The entry is moved from the main list to the Deleted tab.
3. Version Conflict Dialog
- When it appears: Triggered if another administrator saved changes to this section while you were editing it.
- What you see: Notification modal warning that the server record has changed.
- What to do: Click Load latest to fetch the latest changes before re-applying your edits.
- Result: Protects against unintentional overwrite of team configurations.
9. Statuses and badge colors
| Status / Badge | Color | Meaning | Next action |
|---|---|---|---|
| Active | Green | Highlight section is active; displayed on home if enabled | Normal operation |
| Inactive | Gray | Highlight section is paused; hidden from home with badges removed | Toggle on when ready to use |
| Deleted | Dark gray | Section has been removed; retained for audit history only | Read-only; cannot be restored or edited |
| Home row + hit badge | Green | Visible as a slider row on home page, and games wear hit badges | Ideal full-visibility state |
| Hit badge only | Orange | Slider row hidden from home, but games wear hit badges in category tabs | Use to feature games without home row |
| X hidden | Orange | Some games in this section are disabled or under provider maintenance | Edit the section to replace disabled games |
10. Frequently asked questions & troubleshooting
- The Save button cannot be clicked (error borders or disabled):
- Verify that Title (TH) is filled in.
- Verify that between 1 and 10 games are chosen.
- Verify that at least 1 Slider picture has been uploaded or set from presets.
- Why can't I add more than 10 games:
- Highlight sections are constrained to 10 games to maintain optimal mobile slider performance and aesthetics. Create an additional highlight row if needed.
- The Delete button is disabled in the row menu:
- System safety prevents deleting active sections. Turn the section switch to Inactive first, then proceed to delete.
- Animated GIF or WebP slider image doesn't animate:
- Winnova CMS serves uploaded WebP and GIF files directly without re-compression. Ensure your file is a valid animated WebP or GIF and within the 32 MB limit.
- Section is Active, but not showing on the website:
- Ensure Show on home is switched on.
- Go to Lobby pages > Home page order to verify that the Highlight games section is active and ordered properly in your layout.