Skip to content

Commit 48fdb62

Browse files
Lurking987Lurking987
authored
Merge pull request #9 from Servbot91/hotornot-documentation
Hotornot documentation
2 parents 58ca9fd + f16a65c commit 48fdb62

9 files changed

Lines changed: 4286 additions & 468 deletions

File tree

‎plugins/hot_or_not/Hot or Not Achitecture.md‎

Lines changed: 3405 additions & 0 deletions
Large diffs are not rendered by default.

‎plugins/hot_or_not/Hot or Not Map.md‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
## 1. Core “Source of Truth”
2+
3+
**`state.js`** – Holds global state:
4+
5+
- `currentPair` → current left/right items
6+
7+
- `currentRanks` → battle ranks of current pair
8+
9+
- `currentMode` → "swiss", "gauntlet", "champion"
10+
11+
- `battleType` → "performers", "images", "scenes"
12+
13+
- `gauntletChampion` → current champion (Gauntlet/Champion mode)
14+
15+
- `gauntletWins`, `gauntletDefeated` → track progress
16+
17+
- `selectedGenders` → filters for performers
18+
19+
20+
**`resetBattleState()`** → resets gauntlet-specific progress without touching global app config.
21+
22+
---
23+
24+
## 2. UI Components
25+
26+
### a) Cards (`ui-cards.js`)
27+
28+
- **Render functions:**
29+
30+
- `createSceneCard(scene)`
31+
32+
- `createPerformerCard(performer)`
33+
34+
- `createImageCard(image)`
35+
36+
- `createVictoryScreen(champion)`
37+
38+
- Adds streak badges, rank displays, ratings, and click handlers.
39+
40+
- Integrated with `state` for streaks and gauntlet wins.
41+
42+
43+
### b) Dashboard (`ui-dashboard.js`)
44+
45+
- Main UI shell for the modal and main page:
46+
47+
- Mode toggles: Swiss / Gauntlet / Champion
48+
49+
- Gender filters (for performers)
50+
51+
- Skip button (Swiss only)
52+
53+
- **Event listeners:**
54+
55+
- Gender toggle → updates `state.selectedGenders`
56+
57+
- Mode switch → updates `state.currentMode` and resets gauntlet state
58+
59+
- Skip button → triggers `handleSkip()`
60+
61+
- Calls `loadNewPair()` from the battle engine whenever mode/filter changes.
62+
63+
64+
### c) Badge / Placement (`ui-badge.js`)
65+
66+
- **Performer page:** injects Battle Rank badge
67+
68+
- Calls `getPerformerBattleRank(id)` from API
69+
70+
- Displays emoji based on percentile
71+
72+
- **Placement screen:** shows final ranking after a gauntlet
73+
74+
- **Rating animation:** visual feedback for winner/loser changes
75+
76+
77+
### d) Modal (`ui-modal.js`)
78+
79+
- Floating button (“🔥”) triggers **ranking modal**
80+
81+
- Keyboard navigation:
82+
83+
- Left/Right → choose left/right card
84+
85+
- Space → skip
86+
87+
- Modal integrates with `ui-dashboard.js` for dynamic content
88+
89+
90+
### e) Stats (`ui-stats.js`)
91+
92+
- Opens stats modal:
93+
94+
- Leaderboards (collapsible, 250-performer groups)
95+
96+
- Rating distribution bars
97+
98+
- Tabs: Leaderboard / Rating Distribution
99+
100+
- Fetches performers via API → parses Elo ratings → renders tables and graphs
101+
102+
103+
### f) UI Manager (`ui-manager.js`)
104+
105+
- Barrel export to unify:
106+
107+
- Cards, Dashboard, Modal, Badge, Stats
108+
109+
- Lets other modules import everything via `ui-manager.js`
110+
111+
112+
---
113+
114+
## 3. Battle Engine & API
115+
116+
- **`battle-engine.js`** (not included here but referenced):
117+
118+
- `loadNewPair()` → fetches next pair for voting
119+
120+
- Updates `state.currentPair` and `state.currentRanks`
121+
122+
- **`api-client.js`**:
123+
124+
- Fetch performers/scenes/images
125+
126+
- Fetch performer battle rank
127+
128+
- Fetch all performer stats
129+
130+
- **`math-utils.js`**:
131+
132+
- Parse Elo ratings
133+
134+
- Calculate win rates and streaks
135+
136+
137+
---
138+
139+
## 4. Flow Diagram (Textual)
140+
141+
Page Load / Performer Page
142+
│
143+
▼
144+
state initialized
145+
│
146+
▼
147+
injectBattleRankBadge() ──► fetchPerformerBattleRank(id)
148+
│
149+
▼
150+
Badge displayed on page
151+
152+
User clicks "🔥" floating button
153+
│
154+
▼
155+
openRankingModal() ──► createMainUI()
156+
│
157+
▼
158+
attachEventListeners()
159+
│
160+
├─ Gender toggle → update state.selectedGenders → loadNewPair()
161+
├─ Mode toggle → update state.currentMode → reset gauntlet → loadNewPair() / showPerformerSelection()
162+
├─ Skip button → handleSkip()
163+
▼
164+
loadNewPair() ──► battle-engine selects next pair → state.currentPair updated
165+
│
166+
▼
167+
renderCard(left/right) ──► ui-cards.js
168+
│
169+
▼
170+
User votes → update ratings, optionally showRatingAnimation()
171+
│
172+
▼
173+
If Gauntlet ends → showPlacementScreen() / createVictoryScreen()
174+
│
175+
▼
176+
Optional: openStatsModal() → fetchAllPerformerStats() → generateStatTables() / generateBarGroups()
177+
178+
---
179+
180+
## 5. Mode-specific Behaviors
181+
182+
|Mode|Behavior|
183+
|---|---|
184+
|Swiss|Random pairs, skip allowed, gender filters active|
185+
|Gauntlet|Champion seeded, defeated opponents tracked, final placement screen after all matches|
186+
|Champion|Continuous battle until a new champion is crowned|
187+
188+
---
189+
190+
## 6. Keyboard Controls
191+
192+
- **Left Arrow** → choose left card
193+
194+
- **Right Arrow** → choose right card
195+
196+
- **Space** → skip current pair (Swiss mode only)

