diff options
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/premades_html.jinja | 157 |
1 files changed, 93 insertions, 64 deletions
diff --git a/templates/premades_html.jinja b/templates/premades_html.jinja index 8fc4043..565ef21 100644 --- a/templates/premades_html.jinja +++ b/templates/premades_html.jinja @@ -1,4 +1,5 @@ -<html><head> +<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" /> @@ -7,97 +8,125 @@ </head> <body onload="onLoad();"> - <ul id="menu"> - <li class="menu app"><a class="joinbutton" href="lobby">Lobbylinkfinder</a></li> - </ul> - - <div class="form"> - Copy&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> + <ul id="menu"> + <li class="menu app"><a class="joinbutton" href="lobby">Lobbylinkfinder</a></li> + </ul> + <div class="form"> + Copy&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" value="Premades finden!" /> + </form> + </div> - {% if steamids %} - + {% if steamids %} <script type="text/javascript"> - function onLoad(){ - var graph = Viva.Graph.graph(); + function onLoad() { + const 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 %}}); + graph.addNode('{{ steamid }}', + { + url: "{{ profiles[steamid]['avatarmedium'] }}", + name: "{{ profiles[steamid]['personaname']|e }}", + details1: "{{ profiles[steamid]['_ownedPlayedGames']|e }}", + details2: "{{ profiles[steamid]['_userstats']['total_time_played']|e }}", + friends: {% if profiles[steamid]['communityvisibilitystate'] == 3 %} "yes" {% else %} "no" {% endif %} + } + ) {% endfor %} + {% for connection in connections %} - graph.addLink('{{ connection[0] }}', '{{ connection[1] }}'); + graph.addLink("{{ connection[0] }}", "{{ connection[1] }}"); {% endfor %} - var graphics = Viva.Graph.View.svgGraphics(); + const graphics = Viva.Graph.View.svgGraphics() graphics.node( - function(node) { - if (node.data) { - var ui = Viva.Graph.svg('g'), - svgText = Viva.Graph.svg('text') + (node) => { + if (!node.data) return + + const ui = Viva.Graph.svg('g') + ui.append(Viva.Graph.svg('text') + .attr('text-anchor', 'middle') + .attr('fill', 'rgb(150, 150, 0)') + .attr('x', '+16px') + .attr('y', '-8px') + .text(node.data.name) + ) + ui.append(Viva.Graph.svg('image') + .attr('width', 32) + .attr('height', 32) + .link(node.data.url) + ) + if (node.data.details1) { + const col = (node.data.details1 < 10) ? 'rgb(150, 0, 0)' : 'rgb(150, 150, 0)' + ui.append(Viva.Graph.svg('text') .attr('text-anchor', 'middle') - .attr('fill', 'rgb(150, 150, 0)') + .attr('fill', col) .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') + .text(`Steamspiele: ${node.data.details1}`) + ) + } + if (node.data.details2) { + ui.append(Viva.Graph.svg('text') + .attr('text-anchor', 'middle') + .attr('fill', 'rgb(150, 150, 0)') + .attr('x', '+16px') + .attr('y', '+64px') + .text(`Spielzeit: ${Math.floor(node.data.details2 / 3600)}h`) + ) + } + if (node.data.friends == 'no') { + ui.append(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; + .attr('fill', 'red') + ) } + 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) + - ')'); + ) + .placeNode( + (nodeUI, pos) => { + 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 - }); + const 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 - }); + const renderer = Viva.Graph.View.renderer(graph, + { + container: document.getElementById('premades'), + graphics: graphics, + layout: layout + } + ) - renderer.run(); - }; - </script> + renderer.run() + } + </script> <div id="premades"> </div> + <div id="info"> - (Private Profile sind durch eine rote Umrandung gekennzeichnet.) + <strong>Steamspiele</strong>: Anzahl von Steamspielen mit Spielzeit. <br \> + <strong>Spielzeit</strong>: Die aktive Spielzeit in CSGO. <br \> + <strong>Private Profile</strong> sind durch einen roten Rahmen gekennzeichnet. <br \> </div> - {% endif %} + {% endif %} </body> </html> - -{# vim: commentstring={#\ %s\ #} |