Giter Site home page Giter Site logo

gameobject's Introduction

GameObject

Experimental Alpha Not fully Operational. App and game building container system for JavaScript. Standard event bubbling, parent detection, and gluemap injection. Gluemap eliminates syntax that mixes template delimiters into your assets. This makes them renderable without bundeleres and compilers. Your UI assets are just standard HTML UI Chunks that work in any browser with zero dependencies and zero bundling or compiling.

Install

npm install gameobject 

Usage

// WRAP GameObject
var obj1 = GameObject( { ui:'/examples/bubble.html'} )  // Use directly to wrap working chunks of HTML UI. So fun. 
var obj2 = GameObject( { ui:'/examples/button.html'} ) //  Map , Make big projects fun. 

// or

// EXTEND GameObject
class FunApp extends GameObject {
    constructor( initObj ){
    
        this.loadUi('menubar.html')
        
        library.renderSync( 'menubar' , { 'title':'wut'} )
    }
}  // extent GameObject 


var app = new FunApp() // extends GameObject 



var eventVacuum = new EventVacuum( { } );

eventVacuum.findSubjects( app ) ; // iterate interests

UI Chunks ©™

UI Chunks are plain regular HTML that can load directly into any browser. Sprinkle attributes as hints about event triggers and interactivity.

<body>
    <div id="theComponent">
        <div>
            <span id='somefunk_x'></span>
        </div>
    </div>
</body>

Factory + Library

These modules make it possible to forget loading, callbacks, rendering. While it is possible to use GameObject acrynchronously, it is more fun and easy to eliminate callbacks all together by throwing in a list of your UI Chunks urls ( ['header.html','menu.html'] ). This enables Factory to grab Chunks from the Library and inject them using Gluemap. Gluemap in next section.

Gluemap

Easy Gluemap heuristics based data injection. Selective, inferred or brute. Many injection results may not be perfect but something will happen.

Techicals

GameObject uses Range objects ( standard Document.createRange() ) to enable element node selection and mutation, while event bubbling is handled via standard javascript addEventListener calls with CustomEvent.

Speed

May be slower than other frameworks that use virtual doms, compilers and template syntax because Gluemap + Factory + Library combo are geard towards intuitive nesting of interactive objects without using anything except standard HTML. This means it all happens at run-time, so if you need to render 10,000 nodes you may be better off with the more popular frameworks like react.

GOBG GOBG Some icons future space in here

#more templates

gameobject's People

Contributors

emdax avatar psytron avatar

Stargazers

 avatar  avatar

Watchers

 avatar

Forkers

emdax

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.