Update with Examples

.gitignore

@@ -5,4 +5,6 @@ altv-server.exe
 libnode.dll
 package-lock.json
 update.json
-server.log
+server.log
+crashdumps/
+cache/

README.md

@@ -65,6 +65,31 @@ Windows (Powershell):
 ./altv-server.exe
 ```
 
+### Connecting to your Quick-Start alt:V Server
+
+Simply put in the following direct connect url: `127.0.0.1:7788`
+
+### Broadcasting Your Server
+
+Your server can be broadcasted by getting a token from the alt:V bot in the Discord.
+
+Message `Master-Bot#3667` and it will instruct you on what to type.
+
+After doing this simply set announce to true in your `server.cfg`.
+
+### Reconnecting to your Server
+
+If you wish to reconnect to your server after restarting you need to enable debug mode on both your client and your server.
+
+In your server.cfg put the following:
+
+`debug: true`
+
+In your altv.cfg for your alt:V client put the following:
+`debug: true`
+
+This will fully allow you to reconnect to your server.
+
 ### Recommend VSCode Plugins
 
 - [alt:V Auto Complete for VSCode](https://marketplace.visualstudio.com/items?itemName=stuyk.atlv-complete)

package.json

@@ -8,14 +8,15 @@
  },
  "author": "Stuyk",
  "dependencies": {
+ "chalk": "^4.0.0",
  "download": "^7.1.0"
  },
  "type": "module",
  "devDependencies": {
  "prettier": "^1.18.2"
  },
  "prettier": {
- "printWidth": 90,
+ "printWidth": 120,
  "tabWidth": 4,
  "singleQuote": true,
  "bracketSpacing": true

resources/example/client/html/chat/app.js

@@ -0,0 +1,182 @@
+let chatOpened = false;
+let buffer = [];
+let currentBufferIndex = -1;
+let timeout = null;
+let messagesBlock = null;
+let msgListBlock = null;
+let msgInputBlock = null;
+let msgInputLine = null;
+
+if (window.alt === undefined) {
+ window.alt = {
+ emit: () => {},
+ on: () => {}
+ };
+}
+
+function colorify(text) {
+ let matches = [];
+ let m = null;
+ let curPos = 0;
+
+ if (!text) {
+ return;
+ }
+
+ do {
+ m = /\{[A-Fa-f0-9]{3}\}|\{[A-Fa-f0-9]{6}\}/g.exec(text.substr(curPos));
+
+ if (!m) {
+ break;
+ }
+
+ matches.push({
+ found: m[0],
+ index: m['index'] + curPos
+ });
+
+ curPos = curPos + m['index'] + m[0].length;
+ } while (m != null);
+
+ if (matches.length > 0) {
+ text += '</font>';
+
+ for (let i = matches.length - 1; i >= 0; --i) {
+ let color = matches[i].found.substring(1, matches[i].found.length - 1);
+ let insertHtml = (i != 0 ? '</font>' : '') + '<font color="#' + color + '">';
+ text =
+ text.slice(0, matches[i].index) +
+ insertHtml +
+ text.slice(matches[i].index + matches[i].found.length, text.length);
+ }
+ }
+
+ return text;
+}
+
+function checkOverflow() {
+ if (messagesBlock.clientHeight > msgListBlock.clientHeight) {
+ if (!msgListBlock.classList.contains('overflowed')) {
+ msgListBlock.classList.add('overflowed');
+ }
+ } else if (msgListBlock.classList.contains('overflowed')) {
+ msgListBlock.classList.remove('overflowed');
+ }
+}
+
+function openChat(insertSlash) {
+ clearTimeout(timeout);
+
+ if (!chatOpened) {
+ document.querySelector('.chatbox').classList.add('active');
+
+ if (insertSlash) {
+ msgInputLine.value = '/';
+ }
+
+ msgInputBlock.style.display = 'block';
+ msgInputBlock.style.opacity = 1;
+ msgInputLine.focus();
+
+ chatOpened = true;
+ }
+}
+
+function closeChat() {
+ if (chatOpened) {
+ document.querySelector('.chatbox').classList.remove('active');
+
+ msgInputLine.blur();
+ msgInputBlock.style.display = 'none';
+
+ chatOpened = false;
+ }
+}
+
+window.addEventListener('load', () => {
+ messagesBlock = document.querySelector('.messages');
+ msgListBlock = document.querySelector('.msglist');
+ msgInputBlock = document.querySelector('.msginput');
+ msgInputLine = document.querySelector('.msginput input');
+
+ document.querySelector('#message').addEventListener('submit', e => {
+ e.preventDefault();
+
+ alt.emit('chatmessage', msgInputLine.value);
+
+ saveBuffer();
+ closeChat();
+
+ msgInputLine.value = '';
+ });
+
+ msgInputLine.addEventListener('keydown', e => {
+ if (e.keyCode === 9) {
+ e.preventDefault();
+ } else if (e.keyCode == 40) {
+ e.preventDefault();
+
+ if (currentBufferIndex > 0) {
+ loadBuffer(--currentBufferIndex);
+ } else if (currentBufferIndex == 0) {
+ currentBufferIndex = -1;
+ msgInputLine.value = '';
+ }
+ } else if (e.keyCode == 38) {
+ e.preventDefault();
+
+ if (currentBufferIndex < buffer.length - 1) {
+ loadBuffer(++currentBufferIndex);
+ }
+ }
+ });
+
+ alt.emit('chatloaded');
+});
+
+function saveBuffer() {
+ if (buffer.length > 100) {
+ buffer.pop();
+ }
+
+ buffer.unshift(msgInputLine.value);
+ currentBufferIndex = -1;
+}
+
+function loadBuffer(idx) {
+ msgInputLine.value = buffer[idx];
+}
+
+function highlightChat() {
+ msgListBlock.scrollTo({
+ left: 0,
+ top: msgListBlock.scrollHeight,
+ behaviour: 'smooth'
+ });
+
+ document.querySelector('.chatbox').classList.add('active');
+
+ clearTimeout(timeout);
+ timeout = setTimeout(() => document.querySelector('.chatbox').classList.remove('active'), 4000);
+}
+
+function appendMessage(text) {
+ if (text.includes('{') && text.includes('}')) {
+ text = colorify(text);
+ }
+
+ if (messagesBlock.children.length > 100) {
+ messagesBlock.removeChild(messagesBlock.children[0]);
+ }
+
+ const msg = document.createElement('p');
+ msg.innerHTML = text;
+ messagesBlock.appendChild(msg);
+
+ checkOverflow();
+ highlightChat();
+}
+
+alt.on('appendMessage', text => appendMessage(text));
+alt.on('openChat', openChat);
+alt.on('closeChat', closeChat);

resources/example/client/html/chat/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>alt:V Chat</title>
+ <link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+ <div class="content">
+ <!-- <div class="shblock"></div> -->
+ <div class="chatbox">
+ <div class="msglist">
+ <div class="messages">
+ </div>
+ </div>
+ <div class="msginput">
+ <form id="message">
+ <input type="text" spellcheck="false"/>
+ </form>
+ </div>
+ </div>
+ </div>
+ <script src="app.js"></script>
+</body>
+
+</html>