‎plugins/hot_or_not/Hot or Not Plugin Dependency Order.md‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
## **1. Core / Foundational Modules**
2+
3+
1. **`state.js`** – global state store (all modules depend on this).
4+
5+
2. **`constants.js`** – enums, genders, or other constant values.
6+
7+
3. **`formatters.js`** – utility functions: `formatDuration`, `getCountryDisplay`, `getGenderDisplay`, `escapeHtml`.
8+
9+
4. **`math-utils.js`** – Elo parsing, rating calculations.
10+
11+
12+
---
13+
14+
## **2. API Layer**
15+
16+
5. **`api-client.js`** – fetch performers, scenes, images, battle ranks, stats.
17+
18+
- Depends on `state.js` optionally for caching or config.
19+
20+
21+
---
22+
23+
## **3. Battle Engine**
24+
25+
6. **`battle-engine.js`** – selects next pair, updates ratings.
26+
27+
- Depends on `state.js` and `api-client.js`.
28+
29+
30+
---
31+
32+
## **4. UI Components (Renderers / Templates)**
33+
34+
7. **`ui-cards.js`** – renders cards (scenes, performers, images) and victory/placement screens.
35+
36+
- Depends on `state.js` and `formatters.js`.
37+
38+
8. **`ui-badge.js`** – battle-rank badge, placement screen, rating animations.
39+
40+
- Depends on `state.js`, `api-client.js`, and `ui-cards.js` (for placement screens).
41+
42+
9. **`ui-dashboard.js`** – main UI shell, mode/gender controls, skip button, attaches event listeners.
43+
44+
- Depends on `state.js`, `ui-cards.js`, `battle-engine.js`.
45+
46+
47+
---
48+
49+
## **5. Modal & Stats**
50+
51+
10. **`ui-modal.js`** – floating button, ranking modal open/close, keyboard navigation.
52+
53+
- Depends on `state.js`, `ui-dashboard.js`, `battle-engine.js`.
54+
55+
11. **`ui-stats.js`** – stats modal, leaderboard, rating distribution.
56+
57+
- Depends on `api-client.js`, `math-utils.js`, `formatters.js`.
58+
59+
60+
---
61+
62+
## **6. Barrel / Unified Export**
63+
64+
12. **`ui-manager.js`** – re-exports all UI modules: cards, dashboard, badge, modal, stats.
65+
66+
- Depends on all `ui-*` modules.

‎plugins/hot_or_not/hot_or_not.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,16 @@
1010
padding: 15px;
1111
border-radius: 10px;
1212
}
13+
.plugin_hon__flame {
14+
fill: white;
15+
width: 18px;
16+
height: 18px;
17+
margin-right: 2px; /* space between flame and text */
18+
vertical-align: middle;
19+
}
20+
#plugin_hon span {
21+
display: inline-block; /* keep text inline with icon */
22+
}
1323
.hon-header {
1424
width: 100%;
1525
text-align: center;
@@ -1416,3 +1426,7 @@
14161426
flex-wrap: wrap;
14171427
gap: 8px;
14181428
}
1429+
/* ==========================
1430+
Card Layout & Image Fixes
1431+
========================== */
1432+

0 commit comments

Comments
 (0)