Nikola Lukic

Members
  • Content Count

    10
  • Joined

  • Last visited

About Nikola Lukic

  • Rank
    Member

Contact Methods

  • Website URL
    https://maximumroulette.com
  • Skype
    zlatnaspirala

Profile Information

  • Gender
    Male
  • Location
    Serbia
  • Interests
    Programming in JavaScropt , pythom , c++ , c , nodejs

Recent Profile Visitors

1711 profile views
  1. vue-ts-starter Project name: Vue project generator First feature: YouTube vs Threejs version 0.0.5 Public access for VuleTube service: https://maximumroulette.com:3000 Screenshot: YouTube presentation: Production use https node application for web server. git clone https://github.com/zlatnaspirala/vue-typescript-starter npm i Other good solution is node serve for instant start. Install: npm install -g serve Run: serve -s dist // or npm run serve Project details Vue3 Version: typescript 3.9.6 Visual Code Text Editor used. NodeJS baclend part Features Flow Note: 0.0.x => any changes 0.x.1 ... n => any changes + updated present logic or new big feature. x.1.1 ... n => release git/build point version. - version 0.0.2 [MASTER] Getting response for youtube search. Call server part for saving videos - version 0.0.3 [MASTER] Add options switch-place for two main components Implement LocalStorageMemory class (For saving all user infly data - view options etc.) - version 0.0.4 [MASTER] Save current (exist) options with localStorage and load on refresh. Every next options will be implemented with localStorage support. - version 0.0.5 [MASTER] Added new server module : npm install --save image-downloader Prepare for search result preview in 3d. with raycast options for navigate. Add options for: save result number per page - pagination. show result in 3d version 0.1.1 [MASTER] Adding progress for video duration. Adding webcam options. Replace text with icons. version 0.1.2 [NEXT-WIP] Adding paypal donate buttons version 0.1.3 [NEXT] Prevent raycast click event behind 3d plane video FIX@ Project structure ├── dist/ (This is auto generated) ├── node_modules/ (This is auto generated) ├── public/ | ├── assets/ | | └── logo.png | ├── thumbnails/ | ├── videos/ | | └── list.html | ├── bad.html | ├── favicon.ico | ├── index.html ├── server/ | ├── node_modules/ (This is auto generated) | ├── package.json | ├── package-lock.json | ├── server-connector.js ├── src/ | ├── components/ | | ├── youtube-3d/ | | | ├── myYouTube.vue | | | └── webgl-player.vue | | ├── myFooter.vue | | ├── myHeader.vue | ├── App.vue | └── styles/ | | └── styles.scss | ├── App.vue | ├── main.ts | ├── error-instance.ts | ├── shims-tsx.d.ts | ├── shims-vue.d.ts | └── store.ts ├── .gitignore ├── README.md (This file) ├── tsconfig.json ├── package.json ├── package-lock.json (This is auto generated) └── babel.config.js Components : - myYouTube.vue Getting response for youtube search. Call server part for saving videos - webgl-player.vue Open opengles port view, look for video source saved to the maximumroulette:3000 I use quick solution from npm: https://www.npmjs.com/package/youtube-dl Response for youtube api v3 call search. body: "{↵ "kind": "youtube#searchListResponse",↵ "etag"" headers: {cache-control: "private", content-encoding: "gzip", content-length: "5512", content-type: "application/json; charset=UTF-8", date: "Sun, 05 Jul 2020 20:47:06 GMT", …} result: { kind: "youtube#searchListResponse", etag: "3nOm8AR0NU4TDlCxh0UCxk1KB38", nextPageToken: "CBkQAA", regionCode: "RS", pageInfo: {…}, …} status: 200 statusText: null Result property: { "kind": "youtube#searchResult", "etag": "mlweRndBtBgAcVC-11ZrL0oI7ok", "id": { "kind": "youtube#video", "videoId": "YPhJOC9-M_M" }, "snippet": { "publishedAt": "2019-07-14T19:27:31Z", "channelId": "UCc1NtMtvoVzKnOtnai9LGsA", "title": "Create game engine - Visual typescript game engine", "description": "Clone or download from : https://github.com/zlatnaspirala/visual-ts-game-engine Next video\ developing in live - adding multiplayer feature. Project : Visual ts ...", "thumbnails": { "default": { "url": "https://i.ytimg.com/vi/YPhJOC9-M_M/default.jpg", "width": 120, "height": 90 }, "medium": { "url": "https://i.ytimg.com/vi/YPhJOC9-M_M/mqdefault.jpg", "width": 320, "height": 180 }, "high": { "url": "https://i.ytimg.com/vi/YPhJOC9-M_M/hqdefault.jpg", "width": 480, "height": 360 } }, "channelTitle": "javascript fanatic", "liveBroadcastContent": "none", "publishTime": "2019-07-14T19:27:31Z" } } { etag: "3nOm8AR0NU4TDlCxh0UCxk1KB38" items: etag: "mlweRndBtBgAcVC-11ZrL0oI7ok" id: {kind: "youtube#video", videoId: "YPhJOC9-M_M"} kind: "youtube#searchResult" snippet: {publis kind: "youtube#searchListResponse" nextPageToken: "CBkQAA" pageInfo: {totalResults: 400229, resultsPerPage: 25} regionCode: "RS" } } VueMaterial help Notes : All other <input type="file"> attributes, such as multiple and accept, can be used on md-field. Icons used with https://fontawesome.com/v4.7.0/icons/ eslint or any other cheker full strict only for proc build in dev status lint will pass more roles. About routes From official: Simple Routing From Scratch If you only need very simple routing and do not wish to involve a full-featured router library, you can do so by dynamically rendering a page-level component like this: const NotFound = { template: '<p>Page not found</p>' } const Home = { template: '<p>home page</p>' } const About = { template: '<p>about page</p>' } const routes = { '/': Home, '/about': About } new Vue({ el: '#app', data: { currentRoute: window.location.pathname }, computed: { ViewComponent () { return routes[this.currentRoute] || NotFound } }, render (h) { return h(this.ViewComponent) } }) Spiral position Not in use at the moment. var count = 10; var radius = 32; for ( var i = 1, l = count; i <= l; i ++ ) { var phi = Math.acos( - 1 + ( 2 * i ) / l ); var theta = Math.sqrt( l * Math.PI ) * phi; var mesh = new THREE.Mesh( geometry, material ); mesh.position.setFromSphericalCoords( radius, phi, theta ); mesh.lookAt( this.camera.position ); this.scene.add( mesh ); } YT Download module Download from: https://www.npmjs.com/package/youtube-dl Help links/public https://vuematerial.io/themes/configuration https://github.com/google/google-api-javascript-client/blob/master/docs/samples.md#LoadinganAPIandMakingaRequest https://developers.google.com/youtube/v3/docs/search/list?apix=true Direct link for dev server VueTube web DEV [WIP] service 2020 https://maximumroulette.com:3000
  2. You are right but @aWeirdo is also right. YouTube.com disalow using there server for cross-domain action. I make project on this subject. I use this => https://www.npmjs.com/package/youtube-dl VuleTube [DEV] online : https://maximumroulette.com:3000/ Source : https://github.com/zlatnaspirala/vue-typescript-starter/tree/master/vue-ts-starter
  3. Project : Visual ts game engine Version : We can fight - 2020 2d canvas game engine based on Matter.js 2D physics engine for the web. I use my own concept: take lib for great benefits. It means that i import only staff that i can't make in proper way in proper time, all other coming from head. For example Physics was imported in role of npm package for typescript matter.js variant and i keep dependency healthy. In networking aspect i use full-duplex connection under web-rtc protocol. Pretty nice working combination of physics and realtime-multiplayer connetions. PeerToPeer used for game-play and classic websocket(socketio) for session staff. HTMLRequest used only for loading html parts in run time (on request) because i want clear single page application with all PWA features inside. Also video chat is integrated based on signaling server. No video recording for now (next features). Writen in typescript current version 3.7.4. Text editor used and recommended: Last version of Visual Studio Code. Luanch debugger configuration comes with this project (for server part). Physics engine based on Matter.js - Matter.ts (npm project). Multiplatform video chat (for all browsers) implemented. SocketIO used for session staff. MultiRTC2 used for data transfer also for video chat. MultiRTC3 alias 'broadcaster' used for video chat. Client part To make all dependency works in build proccess we need some plugins. npm install Command: npm run dev Output: ├── build/ (This is auto generated) | ├── externals/ | ├── imgs/ | ├── styles/ | ├── templates/ | ├── app.html | ├── manifest.web | ├── offline.html | ├── visualjs2.js | ├── worker.js Navigate in browser /build/app.html to see client app in action New way of building multi entryes. Sufix is -all . This is test for multi instancing webpack capabilities. Thanks for common object definition: let config = { module: {}, }; Point of Multi entries is to make independent healthy builds end point for our application. Current export's for 2 solutions looks like (runs webpack.multicompile.config.js) : Command: npm run dev-all Output: ├── build/ (This is auto generated) | ├── multiplayer/ | ├── singleplaye/ -Client part is browser web application. No reloading or redirecting. This is single page application. I use html request only for loading local/staged html (like register, login etc.). Networking is based on webSocket full-duplex communication only. This is bad for old fasion programmers. You must be conform with classic socket connection methodology. -webRTC can be used for any proporsion. Already implemented : -video chat webRTC (SIP) chat and data communication. -Class 'Connector' (native webSocket) used for user session staff. For main account session staff like login, register etc. Client config If you want web app without any networking then setup: appUseNetwork: boolean = false; You want to use communication for multiplayer but you don't want to use server database account sessions. The setup this on false in main client config class. appUseAccountsSystem: boolean = false; Networking is disabled or enabled depens on current dev status. Find configuration for client part at ./src/lib/client-config.ts import { Addson } from "./libs/types/global"; /** * ClientConfig is config file for whole client part of application. * It is a better to not mix with server config staff. * All data is defined like default private property values. * Use mmethod class to get proper. * Class don't have any args passed. */ class ClientConfig { /** * Addson - Role is : "no dependencies scripts only" * All addson are ansync loaded scripts. * - Cache is based on webWorkers. * - hackerTimer is for better performace also based on webWorkers. * - dragging is script for dragging dom elements. */ private addson: Addson = [ { name: "cache", enabled: true, scriptPath: "externals/cacheInit.ts", }, { name: "hackerTimer", enabled: true, scriptPath: "externals/hack-timer.js", }, { name: "dragging", enabled: true, scriptPath: "externals/drag.ts", }, ]; /** * @description This is main coordinary types of positions * Can be "diametric-fullscreen" or "frame". * - diametric-fullscreen is simple fullscreen canvas element. * - frame keeps aspect ratio in any aspect. * @property drawReference * @type string */ private drawReference: string = "frame"; /** * aspectRatio default value, can be changed in run time. * This is 800x600, 1.78 is also good fit for lot of desktop monitors screens */ private aspectRatio: number = 1.333; /** * domain is simple url address, * recommendent to use for local propose LAN ip * like : 192.168.0.XXX if you wanna run ant test app with server. */ private domain: string = "maximumroulette.com"; /** * @description Important note for this property: if you * disable (false) you cant use Account system or any other * network. Use 'false' if you wanna make single player game. * In other way keep it 'true'. */ private appUseNetwork = true; /** * networkDeepLogs control of dev logs for webRTC context only. */ private networkDeepLogs: boolean = false; /** * masterServerKey is channel access id used to connect * multimedia server channel.Both multiRTC2/3 */ private masterServerKey: string = "maximumroulette.server1"; /** * rtcServerPort Port used to connect multimedia server. * Default value is 12034 */ private rtcServerPort: number = 12034; /** * connectorPort is access port used to connect * session web socket. */ private connectorPort: number = 1234; /** * broadcasterPort Port used to connect multimedia server MultiRTC3. * I will use it for explicit video chat multiplatform support. * Default value is 9001 */ private broadcasterPort: number = 9001; /** * broadcaster socket.io address. * Change it for production regime */ private broadcastSockRoute: string = "http://localhost:9001/"; /** * broadcaster socket.io address. * Change it for production regime */ private broadcastAutoConnect: boolean = true; /** * broadcaster rtc session init values. * Change it for production regime */ private broadcasterSessionDefaults: any = { sessionAudio: false, sessionVideo: false, sessionData: true, enableFileSharing: false }; /** * appUseAccountsSystem If you don't want to use session * in your application just setup this variable to the false. */ private appUseAccountsSystem: boolean = true; /** * appUseBroadcaster Disable or enable broadcaster for * video chats. */ private appUseBroadcaster: boolean = true; private stunList: string[] = [ "stun:stun.l.google.com:19302", "stun:stun1.l.google.com:19302", "stun:stun2.l.google.com:19302", "stun:stun.l.google.com:19302?transport=udp" ]; /** * Possible variant by default : * "register", "login" */ private startUpHtmlForm: string = "register"; private gameList: any[]; /** * Implement default gamePlay variable's */ private defaultGamePlayLevelName: string = "public"; private autoStartGamePlay: boolean = false; /** * constructor will save interest data for game platform */ constructor(gameList: any[]) { // Interconnection Network.Connector vs app.ts this.gameList = gameList; } ... Start dependency system from app.ts Fisrt game template is Platformer. This is high level programming in this software. Class Platformer run with procedural (method) level1. Class Starter is base class for my canvas part (matter.js/ts). It is injected to the Platformer to make full operated work. gamesList args for ioc constructor is for now just simbolic for now. (WIP) In ioc you can make strong class dependency relations. Use it for your own structural changes. If you want to make light version for build than use ioc to remove everything you don't need in build. ioc.ts files located at: src\controllers. In ioc file i import choosen classes and create instance or bind. Ioc also save (singleton) instance's and we never make same class instance again (this is the role). We just call game.ioc.get.NAME_OF_INSTANCE. Object .get is key access object not array. Best practice is to use only one ioc. In that way you will get clear build without big shared in most time unnecessary data. If you application is big project.Than best way is still use one ioc.ts for per web page. In that way i use refresh or redirect moment to load optimised script bundle for current page. Main dependency file Current version: /** * Import global css */ require("./style/animations.css"); require("./style/styles.css"); import AppIcon from "./app-icon"; import GamePlay from "./examples/platformer/scripts/game-play"; import Ioc from "./controllers/ioc"; /** * plarformerGameInfo * This is strong connection. * html-components are on the same level with app.ts * Put any parameters here. */ const plarformerGameInfo = { name: "Platformer", title: "Start Platformer game play", }; const gamesList: any[] = [ plarformerGameInfo, ]; const master = new Ioc(gamesList); const appIcon: AppIcon = new AppIcon(master.get.Browser); master.singlton(GamePlay, master.get.Starter); console.log("Platformer: ", master.get.GamePlay); master.get.GamePlay.attachAppEvents(); /** * Make it global for fast access in console testing. * (window as any).platformer = master.get.GamePlay; */ (window as any).master = master; (window as any).platformer = master.get.GamePlay; About runup gameplay In client-config : Disabled at the moment for single-player solution. javascript private autoStartGamePlay: boolean = false; If you setup 'autoStartGamePlay' to false you need to run gamePlay with : javascript master.get.GamePlay.load() Note : Only singleton object instance from master start with upcase letters. Project structure build/ is autogenerated. Don't edit or add content in this folder. src/ is main client part (Browser web application). Main file : app.ts src/libs/ is common and smart pack of classes, interfaces etc. easy access. server/ folder is fully indipendent server size. I use one git repo but consider '/server' represent standalone application. There's server package.json independently from client part also config is not the common. I just like it like that. ├── package.json ├── package-lock.json ├── webpack.config.js ├── tsconfig.json ├── tslint.json ├── launch.json ├── workplace.code-workspace ├── LICENCE logo.png LICENSE ├── build/ (This is auto generated) | ├── externals/ | ├── templates/ | ├── imgs/ | ├── styles/ | | └── favicon.ico | ├── visualjs2.js | ├── app.html ├── src/ | ├── style/ | | ├── styles.css | ├── controllers/ | | ├── ioc.ts | | ├── ioc-single-player.ts | ├── libs/ | | ├── class/ | | | ├── networking/ | | | | ├── rtc-multi-connection/ | | | | | ├── FileBufferReader.js | | | | | ├── RTCMultiConnection2.js | | | | | ├── RTCMultiConnection3.js | | | | | ├── linkify.js | | | | | ├── getHTMLMediaElement.js | | | | | ├── socket.io.js | | | | ├── broadcaster.ts | | | | ├── connector.ts | | | | ├── network.ts | | | ├── visual-methods/ | | | | ├── sprite-animation.ts | | | | ├── text.ts | | | | ├── texture.ts | | | ├── bot-behavior.ts | | | ├── browser.ts | | | ├── math.ts | | | ├── position.ts | | | ├── resources.ts | | | ├── sound.ts | | | ├── system.ts | | | ├── view-port.ts | | | ├── visual-render.ts | | ├── interface/ | | | ├── drawI.ts | | | ├── global.ts | | | ├── visual-components.ts | | ├── multiplatform/ | | | ├── mobile/ | | | | ├── player-controls.ts | | | ├── global-event.ts | | ├── types/ | | | ├── global.ts | | ├── client-config.ts | | ├── ioc.ts | | ├── starter.ts | ├── icon/ ... | ├── examples/ | | ├── platformer/ | ├── html-components/ | | ├── register.html | | ├── login.html | | ├── games-list.html | | ├── user-profile.html | | ├── store.html | | ├── broadcaster.html | ├── index.html | ├── app-icon.ts | └── app.ts | └── manifest.web └── server/ | ├── package.json | ├── package-lock.json | ├── server-config.js | ├── database/ | | ├── database.js | | ├── common/ | | ├── email/ | | | ├── templates/ | | | | ├── confirmation.html.js | | | ├── nocommit.js (no commited for now) | | └── data/ (ignored - db system folder) | ├── rtc/ | | ├── server.ts | | ├── connector.ts | | ├── self-cert/ Server part Installed database : mongodb@3.1.8 -No typescript here, we need keep state clear no. Node.js is best options.For email staff i choose : npm i gmail-send . -Run services database server (Locally and leave it alive for develop proccess): npm run dataserver Looks like this : mongod --dbpath ./server/database/data Fix : "failed: address already in use" : netstat -ano | findstr :27017 taskkill /PID typeyourPIDhere /F Also important "Run Visual Studio Code as Administrator". -Command for kill all node.js procces for window users : taskkill /im node.exe /F Networking multimedia communication : WebSocketServer running on Node.js Text-based protocol SIP (Session Initiation Protocol) used for signaling and controlling multimedia sessions. General networking config: Config property defined in constructor from ServerConfig class: // enum : 'dev' or 'prod' this.serverMode = "dev"; this.networkDeepLogs = false; this.rtcServerPort = 12034; this.rtc3ServerPort = 9001; this.connectorPort = 1234; this.domain = { dev: "localhost", prod: "maximumroulette.com" }; this.masterServerKey = "maximumroulette.server1"; this.protocol = "http"; this.isSecure = false; // localhost this.certPathSelf = { pKeyPath: "./server/rtc/self-cert/privatekey.pem", pCertPath: "./server/rtc/self-cert/certificate.pem", pCBPath: "./server/rtc/self-cert/certificate.pem", }; // production this.certPathProd = { pKeyPath: "/etc/httpd/conf/ssl/maximumroulette.com.key", pCertPath: "/etc/httpd/conf/ssl/maximumroulette_com.crt", pCBPath: "/etc/httpd/conf/ssl/maximumroulette.ca-bundle" }; this.appUseAccountsSystem = true; this.appUseBroadcaster = true; this.databaseName = "masterdatabase"; this.databaseRoot = { dev: "mongodb://localhost:27017" , prod: "mongodb://userAdmin:********@maximumroulette.com:27017/admin" }; this.specialRoute = { "default": "/var/www/html/applications/visual-typescript-game-engine/build/app.html" }; - Running server is easy : npm run rtc With this cmd : npm run rtc we run server.js and connector.ts websocket. Connector is our account session used for login , register etc. Implemented video chat based on webRTC protocol.Running rtc3 server is integrated. If you wanna disable session-database-rtc2 features and run only broadcaster: Features comes with broadcaster: Multiplatform video chat works with other hybrid frameworks or custom implementation throw the native mobile application web control (Chrome implementation usually). Documentation : Follow link for API: Application documentation Possible to install from (It's good for instancing new clear base project): npm visual-ts If you wanna generate doc you will need manual remove comment from plugin section in webpack.config.js. Restart 'npm run dev' Best way to fully healty build. If you wanna insert some new html page just define it intro webpack.config.js : plugins : [ new HtmlWebpackPlugin({ filename: '/templates/myGameLobby.html', template: 'src/html-components/myGameLobby.html' }), ... See register and login example. Code format : npm run fix npm run tslint or use : tslint -c tslint.json 'src/**/*.ts' --fix tslint -c tslint.json 'src/**/*.ts' Licence Visual Typescript Game engine is under: MIT License generaly except ./src/lib. Folder lib is under: GNU LESSER GENERAL PUBLIC LICENSE Version 3 External licence in this project : - Networking based on : Muaz Khan MIT License www.WebRTC-Experiment.com/licence - Base physics beased on : Matter.js https://github.com/liabru/matter-js Sprites downloaded from (freebies/no licence sites): https://craftpix.net/ https://dumbmanex.com https://opengameart.org/content/animated-flame-texture https://www.gameart2d.com/ https://www.behance.net/JunikStudio Todo list for 2019 I'am still far a away from project objective : Make visual nodes for editor mode in game play. Item's selling for crypto values. Create examples demos in minimum 20 game play variants (table games, actions , platformers , basic demo trow the api doc etc.). Implementing AR and webGL2. Live demo Platformer
  4. Project : Visual ts game engine based on Matter.js is 2D rigid body JavaScript physics engine for the web. I use my own concept: take lib for great benefits. It means that i import only staff that i can't make in proper way in proper time, all other coming from head. For example Physics was imported in role of npm package for typescript matter.js variant and i keep dependency healthy. In networking aspect i use full-duplex connection under web-rtc protocol. Pretty nice working combination of physics and realtime-multiplayer connetions. PeerToPeer used for game-play and classic websocket(socketio) for session staff. HTMLRequest used only for loading html parts in run time (on request) because i want clear single page application with all PWA features inside. Also video chat is integrated based on signaling server. No video recording for now (next features). Writen in typescript current version 3.7.4. Text editor used and recommended: Last version of Visual Studio Code. Luanch debugger configuration comes with this project (for server part). Physics engine based on Matter.js - Matter.ts (npm project). Multiplatform video chat (for all browsers) implemented. SocketIO used for session staff. MultiRTC2 used for data transfer also for video chat. MultiRTC3 alias 'broadcaster' used for video chat. https://github.com/zlatnaspirala/visual-ts-game-engine https://maximumroulette.com/applications/visual-typescript-game-engine/single-player/
  5. https://github.com/zlatnaspirala/visual-ts-game-engine Take a look.
  6. Project : Visual ts game engine Version : new era - 2018/2019 2d canvas game engine based on Matter.js 2D physics engine for the web. Writen in typescript current version 3.1.3. Text editor used and recommended: Visual Studio Code To make all dependency works in build proccess we need some plugins. npm install npm run build Navigate in browser /build/app.html to see client app in action Client part -Client part is browser web application. No reloading or redirecting. This is single page application. I use html request only for loading local html (register, login etc.). Networking is based on webSocket full-duplex communication. -webRTC Can be used for any proporsion. Already implemented : -video chat webRTC (SIP) -chat or data communication -Connector (native webSocket) used for user session staff. in progress... Client config if you want web app without networking then setup : appUseAccountsSystem: boolean = false; No need for deactivation multi media webRTC support becouse this feature run only on user request for now. Find configuration at ./src/lib/client-config.ts appUseAccountsSystem: boolean = false; Start dependency system from app.ts Fisrt game template is Platformer. Main dependency file const plarformerGameInfo = { name: "Crypto-Runner", title: "PLAY PLATFORMER CRYPTO RUNNER!", }; const gamesList: any[] = [ plarformerGameInfo ]; const master = new Ioc(gamesList); const appIcon: AppIcon = new AppIcon(master.get.Browser); master.singlton(Platformer, master.get.Starter); console.warn("Platformer: ", master.get.Platformer); master.get.Platformer.attachAppEvents(); Project structure build/ is autogenerated. Don't edit or add content in this folder. src/ is main client part (Browser web application). Main file : app.ts src/libs/ is common and smart pack of classes, interfaces etc. easy access. server/ folder is fully indipendent server size. Server part Installed database : mongodb@3.1.8 -No typescript here, we need keep state clear no. Node.js is best options.For email staff i choose : npm i gmail-send . -Run services database server (Locally and leave it alive for develop proccess): npm run dataserver Looks like this : mongod --dbpath ./server/database/data Fix : "failed: address already in use" : netstat -ano | findstr :27017 taskkill /PID typeyourPIDhere /F Also important "Run Visual Studio Code as Administrator". -Command for kill all node.js procces for window users : taskkill /im node.exe /F Networking multimedia communication : WebSocketServer running on Node.js Text-based protocol SIP (Session Initiation Protocol) used for signaling and controlling multimedia sessions. - Running server is easy : npm run rtc With this cmd : npm run rtc we run server.js and connector.ts websocket. Connector is our account session used for login , register etc. Implemented video chat based on webRTC protocol Documentation : In progress like whole project ... If you wanna generate doc you will need manual remove comment from plugin section in webpack.config.js. Best way to fully build healty. HTML/CSS is not prior in this project. If you wanna insert some new html page just define it intro webpack.config.js : plugins : [ new HtmlWebpackPlugin({ filename: '/templates/myGameLobby.html', template: 'src/html-components/myGameLobby.html' }), ... See register and login example. Code format : npm run fix npm run tslint or use : tslint -c tslint.json 'src/**/*.ts' --fix tslint -c tslint.json 'src/**/*.ts' External licence in this project : - Networking based on : Muaz Khan MIT License www.WebRTC-Experiment.com/licence - Base physics beased on : Matter.js https://github.com/liabru/matter-js Todo list for 2019 I'am still far a away from project objective : Make visual nodes for editor mode in game play. Item's selling for crypto values. Create examples demos in minimum 20 game play variants (table games, actions , platformers , basic demo trow the api doc etc.). Implementing AR and webGL2. Donate this project
  7. From the first day I realized the possibilities that bring html5 technology. especially full duplex networking (WebSockets), canvas2d and WebGL. I'd never worked professionally programming that was not html5. I loved VB6. But there are no jobs in Serbia for native apps. Many avoid using js so they use jq and boostrap and 91% .I want a comprehensive framework with the full range of possibilities. I want to strictly work on all modern devices. I heard comments that the WebSocket catty move. I guess it was about in the context of security . I dont like trouble working with other frameworks (needs learning).Best way for me was my own framework. Concept: For now it is possible only one Program . One program have a Modules (Arrays) for draw and update method very simple. One type of object can be pushed to the modules - game_object . On game object can be attached component like webcam , pencil collision etc. You can use custom draw also. Last update for API : API doc 1.0 ON_PAGE_EDITOR : If you use editor.js to visual create game object method , you must start ***node build_from_editor_to_visual_js_file.js*** on the end of work.This tool will create visual.js in folder starter/ with all your game object was created in editor style . My last update : Visual source editor win gui https://www.youtube.com/watch?v=kxUBPDhB-3I Visual Editor : Direct script edit .
  8. Thank you for response. i need 30 days to upgrade 3d part and make build lib in one file. I will give a note about this framework. Enjoy in 3d implementation - three.js . https://www.linkedin.com/pulse/webgl-3d-chat-application-threejsrtc-nikola-lukic?trk=prof-post https://www.linkedin.com/pulse/monster-run-tps-threejs-nikola-lukic?trk=mp-reader-card https://www.linkedin.com/pulse/visual-js-vs-threejs-tshirts-3d-design-html5-nikola-lukic?trk=mp-reader-card
  9. visual js API examples help - Take a look : -Add new game Object with single image: https://jsfiddle.net/zlatnaspirala/rjf0xe0a/ -Use For loop for creating objects https://jsfiddle.net/zlatnaspirala/noax17kz/ -Visual JS -Add Webcam to Object https://jsfiddle.net/zlatnaspirala/xsffd9v6/ -Add webcam with motion detect https://jsfiddle.net/zlatnaspirala/j60hh052/ -ZoomIn/ZoomOut game_object effect https://jsfiddle.net/zlatnaspirala/pjjow5q6/ -Translate object https://jsfiddle.net/zlatnaspirala/0tt6rmnq/ -Rotate object ( OSCILLATOR class ) https://jsfiddle.net/zlatnaspirala/1x7bq0gf/ -Add particle https://jsfiddle.net/zlatnaspirala/hoe9auLm/ -Add textbox https://jsfiddle.net/zlatnaspirala/0u5j1ap8/ view all at : https://jsfiddle.net/user/zlatnaspirala/fiddles/ slot demo: https://maximumroulette.com/framework/ Source : https://bitbucket.org/nikola_l/visual-js creator : Nikola Lukic about : Visual JS 2d canvas multiplatform game engine This is JavaScript game engine (server part node.js / client part js) Js framework with windows GUI editor and game instance creator. **Basic licence rules :** 1) Each file in this project has its own license , be careful , do not violate the basic rules. 2) You are free to use any version of Visual JS library in any other project (even commercial projects) as long as the copyright header is left intact Except for plugins on sale and graphics that come with them (they have special commercial licence). 3)Please read the following terms and conditions before using this application: Disclaimer of warranty 'Visual js' is provided "as-is" and without warranty of any kind, express, implied or otherwise, including without limitation, any warranty of merchantability or fitness for a particular purpose. In no event shall the author of this software be held liable for data loss, damages, loss of profits or any other kind of loss while using or misusing this software. External licences in this project : Webcam NUI control is under : Created by Romuald Quantin.http://creativecommons.org/licenses/by-nc-sa/3.0/ Download from : https://www.adobe.com/devnet/archive/html5/articles/javascript-motion-detection.html WEBRTC - webcam communication is under : Creator Muaz Khan www.MuazKhan.com MIT License - www.WebRTC-Experiment.com/licence Experiments - github.com/muaz-khan/WebRTC-Experiment Installation and setup : In server Instance folder (navigate to server_instance/) 1) Install next modules : In node.js command prompt or console enter next installation command : npm install mysql npm install delivery npm install express npm install mkdirp npm install socket.io npm install nodemailer@0.7.0 Setup config.js You will find config.js in server_instance folder : (All node.js application you can find in same folder (server_instance) . Some app have local usage ) module.exports = {VERSION : "0.5", PATH_OF_NODE_APP : "D:/PATH_TO_SERVER_INSTANCE_FOLDER/server/" , // EDIT HERE PATH_OF_WWW : "D:/xamp/htdocs/project_instance/", // PATH_TO_WWW EDIT HERE EDITOR_PORT : "1013", REG_PATH : "users/", ACCOUNT_PORT : 3666 , DESTROY_SESSION_AFTER_X_mSECUNDS : 20000, }; }; This is all . CLIENT OR WEB APPLICATION # How to start : 1) Copy project_instance/ folder to the www folder or use visual-js.exe and create new application (select folder for www and server path). 2) start server_instance/editor.js 3) In browser navigate to project-instance folder (index.html) Click right button and you will see content menu . First item is **Add New game object** . Than your game objectn will show at web page. Right click on rectangle area to see game object cantent menu. **local node.js application tools** ( *Use this in develop mode only* ): # - server_instance/res.js - create RESOURCE js object ( ADD image or images for animation ) put image or images in one folder for example TEST_RES/ . Put that folder in this location **project_instance/res/** . run server_instance/node res.js After finishing restart web page ind enter in console RESOURCE.TEST_RES RESOURCE have all images path data. When you create folder with image and build with *node res.js* we did not create images object. Images object will be created after you add animation to the game objects. This is good because memory safe. - server_instance/editor.js create game objects direct in web browser view.