### Running the goverlay Demo Client (CMD) Source: https://github.com/hiitiger/goverlay/blob/master/README.md This snippet provides the command-line steps to set up and run the `goverlay` demo client. It includes installing Node.js dependencies, building native addons for both 32-bit and 64-bit Electron, and finally starting the application. These steps are crucial for preparing the Electron-based overlay for injection into games. ```CMD npm i npm run build @REM for 32bit electron npm run build:addon:x86 @REM for 64bit electron npm run build:addon:x64 npm run start ``` -------------------------------- ### Handling Electron IPC and UI Events (JavaScript) Source: https://github.com/hiitiger/goverlay/blob/master/client/dist/index/statusbar.html This JavaScript code, intended for an Electron renderer process, manages UI updates and inter-process communication. It listens for 'fps' events from the main process to update a label and sends a 'startIntercept' message when a button is clicked, demonstrating basic Electron IPC patterns. ```JavaScript const label = document.getElementById('label'); const { ipcRenderer, remote } = window.require('electron'); ipcRenderer.on("fps", (event, fps) => { label.innerText = `fps: ${fps}`; }); const button = document.getElementById('button'); button.addEventListener('click', () => { ipcRenderer.send('startIntercept'); }); ``` -------------------------------- ### Configuring GOverlay Project with CMake Source: https://github.com/hiitiger/goverlay/blob/master/CMakeLists.txt This CMake script defines the minimum required CMake version (3.15), sets the C++ standard to C++20, and configures platform-specific output directories for the 'goverlay' project. It dynamically sets build output paths based on whether the target platform is 'x64' or 'Win32' and includes the 'electron-overlay' subdirectory for its build process. ```CMake cmake_minimum_required(VERSION 3.15) cmake_policy(SET CMP0091 NEW) set(CMAKE_CXX_STANDARD 20) set(CMAKE_CXX_STANDARD_REQUIRED ON) project(goverlay) if("${CMAKE_GENERATOR_PLATFORM}" STREQUAL "x64") SET(OUTPUT_DIR ${ROOT_DIR}/build_x64) else() SET(OUTPUT_DIR ${ROOT_DIR}/build_Win32) endif() set(LIBRARY_OUTPUT_PATH ${OUTPUT_DIR}) set(EXECUTABLE_OUTPUT_PATH ${OUTPUT_DIR}) add_subdirectory(electron-overlay) ``` -------------------------------- ### Handling Button Click, Window Resizing, and IPC (Electron JavaScript) Source: https://github.com/hiitiger/goverlay/blob/master/client/dist/index/osr.html This JavaScript snippet handles click events on an HTML element with the ID 'button'. Upon clicking, it resizes the current Electron window by 20 pixels in both width and height using `remote.getCurrentWindow().setSize()` and sends an 'osrClick' message via `ipcRenderer` to the main process. ```JavaScript const { ipcRenderer, remote } = window.require('electron') const button = document.getElementById('button') button.addEventListener('click', () => { remote.getCurrentWindow().setSize(window.innerWidth + 20, window.innerHeight + 20) console.log('button click ', (new Date()).toString()) ipcRenderer.send('osrClick') }) ``` -------------------------------- ### Defining Project and N-API Version in CMake Source: https://github.com/hiitiger/goverlay/blob/master/electron-overlay/CMakeLists.txt This snippet initializes the CMake project named 'electron-overlay' and defines preprocessor macros for N-API, specifying version 6 and enabling experimental features. These definitions are crucial for building Node.js native addons. ```CMake project(electron-overlay) add_definitions(-DNAPI_VERSION=6) add_definitions(-DNAPI_EXPERIMENTAL) ``` -------------------------------- ### Adding Post-Build Copy Command in CMake Source: https://github.com/hiitiger/goverlay/blob/master/electron-overlay/CMakeLists.txt This snippet defines a custom command that executes after the project target is built. It uses xcopy to copy the compiled shared library (the Node.js addon) from the build output directory to the electron-overlay directory within the source tree, facilitating deployment or further processing. ```CMake add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD COMMAND xcopy \"${CMAKE_RUNTIME_OUTPUT_DIRECTORY}/Release\\${PROJECT_NAME}${LIB_SUFFIX}\" \"${CMAKE_SOURCE_DIR}/electron-overlay\\\" /S /Y /E ) ``` -------------------------------- ### Handling Electron IPC in Renderer Process with JavaScript Source: https://github.com/hiitiger/goverlay/blob/master/client/dist/index/osrtip.html This JavaScript snippet, intended for an Electron renderer process, establishes communication with the main process using `ipcRenderer`. It retrieves DOM elements for a label and a button, then attaches an event listener to the button to send a 'stopIntercept' message via IPC when clicked, facilitating interaction between the overlay and the main application logic. ```javascript const { ipcRenderer, remote } = window.require('electron') const label = document.getElementById('label') const button = document.getElementById('button') button.addEventListener('click', () => { ipcRenderer.send('stopIntercept') }) ``` -------------------------------- ### Styling Basic HTML Elements in CSS Source: https://github.com/hiitiger/goverlay/blob/master/client/dist/index/osr.html This CSS snippet defines basic visual styles for the `body`, `h1`, and `.caption` elements, setting background color, margins, text color, and height. These styles are applied to customize the appearance of the Electron application's user interface. ```CSS body { background-color: rgba(67, 138, 138, 0.25); margin: 10px; } h1 { color: maroon; margin-left: 40px; } .caption { height: 40px; background-color: brown } ``` -------------------------------- ### Discovering Node-Addon-API Include Path in CMake Source: https://github.com/hiitiger/goverlay/blob/master/electron-overlay/CMakeLists.txt This section executes a Node.js command to dynamically retrieve the include path for node-addon-api. The output is then cleaned of newlines and quotes, and the resulting path is added as a private include directory for the project, ensuring the C++ addon can find N-API headers. ```CMake execute_process(COMMAND node -p "require('node-addon-api').include" WORKING_DIRECTORY ${CMAKE_SOURCE_DIR} OUTPUT_VARIABLE NODE_ADDON_API_DIR ) string(REGEX REPLACE "[\r\n\"]" "" NODE_ADDON_API_DIR ${NODE_ADDON_API_DIR}) target_include_directories(${PROJECT_NAME} PRIVATE ${NODE_ADDON_API_DIR}) ``` -------------------------------- ### Styling Electron Overlay Window UI with CSS Source: https://github.com/hiitiger/goverlay/blob/master/client/dist/index/osrtip.html This CSS snippet defines the visual appearance for an Electron overlay window. It sets the body to transparent, styles a content area with rounded corners and a semi-transparent background, and applies basic styling to headings and captions, ensuring a clean and integrated look for the overlay. ```css body { background-color: transparent; margin: 0px; overflow: hidden; } .content { background-color:rgba(61, 70, 73, 0.25); border-radius: 100px; padding: 30px } h1 { color: maroon; margin-left: 40px; } .caption { height: 40px; background-color: brown } ``` -------------------------------- ### Setting Target Linker Optimization Options in CMake Source: https://github.com/hiitiger/goverlay/blob/master/electron-overlay/CMakeLists.txt This command applies specific linker options to the project target. It includes /DEBUG for debug information, /OPT:REF to eliminate unreferenced functions and data, and /OPT:ICF for identical COMDAT folding, optimizing the final executable size and performance. ```CMake target_link_options(${PROJECT_NAME} PRIVATE /DEBUG;/OPT:REF;/OPT:ICF; ) ``` -------------------------------- ### Setting C++ Compiler and Linker Flags for Windows in CMake Source: https://github.com/hiitiger/goverlay/blob/master/electron-overlay/CMakeLists.txt This section configures C++ compiler flags for release builds, adding /Zi for debug information. It also defines Windows-specific preprocessor macros like NOMINMAX to prevent min/max macro conflicts, _WIN32_WINNT for Windows 7 compatibility, and UNICODE for Unicode support. Linker options include /DEBUG for debugging. ```CMake set(CMAKE_CXX_FLAGS_RELEASE "${CMAKE_CXX_FLAGS_RELEASE} /Zi") add_definitions(-DNOMINMAX) add_definitions(-D_WIN32_WINNT=0x0601) add_definitions(-DUNICODE -D_UNICODE) add_link_options(/DEBUG) ``` -------------------------------- ### Logging Electron Window Focus and Blur Events (JavaScript) Source: https://github.com/hiitiger/goverlay/blob/master/client/dist/index/osr.html This JavaScript snippet registers event handlers for the `window.onfocus` and `window.onblur` events. It logs 'focus' to the console when the Electron window gains focus and 'blur' when it loses focus, useful for monitoring window state. ```JavaScript window.onfocus = function () { console.log("focus") } window.onblur = function () { console.log("blur") } ``` -------------------------------- ### Sending 'doit' IPC Message on Button Click (Electron JavaScript) Source: https://github.com/hiitiger/goverlay/blob/master/client/dist/index/osr.html This JavaScript snippet attaches a click event listener to an HTML element with the ID 'doit'. When this button is clicked, it sends a 'doit' message through Electron's `ipcRenderer` to the main process, triggering a specific action. ```JavaScript const doit = document.getElementById("doit") doit.addEventListener("click", () => { ipcRenderer.send("doit") }) ``` -------------------------------- ### Creating Shared Library and Setting Linkage in CMake Source: https://github.com/hiitiger/goverlay/blob/master/electron-overlay/CMakeLists.txt This snippet defines a shared library named after the project, including the previously globbed source files and JavaScript source. It sets private include directories for the project's own source and Node.js includes. It also configures the output library suffix to .node for Node.js addons and links against Node.js libraries. ```CMake add_library(${PROJECT_NAME} SHARED ${SOURCE_FILES} ${CMAKE_JS_SRC}) target_include_directories(${PROJECT_NAME} PRIVATE $ ) include_directories(${CMAKE_JS_INC}) set(LIB_SUFFIX ".node") set_target_properties(${PROJECT_NAME} PROPERTIES PREFIX "" SUFFIX ${LIB_SUFFIX}) target_link_libraries(${PROJECT_NAME} ${CMAKE_JS_LIB}) ``` -------------------------------- ### Styling Content Area for Window Dragging - CSS Source: https://github.com/hiitiger/goverlay/blob/master/client/dist/index/index.html This CSS snippet styles a content area, making it absolutely positioned and filling 100% of its parent's width and height. The `-webkit-app-region: drag;` property enables dragging the window by clicking and dragging this content area, common in Electron or similar desktop applications. ```CSS .content { position: absolute; width: 100%; height: 100%; -webkit-app-region: drag; } ``` -------------------------------- ### Styling Overlay Window Body and Caption (CSS) Source: https://github.com/hiitiger/goverlay/blob/master/client/dist/index/statusbar.html This CSS snippet defines the visual characteristics for an overlay window's main body and a specific caption element. It sets fixed dimensions, background colors with transparency, and controls overflow behavior, typical for a small, non-scrollable overlay. ```CSS body { overflow: hidden; background-color: rgba(67, 138, 138, 0.25); margin: 0px; height: 50px; width: 200px; } .caption { height: 50px; width: 200px; background-color: rgba(255, 138, 138, 0.25); } ``` -------------------------------- ### Controlling Video Playback and Error Handling in JavaScript Source: https://github.com/hiitiger/goverlay/blob/master/client/dist/doit/index.html This snippet initializes a video element by its ID, then attaches event listeners to manage its lifecycle. It handles automatic window closure upon video completion or error, ensures the video plays once loaded, and dynamically sets the video source. The error handler provides a user alert before closing the window. ```JavaScript const video = document.getElementById('video') video.onended = function () { window.close(); }; video.addEventListener('loadeddata', function () { video.play(); }); video.onerror = function () { alert('ooops... Shia had a problem. try on another tab'); window.close(); }; video.load(); var videoNum = 1; var filename = 'assets/' + videoNum + '.webm'; video.src = filename; ``` -------------------------------- ### Styling Application Title Text - CSS Source: https://github.com/hiitiger/goverlay/blob/master/client/dist/index/index.html This CSS snippet defines styles for a title element. It centers the text, sets its color to a light off-white (#e8ecdc), specifies 'Microsoft YaHei' as the font, sets the font size to 18px with normal weight, and adds a top margin of 10px for spacing. ```CSS .title { display: block; text-align: center; color: #e8ecdc; font-family: Microsoft YaHei; font-size: 18px; font-weight: normal; margin-top: 10px; } ``` -------------------------------- ### Globbing Source Files in CMake Source: https://github.com/hiitiger/goverlay/blob/master/electron-overlay/CMakeLists.txt This command uses file(GLOB_RECURSE) to collect all source files with .c, .cc, or .cpp extensions from the src directory and its subdirectories, storing their paths in the SOURCE_FILES variable. This simplifies adding multiple source files to a target. ```CMake file(GLOB_RECURSE SOURCE_FILES src/*.c src/*.cc src/*.cpp) ``` -------------------------------- ### Updating UI Label with Current Time (JavaScript) Source: https://github.com/hiitiger/goverlay/blob/master/client/dist/index/osr.html This JavaScript snippet continuously updates the text content of an HTML element with the ID 'label' to display the current date and time. It uses `setInterval` to refresh the display every second, providing a dynamic timestamp. ```JavaScript const label = document.getElementById('label') setInterval(() => { label.innerText = (new Date()).toString() }, 1000) ``` -------------------------------- ### Styling Application Window Body - CSS Source: https://github.com/hiitiger/goverlay/blob/master/client/dist/index/index.html This CSS snippet defines styles for the main application window body. It sets `overflow` to hidden to prevent scrollbars and `background-color` to a dark grey (rgb(61, 70, 73)) for the window's background. ```CSS AppWindow body { overflow: hidden; background-color: rgb(61, 70, 73); } ``` -------------------------------- ### Styling Image Element Dimensions - CSS Source: https://github.com/hiitiger/goverlay/blob/master/client/dist/index/index.html This CSS snippet defines fixed dimensions for an image element, setting its width to 640px and height to 360px. This ensures consistent sizing for images within the application layout, maintaining a specific aspect ratio. ```CSS image { width: 640px; height: 360px; } ``` -------------------------------- ### Styling Canvas Element Dimensions - CSS Source: https://github.com/hiitiger/goverlay/blob/master/client/dist/index/index.html This CSS snippet sets fixed dimensions for a canvas element to 640px width and 360px height. It also assigns a 'linen' background color, likely for visual debugging or as a placeholder for content. ```CSS canvas { width: 640px; height: 360px; background-color: linen; } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.