Frontend State Management
Relevant source files
The following files were used as context for generating this wiki page:
Frontend State Management in this application controls the interactive flow of a "confession" interface. The system manages visual visibility, button positioning, text simulation, and multi-stage modal interactions. It relies on a centralized configuration object to drive UI text and uses jQuery for DOM manipulation and event handling.
The state transitions between a preloading phase, a primary question phase, and a final feedback phase involving automated text generation.
Sources: js/myJs.js:1-155, index.html:1-77
Centralized Configuration
The application stores UI strings in a textConfig object. This object serves as the single source of truth for all labels, questions, and responses displayed to the user.
| Property | Value Description |
|---|---|
text1 - text4 | Initial greeting and primary question strings. |
text5 - text6 | Labels for "No" and "Yes" buttons. |
text7 - text8 | Popup title and confirmation button text. |
text9 | The secret string injected during text generation. |
text10 - text11 | Final success message strings. |
text12 | Final confirmation button label. |
Sources: js/myJs.js:1-15
Application Lifecycle and View States
The application moves through discrete states managed via CSS visibility and jQuery timing functions.
Initialization and Preloading
Upon loading, the system displays a #preloader mask with a spinning animation. After 600ms, the firstQuestion() function executes, hiding the content and triggering a SweetAlert2 modal. Once the user acknowledges the first modal, the main .content becomes visible.
Interaction Logic: Button Behavior
The "No" button state is designed to be evasive. The application tracks the number of interactions using a counter n.
- If
n < 1, the button swaps positions with the "Yes" button. - If
n > 1, the button moves to random coordinates within the viewport.
Sources: js/myJs.js:58-94, css/style.css:5-18
Automated Input Management
When the user selects the positive option, the system transitions to a text input state. This state uses an interval-based generator to simulate user typing.
textGenerate Function
The textGenerate function intercepts user input in the #txtReason field. Regardless of what keys the user presses, the function appends characters from textConfig.text9.
- The function measures the current length of the input value.
- It maps that length to the index of
textConfig.text9. - It updates the input value to show the pre-configured text.
Sources: js/myJs.js:97-115, js/myJs.js:145-151
Audio and Redirection State
The final state of the application involves external redirection and audio feedback. Specific interactions trigger local audio files to provide haptic-like feedback.
| Event | Action | Target/Source |
|---|---|---|
| Button Switch | Play Audio | sound/duck.mp3 |
| Button Move | Play Audio | sound/Swish1.mp3 |
| "Yes" Click | Play Audio | sound/tick.mp3 |
| Completion | Redirect | https://www.facebook.com/lekientrung.info/ |
Sources: js/myJs.js:59, js/myJs.js:71, js/myJs.js:118, js/myJs.js:142
Frontend state is effectively synchronized between the textConfig data structure and the DOM, using event listeners to trigger transitions and visual updates based on user proximity and selection.
Sources: js/myJs.js:17-155, index.html:1-77