├── server.js ├── .altv ├── resource.cfg ├── .github └── FUNDING.yml ├── postinstall.js ├── client ├── helpers.js ├── client.js └── bars.js └── README.md /server.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.altv: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "type": "postinstall", 4 | "file": "postinstall.js" 5 | } 6 | ] -------------------------------------------------------------------------------- /resource.cfg: -------------------------------------------------------------------------------- 1 | type: 'js', 2 | 3 | main: 'server.js', 4 | client-main: 'client/client.js', 5 | client-files: [ 'client/*' ] -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [leonmrbonnie] 4 | patreon: leonmrbonnie 5 | -------------------------------------------------------------------------------- /postinstall.js: -------------------------------------------------------------------------------- 1 | /* 2 | THIS FILE IS FOR THE ALT:V INSTALLER POSTINSTALL! 3 | DO NOT INCLUDE IT IN YOUR PROJECT IF YOU INSTALL IT MANUALLY! 4 | */ 5 | 6 | const COLORS = { 7 | Reset: "\x1b[0m", 8 | FgGreen: "\x1b[32m", 9 | FgCyan: "\x1b[36m", 10 | }; 11 | 12 | console.log(`${COLORS.FgGreen}|-----------------------------------------|`); 13 | console.log(`${COLORS.FgGreen}|${COLORS.Reset} Thank you for installing my resource! ${COLORS.FgGreen}|`); 14 | console.log(`${COLORS.FgGreen}|${COLORS.Reset} Made by ${COLORS.FgCyan}LeonMrBonnie ${COLORS.FgGreen}|`); 15 | console.log(`${COLORS.FgGreen}|-----------------------------------------|`); -------------------------------------------------------------------------------- /client/helpers.js: -------------------------------------------------------------------------------- 1 | import * as native from "natives"; 2 | 3 | /** 4 | * Clamps a number 5 | * 6 | * @author LeonMrBonnie 7 | * @export 8 | * @param {Number} number 9 | * @param {Number} min 10 | * @param {Number} max 11 | */ 12 | export function clampNumber(number, min, max) { 13 | return Math.max(min, Math.min(max, number)); 14 | } 15 | 16 | /** 17 | * Gets hud color from color index 18 | * 19 | * @author LeonMrBonnie 20 | * @export 21 | * @param {String} color 22 | * @returns {Array} 23 | */ 24 | export function getColor(color) { 25 | if(Array.isArray(color)) return color; 26 | let [_, r, g, b, a] = native.getHudColour(color, 0, 0, 0); 27 | return [r, g, b, a]; 28 | } 29 | 30 | /** 31 | * Draws a text 32 | * 33 | * @export 34 | * @param {String} text 35 | * @param {Array} position 36 | * @param {Number} font 37 | * @param {Number} scale 38 | * @param {Array} color 39 | * @param {Number} justification 40 | * @param {Number} wrap 41 | * @param {Boolean} shadow 42 | * @param {Boolean} outline 43 | */ 44 | export function drawText(text, position, font, scale, color, justification, wrap, shadow = false, outline = false) { 45 | native.beginTextCommandDisplayText('STRING'); 46 | native.addTextComponentSubstringPlayerName(text); 47 | native.setTextJustification(justification); 48 | native.setTextWrap(0.0, wrap); 49 | native.setTextFont(font); 50 | native.setTextScale(0.0, scale || 0.5); 51 | native.setTextColour(color[0], color[1], color[2], color[3]); 52 | if(outline) native.setTextOutline(); 53 | if(shadow) native.setTextDropShadow(); 54 | native.endTextCommandDisplayText(position[0], position[1], 0); 55 | } 56 | 57 | /* 58 | Data from Alex Guirre 59 | https://github.com/alexguirre 60 | */ 61 | export const coordsAndSize = { 62 | gfxAlignWidth: 0.952, 63 | gfxAlignHeight: 0.949, 64 | 65 | initialX: 0.795, 66 | initialY: 0.923, 67 | initialBusySpinnerY: 0.887, 68 | 69 | bgBaseX: 0.874, 70 | progressBaseX: 0.913, 71 | checkpointBaseX: 0.9445, 72 | 73 | bgOffset: 0.008, 74 | bgThinOffset: 0.012, 75 | textOffset: -0.011, 76 | playerTitleOffset: -0.005, 77 | barOffset: 0.012, 78 | checkpointOffsetX: 0.0094, 79 | checkpointOffsetY: 0.012, 80 | 81 | timerBarWidth: 0.165, 82 | timerBarHeight: 0.035, 83 | timerBarThinHeight: 0.028, 84 | timerBarMargin: 0.0399, 85 | timerBarThinMargin: 0.0319, 86 | 87 | progressWidth: 0.069, 88 | progressHeight: 0.011, 89 | 90 | checkpointWidth: 0.012, 91 | checkpointHeight: 0.023, 92 | 93 | titleScale: 0.288, 94 | titleWrap: 0.867, 95 | textScale: 0.494, 96 | textWrap: 0.95, 97 | playerTitleScale: 0.447 98 | }; -------------------------------------------------------------------------------- /client/client.js: -------------------------------------------------------------------------------- 1 | import * as alt from "alt-client"; 2 | import * as native from "natives"; 3 | import * as Helpers from "./helpers"; 4 | import * as Bars from "./bars"; 5 | 6 | native.requestStreamedTextureDict("timerbars", true); 7 | 8 | alt.everyTick(() => { 9 | if(!Object.keys(Bars.allBars)) return; 10 | 11 | native.hideHudComponentThisFrame(6); 12 | native.hideHudComponentThisFrame(7); 13 | native.hideHudComponentThisFrame(8); 14 | native.hideHudComponentThisFrame(9); 15 | 16 | native.setScriptGfxAlign(82, 66); 17 | native.setScriptGfxAlignParams(0.0, 0.0, Helpers.coordsAndSize.gfxAlignWidth, Helpers.coordsAndSize.gfxAlignHeight); 18 | 19 | let drawY = native.busyspinnerIsOn() ? Helpers.coordsAndSize.initialBusySpinnerY : Helpers.coordsAndSize.initialY; 20 | for(const barId in Bars.allBars) { 21 | let bar = Bars.allBars[barId]; 22 | bar.draw(drawY); 23 | drawY -= bar._thin ? Helpers.coordsAndSize.timerBarThinMargin : Helpers.coordsAndSize.timerBarMargin; 24 | } 25 | 26 | native.resetScriptGfxAlign(); 27 | }); 28 | 29 | alt.on("timerbars:create", createBar); 30 | alt.onServer("timerbars:create", createBar); 31 | function createBar(id, type, title, options = {}) { 32 | if(Bars.allBars[id]) return; 33 | switch(type) { 34 | case "text": { 35 | new Bars.TextBar(id, title, options.text || ""); 36 | break; 37 | } 38 | case "player": { 39 | new Bars.PlayerBar(id, title, options.text || ""); 40 | break; 41 | } 42 | case "checkpoint": { 43 | new Bars.CheckpointBar(id, title, options.checkpoints || 1); 44 | break; 45 | } 46 | case "progress": { 47 | new Bars.ProgressBar(id, title, options.progress || 0); 48 | break; 49 | } 50 | } 51 | } 52 | 53 | alt.on("timerbars:remove", removeBar); 54 | alt.onServer("timerbars:remove", removeBar); 55 | function removeBar(id) { 56 | let bar = Bars.allBars[id]; 57 | if(!bar) return; 58 | bar.destroy(); 59 | } 60 | 61 | alt.on("timerbars:removeAll", removeAllBars); 62 | alt.onServer("timerbars:removeAll", removeAllBars); 63 | function removeAllBars() { 64 | for(const barId in Bars.allBars) { 65 | Bars.allBars[barId].destroy(); 66 | } 67 | } 68 | 69 | // Edit bars 70 | alt.on("timerbars:setTitle", setBarTitle); 71 | alt.onServer("timerbars:setTitle", setBarTitle); 72 | function setBarTitle(id, title) { 73 | let bar = Bars.allBars[id]; 74 | if(!bar) return; 75 | bar.title = title; 76 | } 77 | 78 | alt.on("timerbars:setText", setBarText); 79 | alt.onServer("timerbars:setText", setBarText); 80 | function setBarText(id, text) { 81 | let bar = Bars.allBars[id]; 82 | if(!bar) return; 83 | bar.text = text; 84 | } 85 | 86 | alt.on("timerbars:setColor", setBarColor); 87 | alt.onServer("timerbars:setColor", setBarColor); 88 | function setBarColor(id, color) { 89 | let bar = Bars.allBars[id]; 90 | if(!bar) return; 91 | bar.color = color; 92 | } 93 | 94 | alt.on("timerbars:setTextColor", setBarTextColor); 95 | alt.onServer("timerbars:setTextColor", setBarTextColor); 96 | function setBarTextColor(id, color) { 97 | let bar = Bars.allBars[id]; 98 | if(!bar) return; 99 | bar.textColor = color; 100 | } 101 | 102 | alt.on("timerbars:setHighlightColor", setBarHighlightColor); 103 | alt.onServer("timerbars:setHighlightColor", setBarHighlightColor); 104 | function setBarHighlightColor(id, color) { 105 | let bar = Bars.allBars[id]; 106 | if(!bar) return; 107 | bar.highlightColor = color; 108 | } 109 | 110 | // Checkpoint Bar Only 111 | alt.on("timerbars:setCheckpointState", setBarCheckpointState); 112 | alt.onServer("timerbars:setCheckpointState", setBarCheckpointState); 113 | function setBarCheckpointState(id, checkpointIndex, state) { 114 | let bar = Bars.allBars[id]; 115 | if(!bar || !bar instanceof Bars.CheckpointBar) return; 116 | if(checkpointIndex !== -1) bar.setCheckpointState(checkpointIndex, state); 117 | else bar.setAllCheckpointsState(state); 118 | } 119 | 120 | // Progress Bar Only 121 | alt.on("timerbars:setProgress", setBarProgress); 122 | alt.onServer("timerbars:setProgress", setBarProgress); 123 | function setBarProgress(id, progress) { 124 | let bar = Bars.allBars[id]; 125 | if(!bar || !bar instanceof Bars.ProgressBar) return; 126 | bar.progress = progress / 100; 127 | } -------------------------------------------------------------------------------- /client/bars.js: -------------------------------------------------------------------------------- 1 | import * as native from "natives"; 2 | import * as Helpers from "./helpers"; 3 | 4 | export const allBars = {}; 5 | 6 | class BaseBar { 7 | constructor(id, title) { 8 | this._id = id; 9 | this._thin = false; 10 | this._title = title; 11 | this._highlightColor = null; 12 | 13 | this._titleDrawParams = { 14 | font: 0, 15 | color: [240, 240, 240, 255], 16 | scale: Helpers.coordsAndSize.titleScale + 0.1, 17 | justification: 2, 18 | wrap: Helpers.coordsAndSize.titleWrap 19 | }; 20 | 21 | allBars[id] = this; 22 | } 23 | 24 | get title() { 25 | return this._title; 26 | } 27 | get titleColor() { 28 | return this._titleDrawParams.color; 29 | } 30 | get highlightColor() { 31 | return this._highlightColor; 32 | } 33 | set title(value) { 34 | this._title = value; 35 | } 36 | set titleColor(value) { 37 | this._titleDrawParams.color = Helpers.getColor(value); 38 | } 39 | 40 | set highlightColor(value) { 41 | this._highlightColor = value ? Helpers.getColor(value) : null; 42 | } 43 | 44 | // Functions 45 | drawBackground(y) { 46 | y += this._thin ? Helpers.coordsAndSize.bgThinOffset : Helpers.coordsAndSize.bgOffset; 47 | 48 | if (this._highlightColor) native.drawSprite("timerbars", "all_white_bg", Helpers.coordsAndSize.bgBaseX, y, Helpers.coordsAndSize.timerBarWidth, 49 | this._thin ? Helpers.coordsAndSize.timerBarThinHeight : Helpers.coordsAndSize.timerBarHeight, 0.0, this._highlightColor[0], this._highlightColor[1], this._highlightColor[2], this._highlightColor[3]); 50 | native.drawSprite("timerbars", "all_black_bg", Helpers.coordsAndSize.bgBaseX, y, Helpers.coordsAndSize.timerBarWidth, 51 | this._thin ? Helpers.coordsAndSize.timerBarThinHeight : Helpers.coordsAndSize.timerBarHeight, 0.0, 255, 255, 255, 140); 52 | } 53 | drawTitle(y) { 54 | Helpers.drawText(this._title, [Helpers.coordsAndSize.initialX, y - 0.004], this._titleDrawParams.font, this._titleDrawParams.scale, this._titleDrawParams.color, this._titleDrawParams.justification, 55 | this._titleDrawParams.wrap); 56 | } 57 | draw(y) { 58 | this.drawBackground(y); 59 | this.drawTitle(y); 60 | } 61 | 62 | destroy() { 63 | delete allBars[this._id]; 64 | } 65 | } 66 | 67 | export class TextBar extends BaseBar { 68 | constructor(id, title, text) { 69 | super(id, title); 70 | 71 | this._text = text; 72 | this._textDrawParams = { 73 | font: 0, 74 | color: [240, 240, 240, 255], 75 | scale: Helpers.coordsAndSize.textScale, 76 | justification: 2, 77 | wrap: Helpers.coordsAndSize.textWrap 78 | }; 79 | } 80 | 81 | // Properties 82 | get text() { 83 | return this._text; 84 | } 85 | get textColor() { 86 | return this._textDrawParams.color; 87 | } 88 | set text(value) { 89 | this._text = value; 90 | } 91 | set textColor(value) { 92 | this._textDrawParams.color = Helpers.getColor(value); 93 | } 94 | set color(value) { 95 | this.titleColor = value; 96 | this.textColor = value; 97 | } 98 | 99 | // Functions 100 | draw(y) { 101 | super.draw(y); 102 | y += Helpers.coordsAndSize.textOffset; 103 | Helpers.drawText(this._text, [Helpers.coordsAndSize.initialX, y], this._textDrawParams.font, this._textDrawParams.scale, this._textDrawParams.color, this._textDrawParams.justification, 104 | this._textDrawParams.wrap); 105 | } 106 | } 107 | 108 | export class PlayerBar extends TextBar { 109 | constructor(id, title, text) { 110 | super(id, title, text); 111 | 112 | this._titleDrawParams = { 113 | font: 4, 114 | color: [240, 240, 240, 255], 115 | scale: Helpers.coordsAndSize.playerTitleScale, 116 | justification: 2, 117 | wrap: Helpers.coordsAndSize.titleWrap, 118 | shadow: true 119 | }; 120 | } 121 | 122 | // Functions 123 | draw(y) { 124 | super.drawBackground(y); 125 | Helpers.drawText(this._title, [Helpers.coordsAndSize.initialX, y + Helpers.coordsAndSize.playerTitleOffset], this._titleDrawParams.font, this._titleDrawParams.scale, 126 | this._titleDrawParams.color, this._titleDrawParams.justification, this._titleDrawParams.wrap); 127 | Helpers.drawText(this._text, [Helpers.coordsAndSize.initialX, y + Helpers.coordsAndSize.textOffset], this._textDrawParams.font, this._textDrawParams.scale, this._textDrawParams.color, 128 | this._textDrawParams.justification, this._textDrawParams.wrap); 129 | } 130 | } 131 | 132 | export class CheckpointBar extends BaseBar { 133 | static state = { 134 | inProgress: 0, 135 | completed: 1, 136 | failed: 2 137 | }; 138 | 139 | constructor(id, title, numCheckpoints) { 140 | super(id, title); 141 | 142 | this._thin = true; 143 | this._color = [114, 204, 114, 255]; 144 | this._inProgressColor = [255, 255, 255, 51]; 145 | this._failedColor = [224, 50, 50, 255]; 146 | this._checkpointStates = {}; 147 | this._numCheckpoints = Helpers.clampNumber(numCheckpoints, 0, 16); 148 | } 149 | 150 | // Properties 151 | get numCheckpoints() { 152 | return this._numCheckpoints; 153 | } 154 | get color() { 155 | return this._color; 156 | } 157 | get inProgressColor() { 158 | return this._inProgressColor; 159 | } 160 | get failedColor() { 161 | return this._failedColor; 162 | } 163 | set color(value) { 164 | this._color = Helpers.getColor(value); 165 | } 166 | set inProgressColor(value) { 167 | this._inProgressColor = Helpers.getColor(value); 168 | } 169 | set failedColor(value) { 170 | this._failedColor = Helpers.getColor(value); 171 | } 172 | 173 | // Functions 174 | setCheckpointState(index, newState) { 175 | if (index < 0 || index >= this._numCheckpoints) return; 176 | this._checkpointStates[index] = newState; 177 | } 178 | 179 | setAllCheckpointsState(newState) { 180 | for (let i = 0; i < this._numCheckpoints; i++) { 181 | this._checkpointStates[i] = newState; 182 | } 183 | } 184 | 185 | draw(y) { 186 | super.draw(y); 187 | y += Helpers.coordsAndSize.checkpointOffsetY; 188 | 189 | for (let i = 0, cpX = Helpers.coordsAndSize.checkpointBaseX; i < this._numCheckpoints; i++) { 190 | const drawColor = this._checkpointStates[i] !== 0 ? (this._checkpointStates[i] === CheckpointBar.state.failed ? this._failedColor : this._color) : this._inProgressColor; 191 | native.drawSprite("timerbars", "circle_checkpoints", cpX, y, Helpers.coordsAndSize.checkpointWidth, Helpers.coordsAndSize.checkpointHeight, 0.0, drawColor[0], drawColor[1], 192 | drawColor[2], drawColor[3], true); 193 | 194 | cpX -= Helpers.coordsAndSize.checkpointOffsetX; 195 | } 196 | } 197 | } 198 | 199 | export class ProgressBar extends BaseBar { 200 | constructor(id, title, progress) { 201 | super(id, title); 202 | 203 | this._thin = true; 204 | this._bgColor = [155, 155, 155, 255]; 205 | this._fgColor = [240, 240, 240, 255]; 206 | this._fgWidth = 0.0; 207 | this._fgX = 0.0; 208 | 209 | this.progress = progress / 100; 210 | } 211 | 212 | // Properties 213 | get progress() { 214 | return this._progress; 215 | } 216 | get backgroundColor() { 217 | return this._bgColor; 218 | } 219 | get foregroundColor() { 220 | return this._fgColor; 221 | } 222 | set progress(value) { 223 | this._progress = Helpers.clampNumber(value, 0.0, 1.0); 224 | this._fgWidth = Helpers.coordsAndSize.progressWidth * this._progress; 225 | this._fgX = (Helpers.coordsAndSize.progressBaseX - Helpers.coordsAndSize.progressWidth * 0.5) + (this._fgWidth * 0.5); 226 | } 227 | set backgroundColor(value) { 228 | this._bgColor = Helpers.getColor(value); 229 | } 230 | set foregroundColor(value) { 231 | this._fgColor = Helpers.getColor(value); 232 | } 233 | 234 | // Functions 235 | draw(y) { 236 | super.draw(y); 237 | 238 | y += Helpers.coordsAndSize.barOffset; 239 | native.drawRect(Helpers.coordsAndSize.progressBaseX, y, Helpers.coordsAndSize.progressWidth, Helpers.coordsAndSize.progressHeight, this._bgColor[0], this._bgColor[1], this._bgColor[2], this._bgColor[3]); 240 | native.drawRect(this._fgX, y, this._fgWidth, Helpers.coordsAndSize.progressHeight, this._fgColor[0], this._fgColor[1], this._fgColor[2], this._fgColor[3]); 241 | } 242 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![](https://i.imgur.com/PB4JHGK.png) 2 | # Open Source - Timerbars 3 | 4 | Created by LeonMrBonnie 5 | 6 | [❤️ Support me by becoming a Patron](https://www.patreon.com/leonmrbonnie/)
7 | ⭐ This repository if you found it useful! 8 | 9 | [![Generic badge](https://img.shields.io/badge/.altv_Installer%3F-Yes!-4E753E.svg)](https://shields.io/) 10 | 11 | --- 12 | 13 | # Description 14 | 15 | This repository provides an alt:V resource to allow easy usage of GTA V timerbars. 16 | 17 | This resource provides events to create, remove and edit timerbars. 18 | 19 | ## Installing Dependencies / Installation 20 | 21 | **I cannot stress this enough. Ensure you have NodeJS 13+ or you will have problems.** 22 | 23 | - [NodeJS 13+](https://nodejs.org/en/download/current/) 24 | - An Existing or New Gamemode 25 | - General Scripting Knowledge 26 | 27 | 28 | After simply add the name of this resource to your `server.cfg` resource section. 29 | 30 | `altv-os-timerbars` 31 | 32 | Then simply clone this repository into your main server resources folder. 33 | 34 | ``` 35 | cd resources 36 | git clone https://github.com/LeonMrBonnie/altv-os-timerbars 37 | ``` 38 | 39 | Ensure your `package.json` includes this property: 40 | 41 | ```json 42 | "type": "module" 43 | ``` 44 | 45 | # Usage 46 | 47 | The resource gives you access to a few different events to interact with timerbars. Below is a list of all events:
48 | (Every event has the prefix `timerbars:` when you use them, for a more detailed guide look at [Examples](#examples)) 49 | 50 | | Event | Description | 51 | | -------------------- | --------------------------------------- | 52 | | `create` | Creates a new timerbar | 53 | | `remove` | Removes a timerbar | 54 | | `removeAll` | Removes all timerbars | 55 | | `setTitle` | Sets the title of a timerbar | 56 | | `setText` | Sets the text of a timerbar | 57 | | `setColor` | Sets the color of a timerbar | 58 | | `setTextColor` | Sets the text color of a timerbar | 59 | | `setHighlightColor` | Sets the highlight color of a timerbar | 60 | | `setCheckpointState` | Sets the checkpoint state of a timerbar | 61 | | `setProgress` | Sets the progress of a timerbar | 62 | 63 | ## Detailed Usage 64 | 65 | Detailed usage for all events: (Parameters marked with a `?` are optional) 66 | 67 | ### `create`: 68 | | Parameter | Type | Description | Default value | 69 | | ------------ | ---------- | ------------------------------------------------------ | --------------- | 70 | | `id` | `String` | Unique id to identify the timerbar | | 71 | | `type` | `String` | The timerbar type | | 72 | | `title` | `String` | The timer bar title | | 73 | | `?options` | `Object` | The timer bar options like text etc. | `{}` | 74 | 75 | Available `type`s: 76 | | Type | Description | 77 | | ------------ | -------------------------------------- | 78 | | `text` | Simple timer bar that shows a text | 79 | | `player` | Timer bar that shows a player name | 80 | | `checkpoint` | Timer bar with checkpoint circles | 81 | | `progress` | Timer bar that displays a progress bar | 82 | 83 | Available `options` properties: 84 | | Property | Type | Description | Available on type | 85 | | ------------- | ---------- | ------------------------------------------------------ | ------------------ | 86 | | `text` | `String` | The text that displays on the right side | All types | 87 | | `checkpoints` | `Number` | The amount of checkpoints to display | `checkpoint` | 88 | | `progress` | `Number` | The progress amount in % | `progress` | 89 | 90 | ### `remove`: 91 | | Parameter | Type | Description | 92 | | ------------ | ---------- | ------------------------------------------------------ | 93 | | `id` | `String` | Unique id of the timerbar | 94 | 95 | ### `removeAll`: 96 | Has no parameters 97 | 98 | ### `setTitle`: 99 | | Parameter | Type | Description | 100 | | ------------ | ---------- | ------------------------------------------------------ | 101 | | `id` | `String` | Unique id of the timerbar | 102 | | `title` | `String` | The timer bar title | 103 | 104 | ### `setText`: 105 | | Parameter | Type | Description | 106 | | ------------ | ---------- | ------------------------------------------------------ | 107 | | `id` | `String` | Unique id of the timerbar | 108 | | `text` | `String` | The timer bar text | 109 | 110 | ### `setColor`: 111 | | Parameter | Type | Description | 112 | | ------------ | ---------- | ------------------------------------------------------ | 113 | | `id` | `String` | Unique id of the timerbar | 114 | | `color` | `Number` | The color of the timerbar (uses GTA V hud color ids) | 115 | 116 | ### `setTextColor`: 117 | | Parameter | Type | Description | 118 | | ------------ | ---------- | ----------------------------------------------------------- | 119 | | `id` | `String` | Unique id of the timerbar | 120 | | `textColor` | `Number` | The text color of the timerbar (uses GTA V hud color ids) | 121 | 122 | ### `setHighlightColor`: 123 | | Parameter | Type | Description | 124 | | ---------------- | ---------- | ---------------------------------------------------------------- | 125 | | `id` | `String` | Unique id of the timerbar | 126 | | `highlightColor` | `Number` | The highlight color of the timerbar (uses GTA V hud color ids) | 127 | 128 | ### `setCheckpointState`: 129 | Only works for type `checkpoint` 130 | | Parameter | Type | Description | 131 | | --------------- | ---------- | -------------------------------------------------------------------- | 132 | | `id` | `String` | Unique id of the timerbar | 133 | | `checkpointIdx` | `Number` | The checkpoint index (starts at 0) (`-1` means all checkpoints) | 134 | | `state` | `Number` | State of the checkpoint (`0 = In Progress, 1 = Success, 2 = Failed`) | 135 | 136 | ### `setProgress`: 137 | Only works for type `progress` 138 | | Parameter | Type | Description | 139 | | ------------ | ---------- | ---------------------------- | 140 | | `id` | `String` | Unique id of the timerbar | 141 | | `progress` | `Number` | The progress amount in % | 142 | 143 | # Example 144 | 145 | Code used in the preview image: 146 | ```js 147 | alt.emit("timerbars:create", "test1", "text", "Timer", { text: "0:23" }); 148 | alt.emit("timerbars:setTextColor", "test1", 6); 149 | alt.emit("timerbars:setHighlightColor", "test1", 8); 150 | alt.emit("timerbars:create", "test2", "player", "1st: LeonMrBonnie", { text: "5 Kills" }); 151 | alt.emit("timerbars:setColor", "test2", 109); 152 | alt.emit("timerbars:create", "test3", "checkpoint", "Checkpoints", { checkpoints: 5 }); 153 | alt.emit("timerbars:setCheckpointState", "test3", 0, 0); 154 | alt.emit("timerbars:setCheckpointState", "test3", 1, 0); 155 | alt.emit("timerbars:setCheckpointState", "test3", 2, 1); 156 | alt.emit("timerbars:setCheckpointState", "test3", 3, 1); 157 | alt.emit("timerbars:setCheckpointState", "test3", 4, 2); 158 | alt.emit("timerbars:create", "test4", "progress", "Progress", { progress: 35 }); 159 | ``` 160 | 161 | # Credits 162 | 163 | - [rootcause](https://rage.mp/files/file/327-timer-bars-2/) - For giving inspiration and a great part of the code 164 | - [Alex Guirre](https://github.com/alexguirre) - For finding out the correct values for scale, color etc. 165 | 166 | # Other alt:V Open Source Resources 167 | 168 | - [Authentication by Stuyk](https://github.com/Stuyk/altv-os-auth) 169 | - [Discord Authentication by Stuyk](https://github.com/Stuyk/altv-discord-auth) 170 | - [Global Blip Manager by Dzeknjak](https://github.com/jovanivanovic/altv-os-global-blip-manager) 171 | - [Global Marker Manager by Dzeknjak](https://github.com/jovanivanovic/altv-os-global-marker-manager) 172 | - [Chat by Dzeknjak](https://github.com/jovanivanovic/altv-os-chat) 173 | - [Nametags by Stuyk](https://github.com/Stuyk/altv-os-nametags) 174 | - [Entity Sync for JS by LeonMrBonnie](https://github.com/LeonMrBonnie/altv-os-js-entitysync) 175 | - [Context Menu by Stuyk](https://github.com/Stuyk/altv-os-context-menu) 176 | - [Global Textlabels by Stuyk](https://github.com/Stuyk/altv-os-global-textlabels) 177 | - [Interactions by LeonMrBonnie](https://github.com/LeonMrBonnie/altv-os-interactions) 178 | --------------------------------------------------------------------------------