Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.js"></script>
- <script src="https://unpkg.com/react@15.3.1/dist/react.min.js"></script>
- <script src="https://unpkg.com/react-dom@15.3.1/dist/react-dom.min.js"></script>
- <meta charset="UTF-8">
- <title>Stocks</title>
- </head>
- <body>
- <div id="main-div">
- </div>
- </div>
- <div id="stocks" style="display: none;">
- <p>asdasd</p>
- </div>
- <div id="login">
- <p id="login-form-info"></p>
- Username: <input id="login-username" type="text"><br>
- Password: <input id="login-password" type="password"><br>
- <button id="button-login" onclick="Login()">Login</button>
- <button id="button-goto-register" onclick="GoToRegister()">Register</button>
- </div>
- <div id="register" style="display: none;">
- Username: <input id="register-username" type="text"><br>
- Password: <input id="register-password" type="password"><br>
- Password again: <input id="register-password-again" type="password"><br>
- Email: <input id="register-email" type="email"><br>
- <button id="button-register" onclick="Register()">Register</button>
- </div>
- <script>
- var socket = io();
- function tr() {
- 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;
- var ctx = document.getElementById('chart').getContext('2d');
- var chart = new Chart(ctx, {
- type: 'line',
- data: {
- datasets: [{
- data: [0, 0, 0, 0, 0, 0],
- label: 'left dataset',
- yAxisID: 'left-y-axis',
- lineTension: 0,
- borderColor: "rgb(0, 0, 0)",
- fill: false
- }],
- labels: ['-0:50', '-0:40', '-0:30', '-0:20', '-0:10', 'Last data'],
- },
- options: {
- scales: {
- yAxes: [{
- id: 'left-y-axis',
- type: 'linear',
- position: 'left'
- }]
- }
- }
- });
- }
- //register
- function Register() {
- var username = document.getElementById('register-username');
- var password = document.getElementById('register-password');
- var password_again = document.getElementById('register-password-again');
- var email = document.getElementById('register-email');
- if (username.value !== undefined && username.value !== null && password.value === password_again.value && password.value !== null && password.value !== undefined && validateEmail(email.value)) {
- socket.emit('register-new-user', {
- username: username.value,
- password: password.value,
- password_again: password_again.value,
- email: email.value
- });
- } else {
- alert('Wrong input.');
- }
- }
- socket.on('user-register-complete', function (data) {
- document.getElementById('register').style.display = 'none';
- document.getElementById('login').style.display = 'inline';
- document.getElementById('login-form-info').innerHTML = data.message;
- });
- socket.on('register-error', function (data) {
- alert(data.message);
- });
- function GoToRegister() {
- document.getElementById('login').style.display = 'none';
- document.getElementById('register').style.display = 'inline';
- console.log('clicked');
- }
- // login
- function Login() {
- var username = document.getElementById('login-username');
- var password = document.getElementById('login-password');
- if (username.value !== undefined && username.value !== null && password.value !== null && password.value !== undefined) {
- socket.emit('login-into-game', {
- username: username.value,
- password: password.value,
- });
- }
- ;
- }
- socket.on('login-successful', function (data) {
- // document.getElementById('login').style.display = 'none';
- // document.getElementById('stocks').style.display = 'inline';
- //document.getElementById('chart').style.display = 'inline';
- ReactDOM.render(
- <h1>Hello, world!</h1>,
- document.getElementById('main')
- );
- });
- socket.on('login-error', function (data) {
- document.getElementById('login-form-info').innerHTML = data.message;
- });
- // in stocks
- function add(newData) {
- for (var x = 0; x < (chart.data.datasets[0].data.length); x += 1) {
- chart.data.datasets[0].data[x] = chart.data.datasets[0].data[(x + 1)];
- }
- if (chart.data.datasets[0].data[chart.data.datasets[0].data.length - 2] < newData) {
- chart.data.datasets[0].borderColor = "rgb(0, 200, 0)";
- } else if (chart.data.datasets[0].data[chart.data.datasets[0].data.length - 2] === newData) {
- chart.data.datasets[0].borderColor = "rgb(255, 250, 2)";
- } else if (chart.data.datasets[0].data[chart.data.datasets[0].data.length - 2] > newData) {
- chart.data.datasets[0].borderColor = "rgb(200, 0, 0)";
- } else {
- chart.data.datasets[0].borderColor = "rgb(0, 0, 0)";
- }
- chart.data.datasets[0].data[chart.data.datasets[0].data.length - 1] = newData;
- console.log('old - ' + chart.data.datasets[0].data[(chart.data.datasets[0].data.length - 2)] + ' | new - ' + newData);
- chart.update();
- }
- function getRandomInt(min, max) {
- min = Math.ceil(min);
- max = Math.floor(max);
- return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
- }
- function validateEmail(email) {
- 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,}))$/;
- return re.test(email);
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement