cloud-client/client.html at main · aeryli/cloud-client · 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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!--
Example client that can run in your browser.

Open this page, then open your browser console (usually F12 or Right Click -> Inspect Element)

Use setVariable("☁ variable", "1") to set variables.
Use getVariable("☁ variable") to read variables.
-->
<head>
  <title>Server Client - Scratch Client</title>
  <link rel="shortcut icon" href="https://scratch.mit.edu/favicon.ico">
  <script>var vartoget = "☁ variable"</script>
  <style>
    body {
      font-family: "Helvetica Neue", Helvetica, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
      background-color: #3498db;
      flex-direction: column;
    }
    .label {
      font-size: 9.45pt;
      font-weight: bold;
      color: #575E75;
      white-space: pre;
    }
    .var {
      display: inline-block;
      background-color: #FF8C1A;
      border-radius: 30px;
      font-size: 16.2pt;
      color: white;
      font-weight: 500;
      padding-top: 14px;
      padding-bottom: 14px;
      padding-left: 16px;
      padding-right: 16px;
      text-decoration: none;
      white-space: pre;
      margin: 5px;
    }
    .text {
      font-size: 81pt;
      color: black;
      font-weight: 750;
      line-height: 0.1;
      color: white;
      -webkit-text-stroke: 2px white;
    }
    .varC {
      font-size: 21pt;
      color: black;
      font-weight: 750;
      line-height: 0.1;
      color: white;
      -webkit-text-stroke: 1px white;
    }
  </style>
</head>
<body>
<p class="varC" id="varC">☁ variable</p>
<p class="text" id="text">1.000</p>
<div>
<button class="var" onclick="vartoget = prompt('Get Variable:');">get variable</button>
<button class="var" onclick="setVariable(vartoget, prompt('Number:'));">set variable</button>
<button class="var" onclick="ws = new WebSocket(prompt('New Server:'));">set server</button>
<button class="var" onclick="usrName = prompt('New Username:');">set username</button>

</div>

<script>
	var ws = new WebSocket('https://scratch-cloud.loca.lt/');
        var usrName = "user"
	var variables = {};

	function setVariable(name, value) {
	  console.log(`Setting variable: ${name} = ${value}`);
	  variables[name] = value;
	  ws.send(JSON.stringify({
	    method: "set",
	    name,
	    value
	  }));
	}

	function getVariable(name) {
	  return variables[name];
	}

	ws.onopen = () => {
	  console.log("Performing handshake");

	  // Tell the server which project you want to connect to.
	  ws.send(JSON.stringify({
	    method: "handshake",
	    project_id: "1234567",
	    user: usrName
	  }));

	  // To set a variable:
	  // setVariable("☁ variable", "1");
	  vartoget = "☁ variable"

	  // Use setInterval to constantly update a variable
	  setInterval(() => {
	     document.getElementById('text').textContent = getVariable(vartoget);
         document.getElementById('varC').textContent = vartoget;
	  }, 100);
	};

	ws.onmessage = (event) => {
	  // Process updates from the server.
	  for (const message of event.data.split("\n")) {
	    const obj = JSON.parse(message);
	    if (obj.method === "set") {
	      variables[obj.name] = obj.value;
	      console.log(`Server set variable: ${obj.name} = ${obj.value}`);
	    }
	  }
	};

	ws.onclose = () => {
	  console.log("Server closed connection");
	};

	ws.onerror = () => {
	  console.log("error!");
	  document.getElementById('text').textContent = 'error';
	};

</script>
</body>