Code Monkey home page Code Monkey logo

react-game's People

Contributors

benox3 avatar remarkablemark avatar

Watchers

 avatar  avatar

react-game's Issues

Load level/output in an `iframe`

Why

  • Prevent conflicts between page and level (e.g., dependency conflicts)
  • Make level design easier (you can edit document.body instead of using a given selector)

How

  • Load output as an iframe

Load level metadata from an external json file

An AJAX request is made to initialize the level from a JSON file or a YAML file.

JSON example:
{
    "id": "abc123",
    "title": "Introduction to console.log",
    "description": "Learn how to log to the JavaScript console.",
    "instructions": "Print a string using `console.log('Your string here');`.",
    "hint": "Substitute `Your string here` with your string.",
    "dependencies": [],
    "editor_language": "javascript",
    "editor_allowed_lines": [],
    "code": "// type your code below\n",
    "validator": "new Function('code', 'return /console\.log\(.{3,}\)/.test(code);');",
    "difficulty": 1,
    "estimated_time": "0.5",
    "author": "Mark <[email protected]",
    "contributors": [
        "Ben <[email protected]>"
    ],
    "keywords": [
        "javascript",
        "console",
        "logging"
    ],
    "created": "2016-01-16T20:38:53.956Z",
    "updated": null
}

Recommend users upgrade older browsers

Target IE users and display a warning on the top of the page. Link to Browse Happy.

<!--[if lte IE 9]>
<div class="alert alert-warning">
    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
    <p>You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com">upgrade your browser</a> to improve your experience.</p>
</div>
<![endif]-->

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.