Advertisement
Guest User

d

a guest
Jul 28th, 2017
473
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.33 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
  5. <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.js"></script>
  6. <script src="https://unpkg.com/react@15.3.1/dist/react.min.js"></script>
  7. <script src="https://unpkg.com/react-dom@15.3.1/dist/react-dom.min.js"></script>
  8. <meta charset="UTF-8">
  9. <title>Stocks</title>
  10. </head>
  11. <body>
  12.  
  13. <div id="main-div">
  14.  
  15. </div>
  16. </div>
  17. <div id="stocks" style="display: none;">
  18. <p>asdasd</p>
  19.  
  20. </div>
  21. <div id="login">
  22. <p id="login-form-info"></p>
  23. Username: <input id="login-username" type="text"><br>
  24. Password: <input id="login-password" type="password"><br>
  25. <button id="button-login" onclick="Login()">Login</button>
  26. <button id="button-goto-register" onclick="GoToRegister()">Register</button>
  27. </div>
  28. <div id="register" style="display: none;">
  29. Username: <input id="register-username" type="text"><br>
  30. Password: <input id="register-password" type="password"><br>
  31. Password again: <input id="register-password-again" type="password"><br>
  32. Email: <input id="register-email" type="email"><br>
  33. <button id="button-register" onclick="Register()">Register</button>
  34. </div>
  35. <script>
  36. var socket = io();
  37.  
  38. function tr() {
  39. document.getElementById('stocks').innerHTML = '<canvas id="chart" width="400" height="400" style="max-height: 400px; max-width: 400px; min-height: 400px; min-width: 400px;"></canvas>' + document.getElementById('stocks').innerHTML;
  40. var ctx = document.getElementById('chart').getContext('2d');
  41. var chart = new Chart(ctx, {
  42. type: 'line',
  43. data: {
  44. datasets: [{
  45. data: [0, 0, 0, 0, 0, 0],
  46. label: 'left dataset',
  47. yAxisID: 'left-y-axis',
  48. lineTension: 0,
  49. borderColor: "rgb(0, 0, 0)",
  50. fill: false
  51. }],
  52. labels: ['-0:50', '-0:40', '-0:30', '-0:20', '-0:10', 'Last data'],
  53. },
  54. options: {
  55. scales: {
  56. yAxes: [{
  57. id: 'left-y-axis',
  58. type: 'linear',
  59. position: 'left'
  60. }]
  61. }
  62. }
  63. });
  64. }
  65.  
  66.  
  67.  
  68. //register
  69.  
  70. function Register() {
  71. var username = document.getElementById('register-username');
  72. var password = document.getElementById('register-password');
  73. var password_again = document.getElementById('register-password-again');
  74. var email = document.getElementById('register-email');
  75. if (username.value !== undefined && username.value !== null && password.value === password_again.value && password.value !== null && password.value !== undefined && validateEmail(email.value)) {
  76. socket.emit('register-new-user', {
  77. username: username.value,
  78. password: password.value,
  79. password_again: password_again.value,
  80. email: email.value
  81. });
  82. } else {
  83. alert('Wrong input.');
  84. }
  85. }
  86.  
  87. socket.on('user-register-complete', function (data) {
  88. document.getElementById('register').style.display = 'none';
  89. document.getElementById('login').style.display = 'inline';
  90. document.getElementById('login-form-info').innerHTML = data.message;
  91. });
  92.  
  93. socket.on('register-error', function (data) {
  94. alert(data.message);
  95. });
  96.  
  97. function GoToRegister() {
  98. document.getElementById('login').style.display = 'none';
  99. document.getElementById('register').style.display = 'inline';
  100. console.log('clicked');
  101. }
  102.  
  103. // login
  104.  
  105. function Login() {
  106. var username = document.getElementById('login-username');
  107. var password = document.getElementById('login-password');
  108. if (username.value !== undefined && username.value !== null && password.value !== null && password.value !== undefined) {
  109. socket.emit('login-into-game', {
  110. username: username.value,
  111. password: password.value,
  112. });
  113. }
  114. ;
  115. }
  116.  
  117. socket.on('login-successful', function (data) {
  118. // document.getElementById('login').style.display = 'none';
  119. // document.getElementById('stocks').style.display = 'inline';
  120. //document.getElementById('chart').style.display = 'inline';
  121. ReactDOM.render(
  122. <h1>Hello, world!</h1>,
  123. document.getElementById('main')
  124. );
  125. });
  126.  
  127. socket.on('login-error', function (data) {
  128.  
  129. document.getElementById('login-form-info').innerHTML = data.message;
  130. });
  131.  
  132. // in stocks
  133.  
  134. function add(newData) {
  135. for (var x = 0; x < (chart.data.datasets[0].data.length); x += 1) {
  136. chart.data.datasets[0].data[x] = chart.data.datasets[0].data[(x + 1)];
  137. }
  138. if (chart.data.datasets[0].data[chart.data.datasets[0].data.length - 2] < newData) {
  139. chart.data.datasets[0].borderColor = "rgb(0, 200, 0)";
  140. } else if (chart.data.datasets[0].data[chart.data.datasets[0].data.length - 2] === newData) {
  141. chart.data.datasets[0].borderColor = "rgb(255, 250, 2)";
  142. } else if (chart.data.datasets[0].data[chart.data.datasets[0].data.length - 2] > newData) {
  143. chart.data.datasets[0].borderColor = "rgb(200, 0, 0)";
  144. } else {
  145. chart.data.datasets[0].borderColor = "rgb(0, 0, 0)";
  146. }
  147. chart.data.datasets[0].data[chart.data.datasets[0].data.length - 1] = newData;
  148. console.log('old - ' + chart.data.datasets[0].data[(chart.data.datasets[0].data.length - 2)] + ' | new - ' + newData);
  149. chart.update();
  150. }
  151. function getRandomInt(min, max) {
  152. min = Math.ceil(min);
  153. max = Math.floor(max);
  154. return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
  155. }
  156.  
  157. function validateEmail(email) {
  158. var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  159. return re.test(email);
  160. }
  161.  
  162. </script>
  163. </body>
  164. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement