iV/menu.html at master · DamesMakingGames/iV · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html>
  <head>
  <title>iV Menu</title>
    <script type="text/javascript" src="/daimio_composite.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/public/css/bootstrap.css" rel="stylesheet">
    <link href="/public/css/styles.css" rel="stylesheet">
  </head>

  <body style="display:none">
    <div class="container">

      <div class="page-header">
        <div class="pull-right">
          <form id="add-game-form" class="form-inline">
            <div class="form-group">
              <input type="text" name="name" value="" id="name" class="form-control" placeholder="Game Name">
            </div>
            <input type="submit" name="submit" value="Add" class="btn btn-success">
          </form>
        </div>
        <h1>Welcome to iV</h1>
      </div>

      <ul id="game-list" data-daimio-template="show-all-games" class="media-list">
        {begin list | each data $games}
          <li class="media">
            <a class="pull-left" href="#">
              <img src="{_value.thumb}" height="100" width="100" class="media-object" >
            </a>
            <div class="media-body">
              <h4 class="media-heading">{_value.name}</h4>
              <p>By {_value.author}</p>
              <div class="btn-group">
                <!-- <a href="/{_value._id}/client" class="btn btn-default">Client</a> -->
                <a href="/{_value._id}" class="btn btn-default">Launch</a>
                <a href="/{_value._id}/admin" class="btn btn-default">Edit</a>
              </div>
            </div>
          </li>
          <hr>
        {end list}
      </ul>

  <script id="control" type="text/daml" class="spaceseeds">
    outer

      $games {}

      show-all-games

      // GET GAME DATA
      @server-read
      @init from-js
      @set-game-list dom-set-html game-list

      reader {external server-read url "gamedata" | list from-json}

      @init -> reader -> {__ | >$games} -> show-all-games -> @set-game-list
      reader.server-read* -> @server-read


      // ADD GAME
      @save-game     socket-out     save-game
      @add-game-form dom-on-submit
      @set-name-val  dom-set-value  name

      // make sure we have time to save the new game
      add-game-channel {process sleep for 100 | ""}

      @add-game-form -> @save-game
      @add-game-form -> add-game-channel -> @set-name-val
                        add-game-channel -> reader

  </script>


  <script src="/socket.io/socket.io.js"></script>
  <script type="text/javascript">

    document.addEventListener('DOMContentLoaded', function() {
      D.Etc.socket = io.connect('/')

      OuterSpace = D.make_me_a_space_as_fast_as_you_can()
      D.send_value_to_js_port(OuterSpace, 'init', 1)
    })

    D.import_models({
      external: {
        desc: 'Commands that reach outside our universe',
        methods: {
          "server-read": {
            desc: 'Get JSON over an XHR connection to the server',
            port: 'server-read',
            params: [
              {
                key: 'url',
                desc: 'A url on the server',
                type: 'string',
                required: true
              },
            ],
            fun: function(url, port, prior_starter) {
              port.sync(url, prior_starter)
              return NaN
            }
          }
        }
      }
    })

    D.import_port_flavour('server-read', {
      dir: 'down',
      outside_exit: function(ship, callback) {
        xhr_get(ship, callback)
      }
    })

    // load daimio file
    function xhr_get(target, callback) {
      var xhr = new XMLHttpRequest()
      xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
          callback(xhr.responseText)
        }
      }
      xhr.open('GET', target, true)
      xhr.send(null)
    }

  </script>

</body>
</html>