summaryrefslogtreecommitdiff
path: root/templates/premades_html.jinja
blob: 8fc404383c014403d473f5c7efd910c8ed8cc48b (plain)
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
<html><head>
    <title>CS:GO Premadefinder</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="static/style.css" />
    <link rel="icon" type="image/png" href="static/favicon.png" />
    <script src="static/vivagraph.min.js"></script>
  </head>
  <body onload="onLoad();">

    <ul id="menu">
      <li class="menu app"><a class="joinbutton" href="lobby">Lobbylinkfinder</a></li>
    </ul>

    <div class="form">
      Copy&amp;Paste den Inhalt von 'status' aus der Konsole.<br />
      <form action="premadefinder" method="post">
        <textarea name="statustext" cols="75" rows="10"></textarea><br />
        <input class="joinbutton" type="submit" name="Freunde finden!" />
      </form>
    </div>


    {% if steamids %}

    <script type="text/javascript">
      function onLoad(){
        var graph = Viva.Graph.graph();

        {% for steamid in steamids %}
        graph.addNode('{{ steamid }}', {url: '{{ profiles[steamid]['avatarmedium'] }}', name: '{{ profiles[steamid]['personaname']|e }}', link: '{{ profiles[steamid]['profileurl'] }}', friends: {% if profiles[steamid]['communityvisibilitystate'] == 3 %} 'yes' {% else %} 'no' {% endif %}});
        {% endfor %}
        {% for connection in connections %}
        graph.addLink('{{ connection[0] }}', '{{ connection[1] }}');
        {% endfor %}

        var graphics = Viva.Graph.View.svgGraphics();
        graphics.node(
          function(node) {
            if (node.data) {
              var ui = Viva.Graph.svg('g'),
                svgText = Viva.Graph.svg('text')
                .attr('text-anchor', 'middle')
                .attr('fill', 'rgb(150, 150, 0)')
                .attr('x', '+16px')
                .attr('y', '+48px')
                .text(node.data.name),
                img = Viva.Graph.svg('image')
                .attr('width', 32)
                .attr('height', 32)
                .link(node.data.url),
                border = Viva.Graph.svg('rect')
                .attr('width', 36)
                .attr('height', 36)
                .attr('x', '-2px')
                .attr('y', '-2px')
                .attr('fill', 'red');
              if (node.data.friends == 'no') {
                ui.append(border);
              }
              ui.append(img);
              ui.append(svgText);
              return ui;
            }
          }
        ).placeNode(
          function(nodeUI, pos){
            // Shift image to let links go to the center:
            nodeUI.attr('transform',
              'translate(' +
              (pos.x - 16) + ',' + (pos.y - 16) +
              ')');
          }
        );

        var layout = Viva.Graph.Layout.forceDirected(graph, {
          stableThreshold : 0.09,
          springLength : 150,
          springCoeff : 0.0008,
          dragCoeff : 0.05,
          gravity : -1.0
        });

        var renderer = Viva.Graph.View.renderer(graph, {
          container: document.getElementById('premades'),
          graphics : graphics,
          layout : layout
        });

        renderer.run();
      };
    </script>

    <div id="premades">
    </div>
    <div id="info">
        (Private Profile sind durch eine rote Umrandung gekennzeichnet.)
    </div>
    {% endif %}

  </body>
</html>

{# vim: commentstring={#\ %s\ #}