UserAPdemo/index_old.html at master · BigNetwork/UserAPdemo · 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
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>index</title>
    <style type="text/css">
      body {

          background: #ff1cae;

      }
      #users {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
      }

      #users li {
        display: inline-block;
        background: #00ff00;
        border: 2px solid #000;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        padding: 3px;
        /*-moz-transform: rotate(-90deg);*/
      }

    </style>
  </head>
  <body id="index" onload="">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">

        $(document).ready(function(){
          $.getJSON("https://lan.bignetwork.se/index.php?event=wg11&controller=user&action=all&format=json", function(users){
            $.each(users, function(i, user){
              //if (user.ap != 0)
               $("<li id=\""+ user.id +"\" style=\"font-size:"+ (parseInt(user.ap/100)+11) +"\">").html(user.username + " - " + user.ap).appendTo("#users");
             })
             //animateUsers(0);
             renderUsers(0);
            //rotateUsers(0);
          });
          //$("#users.li").each();
        });

       // third try (can't animate functions (rotate() in jquery)
       function animateUsers(rotateCounter) {

          $('#users > li').each(function(i, user) {

            reanimateUsersFromTheDead(user, rotateCounter);
            /*$(user).stop().animate({
              '-moz-transform' : "rotate(-"+ rotateCounter +"deg)"
            }, 200, animateUsers(parseInt(rotateCounter)+30));
            */
          })
       }

       function reanimateUsersFromTheDead(user, rotateCounter) {
         console.log(user);
         $(user).animate({
           '-moz-transform' : "rotate(-"+ rotateCounter +"deg)"
         }, 200, reanimateUsersFromTheDead(user, (parseInt(rotateCounter)+30) ));

       }

       // second try -  Dubble buffering. (SLOW)
       function renderUsers(rotateCounter) {
          var newFrame = "";
             $('#users > li').each(function(i, user) {
                newFrame += "<li id=\""+ user.id +"\" style=\"font-size:"+ $(user).css('font-size') +"; -moz-transform: rotate(-"+ rotateCounter +"deg);\">" + $(user).html() +"</li>";
//                newFrame += "<li id=\""+ user.id +"\" style=\"font-size:"+ $(user).css('font-size') +"; -webkit-transform: rotate(-"+ rotateCounter +"deg);\">" + $(user).html() +"</li>";
              });
              $('#users').html(newFrame);
          setTimeout("renderUsers("+ ++rotateCounter +")", 30);
       }

       // first try - tick every element in loop (SLOW)
       function rotateUsers(rotateCounter) {

        // just happend to delete this code.

      //   setTimeout("rotateUsers("+ ++rotateCounter +")", 30);
       }

    </script>
    <ul id="users">

    </ul>
  </body>
</html>