cubstart · fungwilson3 · Mar 16, 2025 · Mar 17, 2025 · Mar 21, 2025 · Mar 21, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "express": "^4.21.2",
+    "socket.io": "^4.8.1"
+  }
+}
diff --git a/week3/wilson_fung/cookieGame.html b/week3/wilson_fung/cookieGame.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <link rel="stylesheet" href="style.css" />
+        <title>Cookie Clicker</title>
+        <style>
+            .sidebar {
+            width: 250px;
+            background-color: #333;
+            color: white;
+            padding: 20px;
+            position: fixed;
+            left: 0;
+            top: 0;
+            bottom: 0;
+            }
+
+            .sidebar h2 {
+            text-align: center;
+            margin-bottom: 20px;
+            }
+        </style>
+    <body>
+        <div class="sidebar">
+            <h2>Store Right Now</h2>
+            <p>Coming soon...</p>
+        </div>
+
+        <h1>Cookie Clicker</h1> 
+        <h2>Click the cookie to get more cookies!</h2>
+        <h1>
+            <span id="counter">0</span> cookies
+        </h1>
+        <img src="https://www.gfifoods.com/media/catalog/product/cache/608c797bf41e8874bcf75172f32fd01b/1/_/1.520oz20cookie_20220613-094305_rqhft3tmv23k13bn.jpg" onclick="handleClick()" />
+        <p id="result">Click speed: 0 CPS</p>
+        <script src="script.js"></script>
+
+
+    </body>
+</html>
diff --git a/week3/wilson_fung/script.js b/week3/wilson_fung/script.js
@@ -0,0 +1,22 @@
+let lastClickTime = 0;
+
+function handleClick() {
+    addOneToCounter();
+    calculateClickSpeed();
+}
+
+function addOneToCounter(){
+    document.getElementById("counter").innerText = parseInt(document.getElementById("counter").innerText) + 1
+}
+
+function calculateClickSpeed() {
+    let currentTime = Date.now();
+
+    if (lastClickTime !== 0) {
+        let timeDiff = (currentTime - lastClickTime) / 1000;
+        let cps = 1 / timeDiff;
+        document.getElementById("result").innerText = `Click speed: ${cps.toFixed(2)} CPS`;
+    }
+
+    lastClickTime = currentTime;
+}
diff --git a/week3/wilson_fung/style.css b/week3/wilson_fung/style.css
@@ -0,0 +1,39 @@
+img {
+    width: 200px;
+}
+
+body {
+    text-align: center;
+    font-family: "Helvetica";
+    background: white;
+    color: black;
+}
+
+
+@keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  h1 {
+    font-size: 36px;
+    color: black;
+    animation: fadeIn 2s ease-in-out;
+  }
+
+  p {
+    font-size: 18px;
+    color: black;
+    animation: fadeIn 3s ease-in-out;
+  }
+
+
+.headshot{
+    width: 200px;
+    border-radius: 50%;
+    box-shadow: 5px 5px 5px #888888;
+}
diff --git a/week5/wilson_fung/empty/package.json b/week5/wilson_fung/empty/package.json
@@ -0,0 +1,6 @@
+{
+    "name": "socket-empty",
+    "version": "0.0.1",
+    "description": "my first socket.io app",
+    "dependencies": {}
+  }
diff --git a/week5/wilson_fung/index.html b/week5/wilson_fung/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Socket.IO chat</title>
+    <style>
+      body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
+
+      #form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
+      #input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
+      #input:focus { outline: none; }
+      #form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
+
+      #messages { list-style-type: none; margin: 0; padding: 0; }
+      #messages > li { padding: 0.5rem 1rem; }
+      #messages > li:nth-child(odd) { background: #efefef; }
+    </style>
+  </head>
+  <body>
+    <ul id="messages"></ul>
+    <form id="form" action="">
+      <input id="input" autocomplete="off" /><button>Send</button>
+    </form>
+    <script src="/socket.io/socket.io.js"></script>
+      <script>
+      var socket = io();
+
+      var messages = document.getElementById('messages');
+      var form = document.getElementById('form');
+      var input = document.getElementById('input');
+
+      form.addEventListener('submit', function(e) {
+        e.preventDefault();
+        if (input.value) {
+          socket.emit('chat message', input.value);
+          input.value = '';
+        }
+      });
+
+      socket.on('chat message', function(msg) {
+        var item = document.createElement('li');
+        item.textContent = msg;
+        messages.appendChild(item);
+        window.scrollTo(0, document.body.scrollHeight);
+      });
+      </script>
+  </body>
+</html>
diff --git a/week5/wilson_fung/index.js b/week5/wilson_fung/index.js
@@ -0,0 +1,33 @@
+const express = require('express');
+const app = express();
+const http = require('http');
+const server = http.createServer(app);
+const { Server } = require("socket.io");
+const io = new Server(server);
+
+app.get('/', (req, res) => {
+  res.sendFile(__dirname + '/index.html');
+});
+
+io.on('connection', (socket) => {
+  console.log('a user connected');
+  socket.on('disconnect', () => {
+    console.log('user disconnected');
+  });
+});
+
+io.on('connection', (socket) => {
+  socket.on('chat message', (msg) => {
+    console.log('message: ' + msg);
+  });
+});
+
+io.on('connection', (socket) => {
+  socket.on('chat message', (msg) => {
+    io.emit('chat message', msg);
+  });
+});
+
+server.listen(3000, () => {
+  console.log('listening on *:3000');
+});
diff --git a/week6/wilson_fung/empty/package.json b/week6/wilson_fung/empty/package.json
@@ -0,0 +1,6 @@
+{
+    "name": "socket-empty",
+    "version": "0.0.1",
+    "description": "my first socket.io app",
+    "dependencies": {}
+  }
diff --git a/week6/wilson_fung/index.html b/week6/wilson_fung/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Socket.IO chat</title>
+    <style>
+      body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
+
+      #form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
+      #input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
+      #input:focus { outline: none; }
+      #form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
+
+      #messages { list-style-type: none; margin: 0; padding: 0; }
+      #messages > li { padding: 0.5rem 1rem; }
+      #messages > li:nth-child(odd) { background: #efefef; }
+    </style>
+  </head>
+  <body>
+    <ul id="messages"></ul>
+    <form id="form" action="">
+      <input id="input" autocomplete="off" /><button>Send</button>
+    </form>
+    <script src="/socket.io/socket.io.js"></script>
+    <script>
+        var socket = io();
+
+        var messages = document.getElementById('messages');
+        var form = document.getElementById('form');
+        var input = document.getElementById('input');
+        var typingNotice = document.createElement('div');
+        typingNotice.id = 'typing';
+        document.body.appendChild(typingNotice);
+
+        //Nickname setup
+        var nickname = prompt("Enter your nickname: ");
+        if (nickname) {
+            socket.emit('set nickname', nickname);
+        } else {
+            socket.emit('set nickname', 'Anonymous');
+        }
+
+        form.addEventListener('submit', function(e) {
+            e.preventDefault();
+            if (input.value) {
+                socket.emit('chat message', input.value);
+                input.value = '';
+            }
+        });
+
+        // Emit when user typing
+        input.addEventListener('input', function() {
+            socket.emit('typing', nickname);
+        });
+
+        // Send chat out
+        socket.on('chat message', function(msg) {
+            var item = document.createElement('li');
+            item.textContent = msg;
+            messages.appendChild(item);
+            typingNotice.textContent = '';
+            window.scrollTo(0, document.body.scrollHeight);
+        });
+
+        // Show typing status
+        socket.on('typing', function(msg) {
+            typingNotice.textContent = msg;
+        });
+    </script>
+  </body>
+</html>
diff --git a/week6/wilson_fung/index.js b/week6/wilson_fung/index.js
@@ -0,0 +1,49 @@
+const { randomInt } = require('crypto');
+const express = require('express');
+const app = express();
+const http = require('http');
+const server = http.createServer(app);
+const { Server } = require("socket.io");
+const io = new Server(server);
+
+// Saving index file location
+app.get('/', (req, res) => {
+  res.sendFile(__dirname + '/index.html');
+});
+
+// Once connected, send message of user connecting / disconnecting / messages
+io.on('connection', (socket) => {
+  // Log when a user connects
+  console.log('a user connected');
+
+  // Set default nickname
+  socket.nickname = 'Anonymous' + randomInt(1000).toString();
+
+
+  // Receive nickname from client
+  socket.on('set nickname', (nickname) => {
+    socket.nickname = nickname;
+    console.log(`${nickname} has joined`);
+    io.emit('chat message', `${nickname} has joined the chat`);
+  });
+
+  // Add "user" typing functionality
+  socket.on('typing', () => {
+    socket.broadcast.emit('typing', `${socket.nickname} is typing...`);
+  });
+
+  // Receive chat messages
+  socket.on('chat message', (msg) => {
+    io.emit('chat message', `${socket.nickname}: ${msg}`);
+  });
+
+  // Handle disconnect
+  socket.on('disconnect', () => {
+    console.log(`${socket.nickname} disconnected`);
+    io.emit('chat message', `${socket.nickname} has left the chat`);
+  });
+});
+
+server.listen(3000, () => {
+  console.log('listening on *:3000');
+});
diff --git a/week7/wilson_fung/index.html b/week7/wilson_fung/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Wilson Fung's Chat</title>
+    <style>
+      body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
+
+      #form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
+      #input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
+      #input:focus { outline: none; }
+      #form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
+
+      #messages { list-style-type: none; margin: 0; padding: 0; }
+      #messages > li { padding: 0.5rem 1rem; }
+      #messages > li:nth-child(odd) { background: #efefef; }
+    </style>
+  </head>
+  <body>
+    <ul id="messages"></ul>
+    <form id="form" action="">
+      <input id="input" autocomplete="off" /><button>Send</button>
+    </form>
+    <script src="/socket.io/socket.io.js"></script>
+      <script>
+      var socket = io();
+
+      socket.on('message history', function(messages){
+        var messagesList = document.getElementById('messages');
+        messages.forEach(function(msg){
+          var item = document.createElement('li');
+          item.textContent = msg.content;
+          messagesList.appendChild(item);
+        });
+      });
+
+      var messages = document.getElementById('messages');
+      var form = document.getElementById('form');
+      var input = document.getElementById('input');
+
+      form.addEventListener('submit', function(e) {
+        e.preventDefault();
+        if (input.value) {
+          socket.emit('chat message', input.value);
+          input.value = '';
+        }
+      });
+
+      socket.on('chat message', function(msg) {
+        var item = document.createElement('li');
+        item.textContent = msg;
+        messages.appendChild(item);
+        window.scrollTo(0, document.body.scrollHeight);
+      });
+      </script>
+  </body>
+</html>