{"name":"REtW Week 5","description":"Embark on an exciting journey to explore the secrets of networking! Join Netty the Explorer and her friends as they learn how computers communicate over the internet in a fun and interactive way.","photo":null,"view_count":10,"fork_count":0,"expires_at":null,"created_at":"2024-05-23T23:13:19.767616Z","updated_at":"2024-06-17T19:22:34.944809Z","user_id":58,"status":"PRIVATE","parent_id":1494,"id":1550,"user":{"photo":null,"email":null,"recess_id":"220907e8-9fd0-2b24-59d6-6ec3b554eb5b","created_at":"2024-02-22T20:13:06.442589Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"perychuk","id":58,"password_hash":null,"updated_at":"2024-02-22T20:13:06.442598Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"\n///////////CLIENT.JS//////\n//Check the auth button. Is the password correct?\ndocument.getElementById('authButton').addEventListener('click', () => {\n const password = document.getElementById('passwordInput').value;\n ws.send(JSON.stringify({ type: 'authenticate', password }));\n});\n\n\n// An IP address is a computer's online idea. In this case, the server's.\nconst serverIp = '76.82.105.51';\n//The WebSocket API makes it pretty easy to set up a Network and Ports\n//\"3000\" refers to a port -- a place through which information flows.\nconst ws = new WebSocket(`ws://${serverIp}:3000`);\n\n//We use the API to handle different types of events.\nws.onopen = () => {\n console.log(\"WebSocket connection established\");\n};\n\nws.onerror = (error) => {\n console.error(\"WebSocket error:\", error);\n alert(\"Can't connect to the server. Boo hoo.\");\n};\n\nws.onclose = () => {\n console.log(\"WebSocket connection closed\");\n alert(\"Server connection closed. Sorry!\");\n};\n\n//This is the main function that handles sending messages.\nws.onmessage = (event) => {\n //We will store the message in 'data'.\n const data = JSON.parse(event.data);\n\n if (data.type === 'authenticated') {\n document.getElementById('authSection').style.display = 'block';\n }\n\n if (data.type === 'error') {\n alert(data.message);\n }\n\n if (data.type === 'userList') {\n const userList = document.getElementById('userList');\n userList.innerHTML = '';\n data.users.forEach(user => {\n //This is a list\n const li = document.createElement('li');\n li.textContent = user;\n userList.appendChild(li);\n });\n }\n\n //Actually show the message\n if (data.type === 'message') {\n //Grab the HTML element we set up to hold messages.\n const messages = document.getElementById('messages');\n const messageElement = document.createElement('div');\n messageElement.textContent = `${data.from}: ${data.message}`;\n messages.appendChild(messageElement);\n }\n};\n\n//The connect button\ndocument.getElementById('connectButton').addEventListener('click', () => {\n const userId = document.getElementById('userIdInput').value;\n ws.send(JSON.stringify({ type: 'register', userId }));\n});\n\n//The send message button\ndocument.getElementById('sendButton').addEventListener('click', () => {\n const message = document.getElementById('messageInput').value;\n const toUserId = document.getElementById('toUserIdInput').value;\n ws.send(JSON.stringify({ type: 'message', to: toUserId, message }));\n});\n\n/////////////////////////////////////////////\n\n\n/////SERVER.JS/////\n//This should be its own file.\n/*\nconst express = require('express');\nconst http = require('http');\nconst WebSocket = require('ws');\n\nconst app = express();\nconst server = http.createServer(app);\nconst wss = new WebSocket.Server({ server });\n\nconst connections = {};\nconst PASSWORD = \"jippity\"; \n\napp.use(express.static('public'));\n\nwss.on('connection', (ws) => {\n let userId = null;\n\n ws.on('message', (message) => {\n console.log(\"Received message from client:\", message);\n const data = JSON.parse(message);\n\n if (data.type === 'authenticate') {\n console.log(\"Authentication request received with password:\", data.password);\n if (data.password === PASSWORD) {\n ws.send(JSON.stringify({ type: 'authenticated' }));\n console.log(\"Authentication successful.\");\n } else {\n ws.send(JSON.stringify({ type: 'error', message: 'Invalid password' }));\n console.log(\"Authentication failed. Invalid password.\");\n ws.close();\n }\n }\n\n if (data.type === 'register') {\n console.log(\"Registering user ID:\", data.userId);\n userId = data.userId;\n connections[userId] = ws;\n broadcastUserList();\n }\n\n if (data.type === 'message') {\n console.log(\"Sending message to user ID:\", data.to, \"Message:\", data.message);\n const recipientWs = connections[data.to];\n if (recipientWs) {\n recipientWs.send(JSON.stringify({ type: 'message', from: userId, message: data.message }));\n }\n }\n });\n\n ws.on('close', () => {\n if (userId) {\n console.log(\"User disconnected:\", userId);\n delete connections[userId];\n broadcastUserList();\n }\n });\n\n function broadcastUserList() {\n const userList = Object.keys(connections);\n for (const user in connections) {\n connections[user].send(JSON.stringify({ type: 'userList', users: userList }));\n }\n }\n});\n\nserver.listen(3000, () => {\n console.log('Server started on http://localhost:3000');\n});\n*/\n","style.css":"","index.html":"\n\n\n\n REtW Week 5\n\n\n\n

REtW Week 5: Networking

Enter Password to Connect:

\n \n \n \n \n \n \n \n \n\n\n"},"chat_history":[],"assets":[],"messages_sent":0,"comments":[],"steps":[{"instruction":"Meet the adventurous protagonist who will guide the players through the world of networking.","title":"Introduce Netty the Explorer","created_at":"2024-05-21T13:51:15.658913","project_id":1550,"complete":false,"step_number":0,"updated_at":"2024-05-23T23:13:19.771588","id":8620},{"instruction":"Explore a visually appealing map representing a network, with computers and connections that the players can interact with.","title":"Interactive Network Map","created_at":"2024-05-21T13:51:15.658970","project_id":1550,"complete":false,"step_number":1,"updated_at":"2024-05-23T23:13:19.771679","id":8621},{"instruction":"Allow players to send and receive messages between computers, emphasizing the concept of data transmission over a network.","title":"Send and Receive Messages","created_at":"2024-05-21T13:51:15.659013","project_id":1550,"complete":false,"step_number":2,"updated_at":"2024-05-23T23:13:19.771774","id":8622},{"instruction":"Incorporate mini-games that reinforce networking concepts in a fun and interactive way.","title":"Mini Games for Learning","created_at":"2024-05-21T13:51:15.659053","project_id":1550,"complete":false,"step_number":3,"updated_at":"2024-05-23T23:13:19.771823","id":8623},{"instruction":"Implement controls for Netty and her friends to navigate through the network map and interact with different elements.","title":"Character Movement Controls","created_at":"2024-05-21T13:51:15.659092","project_id":1550,"complete":false,"step_number":4,"updated_at":"2024-05-23T23:13:19.771867","id":8624},{"instruction":"Track the players' progress and provide feedback to reinforce learning and encourage exploration.","title":"Score and Progress Tracking","created_at":"2024-05-21T13:51:15.659131","project_id":1550,"complete":false,"step_number":5,"updated_at":"2024-05-23T23:13:19.771912","id":8625},{"instruction":"Add visually appealing animations to demonstrate data transmission and network interactions in an engaging manner.","title":"Visual Animations","created_at":"2024-05-21T13:51:15.659169","project_id":1550,"complete":false,"step_number":6,"updated_at":"2024-05-23T23:13:19.771973","id":8626},{"instruction":"Include an interactive quiz to test players' understanding of networking concepts and reinforce learning outcomes.","title":"Interactive Quiz","created_at":"2024-05-21T13:51:15.659230","project_id":1550,"complete":false,"step_number":7,"updated_at":"2024-05-23T23:13:19.772020","id":8627}]}

REtW Week 5: Networking

Choose an ID

Online Users

Send a Message

Messages