Skip to content

Latest commit

 

History

History
284 lines (219 loc) · 9.1 KB

draftboys.org

File metadata and controls

284 lines (219 loc) · 9.1 KB
Raw

D R A F T B O Y S

This is free and unencumbered software released into the public domain.

Anyone is free to copy, modify, publish, use, compile, sell, or distribute this
software, either in source code form or as a compiled binary, for any purpose,
commercial or non-commercial, and by any means.

In jurisdictions that recognize copyright laws, the author or authors of this
software dedicate any and all copyright interest in the software to the public
domain. We make this dedication for the benefit of the public at large and to
the detriment of our heirs and successors. We intend this dedication to be an
overt act of relinquishment in perpetuity of all present and future rights to
this software under copyright law.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.  IN NO EVENT SHALL THE
AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

For more information, please refer to <http://unlicense.org/>

Some of the most fun DotA 2 games I’ve played have been the ones played with friends playing specific heroes in a prepared strategy. And as the group of friends I play with comes closer to forming an actual team, drafting theory becomes more and more important.

D R A F T B O Y S is an application I hope will be helpful for myself, my friends, and people with similar goals in DotA 2. It is also a project which will help me practice Cordova, Nim, literate programming, and App Engine.

Build and run.

To build and run D R A F T B O Y S you will need:

First, compile the Nim project into JavaScript.

cd cordova
nim js -o:www/js/draftboys.js src/draftboys

Then, run the Cordova app on a device or emulator.

cordova run

Or test it in a browser.

cordova serve

The app will connect to the App Engine API endpoint by default. If you need to test changes to the server, you will need to change the endpoint to localhost and run the App Engine project locally.

cd appengine
goapp serve

Configure Cordova.

The file layout of a Cordova project is way too complicated to put in a literate program in anything close to a complete form. For more help on Cordova’s specifics, check out the documentation for the latest version.

The one Cordova file I will write in literate form is config.xml. The most important things in this file are the version (which will change often) and the app metadata (which should not have to change very often). Everything else is copied from the default Cordova project’s config.xml.

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.jaccarmac.draftboys" version="0.5.2"
        xmlns="http://www.w3.org/ns/widgets"
        xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <name>DRAFTBOYS</name>
  <description>
    Create, manage, and share DotA 2 drafts.
  </description>
  <author email="[email protected]" href="http://jaccarmac.com">
    Jacob MacDonald
  </author>
  <content src="index.html" />
  <plugin name="cordova-plugin-whitelist" version="1" />
  <access origin="*" />
  <allow-intent href="http://*/*" />
  <allow-intent href="https://*/*" />
  <allow-intent href="tel:*" />
  <allow-intent href="sms:*" />
  <allow-intent href="mailto:*" />
  <allow-intent href="geo:*" />
  <platform name="android">
    <allow-intent href="market:*" />
  </platform>
</widget>

Provide content for single-page app.

D R A F T B O Y S is a single-age app, so all the content for it is stored in one HTML file.

The beginning of the file contains metadata, a CSS link, and a declaration of a div with a class of app. All content will be put in app.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1,
                                       maximum-scale=1, minimum-scale=1,
                                       width=device-width,
                                       height=device-height,
                                       target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/draftboys.css">
        <title>D R A F T B O Y S</title>
    </head>
    <body>
        <div class="app">

The end of the file include relevant JavaScript and closes all the relevant tags.

        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/draftboys.js"></script>
    </body>
</html>

This is a placeholder tag with an ID to hook onto.

<h1 id="placeholder"></h1>

Style the document.

This section is a placeholder for now.

Implement app behavior.

The meat of the project is the actual behavior, which is implemented in Nim before it gets compiled to JavaScript. Nim has a pretty good dom module and an excellent FFI for JavaScript which we can use to fill in the holes in dom.

This section will contain subsections as the app matures. For now, here is some simple placeholder behavior. A placeholder listener is bound to the deviceready event.

import dom

const
  endpoint = "http://0-dot-draftboys-dota.appspot.com"

proc lazyRequest(endpoint: cstring): cstring {.importc.}

proc placeholderListener(event: ref TEvent) =
  let
    placeholder = document.getElementById("placeholder")
    api = lazyRequest(endpoint)
  placeholder.innerHTML = "Hello from Nim! "
  placeholder.innerHTML = $placeholder.innerHTML & $api

document.addEventListener("deviceready", placeholderListener)
<script type="text/javascript">
 var lazyRequest = function(endpoint) {
     var httpRequest = new XMLHttpRequest();
     httpRequest.open('GET', endpoint + '/api/placeholder', false);
     httpRequest.send();
     return httpRequest.responseText;
 };
</script>

Configure App Engine.

There is only standard Go App Engine configuration data here. The version does change, but only on major version bumps. This way, there is less risk of forgetting to version bump. The API must not be broken except over major versions. Version 0 is exempt, of course.

runtime: go
api_version: go1

handlers:
  - url: /.*
    script: _go_app

Provide API.

Subsections will appear here eventually. For now there is a simple responder.

package draftboys

import (
        "fmt"
        "net/http"
)

func init() {
        http.HandleFunc("/api/placeholder", placeholder)
}

func placeholder(w http.ResponseWriter, r *http.Request) {
        w.Header().Add("Access-Control-Allow-Origin", "*")
        fmt.Fprint(w, "Hello from App Engine!")
}

Tangle source code.

cordova/config.xml

<<config.xml>>

cordova/www/index.html

<<index.html-header>>
<<index.html-placeholder>>
<<index.html-lazy-request>>
<<index.html-footer>>

cordova/www/css/draftboys.css



cordova/src/draftboys.nim


<<draftboys.nim-placeholder>>


appengine/app.yaml


<<app.yaml>>


appengine/draftboys.go


<<draftboys.go-placeholder>>