The 7ROF (pronounced Huroof) game is based on an old TV show that was used to play on Al Saudiya TV channel. This program is used as a display for the host to pick letters from. The design, layout, and functionality of the app are inspired by the original show and are enhanced through the use of hexagonal grids and different game layers.
The application makes use of a hexagonal grid system to align elements as seen in the original show. You can learn more about hex grids from this website, which has been a valuable resource in implementing this feature.
The game layout consists of three main layers:
- Background Hex Grid: The foundational layer that holds everything together.
- Letters Grid: Displays the letters and additional graphical elements.
- Selection Grid: Used for applying overlay colors after clicking an element, enhancing the visual feedback.
A better look at the display can be seen in this YouTube video: https://youtu.be/GqCcBNJTTC4?t=250
The display mimics the main functionalities of the screen.
A list of the observed functionalities is in the following table:
| Functionality | In Show | In App |
|---|---|---|
| Hexagonal Grids | ✅ | ✅ |
| 3D Retro Style | ✅ | |
| Custom Font | ✅ | |
| Green/Red Cells | ✅ | ✅ |
| Blinking Selected | ✅ | ✅ |
| Score System | ✅ | 📤 |
| Sound System | ✅ | 📤 |
| Timer System | ✅ | 📤 |
| Overlaying/Video editing | ✅ | 📤 |
| Animations | ✅ | 🗃️ |
*CSS styles in javafx are limited. **Exact font could not be identified; a different (but hopefully visually similar) font was chosen.
📤 : Handled by glue scripts.
🗃️ : Not yet implemented. (TODO)
The sound system is managed by an AHK script combined with 4 OSU macro keyboards to reflect the button press action on the screen.
In the past (during COVID), we used to mimic the buttons with another AHK script that glued everything together, and the full screen looked like this:
Yikes? I know.
- Upper middle window is being broadcasted live on YouTube.
- Bottom left is VoiceMeeter Banana, used for audio management.
- Bottom middle is OBS Stream Labs for broadcasting.
- Most Right is Discord, to get the players' webcams.
- Upper left is the BuzzIn.live site for the game buzzers session.
- Next to that is an earlier version of the 7ROF App.
You first need to add JavaFX libs to the project; after that, just run App.java, and the display should be up and running.
Currently, you have to link everything manually, but hopefully (once I refactor the code to work in other systems than mine) I will upload the other scripts too.
Have fun, experiment, and if you have any modifications to my work, feel free to make a pull request.