🚀 init

leonardosnt · May 13, 2017 · baab899 · baab899
commit baab899
Show file tree

Hide file tree

Showing 10 changed files with 2,625 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015"]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules 
diff --git a/README.md b/README.md
@@ -0,0 +1,44 @@
+# mc-player-counter
+
+Displays the number of online players of your Minecraft Server in your site with 2 lines of HTML.
+
+## Options
+  - refreshRate - Rate that the counter will refresh.
+  - format - Format that the counter will be displayed
+    - `{max}` - Maximum players
+    - `{online}` - Online players
+  - ip - Server IP. E.g (`mc.hypixel.net`), with port (`mc.hypixel.net:25565`)
+  - element - Element that the counter will be rendered in.
+
+In HTML, should be prefixed with `data-playercounter-`. E.g (`data-playercounter-ip`)
+
+## Usage:
+
+HTML
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <!-- ... -->
+    <script src="https://cdn.rawgit.com/leonardosnt/mc-player-counter/1.0.0/dist/mc-player-counter.min.js"></script>
+  </head>
+  <body>
+    There are <span data-playercounter-ip="my.server.ip">0</span> players online on my server.
+  </body>
+</html>
+```
+
+JS
+```javascript
+new PlayerCounter({
+  element: element,
+  ip: 'server ip',
+  format: '{online}/{max}' // default {online}
+  refreshRate: 1000 // default 5s (5000)
+});
+```
+
+## License
+
+Copyright (C) 2017 leonardosnt <[email protected]>  
+Licensed under the MIT License. See LICENSE file in the project root for full license information.
diff --git a/dist/mc-player-counter.js b/dist/mc-player-counter.js
@@ -0,0 +1,91 @@
+;(function() {
+'use strict';
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+/*!
+ * https://github.com/leonardosnt/mc-player-counter
+ *
+ * Copyright (C) 2017 leonardosnt
+ * Licensed under the MIT License. See LICENSE file in the project root for full license information.
+ */
+
+var PlayerCounter = function () {
+  function PlayerCounter(_ref) {
+    var ip = _ref.ip,
+        element = _ref.element,
+        _ref$format = _ref.format,
+        format = _ref$format === undefined ? '{online}' : _ref$format,
+        _ref$refreshRate = _ref.refreshRate,
+        refreshRate = _ref$refreshRate === undefined ? 5e3 : _ref$refreshRate;
+
+    _classCallCheck(this, PlayerCounter);
+
+    if (ip == undefined) {
+      throw TypeError('ip cannot be null or undefined');
+    }
+
+    if (element == undefined) {
+      throw TypeError('element cannot be null or undefiend');
+    }
+
+    this.ip = ip;
+    this.format = format;
+    this.element = typeof element === 'string' ? document.querySelector(element) : element;
+
+    this.runQuery();
+    this.timerId = setInterval(this.runQuery.bind(this), refreshRate);
+  }
+
+  _createClass(PlayerCounter, [{
+    key: 'runQuery',
+    value: function runQuery() {
+      var _this = this;
+
+      // I'll use XMLHttpRequest because it has a better browser support
+      // than fetch & Promise.
+      var request = new XMLHttpRequest();
+      request.onreadystatechange = function () {
+        if (request.readyState !== 4 || request.status !== 200) return;
+
+        var FORMAT_REGEX = /{\b(online|max)\b}/ig;
+        var data = JSON.parse(request.responseText);
+        var text = _this.format.replace(FORMAT_REGEX, function (match, group) {
+          return data.players[group];
+        });
+
+        _this.element.innerHTML = text;
+      };
+      request.open('GET', 'https://mcapi.ca/query/' + this.ip + '/players');
+      request.send();
+    }
+  }]);
+
+  return PlayerCounter;
+}();
+
+var onDomLoad = function onDomLoad() {
+  var elements = document.querySelectorAll('[data-playercounter-ip]');
+
+  for (var i = 0; i < elements.length; i++) {
+    var element = elements[i];
+
+    new PlayerCounter({
+      element: element,
+      ip: element.getAttribute('data-playercounter-ip') || undefined,
+      format: element.getAttribute('data-playercounter-format') || undefined,
+      refreshRate: element.getAttribute('data-playercounter-refreshRate') || undefined
+    });
+  }
+};
+
+if (document.readyState === 'complete') {
+  onDomLoad();
+} else {
+  window.onload = onDomLoad;
+}
+
+window.PlayerCounter = PlayerCounter;
+}());
diff --git a/dist/mc-player-counter.min.js b/dist/mc-player-counter.min.js
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Examples</title>
+    <script src="../dist/mc-player-counter.min.js"></script>
+  </head>
+  <body>
+    <p>Players on hypixel.net: <b><span data-playercounter-ip="mc.hypixel.net">0</span></b></p>
+    <p>Players on play.cubecraft.net: <b><span data-playercounter-ip="play.cubecraft.net" data-playercounter-format="{online}/{max}">0</span></b></p>
+  </body>
+</html>
diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,29 @@
+'use strict';
+
+const gulp = require('gulp');
+const uglify = require('gulp-uglify');
+const babel = require('gulp-babel');
+const iife = require('gulp-iife');
+const rename = require('gulp-rename');
+const insert = require('gulp-insert');
+
+const LICENSE_HEADER = `/*!
+ * https://github.com/leonardosnt/mc-player-counter
+ *
+ * Copyright (C) 2017 leonardosnt
+ * Licensed under the MIT License. See LICENSE file in the project root for full license information.
+ */
+`;
+
+gulp.task('default', ['build']);
+
+gulp.task('build', () => (
+  gulp.src('src/mc-player-counter.js')
+    .pipe(babel())
+    .pipe(iife({ useStrict: false }))
+    .pipe(gulp.dest('dist/'))
+    .pipe(rename('mc-player-counter.min.js'))
+    .pipe(uglify())
+    .pipe(insert.prepend(LICENSE_HEADER))
+    .pipe(gulp.dest('dist/'))
+));
diff --git a/package.json b/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "mc-player-counter",
+  "version": "1.0.0",
+  "author": "leonardosnt",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/leonardosnt/mc-player-counter"
+  },
+  "scripts": {
+    "build": "gulp"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.24.1",
+    "babel-core": "^6.24.1",
+    "babel-preset-es2015": "^6.24.1",
+    "gulp": "^3.9.1",
+    "gulp-babel": "^6.1.2",
+    "gulp-iife": "^0.3.0",
+    "gulp-rename": "^1.2.2",
+    "gulp-uglify": "^2.1.2",
+    "uglifyjs": "^2.4.10"
+  },
+  "dependencies": {
+    "gulp-insert": "^0.5.0"
+  }
+}
diff --git a/src/mc-player-counter.js b/src/mc-player-counter.js
@@ -0,0 +1,67 @@
+/*!
+ * https://github.com/leonardosnt/mc-player-counter
+ *
+ * Copyright (C) 2017 leonardosnt
+ * Licensed under the MIT License. See LICENSE file in the project root for full license information.
+ */
+
+class PlayerCounter {
+  constructor({ ip, element, format = '{online}' , refreshRate = 5e3 }) {
+    if (ip == undefined) {
+      throw TypeError('ip cannot be null or undefined');
+    }
+
+    if (element == undefined) {
+      throw TypeError('element cannot be null or undefiend');
+    }
+
+    this.ip = ip;
+    this.format = format;
+    this.element = typeof element === 'string'
+      ? document.querySelector(element)
+      : element;
+
+    this.runQuery();
+    this.timerId = setInterval(this.runQuery.bind(this), refreshRate);
+  }
+
+  runQuery() {
+    // I'll use XMLHttpRequest because it has a better browser support
+    // than fetch & Promise.
+    const request = new XMLHttpRequest();
+    request.onreadystatechange = () => {
+      if (request.readyState !== 4 || request.status !== 200) return;
+
+      const FORMAT_REGEX = /{\b(online|max)\b}/ig;
+      const data = JSON.parse(request.responseText);
+      const text = this.format.replace(FORMAT_REGEX, (match, group) => data.players[group]);
+
+      this.element.innerHTML = text;
+    };
+    request.open('GET', `https://mcapi.ca/query/${this.ip}/players`);
+    request.send();
+  }
+}
+
+const onDomLoad = function() {
+  const  elements = document.querySelectorAll('[data-playercounter-ip]');
+
+  for (let i = 0; i < elements.length; i++) {
+    const element = elements[i];
+
+    new PlayerCounter({
+      element: element,
+      ip: element.getAttribute('data-playercounter-ip') || undefined,
+      format: element.getAttribute('data-playercounter-format') || undefined,
+      refreshRate: element.getAttribute('data-playercounter-refreshRate') || undefined
+    });
+  }
+};
+
+if (document.readyState === 'complete') {
+  onDomLoad();
+} else {
+  window.onload = onDomLoad;
+}
+
+window.PlayerCounter = PlayerCounter;