Merge branch 'nighthawkcoders:main' into main

nighthawkcoders · Nov 1, 2024 · 912ec4e · 912ec4e
2 parents 4f48787 + 499134a
commit 912ec4e
Show file tree

Hide file tree

Showing 11 changed files with 1,032 additions and 17 deletions.
diff --git a/_includes/nav/share_and_care.html b/_includes/nav/share_and_care.html
@@ -3,6 +3,7 @@
         <td><a href="{{site.baseurl}}/chess/home">Chess Forum</a></td>
         <td><a href="{{site.baseurl}}/share_and_care/revvit">Revvit</a></td>
         <td><a href="{{site.baseurl}}/UndgdMusic/">Underground Music</a></td>
-        <td><a href="{{site.baseurl}}/dnhscafe">DNHS Cafe</a></td>    
+        <td><a href="{{site.baseurl}}/dnhscafe">DNHS Cafe</a></td>   
+        <td><a href="{{site.baseurl}}/share_and_care/hungry_games">Hungry Games</a></td>
     </tr>
 </table>
diff --git a/navigation/create_and_compete/doodle-artpost.md b/navigation/create_and_compete/doodle-artpost.md
@@ -0,0 +1,128 @@
+---
+layout: post 
+title: Create and Compete - Doodle
+search_exclude: true
+permalink: /moderation/artpost_doodle/
+author: Alex, Arshia, Prajna, and Mirabelle 
+---
+
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Posting App</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            background-color: #f0f0f0;
+        }
+        h1 {
+            margin: 20px 0;
+        }
+        form {
+            margin-bottom: 20px;
+        }
+        #gallery {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            width: 100%;
+        }
+        .photo-container {
+            background: white;
+            margin: 10px;
+            padding: 10px;
+            border-radius: 5px;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+            width: 300px;
+            text-align: center;
+        }
+        img {
+            max-width: 100%;
+            border-radius: 5px;
+        }
+        .comments {
+            margin-top: 10px;
+        }
+    </style>
+</head>
+<body>
+    <h1>Photo Posting App</h1>
+    <form id="uploadForm">
+        <input type="text" id="photoUrl" placeholder="Enter photo URL" required>
+        <input type="text" id="comment" placeholder="Enter a comment" required>
+        <button type="submit">Post</button>
+    </form>
+    <div id="gallery"></div>
+    <script>
+        const form = document.getElementById('uploadForm');
+        const gallery = document.getElementById('gallery');
+        form.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const photoUrl = document.getElementById('photoUrl').value;
+            const commentText = document.getElementById('comment').value;
+            // Create photo container
+            const photoContainer = document.createElement('div');
+            photoContainer.className = 'photo-container';
+            // Create image element
+            const img = document.createElement('img');
+            img.src = photoUrl;
+            photoContainer.appendChild(img);
+            // Create comments section
+            const commentsDiv = document.createElement('div');
+            commentsDiv.className = 'comments';
+            commentsDiv.innerHTML = `<p>${commentText}</p>`;
+            photoContainer.appendChild(commentsDiv);
+            // Append photo container to gallery
+            gallery.appendChild(photoContainer);
+            // Clear the form
+            form.reset();
+        });
+    </script>
+    <script>
+        const express = require('express');
+        const mongoose = require('mongoose');
+        const cors = require('cors');
+        const http = require('http');
+        const { parse } = require('url');
+        // Initialize app
+        const app = express();
+        app.use(cors());
+        app.use(express.json());
+        app.use(express.static('.'));
+        // MongoDB connection
+        mongoose.connect('mongodb://localhost/photo-sharing', {
+            useNewUrlParser: true,
+            useUnifiedTopology: true,
+        });
+        // Photo model
+        const photoSchema = new mongoose.Schema({
+            imageUrl: String,
+            comment: String,
+        });
+        const Photo = mongoose.model('Photo', photoSchema);
+        // Routes
+        app.post('/upload', async (req, res) => {
+            const { photoUrl, comment } = req.body;
+            const photo = new Photo({ imageUrl: photoUrl, comment });
+            await photo.save();
+            res.json(photo);
+        });
+        app.get('/photos', async (req, res) => {
+            const photos = await Photo.find();
+            res.json(photos);
+        });
+        // Start server
+        const server = http.createServer(app);
+        const PORT = process.env.PORT || 3000;
+        server.listen(PORT, () => {
+            console.log(`Server is running on http://localhost:${PORT}`);
+        });
+    </script>
+</body>
+</html>
diff --git a/navigation/create_and_compete/doodle-chat.md b/navigation/create_and_compete/doodle-chat.md
@@ -0,0 +1,101 @@
+---
+layout: post
+title: Chat Room for Doodle
+description: Chat freely with everyone
+permalink: /moderation/chat_doodle/
+author: Arshia, Prajna, Mirabelle, Alex
+---
+
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Chat Room</title>
+  <style>
+    /* Basic styling */
+    #chatContainer {
+      width: 150%;
+      max-width: 600px;
+      margin: 20px auto;
+      padding: 10px;
+      border: 1px solid #ccc;
+      border-radius: 8px;
+      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+    }
+    #messages {
+      height: 300px;
+      overflow-y: scroll;
+      border: 1px solid #ddd;
+      padding: 10px;
+      border-radius: 8px;
+      margin-bottom: 10px;
+    }
+    .message {
+        margin: 5px 0;
+      padding: 5px;
+        border-radius: 5px;
+         background-color: #d0e6f5; /* Light blue background for messages */
+        color: #333; /* Darker text color for readability */
+    }
+    #inputContainer {
+      display: flex;
+    }
+    #inputMessage {
+      flex: 1;
+      padding: 8px;
+      font-size: 16px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+    }
+    #sendButton {
+      padding: 8px 12px;
+      margin-left: 5px;
+      font-size: 16px;
+      background-color: #28a745;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+  </style>
+</head>
+<body>
+
+<div id="chatContainer">
+  <h2>Chat Room</h2>
+  <div id="messages"></div>
+  <div id="inputContainer">
+    <input type="text" id="inputMessage" placeholder="Type a message..." />
+    <button id="sendButton">Send</button>
+  </div>
+</div>
+
+<script>
+  // Simple front-end chat function
+  const messages = document.getElementById('messages');
+  const inputMessage = document.getElementById('inputMessage');
+  const sendButton = document.getElementById('sendButton');
+
+  function addMessage(message, sender = "You") {
+    const messageDiv = document.createElement('div');
+    messageDiv.classList.add('message');
+    messageDiv.textContent = `${sender}: ${message}`;
+    messages.appendChild(messageDiv);
+    messages.scrollTop = messages.scrollHeight; // Auto-scroll
+  }
+
+  sendButton.addEventListener('click', () => {
+    const messageText = inputMessage.value.trim();
+    if (messageText) {
+      addMessage(messageText);  // Display the message
+      inputMessage.value = '';  // Clear the input field
+    }
+  });
+
+  inputMessage.addEventListener('keypress', (e) => {
+    if (e.key === 'Enter') sendButton.click(); // Send on Enter key press
+  });
+</script>
+
+</body>
+</html>
diff --git a/navigation/create_and_compete/doodle-competition.md b/navigation/create_and_compete/doodle-competition.md
@@ -0,0 +1,79 @@
+---
+layout: post 
+title: Create and Compete - Doodle Game UI
+search_exclude: true
+permalink: /moderation/doodle_competition/
+author: Arshia, Prajna, Mirabelle, Alex
+---
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Drawing Canvas</title>
+    <style>
+        body { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; margin: 0; }
+        canvas { border: 2px solid #444; cursor: crosshair; margin-top: 10px; }
+        .color-button {
+            width: 30px;
+            height: 30px;
+            border: none;
+            margin: 2px;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+
+<div>
+    <button onclick="clearCanvas()" style="font-size: 18px; background-color: #ad3636; padding: 10px 20px; color: white;">Clear Drawing</button>
+    <div style="margin-top: 10px;">
+        <button class="color-button" style="background-color: #333;" onclick="changeColor('#333')"></button>
+        <button class="color-button" style="background-color: #ff0000;" onclick="changeColor('#ff0000')"></button>
+        <button class="color-button" style="background-color: #008000;" onclick="changeColor('#008000')"></button>
+        <button class="color-button" style="background-color: #0000ff;" onclick="changeColor('#0000ff')"></button>
+        <button class="color-button" style="background-color: #ffa500;" onclick="changeColor('#ffa500')"></button>
+    </div>
+</div>
+
+<canvas id="drawingCanvas" width="600" height="400"></canvas>
+
+<script>
+    const canvas = document.getElementById('drawingCanvas');
+    const ctx = canvas.getContext('2d');
+    let drawing = false;
+    let currentColor = '#ad3636';
+
+    canvas.addEventListener('mousedown', startDrawing);
+    canvas.addEventListener('mouseup', stopDrawing);
+    canvas.addEventListener('mousemove', draw);
+
+    function startDrawing(event) {
+        drawing = true;
+        ctx.beginPath();
+        ctx.moveTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
+    }
+
+    function stopDrawing() {
+        drawing = false;
+        ctx.closePath();
+    }
+
+    function draw(event) {
+        if (!drawing) return;
+        ctx.lineWidth = 5;
+        ctx.lineCap = 'round';
+        ctx.strokeStyle = currentColor;
+        ctx.lineTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
+        ctx.stroke();
+    }
+
+    function clearCanvas() {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+    }
+
+    function changeColor(color) {
+        currentColor = color;
+    }
+</script>
+
+</body>
diff --git a/navigation/create_and_compete/doodle.md b/navigation/create_and_compete/doodle.md
@@ -15,4 +15,16 @@ author: Alex, Arshia, Prajna, and Mirabelle
 <p> 
 The page is a place where people can explore themselves creatively and compete to see who has the best doodle. This allows for players to collaborate over their artistic abilities. Our room includes a chat room where players can converse about their creations, a doodle compete area, a place where people can post their art, and winners get crowned every week. This will help add to our classes page by making a fun artistic environment where everyone can collaborate. </p>
 
-</details>
+</details>
+
+<a href="{{site.baseurl}}/moderation/chat_doodle/" style="padding: 10px 20px; font-size: 16px; background-color: #7573e6; color: white; border: none; border-radius: 5px; text-decoration: none; display: inline-block;">
+  Chat Room
+</a>
+
+<a href="{{site.baseurl}}/moderation/doodle_competition/" style="padding: 10px 20px; font-size: 16px; background-color: #7573e6; color: white; border: none; border-radius: 5px; text-decoration: none; display: inline-block;">
+  Competition Room
+</a>
+
+<a href="{{site.baseurl}}/moderation/artpost_doodle/" style="padding: 10px 20px; font-size: 16px; background-color: #7573e6; color: white; border: none; border-radius: 5px; text-decoration: none; display: inline-block;">
+  Competition
+</a>