├── LICENSE
├── README.md
├── client.lua
├── config.lua
├── fxmanifest.lua
├── ui
├── css
│ ├── app.css
│ └── custom.css
├── fonts
│ ├── ChaletComprimeCologneSixty.ttf
│ ├── ChaletLondonNineteenSixty.ttf
│ └── RobotoMono-Regular.ttf
├── js
│ ├── app.js
│ ├── class.RadialProgress.js
│ └── easings.js
└── ui.html
└── utils.lua
/LICENSE:
--------------------------------------------------------------------------------
1 | GNU GENERAL PUBLIC LICENSE
2 | Version 3, 29 June 2007
3 |
4 | Copyright (C) 2007 Free Software Foundation, Inc.
5 | Everyone is permitted to copy and distribute verbatim copies
6 | of this license document, but changing it is not allowed.
7 |
8 | Preamble
9 |
10 | The GNU General Public License is a free, copyleft license for
11 | software and other kinds of works.
12 |
13 | The licenses for most software and other practical works are designed
14 | to take away your freedom to share and change the works. By contrast,
15 | the GNU General Public License is intended to guarantee your freedom to
16 | share and change all versions of a program--to make sure it remains free
17 | software for all its users. We, the Free Software Foundation, use the
18 | GNU General Public License for most of our software; it applies also to
19 | any other work released this way by its authors. You can apply it to
20 | your programs, too.
21 |
22 | When we speak of free software, we are referring to freedom, not
23 | price. Our General Public Licenses are designed to make sure that you
24 | have the freedom to distribute copies of free software (and charge for
25 | them if you wish), that you receive source code or can get it if you
26 | want it, that you can change the software or use pieces of it in new
27 | free programs, and that you know you can do these things.
28 |
29 | To protect your rights, we need to prevent others from denying you
30 | these rights or asking you to surrender the rights. Therefore, you have
31 | certain responsibilities if you distribute copies of the software, or if
32 | you modify it: responsibilities to respect the freedom of others.
33 |
34 | For example, if you distribute copies of such a program, whether
35 | gratis or for a fee, you must pass on to the recipients the same
36 | freedoms that you received. You must make sure that they, too, receive
37 | or can get the source code. And you must show them these terms so they
38 | know their rights.
39 |
40 | Developers that use the GNU GPL protect your rights with two steps:
41 | (1) assert copyright on the software, and (2) offer you this License
42 | giving you legal permission to copy, distribute and/or modify it.
43 |
44 | For the developers' and authors' protection, the GPL clearly explains
45 | that there is no warranty for this free software. For both users' and
46 | authors' sake, the GPL requires that modified versions be marked as
47 | changed, so that their problems will not be attributed erroneously to
48 | authors of previous versions.
49 |
50 | Some devices are designed to deny users access to install or run
51 | modified versions of the software inside them, although the manufacturer
52 | can do so. This is fundamentally incompatible with the aim of
53 | protecting users' freedom to change the software. The systematic
54 | pattern of such abuse occurs in the area of products for individuals to
55 | use, which is precisely where it is most unacceptable. Therefore, we
56 | have designed this version of the GPL to prohibit the practice for those
57 | products. If such problems arise substantially in other domains, we
58 | stand ready to extend this provision to those domains in future versions
59 | of the GPL, as needed to protect the freedom of users.
60 |
61 | Finally, every program is threatened constantly by software patents.
62 | States should not allow patents to restrict development and use of
63 | software on general-purpose computers, but in those that do, we wish to
64 | avoid the special danger that patents applied to a free program could
65 | make it effectively proprietary. To prevent this, the GPL assures that
66 | patents cannot be used to render the program non-free.
67 |
68 | The precise terms and conditions for copying, distribution and
69 | modification follow.
70 |
71 | TERMS AND CONDITIONS
72 |
73 | 0. Definitions.
74 |
75 | "This License" refers to version 3 of the GNU General Public License.
76 |
77 | "Copyright" also means copyright-like laws that apply to other kinds of
78 | works, such as semiconductor masks.
79 |
80 | "The Program" refers to any copyrightable work licensed under this
81 | License. Each licensee is addressed as "you". "Licensees" and
82 | "recipients" may be individuals or organizations.
83 |
84 | To "modify" a work means to copy from or adapt all or part of the work
85 | in a fashion requiring copyright permission, other than the making of an
86 | exact copy. The resulting work is called a "modified version" of the
87 | earlier work or a work "based on" the earlier work.
88 |
89 | A "covered work" means either the unmodified Program or a work based
90 | on the Program.
91 |
92 | To "propagate" a work means to do anything with it that, without
93 | permission, would make you directly or secondarily liable for
94 | infringement under applicable copyright law, except executing it on a
95 | computer or modifying a private copy. Propagation includes copying,
96 | distribution (with or without modification), making available to the
97 | public, and in some countries other activities as well.
98 |
99 | To "convey" a work means any kind of propagation that enables other
100 | parties to make or receive copies. Mere interaction with a user through
101 | a computer network, with no transfer of a copy, is not conveying.
102 |
103 | An interactive user interface displays "Appropriate Legal Notices"
104 | to the extent that it includes a convenient and prominently visible
105 | feature that (1) displays an appropriate copyright notice, and (2)
106 | tells the user that there is no warranty for the work (except to the
107 | extent that warranties are provided), that licensees may convey the
108 | work under this License, and how to view a copy of this License. If
109 | the interface presents a list of user commands or options, such as a
110 | menu, a prominent item in the list meets this criterion.
111 |
112 | 1. Source Code.
113 |
114 | The "source code" for a work means the preferred form of the work
115 | for making modifications to it. "Object code" means any non-source
116 | form of a work.
117 |
118 | A "Standard Interface" means an interface that either is an official
119 | standard defined by a recognized standards body, or, in the case of
120 | interfaces specified for a particular programming language, one that
121 | is widely used among developers working in that language.
122 |
123 | The "System Libraries" of an executable work include anything, other
124 | than the work as a whole, that (a) is included in the normal form of
125 | packaging a Major Component, but which is not part of that Major
126 | Component, and (b) serves only to enable use of the work with that
127 | Major Component, or to implement a Standard Interface for which an
128 | implementation is available to the public in source code form. A
129 | "Major Component", in this context, means a major essential component
130 | (kernel, window system, and so on) of the specific operating system
131 | (if any) on which the executable work runs, or a compiler used to
132 | produce the work, or an object code interpreter used to run it.
133 |
134 | The "Corresponding Source" for a work in object code form means all
135 | the source code needed to generate, install, and (for an executable
136 | work) run the object code and to modify the work, including scripts to
137 | control those activities. However, it does not include the work's
138 | System Libraries, or general-purpose tools or generally available free
139 | programs which are used unmodified in performing those activities but
140 | which are not part of the work. For example, Corresponding Source
141 | includes interface definition files associated with source files for
142 | the work, and the source code for shared libraries and dynamically
143 | linked subprograms that the work is specifically designed to require,
144 | such as by intimate data communication or control flow between those
145 | subprograms and other parts of the work.
146 |
147 | The Corresponding Source need not include anything that users
148 | can regenerate automatically from other parts of the Corresponding
149 | Source.
150 |
151 | The Corresponding Source for a work in source code form is that
152 | same work.
153 |
154 | 2. Basic Permissions.
155 |
156 | All rights granted under this License are granted for the term of
157 | copyright on the Program, and are irrevocable provided the stated
158 | conditions are met. This License explicitly affirms your unlimited
159 | permission to run the unmodified Program. The output from running a
160 | covered work is covered by this License only if the output, given its
161 | content, constitutes a covered work. This License acknowledges your
162 | rights of fair use or other equivalent, as provided by copyright law.
163 |
164 | You may make, run and propagate covered works that you do not
165 | convey, without conditions so long as your license otherwise remains
166 | in force. You may convey covered works to others for the sole purpose
167 | of having them make modifications exclusively for you, or provide you
168 | with facilities for running those works, provided that you comply with
169 | the terms of this License in conveying all material for which you do
170 | not control copyright. Those thus making or running the covered works
171 | for you must do so exclusively on your behalf, under your direction
172 | and control, on terms that prohibit them from making any copies of
173 | your copyrighted material outside their relationship with you.
174 |
175 | Conveying under any other circumstances is permitted solely under
176 | the conditions stated below. Sublicensing is not allowed; section 10
177 | makes it unnecessary.
178 |
179 | 3. Protecting Users' Legal Rights From Anti-Circumvention Law.
180 |
181 | No covered work shall be deemed part of an effective technological
182 | measure under any applicable law fulfilling obligations under article
183 | 11 of the WIPO copyright treaty adopted on 20 December 1996, or
184 | similar laws prohibiting or restricting circumvention of such
185 | measures.
186 |
187 | When you convey a covered work, you waive any legal power to forbid
188 | circumvention of technological measures to the extent such circumvention
189 | is effected by exercising rights under this License with respect to
190 | the covered work, and you disclaim any intention to limit operation or
191 | modification of the work as a means of enforcing, against the work's
192 | users, your or third parties' legal rights to forbid circumvention of
193 | technological measures.
194 |
195 | 4. Conveying Verbatim Copies.
196 |
197 | You may convey verbatim copies of the Program's source code as you
198 | receive it, in any medium, provided that you conspicuously and
199 | appropriately publish on each copy an appropriate copyright notice;
200 | keep intact all notices stating that this License and any
201 | non-permissive terms added in accord with section 7 apply to the code;
202 | keep intact all notices of the absence of any warranty; and give all
203 | recipients a copy of this License along with the Program.
204 |
205 | You may charge any price or no price for each copy that you convey,
206 | and you may offer support or warranty protection for a fee.
207 |
208 | 5. Conveying Modified Source Versions.
209 |
210 | You may convey a work based on the Program, or the modifications to
211 | produce it from the Program, in the form of source code under the
212 | terms of section 4, provided that you also meet all of these conditions:
213 |
214 | a) The work must carry prominent notices stating that you modified
215 | it, and giving a relevant date.
216 |
217 | b) The work must carry prominent notices stating that it is
218 | released under this License and any conditions added under section
219 | 7. This requirement modifies the requirement in section 4 to
220 | "keep intact all notices".
221 |
222 | c) You must license the entire work, as a whole, under this
223 | License to anyone who comes into possession of a copy. This
224 | License will therefore apply, along with any applicable section 7
225 | additional terms, to the whole of the work, and all its parts,
226 | regardless of how they are packaged. This License gives no
227 | permission to license the work in any other way, but it does not
228 | invalidate such permission if you have separately received it.
229 |
230 | d) If the work has interactive user interfaces, each must display
231 | Appropriate Legal Notices; however, if the Program has interactive
232 | interfaces that do not display Appropriate Legal Notices, your
233 | work need not make them do so.
234 |
235 | A compilation of a covered work with other separate and independent
236 | works, which are not by their nature extensions of the covered work,
237 | and which are not combined with it such as to form a larger program,
238 | in or on a volume of a storage or distribution medium, is called an
239 | "aggregate" if the compilation and its resulting copyright are not
240 | used to limit the access or legal rights of the compilation's users
241 | beyond what the individual works permit. Inclusion of a covered work
242 | in an aggregate does not cause this License to apply to the other
243 | parts of the aggregate.
244 |
245 | 6. Conveying Non-Source Forms.
246 |
247 | You may convey a covered work in object code form under the terms
248 | of sections 4 and 5, provided that you also convey the
249 | machine-readable Corresponding Source under the terms of this License,
250 | in one of these ways:
251 |
252 | a) Convey the object code in, or embodied in, a physical product
253 | (including a physical distribution medium), accompanied by the
254 | Corresponding Source fixed on a durable physical medium
255 | customarily used for software interchange.
256 |
257 | b) Convey the object code in, or embodied in, a physical product
258 | (including a physical distribution medium), accompanied by a
259 | written offer, valid for at least three years and valid for as
260 | long as you offer spare parts or customer support for that product
261 | model, to give anyone who possesses the object code either (1) a
262 | copy of the Corresponding Source for all the software in the
263 | product that is covered by this License, on a durable physical
264 | medium customarily used for software interchange, for a price no
265 | more than your reasonable cost of physically performing this
266 | conveying of source, or (2) access to copy the
267 | Corresponding Source from a network server at no charge.
268 |
269 | c) Convey individual copies of the object code with a copy of the
270 | written offer to provide the Corresponding Source. This
271 | alternative is allowed only occasionally and noncommercially, and
272 | only if you received the object code with such an offer, in accord
273 | with subsection 6b.
274 |
275 | d) Convey the object code by offering access from a designated
276 | place (gratis or for a charge), and offer equivalent access to the
277 | Corresponding Source in the same way through the same place at no
278 | further charge. You need not require recipients to copy the
279 | Corresponding Source along with the object code. If the place to
280 | copy the object code is a network server, the Corresponding Source
281 | may be on a different server (operated by you or a third party)
282 | that supports equivalent copying facilities, provided you maintain
283 | clear directions next to the object code saying where to find the
284 | Corresponding Source. Regardless of what server hosts the
285 | Corresponding Source, you remain obligated to ensure that it is
286 | available for as long as needed to satisfy these requirements.
287 |
288 | e) Convey the object code using peer-to-peer transmission, provided
289 | you inform other peers where the object code and Corresponding
290 | Source of the work are being offered to the general public at no
291 | charge under subsection 6d.
292 |
293 | A separable portion of the object code, whose source code is excluded
294 | from the Corresponding Source as a System Library, need not be
295 | included in conveying the object code work.
296 |
297 | A "User Product" is either (1) a "consumer product", which means any
298 | tangible personal property which is normally used for personal, family,
299 | or household purposes, or (2) anything designed or sold for incorporation
300 | into a dwelling. In determining whether a product is a consumer product,
301 | doubtful cases shall be resolved in favor of coverage. For a particular
302 | product received by a particular user, "normally used" refers to a
303 | typical or common use of that class of product, regardless of the status
304 | of the particular user or of the way in which the particular user
305 | actually uses, or expects or is expected to use, the product. A product
306 | is a consumer product regardless of whether the product has substantial
307 | commercial, industrial or non-consumer uses, unless such uses represent
308 | the only significant mode of use of the product.
309 |
310 | "Installation Information" for a User Product means any methods,
311 | procedures, authorization keys, or other information required to install
312 | and execute modified versions of a covered work in that User Product from
313 | a modified version of its Corresponding Source. The information must
314 | suffice to ensure that the continued functioning of the modified object
315 | code is in no case prevented or interfered with solely because
316 | modification has been made.
317 |
318 | If you convey an object code work under this section in, or with, or
319 | specifically for use in, a User Product, and the conveying occurs as
320 | part of a transaction in which the right of possession and use of the
321 | User Product is transferred to the recipient in perpetuity or for a
322 | fixed term (regardless of how the transaction is characterized), the
323 | Corresponding Source conveyed under this section must be accompanied
324 | by the Installation Information. But this requirement does not apply
325 | if neither you nor any third party retains the ability to install
326 | modified object code on the User Product (for example, the work has
327 | been installed in ROM).
328 |
329 | The requirement to provide Installation Information does not include a
330 | requirement to continue to provide support service, warranty, or updates
331 | for a work that has been modified or installed by the recipient, or for
332 | the User Product in which it has been modified or installed. Access to a
333 | network may be denied when the modification itself materially and
334 | adversely affects the operation of the network or violates the rules and
335 | protocols for communication across the network.
336 |
337 | Corresponding Source conveyed, and Installation Information provided,
338 | in accord with this section must be in a format that is publicly
339 | documented (and with an implementation available to the public in
340 | source code form), and must require no special password or key for
341 | unpacking, reading or copying.
342 |
343 | 7. Additional Terms.
344 |
345 | "Additional permissions" are terms that supplement the terms of this
346 | License by making exceptions from one or more of its conditions.
347 | Additional permissions that are applicable to the entire Program shall
348 | be treated as though they were included in this License, to the extent
349 | that they are valid under applicable law. If additional permissions
350 | apply only to part of the Program, that part may be used separately
351 | under those permissions, but the entire Program remains governed by
352 | this License without regard to the additional permissions.
353 |
354 | When you convey a copy of a covered work, you may at your option
355 | remove any additional permissions from that copy, or from any part of
356 | it. (Additional permissions may be written to require their own
357 | removal in certain cases when you modify the work.) You may place
358 | additional permissions on material, added by you to a covered work,
359 | for which you have or can give appropriate copyright permission.
360 |
361 | Notwithstanding any other provision of this License, for material you
362 | add to a covered work, you may (if authorized by the copyright holders of
363 | that material) supplement the terms of this License with terms:
364 |
365 | a) Disclaiming warranty or limiting liability differently from the
366 | terms of sections 15 and 16 of this License; or
367 |
368 | b) Requiring preservation of specified reasonable legal notices or
369 | author attributions in that material or in the Appropriate Legal
370 | Notices displayed by works containing it; or
371 |
372 | c) Prohibiting misrepresentation of the origin of that material, or
373 | requiring that modified versions of such material be marked in
374 | reasonable ways as different from the original version; or
375 |
376 | d) Limiting the use for publicity purposes of names of licensors or
377 | authors of the material; or
378 |
379 | e) Declining to grant rights under trademark law for use of some
380 | trade names, trademarks, or service marks; or
381 |
382 | f) Requiring indemnification of licensors and authors of that
383 | material by anyone who conveys the material (or modified versions of
384 | it) with contractual assumptions of liability to the recipient, for
385 | any liability that these contractual assumptions directly impose on
386 | those licensors and authors.
387 |
388 | All other non-permissive additional terms are considered "further
389 | restrictions" within the meaning of section 10. If the Program as you
390 | received it, or any part of it, contains a notice stating that it is
391 | governed by this License along with a term that is a further
392 | restriction, you may remove that term. If a license document contains
393 | a further restriction but permits relicensing or conveying under this
394 | License, you may add to a covered work material governed by the terms
395 | of that license document, provided that the further restriction does
396 | not survive such relicensing or conveying.
397 |
398 | If you add terms to a covered work in accord with this section, you
399 | must place, in the relevant source files, a statement of the
400 | additional terms that apply to those files, or a notice indicating
401 | where to find the applicable terms.
402 |
403 | Additional terms, permissive or non-permissive, may be stated in the
404 | form of a separately written license, or stated as exceptions;
405 | the above requirements apply either way.
406 |
407 | 8. Termination.
408 |
409 | You may not propagate or modify a covered work except as expressly
410 | provided under this License. Any attempt otherwise to propagate or
411 | modify it is void, and will automatically terminate your rights under
412 | this License (including any patent licenses granted under the third
413 | paragraph of section 11).
414 |
415 | However, if you cease all violation of this License, then your
416 | license from a particular copyright holder is reinstated (a)
417 | provisionally, unless and until the copyright holder explicitly and
418 | finally terminates your license, and (b) permanently, if the copyright
419 | holder fails to notify you of the violation by some reasonable means
420 | prior to 60 days after the cessation.
421 |
422 | Moreover, your license from a particular copyright holder is
423 | reinstated permanently if the copyright holder notifies you of the
424 | violation by some reasonable means, this is the first time you have
425 | received notice of violation of this License (for any work) from that
426 | copyright holder, and you cure the violation prior to 30 days after
427 | your receipt of the notice.
428 |
429 | Termination of your rights under this section does not terminate the
430 | licenses of parties who have received copies or rights from you under
431 | this License. If your rights have been terminated and not permanently
432 | reinstated, you do not qualify to receive new licenses for the same
433 | material under section 10.
434 |
435 | 9. Acceptance Not Required for Having Copies.
436 |
437 | You are not required to accept this License in order to receive or
438 | run a copy of the Program. Ancillary propagation of a covered work
439 | occurring solely as a consequence of using peer-to-peer transmission
440 | to receive a copy likewise does not require acceptance. However,
441 | nothing other than this License grants you permission to propagate or
442 | modify any covered work. These actions infringe copyright if you do
443 | not accept this License. Therefore, by modifying or propagating a
444 | covered work, you indicate your acceptance of this License to do so.
445 |
446 | 10. Automatic Licensing of Downstream Recipients.
447 |
448 | Each time you convey a covered work, the recipient automatically
449 | receives a license from the original licensors, to run, modify and
450 | propagate that work, subject to this License. You are not responsible
451 | for enforcing compliance by third parties with this License.
452 |
453 | An "entity transaction" is a transaction transferring control of an
454 | organization, or substantially all assets of one, or subdividing an
455 | organization, or merging organizations. If propagation of a covered
456 | work results from an entity transaction, each party to that
457 | transaction who receives a copy of the work also receives whatever
458 | licenses to the work the party's predecessor in interest had or could
459 | give under the previous paragraph, plus a right to possession of the
460 | Corresponding Source of the work from the predecessor in interest, if
461 | the predecessor has it or can get it with reasonable efforts.
462 |
463 | You may not impose any further restrictions on the exercise of the
464 | rights granted or affirmed under this License. For example, you may
465 | not impose a license fee, royalty, or other charge for exercise of
466 | rights granted under this License, and you may not initiate litigation
467 | (including a cross-claim or counterclaim in a lawsuit) alleging that
468 | any patent claim is infringed by making, using, selling, offering for
469 | sale, or importing the Program or any portion of it.
470 |
471 | 11. Patents.
472 |
473 | A "contributor" is a copyright holder who authorizes use under this
474 | License of the Program or a work on which the Program is based. The
475 | work thus licensed is called the contributor's "contributor version".
476 |
477 | A contributor's "essential patent claims" are all patent claims
478 | owned or controlled by the contributor, whether already acquired or
479 | hereafter acquired, that would be infringed by some manner, permitted
480 | by this License, of making, using, or selling its contributor version,
481 | but do not include claims that would be infringed only as a
482 | consequence of further modification of the contributor version. For
483 | purposes of this definition, "control" includes the right to grant
484 | patent sublicenses in a manner consistent with the requirements of
485 | this License.
486 |
487 | Each contributor grants you a non-exclusive, worldwide, royalty-free
488 | patent license under the contributor's essential patent claims, to
489 | make, use, sell, offer for sale, import and otherwise run, modify and
490 | propagate the contents of its contributor version.
491 |
492 | In the following three paragraphs, a "patent license" is any express
493 | agreement or commitment, however denominated, not to enforce a patent
494 | (such as an express permission to practice a patent or covenant not to
495 | sue for patent infringement). To "grant" such a patent license to a
496 | party means to make such an agreement or commitment not to enforce a
497 | patent against the party.
498 |
499 | If you convey a covered work, knowingly relying on a patent license,
500 | and the Corresponding Source of the work is not available for anyone
501 | to copy, free of charge and under the terms of this License, through a
502 | publicly available network server or other readily accessible means,
503 | then you must either (1) cause the Corresponding Source to be so
504 | available, or (2) arrange to deprive yourself of the benefit of the
505 | patent license for this particular work, or (3) arrange, in a manner
506 | consistent with the requirements of this License, to extend the patent
507 | license to downstream recipients. "Knowingly relying" means you have
508 | actual knowledge that, but for the patent license, your conveying the
509 | covered work in a country, or your recipient's use of the covered work
510 | in a country, would infringe one or more identifiable patents in that
511 | country that you have reason to believe are valid.
512 |
513 | If, pursuant to or in connection with a single transaction or
514 | arrangement, you convey, or propagate by procuring conveyance of, a
515 | covered work, and grant a patent license to some of the parties
516 | receiving the covered work authorizing them to use, propagate, modify
517 | or convey a specific copy of the covered work, then the patent license
518 | you grant is automatically extended to all recipients of the covered
519 | work and works based on it.
520 |
521 | A patent license is "discriminatory" if it does not include within
522 | the scope of its coverage, prohibits the exercise of, or is
523 | conditioned on the non-exercise of one or more of the rights that are
524 | specifically granted under this License. You may not convey a covered
525 | work if you are a party to an arrangement with a third party that is
526 | in the business of distributing software, under which you make payment
527 | to the third party based on the extent of your activity of conveying
528 | the work, and under which the third party grants, to any of the
529 | parties who would receive the covered work from you, a discriminatory
530 | patent license (a) in connection with copies of the covered work
531 | conveyed by you (or copies made from those copies), or (b) primarily
532 | for and in connection with specific products or compilations that
533 | contain the covered work, unless you entered into that arrangement,
534 | or that patent license was granted, prior to 28 March 2007.
535 |
536 | Nothing in this License shall be construed as excluding or limiting
537 | any implied license or other defenses to infringement that may
538 | otherwise be available to you under applicable patent law.
539 |
540 | 12. No Surrender of Others' Freedom.
541 |
542 | If conditions are imposed on you (whether by court order, agreement or
543 | otherwise) that contradict the conditions of this License, they do not
544 | excuse you from the conditions of this License. If you cannot convey a
545 | covered work so as to satisfy simultaneously your obligations under this
546 | License and any other pertinent obligations, then as a consequence you may
547 | not convey it at all. For example, if you agree to terms that obligate you
548 | to collect a royalty for further conveying from those to whom you convey
549 | the Program, the only way you could satisfy both those terms and this
550 | License would be to refrain entirely from conveying the Program.
551 |
552 | 13. Use with the GNU Affero General Public License.
553 |
554 | Notwithstanding any other provision of this License, you have
555 | permission to link or combine any covered work with a work licensed
556 | under version 3 of the GNU Affero General Public License into a single
557 | combined work, and to convey the resulting work. The terms of this
558 | License will continue to apply to the part which is the covered work,
559 | but the special requirements of the GNU Affero General Public License,
560 | section 13, concerning interaction through a network will apply to the
561 | combination as such.
562 |
563 | 14. Revised Versions of this License.
564 |
565 | The Free Software Foundation may publish revised and/or new versions of
566 | the GNU General Public License from time to time. Such new versions will
567 | be similar in spirit to the present version, but may differ in detail to
568 | address new problems or concerns.
569 |
570 | Each version is given a distinguishing version number. If the
571 | Program specifies that a certain numbered version of the GNU General
572 | Public License "or any later version" applies to it, you have the
573 | option of following the terms and conditions either of that numbered
574 | version or of any later version published by the Free Software
575 | Foundation. If the Program does not specify a version number of the
576 | GNU General Public License, you may choose any version ever published
577 | by the Free Software Foundation.
578 |
579 | If the Program specifies that a proxy can decide which future
580 | versions of the GNU General Public License can be used, that proxy's
581 | public statement of acceptance of a version permanently authorizes you
582 | to choose that version for the Program.
583 |
584 | Later license versions may give you additional or different
585 | permissions. However, no additional obligations are imposed on any
586 | author or copyright holder as a result of your choosing to follow a
587 | later version.
588 |
589 | 15. Disclaimer of Warranty.
590 |
591 | THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
592 | APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
593 | HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
594 | OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
595 | THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
596 | PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
597 | IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
598 | ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
599 |
600 | 16. Limitation of Liability.
601 |
602 | IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
603 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
604 | THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
605 | GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
606 | USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
607 | DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
608 | PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
609 | EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
610 | SUCH DAMAGES.
611 |
612 | 17. Interpretation of Sections 15 and 16.
613 |
614 | If the disclaimer of warranty and limitation of liability provided
615 | above cannot be given local legal effect according to their terms,
616 | reviewing courts shall apply local law that most closely approximates
617 | an absolute waiver of all civil liability in connection with the
618 | Program, unless a warranty or assumption of liability accompanies a
619 | copy of the Program in return for a fee.
620 |
621 | END OF TERMS AND CONDITIONS
622 |
623 | How to Apply These Terms to Your New Programs
624 |
625 | If you develop a new program, and you want it to be of the greatest
626 | possible use to the public, the best way to achieve this is to make it
627 | free software which everyone can redistribute and change under these terms.
628 |
629 | To do so, attach the following notices to the program. It is safest
630 | to attach them to the start of each source file to most effectively
631 | state the exclusion of warranty; and each file should have at least
632 | the "copyright" line and a pointer to where the full notice is found.
633 |
634 |
635 | Copyright (C)
636 |
637 | This program is free software: you can redistribute it and/or modify
638 | it under the terms of the GNU General Public License as published by
639 | the Free Software Foundation, either version 3 of the License, or
640 | (at your option) any later version.
641 |
642 | This program is distributed in the hope that it will be useful,
643 | but WITHOUT ANY WARRANTY; without even the implied warranty of
644 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
645 | GNU General Public License for more details.
646 |
647 | You should have received a copy of the GNU General Public License
648 | along with this program. If not, see .
649 |
650 | Also add information on how to contact you by electronic and paper mail.
651 |
652 | If the program does terminal interaction, make it output a short
653 | notice like this when it starts in an interactive mode:
654 |
655 | Copyright (C)
656 | This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
657 | This is free software, and you are welcome to redistribute it
658 | under certain conditions; type `show c' for details.
659 |
660 | The hypothetical commands `show w' and `show c' should show the appropriate
661 | parts of the General Public License. Of course, your program's commands
662 | might be different; for a GUI interface, you would use an "about box".
663 |
664 | You should also get your employer (if you work as a programmer) or school,
665 | if any, to sign a "copyright disclaimer" for the program, if necessary.
666 | For more information on this, and how to apply and follow the GNU GPL, see
667 | .
668 |
669 | The GNU General Public License does not permit incorporating your program
670 | into proprietary programs. If your program is a subroutine library, you
671 | may consider it more useful to permit linking proprietary applications with
672 | the library. If this is what you want to do, use the GNU Lesser General
673 | Public License instead of this License. But first, please read
674 | .
675 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # rprogress
2 | Customisable radial progress bars for FiveM.
3 |
4 | ## Table of contents
5 | * [Demo Videos](#demo-videos)
6 | * [Requirements](#requirements)
7 | * [Download & Installation](#download--installation)
8 | * [Configuration](#configuration)
9 | * [Upgrading](#upgrading)
10 | * [Client Functions](#client-functions)
11 | * [Scenarios and Animations](#scenarios-and-animations)
12 | * [MiniGame](#minigame)
13 | * [Sync vs Async](#sync-vs-async)
14 | * [Static Progress Dials](#static-progress-dials)
15 | * [Partial Progress Dials](#partial-progress-dials)
16 | * [Pie Progress](#pie-progress)
17 | * [Demo Commands](#demo-commands)
18 | * [Contributing](#contributing)
19 | * [To Do](#to-do)
20 |
21 | ## Demo Videos
22 | * [Default](https://streamable.com/85j3gt)
23 | * [Custom MaxAngle and Rotation](https://streamable.com/i6lhxx)
24 | * [Animations](https://streamable.com/23r6jg)
25 | * [Without Timer](https://streamable.com/d7qil2)
26 | * [Demo with esx_doorlock](https://streamable.com/94b0ph)
27 | * [Custom Label Position](https://streamable.com/4mqwgx)
28 | * [Static Progress Dial](https://streamable.com/uzbfsd)
29 | * [Mini Game](https://streamable.com/azhzhz)
30 |
31 | ## Requirements
32 |
33 | * None!
34 |
35 | ## Download & Installation
36 |
37 | * Download and extract the package: https://github.com/Mobius1/rprogress/archive/master.zip
38 | * Drop the `rprogress-master` directory into you `resources` directory
39 | * Rename the directory from `rprogress-master` to `rprogress`
40 | * Add `ensure rprogress` in your `server.cfg`
41 | * Edit `config.lua` to your liking
42 | * Start your server and rejoice!
43 |
44 | ## Configuration
45 |
46 | ```lua
47 | Config.Async = true -- Whether to run the progress dial asyncronously
48 |
49 | Config.From = 0 -- Starting progress percentage
50 | Config.To = 100 -- Ending progress percentage
51 |
52 | Config.Duration = 5000 -- Duration of the progress
53 | Config.Label = "Loading..." -- Text shown with the dial
54 | Config.LabelPosition = "bottom"
55 |
56 | Config.Color = "rgba(255, 255, 255, 1.0)" -- Progress dial colour
57 | Config.BGColor = "rgba(0, 0, 0, 0.4)" -- Progress background colour
58 | Config.ZoneColor = "rgba(51, 105, 30, 1)" -- Minigame Zone colour
59 |
60 | Config.x = 0.5 -- Horizontal position
61 | Config.y = 0.5 -- Vertical position
62 |
63 | Config.Rotation = 0 -- Rotation angle of dial
64 | Config.MaxAngle = 360 -- Max arc in degrees - 360 will be a full circle, 90 will be a quarter of a circle, etc
65 | Config.Radius = 60 -- Radius of the radial dial
66 | Config.Stroke = 10 -- stroke width of the radial dial
67 | Config.Width = 300 -- Width of the linear bar
68 | Config.Height = 40 -- Height of the linear bar
69 | Config.Cap = 'butt' -- or 'round'
70 | Config.Padding = 0 -- Background bar padding
71 | Config.CancelKey = 178 -- Key used for cancelling progress
72 |
73 | Config.ShowTimer = true -- Shows the timer countdown within the radial dial
74 | Config.ShowProgress = false -- Shows the progress within the radial dial
75 |
76 | Config.Easing = "easeLinear" -- The easing used for the dial animation - see "rprogress/ui/js/easings.js"
77 |
78 | Config.DisableControls = {
79 | Mouse = false, -- Disable mouse controls until progress is complete
80 | Player = false, -- Disable player movement until progress is complete
81 | Vehicle = false -- Disable vehicle control until progress is complete
82 | }
83 | ```
84 | NOTE: `Config.Position` is based on screen size so setting `Config.Position.x = 0.5` will be the center of the screen, `Config.Position.x = 1.0` with be right-side of the screen, `Config.Position.x = 0.0` will be the left-side of the screen, etc.
85 |
86 | ## Upgrading
87 |
88 | #### Upgrading to v0.6.0
89 | Replace all instances of `exports.rprogress:NewStaticProgress` with `exports.rprogress:Static`
90 |
91 | ## Client Functions
92 |
93 | NOTE: DO NOT run these in a loop
94 |
95 | Available exports:
96 |
97 | ```lua
98 | -- starts the progress dial for the defined duration
99 | -- This runs in sync so any code after this call won't be run until the progress is complete
100 | exports.rprogress:Start(text, duration)
101 |
102 | -- stops the progress dial early
103 | exports.rprogress:Stop()
104 |
105 | -- Display a custom progress dial by overriding config.lua values
106 | exports.rprogress:Custom(options)
107 |
108 | -- Create a static progress dial
109 | exports.rprogress:Static(options)
110 |
111 | -- Create a linear progress bar
112 | exports.rprogress:Linear(text, duration)
113 |
114 | -- or
115 |
116 | exports.rprogress:Custom({
117 | Type = 'linear'
118 | Duration = 3000,
119 | Width = 400,
120 | Height = 50,
121 | y = 0.75
122 | })
123 | ```
124 |
125 | ##### Display a progress dial with text for set duration
126 |
127 | ```lua
128 | exports.rprogress:Start(text, duration)
129 | ```
130 |
131 | ##### Stop the progress dial early
132 | ```lua
133 | exports.rprogress:Stop()
134 | ```
135 |
136 | ##### Create a custom progress instance
137 | ```lua
138 | exports.rprogress:Custom({
139 | Async = true,
140 | canCancel = true, -- Allow cancelling
141 | cancelKey = 178, -- Custom cancel key
142 | x = 0.5, -- Position on x-axis
143 | y = 0.5, -- Position on y-axis
144 | From = 0, -- Percentage to start from
145 | To = 100, -- Percentage to end
146 | Duration = 1000, -- Duration of the progress
147 | Radius = 60, -- Radius of the dial
148 | Stroke = 10, -- Thickness of the progress dial
149 | Cap = 'butt', -- or 'round'
150 | Padding = 0, -- Padding between the progress dial and the background dial
151 | MaxAngle = 360, -- Maximum sweep angle of the dial in degrees
152 | Rotation = 0, -- 2D rotation of the dial in degrees
153 | Width = 300, -- Width of bar in px if Type = 'linear'
154 | Height = 40, -- Height of bar in px if Type = 'linear'
155 | ShowTimer = true, -- Shows the timer countdown within the radial dial
156 | ShowProgress = false, -- Shows the progress % within the radial dial
157 | Easing = "easeLinear",
158 | Label = "My Custom Label",
159 | LabelPosition = "right",
160 | Color = "rgba(255, 255, 255, 1.0)",
161 | BGColor = "rgba(0, 0, 0, 0.4)",
162 | ZoneColor = "rgba(51, 105, 30, 1)",
163 | Animation = {
164 | scenario = "WORLD_HUMAN_AA_SMOKE", -- https://pastebin.com/6mrYTdQv
165 | animationDictionary = "missheistfbisetup1", -- https://alexguirre.github.io/animations-list/
166 | animationName = "unlock_loop_janitor",
167 | },
168 | DisableControls = {
169 | Mouse = true,
170 | Player = true,
171 | Vehicle = true
172 | },
173 | onStart = function()
174 | -- do something when progress starts
175 | end,
176 | onComplete = function(cancelled)
177 | -- cancelled: boolean - whether player cancelled the progress
178 |
179 | -- do something when progress is complete
180 | end
181 | })
182 | ```
183 |
184 | ## Scenarios and Animations
185 | `rprogress` allows you to run a scenario or play an animation while the progress dial is running.
186 |
187 | If you want to run a scenario, then provide the `Animation` table with the `scenario` key.
188 |
189 | ```lua
190 | exports.rprogress:Custom({
191 | Animation = {
192 | scenario = "WORLD_HUMAN_AA_SMOKE"
193 | }
194 | })
195 | ```
196 |
197 | You can find a list of scenarios [here](https://pastebin.com/6mrYTdQv)
198 |
199 | If you want to play an animation, then provide the `Animation` table with the required `animationDictionary` and `animationName` keys. You can also provide the optional `flag` key (see [`TaskPlayAnim`](https://wiki.rage.mp/index.php?title=Player::taskPlayAnim)).
200 | ```lua
201 | exports.rprogress:Custom({
202 | Animation = {
203 | animationDictionary = "missheistfbisetup1",
204 | animationName = "unlock_loop_janitor",
205 | flag = 1, -- optional
206 | }
207 | })
208 | ```
209 |
210 | You can find a list of animation dictionaries / names [here](https://alexguirre.github.io/animations-list/).
211 |
212 | If `scenario` is set as well as `animationDictionary` and `animationName`, then the `scenario` will take priority.
213 |
214 | ## MiniGame
215 | `rProgress` can be set up to allow a minigame to test player reflexes by utilising the `MiniGame()` method.
216 |
217 | The progress bar will flip back and forth and display a trigger zone for the player to hit the `SpaceBar` when the progress bar is within it.
218 |
219 | As with the `Custom()` method, you can pass a variety of options. The `onComplete` callback will return the `success` parameter to indicate whether the player was successful or not.
220 |
221 | ```lua
222 | exports.rprogress:MiniGame({
223 | Difficulty = "Easy",
224 | Timeout = 5000, -- Duration before minigame is cancelled
225 | onComplete = function(success)
226 | if success then
227 | -- Player was successful
228 | else
229 | -- Player was unsuccessful
230 | end
231 | end,
232 | onTimeout = function()
233 | -- Player took too long to respond
234 | end
235 | })
236 | ```
237 |
238 | You can define the defficulties in the `config.lua` file:
239 | ```lua
240 | Config.MiniGameOptions = {
241 | MaxAngle = 240,
242 | Rotation = -120,
243 | Difficulty = {
244 | Easy = {
245 | Zone = 40,
246 | Duration = 500
247 | },
248 | Medium = {
249 | Zone = 25,
250 | Duration = 450
251 | },
252 | Hard = {
253 | Zone = 20,
254 | Duration = 400
255 | }
256 | }
257 | }
258 | ```
259 |
260 | To add you own difficulty you can define it in the `Config.MiniGameOptions.Difficulty` table and add the `Zone` and `Duration` values:
261 |
262 | ```lua
263 | Config.MiniGameOptions = {
264 | MaxAngle = 240,
265 | Rotation = -120,
266 | Difficulty = {
267 | Custom = {
268 | Zone = 40, -- The percentage of the dial that is the trigger zone (lower = harder)
269 | Duration = 1000 -- Time in milliseconds for the dial to fill in one direction (lower = harder)
270 | }
271 | }
272 | }
273 | ```
274 |
275 | Then use it in the `MiniGame()` method:
276 |
277 | ```lua
278 | exports.rprogress:MiniGame({
279 | Difficulty = "Custom",
280 | onComplete = function(success)
281 |
282 | end
283 | })
284 | ```
285 |
286 | You can also pass the `Zone` and `Duration` values instead of `Difficulty` for on-the-fly difficulty settings:
287 |
288 | ```lua
289 | exports.rprogress:MiniGame({
290 | Zone = 40,
291 | Duration = 750,
292 | onComplete = function(success)
293 |
294 | end
295 | })
296 | ```
297 |
298 | ## Sync vs Async
299 |
300 | The `Start()` method runs in sync so any code after the call to the method won't be run until the progress is complete. If you want a progress dial to run asyncronously, you can use the `Custom()` method with `Async` set to `true` and utilise the `onStart` and `onComplete` callbacks.
301 |
302 | ##### Async
303 | ```lua
304 | print("before")
305 |
306 | exports.rprogress:Custom({
307 | Async = true,
308 | Duration = 3000,
309 | onStart = function()
310 | print("start")
311 | end
312 | onComplete = function()
313 | print("complete")
314 | end
315 | })
316 |
317 | print("after")
318 | ```
319 |
320 | ##### Output
321 | ```lua
322 | before
323 | after
324 | start
325 | complete
326 | ```
327 |
328 | ##### Sync
329 | ```lua
330 | print("before")
331 |
332 | exports.rprogress:Custom({
333 | Async = false,
334 | Duration = 3000,
335 | onStart = function()
336 | print("start")
337 | end
338 | onComplete = function()
339 | print("complete")
340 | end
341 | })
342 |
343 | print("after")
344 | ```
345 |
346 | ###### Output
347 | ```lua
348 | before
349 | start
350 | complete
351 | after
352 | ```
353 |
354 | ## Static Progress Dials
355 |
356 | If you don't just want a progress dial that fills automatically, you can create a static one and update it as required.
357 |
358 | [Demo Video](https://streamable.com/uzbfsd)
359 |
360 | ```lua
361 | -- Create new static progress dial
362 | local staticDial = exports.rprogress:Static(options)
363 |
364 | -- Show the progress dial
365 | staticDial.Show()
366 |
367 | -- Update the progress of the dial (0-100)
368 | staticDial.SetProgress(progress)
369 |
370 | -- Hide the progress dial
371 | staticDial.Hide()
372 |
373 | -- Destroy the dial (set as no longer needed)
374 | staticDial.Destroy()
375 | ```
376 |
377 | ## Partial Progress Dials
378 |
379 | To create a partial progress dial set the `maxAngle` property to the desired value:
380 | ```lua
381 | exports.rprogress:Custom({
382 | maxAngle: 240
383 | })
384 | ```
385 | #### Result
386 | 
387 |
388 | You can also set `rotation` property to the desired value:
389 | ```lua
390 | exports.rprogress:Custom({
391 | maxAngle: 240,
392 | rotation: -120
393 | })
394 | ```
395 |
396 | #### Result
397 | 
398 |
399 | ## Pie Progress
400 | Setting the `radius` and `stroke` properties to equal values will produce a pie chart type progress:
401 | ```lua
402 | exports.rprogress:Custom({
403 | Radius: 60,
404 | Stroke: 60
405 | })
406 | ```
407 |
408 | #### Result
409 | 
410 |
411 | ## Demo Commands
412 |
413 | ```lua
414 | /rprogressStart [text] [duration]
415 | /rprogressCustom [from] [to] [duration] [radius] [stroke] [MaxAngle] [rotation] [padding] [cap]
416 | /rprogressMiniGame [difficulty]
417 | /rprogressSync [duration]
418 | /rprogressAsync [duration]
419 | /rprogressStatic
420 | /rprogressEasing [functionName] [duration]
421 | /rprogressAnimation [animDictionary] [animName] [duration]
422 | /rprogressScenario [scenarioName] [duration]
423 | ```
424 |
425 | You can delete the `demo.lua` file and remove it's entry from `fxmanifest.lua` if these are not required.
426 |
427 | ## Contributing
428 | Pull requests welcome.
429 |
430 |
431 | ## Legal
432 |
433 | ### License
434 |
435 | ```
436 | rprogress - Customisable radial progress dials for FiveM.
437 |
438 | Copyright (C) 2020 Karl Saunders
439 |
440 | This program is free software: you can redistribute it and/or modify
441 | it under the terms of the GNU General Public License as published by
442 | the Free Software Foundation, either version 3 of the License, or
443 | (at your option) any later version.
444 |
445 | This program is distributed in the hope that it will be useful,
446 | but WITHOUT ANY WARRANTY; without even the implied warranty of
447 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
448 | GNU General Public License for more details.
449 |
450 | You should have received a copy of the GNU General Public License
451 | along with this program. If not, see
452 | ```
--------------------------------------------------------------------------------
/client.lua:
--------------------------------------------------------------------------------
1 | local OnStart, OnComplete, OnTimeout, Animation = nil, nil, nil, nil
2 | local Run, MiniGameCompleted = false, false
3 |
4 | ------------------------------------------------------------
5 | -- MAIN FUNCTIONS --
6 | ------------------------------------------------------------
7 |
8 | function Start(text, duration, linear)
9 | if type(text) ~= "string" then
10 | PrintError("param 'text' must be type:string")
11 | return
12 | end
13 |
14 | if tonumber(duration) == nil then
15 | PrintError("param 'duration' must be type:number")
16 | return
17 | end
18 |
19 | local options = MergeConfig(Config, {
20 | display = true,
21 | Duration = duration,
22 | Label = text
23 | })
24 |
25 | if linear ~= nil then
26 | options.Type = 'linear'
27 | end
28 |
29 | options.Async = false
30 | options.MiniGame = false
31 |
32 | -- CAN'T SEND FUNCTIONS TO NUI
33 | options.onStart = nil
34 | options.onComplete = nil
35 |
36 | OnStart = nil
37 | OnComplete = nil
38 |
39 | SendNUIMessage(options)
40 |
41 | Run = true
42 |
43 | while Run do
44 | DisableControls(options)
45 | Wait(1)
46 | end
47 | end
48 |
49 | function Custom(options, static)
50 | local Controls = {
51 | Mouse = Config.DisableControls.Mouse,
52 | Player = Config.DisableControls.Player,
53 | Vehicle = Config.DisableControls.Vehicle,
54 | }
55 |
56 | if options.DisableControls ~= nil then
57 | Controls = options.DisableControls
58 | end
59 |
60 | -- MERGE USER OPTIONS
61 | options = MergeConfig(Config, options)
62 |
63 | options.DisableControls = MergeConfig(Config.DisableControls, Controls)
64 |
65 | options.display = true
66 |
67 | if options.ShowProgress == true then
68 | options.ShowTimer = false
69 | end
70 |
71 | OnStart = options.onStart
72 | OnComplete = options.onComplete
73 | OnTimeout = options.onTimeout
74 |
75 | Animation = nil
76 | if options.Animation ~= nil then
77 | Animation = options.Animation
78 | end
79 |
80 | -- CAN'T SEND FUNCTIONS TO NUI
81 | options.onStart = nil
82 | options.onComplete = nil
83 | options.onTimeout = nil
84 |
85 | -- Static Progress
86 | if static == true then
87 | return options
88 | end
89 |
90 | if options.MiniGame then
91 | SetNuiFocus(true, true)
92 | end
93 |
94 | SendNUIMessage(options)
95 |
96 | Run = true
97 |
98 | PlayAnimation(options)
99 |
100 | local cancelKey = Config.CancelKey
101 |
102 | if options.cancelKey and tonumber(options.cancelKey) then
103 | cancelKey = options.cancelKey
104 | end
105 |
106 | if options.Async == false then
107 | while Run do
108 |
109 | if IsControlJustPressed(0, cancelKey) and options.canCancel then
110 | OnComplete(true)
111 | TriggerEvent("rprogress:stop")
112 | end
113 |
114 | DisableControls(options)
115 | Wait(1)
116 | end
117 |
118 | StopAnimation()
119 | else
120 | CreateThread(function()
121 | while Run do
122 |
123 | if IsControlJustPressed(0, cancelKey) and options.canCancel then
124 | OnComplete(true)
125 | TriggerEvent("rprogress:stop")
126 | end
127 |
128 | DisableControls(options)
129 | Wait(0)
130 | end
131 | end)
132 | end
133 | end
134 |
135 | function Linear(text, duration)
136 | Start(text, duration, true)
137 | end
138 |
139 | function Stop()
140 | SendNUIMessage({
141 | stop = true
142 | })
143 | end
144 |
145 | function Static(config)
146 | local options = Custom(config, true)
147 |
148 | options.display = false
149 | options.static = true
150 |
151 | SendNUIMessage(options)
152 |
153 | return {
154 | Show = function()
155 | options.hide = false
156 | options.show = true
157 | options.progress = false
158 | SendNUIMessage(options)
159 | end,
160 | SetProgress = function(progress)
161 | options.hide = false
162 | options.show = true
163 | options.progress = tonumber(progress)
164 |
165 | if options.progress < 0 then
166 | options.progress = 0
167 | elseif options.progress > 100 then
168 | options.progress = 100
169 | end
170 |
171 | SendNUIMessage(options)
172 | end,
173 | Hide = function()
174 | options.show = false
175 | options.hide = true
176 | options.progress = false
177 | SendNUIMessage(options)
178 | end,
179 | Destroy = function()
180 | options.show = false
181 | options.hide = false
182 | options.progress = false
183 | options.destroy = true
184 | SendNUIMessage(options)
185 | end
186 | }
187 | end
188 |
189 | function MiniGame(options)
190 | if Run then return end
191 |
192 | MiniGameCompleted = false
193 |
194 | -- MERGE USER OPTIONS
195 | options = MergeConfig(Config.MiniGameOptions, options)
196 |
197 | if options.Zone == nil and options.Duration == nil then
198 | local difficulty = "Easy"
199 |
200 | if options.Difficulty ~= nil then
201 | difficulty = options.Difficulty
202 | end
203 |
204 | options.Zone = Config.MiniGameOptions.Difficulty[difficulty].Zone
205 | options.Duration = Config.MiniGameOptions.Difficulty[difficulty].Duration
206 | end
207 |
208 | options.Difficulty = nil
209 | options.MiniGame = true
210 |
211 | Custom(options)
212 |
213 | if options.Timeout ~= nil and options.Timeout > 0 then
214 | Citizen.SetTimeout(options.Timeout, function()
215 | if OnTimeout ~= nil then
216 | if not MiniGameCompleted then
217 | Stop()
218 | OnTimeout()
219 | end
220 | end
221 | end)
222 | end
223 | end
224 |
225 | function DisableControls(options)
226 | if options.DisableControls.Mouse then
227 | DisableControlAction(1, 1, true)
228 | DisableControlAction(1, 2, true)
229 | DisableControlAction(1, 106, true)
230 | end
231 |
232 | if options.DisableControls.Player then
233 | DisableControlAction(0, 21, true)
234 | DisableControlAction(0, 30, true)
235 | DisableControlAction(0, 31, true)
236 | DisableControlAction(0, 36, true)
237 | end
238 |
239 | if options.DisableControls.Vehicle then
240 | DisableControlAction(0, 71, true)
241 | DisableControlAction(0, 72, true)
242 | DisableControlAction(0, 75, true)
243 | end
244 | end
245 |
246 | -- Start the scenario / animation
247 | function PlayAnimation()
248 | if Animation ~= nil then
249 | local player = PlayerPedId()
250 | if DoesEntityExist(player) and not IsEntityDead(player) then
251 | Citizen.CreateThread(function()
252 | if Animation.scenario ~= nil then
253 | TaskStartScenarioInPlace(player, Animation.scenario, 0, true)
254 | else
255 | if Animation.animationDictionary ~= nil and Animation.animationName ~= nil then
256 |
257 | if Animation.flag == nil then
258 | Animation.flag = 1
259 | end
260 |
261 | RequestAnimDict( Animation.animationDictionary )
262 | while not HasAnimDictLoaded( Animation.animationDictionary ) do
263 | Wait(1)
264 | end
265 | TaskPlayAnim( player, Animation.animationDictionary, Animation.animationName, 3.0, 1.0, -1, Animation.flag, 0, 0, 0, 0 )
266 | end
267 | end
268 | end)
269 | end
270 | end
271 | end
272 |
273 | -- Stop the scenario / animation
274 | function StopAnimation()
275 | if Animation ~= nil then
276 | local player = PlayerPedId()
277 | if DoesEntityExist( player ) and not IsEntityDead( player ) then
278 | if Animation.scenario ~= nil then
279 | ClearPedTasks(player)
280 | else
281 | if Animation.animationDictionary ~= nil and Animation.animationName ~= nil then
282 | StopAnimTask(player, Animation.animationDictionary, Animation.animationName, 1.0)
283 | end
284 | end
285 | end
286 | end
287 | end
288 |
289 | function Reset()
290 | Run = false
291 |
292 | SetNuiFocus(false, false)
293 | end
294 |
295 | Reset()
296 |
297 | ------------------------------------------------------------
298 | -- NUI CALLBACKS --
299 | ------------------------------------------------------------
300 |
301 | RegisterNUICallback('progress_start', function(data, cb)
302 | if OnStart ~= nil then
303 | OnStart()
304 | end
305 |
306 | cb('ok')
307 | end)
308 |
309 | RegisterNUICallback('progress_complete', function(data, cb)
310 | Reset()
311 |
312 | if OnComplete ~= nil then
313 | OnComplete()
314 | StopAnimation()
315 | end
316 |
317 | cb('ok')
318 | end)
319 |
320 | RegisterNUICallback('progress_stop', function(data, cb)
321 | Reset()
322 |
323 | StopAnimation()
324 |
325 | cb('ok')
326 | end)
327 |
328 | RegisterNUICallback('progress_minigame_input', function(data, cb)
329 | if not MiniGameCompleted then
330 | if OnComplete ~= nil then
331 | OnComplete(data.success == true)
332 | end
333 | StopAnimation()
334 | MiniGameCompleted = true
335 | end
336 | cb('ok')
337 | end)
338 |
339 | RegisterNUICallback('progress_minigame_complete', function(data, cb)
340 | Reset()
341 |
342 | cb('ok')
343 | end)
344 |
345 |
346 | ------------------------------------------------------------
347 | -- EVENTS --
348 | ------------------------------------------------------------
349 |
350 | RegisterNetEvent("rprogress:start")
351 | RegisterNetEvent("rprogress:stop")
352 | RegisterNetEvent("rprogress:custom")
353 | RegisterNetEvent("rprogress:linear")
354 | RegisterNetEvent("rprogress:minigame")
355 |
356 | AddEventHandler("rprogress:start", Start)
357 | AddEventHandler("rprogress:stop", Stop)
358 | AddEventHandler("rprogress:custom", function(options)
359 | options.Async = false
360 | options.onStart = nil
361 | options.onComplete = nil
362 |
363 | Custom(options)
364 | end)
365 | AddEventHandler("rprogress:linear", Linear)
366 | AddEventHandler("rprogress:minigame", MiniGame)
367 |
368 |
369 | ------------------------------------------------------------
370 | -- EXPORTS --
371 | ------------------------------------------------------------
372 |
373 | exports('Start', Start)
374 | exports('Custom', Custom)
375 | exports('Stop', Stop)
376 | exports('Static', Static)
377 | exports('Linear', Linear)
378 | exports('MiniGame', MiniGame)
379 |
--------------------------------------------------------------------------------
/config.lua:
--------------------------------------------------------------------------------
1 | Config = {}
2 |
3 | Config.From = 0 -- Starting progress percentage
4 | Config.To = 100 -- Ending progress percentage
5 |
6 | Config.Async = true -- Whether to run the progress bar asyncronously
7 |
8 | Config.Duration = 5000
9 | Config.Label = "Loading..."
10 | Config.LabelPosition = "bottom"
11 |
12 | Config.Color = "rgba(255, 255, 255, 1.0)" -- Progress bar colour
13 | Config.BGColor = "rgba(0, 0, 0, 0.4)" -- Progress background colour
14 | Config.ZoneColor = "rgba(51, 105, 30, 1)" -- Minigame Zone colour
15 |
16 | Config.x = 0.5 -- Horizontal position
17 | Config.y = 0.5 -- Vertical position
18 |
19 | Config.Rotation = 0 -- Rotation angle of dial
20 | Config.MaxAngle = 360 -- Max arc in degrees - 360 will be a full circle, 90 will be a quarter of a circle, etc
21 | Config.Radius = 60 -- Radius of the radial dial
22 | Config.Stroke = 10 -- stroke width of the radial dial
23 | Config.Width = 300 -- Width of the linear bar
24 | Config.Height = 40 -- Height of the linear bar
25 | Config.Cap = 'butt' -- or 'round'
26 | Config.Padding = 0 -- Backgound bar padding
27 | Config.CancelKey = 178 -- Key used for cancelling progress
28 |
29 | Config.ShowTimer = true -- Shows the timer countdown withing the dial
30 | Config.ShowProgress = false -- Shows the progress within the dial
31 |
32 | Config.Easing = "easeLinear" -- The easing used for the dial animation - see rprogress/ui/js/easings.js
33 |
34 | Config.DisableControls = {
35 | Mouse = false, -- Disable mouse controls until progress is complete
36 | Player = false, -- Disable player movement until progress is complete
37 | Vehicle = false -- Disable vehicle control until progress is complete
38 | }
39 |
40 | Config.onStart = function()end
41 | Config.onComplete = function()end
42 |
43 | Config.MiniGameOptions = {
44 | MaxAngle = 240,
45 | Rotation = -120,
46 | Radius = 100,
47 | Stroke = 30,
48 | Difficulty = {
49 | Custom = {
50 | Zone = 40, -- The percentage of the dial that is the trigger zone (lower = harder)
51 | Duration = 1000 -- Time in milliseconds for the dial to fill in one direction (lower = harder)
52 | },
53 | Easy = {
54 | Zone = 30,
55 | Duration = 500
56 | },
57 | Medium = {
58 | Zone = 20,
59 | Duration = 500
60 | },
61 | Hard = {
62 | Zone = 10,
63 | Duration = 500
64 | }
65 | }
66 | }
--------------------------------------------------------------------------------
/fxmanifest.lua:
--------------------------------------------------------------------------------
1 | fx_version 'bodacious'
2 | game 'gta5'
3 |
4 | description 'Radial Progress'
5 |
6 | author 'Karl Saunders'
7 |
8 | version '0.7.9'
9 |
10 | client_scripts {
11 | 'config.lua',
12 | 'utils.lua',
13 | 'client.lua',
14 | }
15 |
16 | ui_page 'ui/ui.html'
17 |
18 | files {
19 | 'ui/ui.html',
20 | 'ui/fonts/*.ttf',
21 | 'ui/css/*.css',
22 | 'ui/js/*.js',
23 | }
24 |
25 | exports {
26 | "Start",
27 | "Custom",
28 | "Stop",
29 | "Static",
30 | "Linear",
31 | "MiniGame"
32 | }
33 |
--------------------------------------------------------------------------------
/ui/css/app.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: "ChaletComprime";
3 | src: url("../fonts/ChaletComprimeCologneSixty.ttf");
4 | }
5 |
6 | @font-face {
7 | font-family: "RobotoMono-Regular";
8 | src: url("../fonts/RobotoMono-Regular.ttf");
9 | }
10 |
11 | body {
12 | margin: 0;
13 | width: 100vw;
14 | height: 100vh;
15 | display: -webkit-box;
16 | display: flex;
17 | -webkit-box-align: center;
18 | align-items: center;
19 | -webkit-box-pack: center;
20 | justify-content: center;
21 | -webkit-box-orient: vertical;
22 | -webkit-box-direction: normal;
23 | flex-direction: column;
24 | font-family: "ChaletComprime";
25 | font-size: 30px;
26 | overflow: hidden;
27 | }
28 |
29 | .ui-dial {
30 | position: absolute;
31 | opacity: 1;
32 | -webkit-transform: scale(1);
33 | transform: scale(1);
34 | display: -webkit-box;
35 | display: flex;
36 | -webkit-box-align: center;
37 | align-items: center;
38 | -webkit-box-pack: center;
39 | justify-content: center;
40 | }
41 |
42 | .ui-dial svg {
43 | -webkit-transform: rotate(-90deg);
44 | transform: rotate(-90deg);
45 | }
46 |
47 | .ui-dial svg circle {
48 | fill: transparent;
49 | }
50 |
51 | .ui-dial svg circle:nth-child(2) {
52 | /* z-index: 11; */
53 | }
54 |
55 | .ui-dial svg circle:last-child {
56 | z-index: 10;
57 | opacity: 0.8;
58 | }
59 |
60 | .ui-dial.done, .linear-progress.done {
61 | -webkit-animation: done 200ms ease 0ms forwards;
62 | animation: done 200ms ease 0ms forwards;
63 | }
64 |
65 | .ui-dial .ui-indicator {
66 | position: absolute;
67 | color: #fff;
68 | font-family: "RobotoMono-Regular";
69 | font-size: 20px;
70 | }
71 |
72 | .ui-dial .ui-label {
73 | position: absolute;
74 | color: #fff;
75 | min-width: 300px;
76 | text-align: center;
77 | }
78 |
79 | .ui-dial.label-bottom .ui-label {
80 | top: 100%;
81 | margin: 20px 0;
82 | }
83 | .ui-dial.label-right .ui-label {
84 | left: 100%;
85 | margin: 0 20px;
86 | text-align: left;
87 | }
88 |
89 | .ui-dial.label-left .ui-label {
90 | right: 100%;
91 | margin: 0 20px;
92 | text-align: right;
93 | }
94 |
95 | .ui-dial.label-top .ui-label {
96 | bottom: 100%;
97 | margin: 20px 0;
98 | }
99 |
100 | .linear-progress {
101 | position: absolute;
102 | isolation: isolate;
103 | }
104 |
105 | .linear-progress-bg {
106 | position: absolute;
107 | width: 100%;
108 | height: 100%;
109 | }
110 |
111 | .linear-progress-fg {
112 | position: absolute;
113 | width: 0%;
114 | height: 100%;
115 | transform: scale(0, 1);
116 | transform-origin: 0 50% 0;
117 | }
118 |
119 | .linear-progress-label {
120 | position: absolute;
121 | color: #fff;
122 | width: 100%;
123 | height: 100%;
124 | display: flex;
125 | align-items: center;
126 | justify-content: center;
127 | mix-blend-mode: difference;
128 | font-size: 90%;
129 | }
130 |
131 | @-webkit-keyframes done {
132 | from {
133 | opacity: 1;
134 | -webkit-transform: scale(1);
135 | transform: scale(1);
136 | }
137 |
138 | to {
139 | opacity: 0;
140 | -webkit-transform: scale(1.2);
141 | transform: scale(1.2);
142 | }
143 | }
144 |
145 | @keyframes done {
146 | from {
147 | opacity: 1;
148 | -webkit-transform: scale(1);
149 | transform: scale(1);
150 | }
151 |
152 | to {
153 | opacity: 0;
154 | -webkit-transform: scale(1.2);
155 | transform: scale(1.2);
156 | }
157 | }
158 |
--------------------------------------------------------------------------------
/ui/css/custom.css:
--------------------------------------------------------------------------------
1 | /* CUSTOM CSS */
2 |
--------------------------------------------------------------------------------
/ui/fonts/ChaletComprimeCologneSixty.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mobius1/rprogress/c31973b4c124b4e3e15f33ea4dca0ea16cf00b0d/ui/fonts/ChaletComprimeCologneSixty.ttf
--------------------------------------------------------------------------------
/ui/fonts/ChaletLondonNineteenSixty.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mobius1/rprogress/c31973b4c124b4e3e15f33ea4dca0ea16cf00b0d/ui/fonts/ChaletLondonNineteenSixty.ttf
--------------------------------------------------------------------------------
/ui/fonts/RobotoMono-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mobius1/rprogress/c31973b4c124b4e3e15f33ea4dca0ea16cf00b0d/ui/fonts/RobotoMono-Regular.ttf
--------------------------------------------------------------------------------
/ui/js/app.js:
--------------------------------------------------------------------------------
1 | const ui = document.getElementById('rprogress');
2 | let running = false;
3 | let customDial = false
4 | let staticDial = false
5 | let miniGame = false
6 |
7 | window.onData = function (data) {
8 | if ( data.MiniGame ) {
9 | if ( !miniGame && !running ) {
10 | miniGame = new RadialProgress({
11 | r: data.Radius,
12 | s: data.Stroke,
13 | x: data.x,
14 | y: data.y,
15 | color: data.Color,
16 | bgColor: data.BGColor,
17 | zoneColor: data.ZoneColor,
18 | rotation: data.Rotation,
19 | maxAngle: data.MaxAngle,
20 | progress: data.From,
21 | zone: data.Zone,
22 | onStart: function() {
23 | running = true;
24 | },
25 | onComplete: function(progress) {
26 | if ( progress >= 100 ) {
27 | this.start(0, 100, data.Duration);
28 | } else {
29 | this.start(100, 0, data.Duration);
30 | }
31 | }
32 | });
33 |
34 | miniGame.render(ui);
35 |
36 | miniGame.start(data.To, data.From, data.Duration);
37 | }
38 | } else {
39 | if (data.display && !running) {
40 | if ( data.Type == 'linear' ) {
41 | customDial = new LinearProgress({
42 | w: data.Width,
43 | h: data.Height,
44 | x: data.x,
45 | y: data.y,
46 | padding: data.Padding,
47 | cap: data.Cap,
48 | color: data.Color,
49 | bgColor: data.BGColor,
50 | progress: data.From,
51 | easing: data.Easing,
52 | onStart: function() {
53 | running = true;
54 |
55 | this.label.textContent = data.Label;
56 |
57 | PostData("progress_start")
58 | },
59 | onComplete: function () {
60 | this.label.textContent = "";
61 |
62 | PostData("progress_complete");
63 |
64 | this.hide();
65 |
66 | setTimeout(() => {
67 | this.remove();
68 | }, 1000)
69 |
70 | running = false;
71 | }
72 | });
73 | } else if ( data.Type == 'radial' || !data.Type ) {
74 | customDial = new RadialProgress({
75 | r: data.Radius,
76 | s: data.Stroke,
77 | x: data.x,
78 | y: data.y,
79 | padding: data.Padding,
80 | cap: data.Cap,
81 | color: data.Color,
82 | bgColor: data.BGColor,
83 | rotation: data.Rotation,
84 | maxAngle: data.MaxAngle,
85 | progress: data.From,
86 | easing: data.Easing,
87 | onStart: function() {
88 | running = true;
89 |
90 | this.container.classList.add(`label-${data.LabelPosition}`);
91 | this.label.textContent = data.Label;
92 |
93 | PostData("progress_start")
94 | },
95 | onChange: function(progress, t, duration) {
96 | if ( data.ShowTimer ) {
97 | this.indicator.textContent = `${((duration - t) / 1000).toFixed(2)}s`;
98 | }
99 |
100 | if ( data.ShowProgress ) {
101 | this.indicator.textContent = `${Math.ceil(progress)}%`;
102 | }
103 | },
104 | onComplete: function () {
105 | PostData("progress_complete");
106 |
107 | this.indicator.textContent = "";
108 | this.label.textContent = "";
109 | this.hide();
110 |
111 | setTimeout(() => {
112 | this.remove();
113 | }, 1000)
114 |
115 | running = false;
116 | }
117 | });
118 | }
119 |
120 | customDial.render(ui);
121 |
122 | customDial.start(data.To, data.From, data.Duration);
123 | }
124 |
125 | if ( data.static ) {
126 | if ( !staticDial ) {
127 | staticDial = new RadialProgress({
128 | r: data.Radius,
129 | s: data.Stroke,
130 | x: data.x,
131 | y: data.y,
132 | padding: data.Padding,
133 | cap: data.Cap,
134 | color: data.Color,
135 | bgColor: data.BGColor,
136 | rotation: data.Rotation,
137 | maxAngle: data.MaxAngle,
138 | progress: data.From,
139 | onChange: function(progress) {
140 | if ( data.ShowProgress ) {
141 | this.indicator.textContent = `${Math.ceil(progress)}%`;
142 | }
143 | },
144 | });
145 |
146 | staticDial.container.classList.add(`label-${data.LabelPosition}`);
147 | staticDial.label.textContent = data.Label;
148 | } else {
149 | if (data.show) {
150 | staticDial.render(ui);
151 | }
152 |
153 | if (data.hide) {
154 | staticDial.remove();
155 | }
156 |
157 | if ( data.progress !== false ) {
158 | staticDial.setProgress(data.progress)
159 | }
160 |
161 | if (data.destroy) {
162 | staticDial.remove();
163 | staticDial = false;
164 | }
165 | }
166 | }
167 | }
168 |
169 | if (data.stop) {
170 | running = false;
171 |
172 | if ( miniGame ) {
173 | miniGame.stop();
174 | miniGame = false
175 | } else if ( customDial ) {
176 | customDial.stop();
177 | customDial = false
178 | }
179 |
180 | PostData("progress_stop");
181 | }
182 | };
183 |
184 | window.onload = function (e) {
185 | window.addEventListener('message', function (event) {
186 | onData(event.data);
187 | });
188 |
189 | window.addEventListener("keydown", e => {
190 | if ( e.key == " " ) {
191 | if ( miniGame && running ) {
192 | miniGame.pause();
193 |
194 | PostData("progress_minigame_input", {
195 | success: miniGame.progress > miniGame.zoneMin && miniGame.progress < miniGame.zoneMax
196 | })
197 |
198 | setTimeout(() => {
199 | miniGame.hide();
200 | setTimeout(() => {
201 | running = false;
202 | miniGame.stop();
203 | miniGame = false;
204 |
205 | PostData("progress_minigame_complete");
206 | }, 1000)
207 | }, 1000)
208 | }
209 | }
210 | });
211 | };
212 |
213 | function PostData(type, obj) {
214 | if ( obj === undefined ) {
215 | obj = {}
216 | }
217 | fetch(`https://${GetParentResourceName()}/${type}`, {
218 | method: 'POST',
219 | headers: {
220 | 'Content-Type': 'application/json; charset=UTF-8',
221 | },
222 | body: JSON.stringify(obj)
223 | }).then(resp => resp.json()).then(resp => resp).catch(error => console.log('RPROGRESS FETCH ERROR! ' + error.message));
224 | }
--------------------------------------------------------------------------------
/ui/js/class.RadialProgress.js:
--------------------------------------------------------------------------------
1 | const NS = "http://www.w3.org/2000/svg";
2 |
3 | /**
4 | * Svg Class
5 | */
6 | class Svg {
7 | constructor(w, h) {
8 | this.width = w;
9 | this.height = h;
10 |
11 | this.node = document.createElementNS(NS, "svg");
12 |
13 | this.render();
14 | }
15 |
16 | render() {
17 | this.node.setAttributeNS(null, "width", this.width);
18 | this.node.setAttributeNS(null, "height", this.height);
19 | }
20 |
21 | getNode() {
22 | return this.node;
23 | }
24 | }
25 |
26 | /**
27 | * Circle Class
28 | */
29 | class Circle {
30 | constructor(r, s, min = 0, max = 360, bg = false, zone = false) {
31 | this.radius = r;
32 | this.stroke = s;
33 | this.minAngle = min;
34 | this.maxAngle = max;
35 | this.px = this.radius;
36 | this.py = this.radius;
37 | this.bg = bg;
38 | this.zone = zone;
39 | this.offset = 0;
40 | this.progress = 0;
41 |
42 | this.node = document.createElementNS(NS, "circle");
43 |
44 | this.render();
45 | }
46 |
47 | render() {
48 | this.setArc();
49 |
50 | this.node.setAttributeNS(null, "r", this.radius - (this.stroke / 2));
51 | this.node.setAttributeNS(null, "cx", this.px);
52 | this.node.setAttributeNS(null, "cy", this.py);
53 | this.node.setAttributeNS(null, "stroke-width", this.stroke);
54 | }
55 |
56 | setArc() {
57 | this.arc = 2 * Math.PI * (this.radius - (this.stroke / 2));
58 | this.gap = this.arc - this.arc * ((this.maxAngle - this.minAngle) / 360);
59 |
60 | this.node.setAttributeNS(
61 | null,
62 | "stroke-dasharray",
63 | this.bg ? `${this.arc - this.gap}, ${this.gap}` : this.arc
64 | );
65 |
66 | this.setProgress();
67 | }
68 |
69 | getNode() {
70 | return this.node;
71 | }
72 |
73 | setProgress(progress) {
74 | if (progress === undefined) {
75 | progress = this.progress;
76 | }
77 |
78 | let offset = this.arc - this.arc * progress;
79 |
80 | if (!this.bg) {
81 | offset = this.arc - (this.arc - this.gap) * progress;
82 | }
83 |
84 | this.node.setAttributeNS(null, "data-progress", progress);
85 | this.node.setAttributeNS(null, "stroke-dashoffset", offset);
86 |
87 | this.progress = progress;
88 | this.offset = offset;
89 | }
90 | }
91 |
92 | class RProgress {
93 | start(to, from, duration) {
94 | this.frame = false;
95 |
96 | if (from === undefined) {
97 | from = this.config.progress;
98 | }
99 |
100 | if (duration === undefined) {
101 | duration = 5000;
102 | }
103 |
104 | let st = Date.now();
105 |
106 | // Scroll function
107 | const animate = () => {
108 | let progress,
109 | now = Date.now(),
110 | ct = now - st;
111 |
112 | // Cancel after allotted interval
113 | if (ct > duration) {
114 | cancelAnimationFrame(this.frame);
115 | this.setProgress(to, false);
116 | this.config.onChange.call(this, 100, ct, duration);
117 | this.config.onComplete.call(this, to);
118 | return;
119 | }
120 |
121 | progress = easings[this.config.easing](ct, from, to - from, duration);
122 |
123 | this.setProgress(progress, false);
124 |
125 | this.config.onChange.call(this, progress, ct, duration);
126 |
127 | // requestAnimationFrame
128 | this.frame = requestAnimationFrame(animate);
129 | };
130 |
131 | this.config.onStart.call(this);
132 | animate();
133 | }
134 |
135 | pause() {
136 | cancelAnimationFrame(this.frame);
137 | }
138 |
139 | stop() {
140 | cancelAnimationFrame(this.frame);
141 | this.remove();
142 | }
143 |
144 | render(element) {
145 | if (!this.rendered) {
146 | element =
147 | typeof element === "string" ? document.querySelector(element) : element;
148 |
149 | element.appendChild(this.container);
150 |
151 | this.setPosition();
152 |
153 | this.rendered = true;
154 | }
155 | }
156 |
157 | remove() {
158 | const parent = this.container.parentNode;
159 | if (this.rendered && parent) {
160 | parent.removeChild(this.container);
161 |
162 | this.rendered = false;
163 | }
164 | }
165 |
166 | show() {
167 | this.container.classList.remove("done");
168 | }
169 |
170 | hide() {
171 | this.container.classList.add("done");
172 | }
173 | }
174 |
175 | /**
176 | * RadialProgress Class
177 | */
178 | class RadialProgress extends RProgress {
179 | constructor(config) {
180 | super();
181 |
182 |
183 | const defaultConfig = {
184 | r: 50,
185 | s: 10,
186 | x: 0,
187 | y: 0,
188 | cap: "butt",
189 | padding: 0,
190 | progress: 0,
191 | minAngle: 0,
192 | maxAngle: 360,
193 | rotation: 0,
194 | color: "rgba(255, 255, 255, 1.0)",
195 | zoneColor: "rgba(51, 105, 30, 1)",
196 | bgColor: "rgba(0, 0, 0, 0.4)",
197 | easing: "easeLinear",
198 | onStart: () => {},
199 | onChange: () => {},
200 | onComplete: () => {},
201 | onTimeout: () => {},
202 | };
203 |
204 | this.config = Object.assign({}, defaultConfig, config);
205 |
206 | this.init();
207 |
208 | return this;
209 | }
210 |
211 | init() {
212 | const arc = this.config.maxAngle - this.config.minAngle;
213 |
214 | this.config.padding *= 2;
215 |
216 | this.config.w = (this.config.r * 2) + this.config.padding;
217 | this.config.h = (this.config.r * 2) + this.config.padding;
218 |
219 | this.svg = new Svg(this.config.w, this.config.h);
220 |
221 | this.dials = {
222 | bg: new Circle(
223 | this.config.r + (this.config.padding / 2),
224 | this.config.s + this.config.padding,
225 | this.config.minAngle,
226 | this.config.maxAngle,
227 | true
228 | ),
229 | fg: new Circle(
230 | this.config.r,
231 | this.config.s,
232 | this.config.minAngle,
233 | this.config.maxAngle
234 | )
235 | };
236 |
237 | if ( this.config.zone ) {
238 | this.zoneArc = (this.config.zone / 100) * arc;
239 | this.zonePos = getRandomInt(0, arc - this.zoneArc);
240 |
241 | const startPos = (this.zonePos / arc) * 100;
242 | this.zoneMin = startPos;
243 | this.zoneMax = startPos + this.config.zone;
244 |
245 | this.dials.zone = new Circle(
246 | this.config.r,
247 | this.config.s,
248 | 0,
249 | this.zoneArc,
250 | true
251 | )
252 | }
253 |
254 | this.svg.getNode().appendChild(this.dials.bg.getNode());
255 | this.svg.getNode().appendChild(this.dials.fg.getNode());
256 |
257 | if ( this.dials.zone ) {
258 | this.svg.getNode().appendChild(this.dials.zone.getNode());
259 | this.dials.zone.getNode().setAttributeNS(null, "stroke", this.config.zoneColor);
260 |
261 | this.dials.zone.getNode().style.transform = `rotate(${
262 | this.zonePos
263 | }deg)`;
264 |
265 | this.dials.zone.getNode().style.transformOrigin = `50% 50% 0`;
266 | }
267 |
268 |
269 | const fgNode = this.dials.fg.getNode();
270 | fgNode.setAttributeNS(null, "cx", (this.config.w / 2));
271 | fgNode.setAttributeNS(null, "cy", (this.config.h / 2));
272 | fgNode.setAttributeNS(null, "stroke-linecap", this.config.cap);
273 | fgNode.setAttributeNS(null, "stroke", this.config.color);
274 |
275 | this.dials.bg.getNode().setAttributeNS(null, "stroke", this.config.bgColor);
276 |
277 |
278 | const container = document.createElement("div");
279 | container.classList.add("ui-dial");
280 |
281 | const indicator = document.createElement("div");
282 | indicator.classList.add("ui-indicator");
283 |
284 | const label = document.createElement("div");
285 | label.classList.add("ui-label");
286 |
287 | this.setRotation(this.config.rotation);
288 |
289 | container.appendChild(this.svg.getNode());
290 | container.appendChild(indicator);
291 | container.appendChild(label);
292 |
293 | this.container = container;
294 | this.indicator = indicator;
295 | this.label = label;
296 |
297 | this.setPosition(this.config.x, this.config.y);
298 | this.setProgress();
299 | }
300 |
301 | setPosition(x, y) {
302 | this.config.x = x;
303 | this.config.y = y;
304 |
305 | const size = (this.config.r * 2);
306 |
307 | this.container.style.width = `${(this.config.r * 2) + this.config.padding}px`;
308 | this.container.style.height = `${(this.config.r * 2) + this.config.padding}px`;
309 | this.container.style.left = `${
310 | (this.config.x * window.innerWidth) - (size / 2) - (this.config.padding / 2)
311 | }px`;
312 | this.container.style.top = `${
313 | (this.config.y * window.innerHeight) - (size / 2) - (this.config.padding / 2)
314 | }px`;
315 | }
316 |
317 | setEndAngle(angle) {
318 | this.config.maxAngle = angle;
319 |
320 | this.dials.bg.maxAngle = angle;
321 | this.dials.bg.setArc();
322 |
323 | this.dials.fg.maxAngle = angle;
324 | this.dials.fg.setArc();
325 |
326 | this.dials.bg.setProgress();
327 | this.dials.fg.setProgress();
328 | }
329 |
330 | setRotation(angle) {
331 | this.config.rotation = angle;
332 | this.svg.getNode().style.transform = `rotate(${
333 | this.config.rotation - 90
334 | }deg)`;
335 | }
336 |
337 | setProgress(progress, e) {
338 | if (progress === undefined) {
339 | progress = this.config.progress;
340 | }
341 |
342 | this.dials.fg.setProgress(progress / 100);
343 |
344 | this.progress = progress;
345 |
346 | if (e === undefined) {
347 | this.config.onChange.call(this, progress);
348 | }
349 | }
350 | }
351 |
352 | class LinearProgress extends RProgress {
353 | constructor(config) {
354 | super();
355 |
356 | const defaultConfig = {
357 | w: 300,
358 | h: 10,
359 | s: 10,
360 | x: 0,
361 | y: 0,
362 | cap: "butt",
363 | padding: 0,
364 | progress: 0,
365 | color: "rgba(255, 255, 255, 1.0)",
366 | bgColor: "rgba(0, 0, 0, 0.4)",
367 | easing: "easeLinear",
368 | onStart: () => {},
369 | onChange: () => {},
370 | onComplete: () => {}
371 | };
372 |
373 | this.config = Object.assign({}, defaultConfig, config);
374 | this.progress = 0;
375 |
376 | this.init();
377 |
378 | return this;
379 | }
380 |
381 | init() {
382 | this.container = document.createElement("div");
383 | this.container.classList.add("linear-progress");
384 |
385 | this.bg = document.createElement("div");
386 | this.fg = document.createElement("div");
387 |
388 | this.bg.classList.add("linear-progress-bg");
389 | this.fg.classList.add("linear-progress-fg");
390 |
391 | this.label = document.createElement("div");
392 | this.label.classList.add("linear-progress-label");
393 |
394 | this.container.appendChild(this.bg);
395 | this.container.appendChild(this.fg);
396 | this.container.appendChild(this.label);
397 | }
398 |
399 | setPosition() {
400 | let contCss = `width:${this.config.w}px;height:${this.config.h}px;left:${this.config.x * window.innerWidth - this.config.w / 2}px;top:${this.config.y * window.innerHeight - this.config.h / 2}px;`;
401 | let bgCss = `background-color:${this.config.bgColor};padding:${this.config.padding}px;left:${-this.config.padding}px;top:${-this.config.padding}px;`;
402 |
403 | this.container.style.cssText = contCss;
404 |
405 | this.fg.style.backgroundColor = this.config.color;
406 |
407 | if ( this.config.cap == 'round' ) {
408 | this.fg.style.borderRadius = `${this.config.h / 2}px`
409 | this.fg.style.transform = "scale(1, 1)";
410 |
411 | bgCss += `border-radius:${this.config.h / 2 + this.config.padding}px;`;
412 | } else {
413 | this.fg.style.width = "100%";
414 | }
415 |
416 |
417 | this.bg.style.cssText = bgCss;
418 | }
419 |
420 | setProgress(progress, e) {
421 | if (progress === undefined) {
422 | progress = this.config.progress;
423 | }
424 |
425 | const p = (progress / 100);
426 |
427 | if ( this.config.cap == 'round' ) {
428 | this.fg.style.width = `${progress}%`;
429 | } else {
430 | this.fg.style.transform = `scale(${p}, 1)`;
431 | }
432 |
433 | this.progress = progress;
434 |
435 | if (e === undefined) {
436 | this.config.onChange.call(this, progress);
437 | }
438 | }
439 | }
440 |
441 | function getRandomInt(min, max) {
442 | min = Math.ceil(min);
443 | max = Math.floor(max);
444 | return Math.floor(Math.random() * (max - min) + min);
445 | }
--------------------------------------------------------------------------------
/ui/js/easings.js:
--------------------------------------------------------------------------------
1 | const easings = {
2 |
3 | easeLinear: (t, b, c, d) => c * t / d + b,
4 |
5 | // ease-in
6 | easeInQuad: (t, b, c, d) =>
7 | c * (t /= d) * t + b,
8 |
9 | easeInCubic: (t, b, c, d) =>
10 | c * (t /= d) * t * t + b,
11 |
12 | easeInQuart: (t, b, c, d) =>
13 | c * (t /= d) * t * t * t + b,
14 |
15 | easeInQuint: (t, b, c, d) =>
16 | c * (t /= d) * t * t * t * t + b,
17 |
18 | easeInSine: (t, b, c, d) =>
19 | -c * Math.cos(t / d * (Math.PI / 2)) + c + b,
20 |
21 | easeInExpo: (t, b, c, d) =>
22 | t == 0 ? b : c * Math.pow(2, 10 * (t / d - 1)) + b,
23 |
24 | easeInCirc: (t, b, c, d) =>
25 | -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b,
26 |
27 | easeInElastic: (t, b, c, d) => {
28 | var s = 1.70158;
29 | var p = 0;
30 | var a = c;
31 | if (t == 0) return b;
32 | if ((t /= d) == 1) return b + c;
33 | if (!p) p = d * .3;
34 | if (a < Math.abs(c)) {
35 | a = c;
36 | var s = p / 4;
37 | } else var s = p / (2 * Math.PI) * Math.asin(c / a);
38 | return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
39 | },
40 |
41 | easeInBack: (t, b, c, d, s) => {
42 | if (s == undefined) s = 1.70158;
43 | return c * (t /= d) * t * ((s + 1) * t - s) + b;
44 | },
45 |
46 |
47 | // ease-out
48 |
49 | easeOutQuad: (t, b, c, d) =>
50 | -c * (t /= d) * (t - 2) + b,
51 |
52 | easeOutCubic: (t, b, c, d) =>
53 | c * ((t = t / d - 1) * t * t + 1) + b,
54 |
55 | easeOutQuart: (t, b, c, d) =>
56 | -c * ((t = t / d - 1) * t * t * t - 1) + b,
57 |
58 | easeOutQuint: (t, b, c, d) =>
59 | c * ((t = t / d - 1) * t * t * t * t + 1) + b,
60 |
61 | easeOutSine: (t, b, c, d) =>
62 | c * Math.sin(t / d * (Math.PI / 2)) + b,
63 |
64 | easeOutExpo: (t, b, c, d) =>
65 | t == d ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b,
66 |
67 | easeOutCirc: (t, b, c, d) =>
68 | c * Math.sqrt(1 - (t = t / d - 1) * t) + b,
69 |
70 | easeOutElastic: (t, b, c, d) => {
71 | var s = 1.70158;
72 | var p = 0;
73 | var a = c;
74 | if (t == 0) return b;
75 | if ((t /= d) == 1) return b + c;
76 | if (!p) p = d * .3;
77 | if (a < Math.abs(c)) {
78 | a = c;
79 | var s = p / 4;
80 | } else var s = p / (2 * Math.PI) * Math.asin(c / a);
81 | return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
82 | },
83 |
84 | easeOutBack: (t, b, c, d, s) => {
85 | if (s == undefined) s = 1.70158;
86 | return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
87 | },
88 |
89 | easeOutBounce: (t, b, c, d) => {
90 | if ((t /= d) < (1 / 2.75)) {
91 | return c * (7.5625 * t * t) + b;
92 | } else if (t < (2 / 2.75)) {
93 | return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
94 | } else if (t < (2.5 / 2.75)) {
95 | return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
96 | } else {
97 | return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
98 | }
99 | },
100 |
101 |
102 | // ease-in-out
103 | easeInOutQuad: (t, b, c, d) => {
104 | if ((t /= d / 2) < 1) return c / 2 * t * t + b;
105 | return -c / 2 * ((--t) * (t - 2) - 1) + b;
106 | },
107 |
108 | easeInOutCubic: (t, b, c, d) => {
109 | if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
110 | return c / 2 * ((t -= 2) * t * t + 2) + b;
111 | },
112 |
113 | easeInOutQuart: (t, b, c, d) => {
114 | if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
115 | return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
116 | },
117 |
118 | easeInOutQuint: (t, b, c, d) => {
119 | if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
120 | return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
121 | },
122 |
123 | easeInOutSine: (t, b, c, d) =>
124 | -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b,
125 |
126 | easeInOutExpo: (t, b, c, d) => {
127 | if (t == 0) return b;
128 | if (t == d) return b + c;
129 | if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
130 | return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
131 | },
132 |
133 | easeInOutCirc: (t, b, c, d) => {
134 | if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
135 | return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
136 | },
137 |
138 | easeInOutElastic: (t, b, c, d) => {
139 | var s = 1.70158;
140 | var p = 0;
141 | var a = c;
142 | if (t == 0) return b;
143 | if ((t /= d / 2) == 2) return b + c;
144 | if (!p) p = d * (.3 * 1.5);
145 | if (a < Math.abs(c)) {
146 | a = c;
147 | var s = p / 4;
148 | } else var s = p / (2 * Math.PI) * Math.asin(c / a);
149 | if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
150 | return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
151 | },
152 |
153 | easeInOutBack: (t, b, c, d, s) => {
154 | if (s == undefined) s = 1.70158;
155 | if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
156 | return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
157 | },
158 | };
--------------------------------------------------------------------------------
/ui/ui.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/utils.lua:
--------------------------------------------------------------------------------
1 | function clone(object)
2 | local lookup_table = {}
3 | local function copy(object)
4 | if type(object) ~= "table" then
5 | return object
6 | elseif lookup_table[object] then
7 | return lookup_table[object]
8 | end
9 | local new_table = {}
10 | lookup_table[object] = new_table
11 | for key, value in pairs(object) do
12 | new_table[copy(key)] = copy(value)
13 | end
14 | return setmetatable(new_table, getmetatable(object))
15 | end
16 | return copy(object)
17 | end
18 |
19 | function MergeConfig(t1, t2)
20 | local copy = clone(t1)
21 | for k,v in pairs(t2) do
22 | if type(v) == "table" then
23 | if type(copy[k] or false) == "table" then
24 | MergeConfig(copy[k] or {}, t2[k] or {})
25 | else
26 | copy[k] = v
27 | end
28 | else
29 | copy[k] = v
30 | end
31 | end
32 | return copy
33 | end
34 |
35 | function PrintError(msg)
36 | -- ShowNotification("~r~RPROGRESS ERROR: ~w~" .. msg)
37 |
38 | msg = "======== RPROGRESS ERROR: " .. msg .. " ========"
39 | local s = string.rep("=", string.len(msg))
40 | print(s)
41 | print(msg)
42 | print(s)
43 | end
44 |
45 | function LoadAnimDict(animDict)
46 | if not HasAnimDictLoaded(animDict) then
47 | RequestAnimDict(animDict)
48 |
49 | while not HasAnimDictLoaded(animDict) do
50 | Citizen.Wait(1)
51 | end
52 | end
53 | end
54 |
55 | function ShowNotification(msg)
56 | SetNotificationTextEntry('STRING')
57 | AddTextComponentSubstringPlayerName(msg)
58 | DrawNotification(false, true)
59 | end
--------------------------------------------------------------------------------