Skip to content

Commit

Permalink
Merge pull request #116 from kush1434/main
Browse files Browse the repository at this point in the history 
home and style changes
  • Loading branch information
@manas12709
manas12709 authored Nov 5, 2024
2 parents 59bda50 + e383c1d commit 89ed9da
Show file tree
Hide file tree
Showing 3 changed files with 236 additions and 182 deletions.
8 changes: 8 additions & 0 deletions navigation/create_and_compete/home.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,14 @@ menu: nav/create_and_compete.html
The **Zoom in Guess** is all about testing your attention to detail and having fun with friends. In this game, you look at a super close-up photo and try to guess who or what it is based on the small details you can see. Players can make their guesses, explain why they think they’re right, and submit their answers. You can also share your own zoomed-in images for others to guess and rate how tricky each image is. With the "guess and explain" theme, players can see what others guessed, react to answers, and share their thoughts, making it a fun space for friendly competition and conversation. <a href="{{site.baseurl}}/create_and_compete/zoominguess">Our page!</a> Presented to you by Arhaan, Mihir, Akshaj, and Keerthan
</div>

<div class="group-theme">

**Riddle Room!**

Welcome to the Riddle Room, where critical thinking and collaboration come together for an engaging challenge! Each day, a new riddle will be presented, which you can pin to the top of our channel for easy access. Answers will be revealed at the end of the day, giving you time to discuss and strategize with your fellow members in our dedicated chat box. If someone solves the riddle, our AI will promptly share the answer; otherwise, it will be revealed at day’s end to keep the suspense alive. To ensure a friendly atmosphere, any profanity will be automatically censored. Join us for a fun and thought-provoking experience! <a href="{{site.baseurl}}/create_and_compete/riddle">Our page!</a> Presented to you by Kush, Tarun, Nolan, Vincent

</div>

<div class="group-theme">
**Doodle Game!**
The **Doodle Game** 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. <a href="{{site.baseurl}}/create_and_compete/doodle">Our page!</a> Coded by Arshia Deb Roy, Prajna Raj, Mirabelle Anderson, Alex Rubio
Expand Down
278 changes: 96 additions & 182 deletions navigation/create_and_compete/riddle-room.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@ menu: nav/create_and_compete.html
author: Kush, Tarun, Vincent, and Nolan
---

<link rel="stylesheet" href="{{site.baseurl}}/navigation/create_and_compete/riddle.css">

<details>
<br>
<br>
<summary>Room Details</summary>

<a href="{{site.baseurl}}/moderation/rules_riddle/">Moderation Rules</a>


<p>The main purpose of our riddle room is to have people think critically and collaborate with the other members of the channel to solve the riddle as fast as possible.</p>

<p>Room will consist of:</p>
Expand All @@ -27,189 +27,103 @@ author: Kush, Tarun, Vincent, and Nolan
</ul>
</details>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Riddle Room Chat</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: black;
color: white;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
#chat-container {
display: flex;
width: 130%;
}
#chat-box {
flex-grow: 1;
border: 1px solid #444;
padding: 10px;
height: 500px;
overflow-y: scroll;
background-color: #222;
margin-right: 20px;
}
#message-input, #answer-input {
width: calc(100% - 100px);
padding: 10px;
margin-top: 10px;
border: 1px solid #444;
background-color: #333;
color: white;
}
#send-button, #check-answer {
width: 100px;
padding: 10px;
margin-top: 10px;
margin-left: 5px;
background-color: #555;
color: white;
border: none;
cursor: pointer;
}
.message {
margin: 5px 0;
padding: 8px;
border-radius: 5px;
background-color: #555;
}
#riddle-container {
margin-bottom: 20px;
}
#riddle-text {
font-size: 18px;
color: #ffcc00;
}
#users-list {
width: 150px;
}
#users-list h4 {
margin-bottom: 10px;
}
#users-list ul {
list-style-type: none;
padding: 0;
}
</style>
</head>
<body>
<h3>Riddle Room Chat</h3>
<h7>Please enter no extra characters beside the answer</h7>
<div id="riddle-container">
<h4>Riddle of the Day</h4>
<p id="riddle-text"></p>
</div>

<div id="chat-container">
<div id="chat-box"></div>
<div id="users-list">
<h4>Users</h4>
<ul id="userList">
<li>System</li>
</ul>
</div>
</div>

<div>
<input type="text" id="message-input" placeholder="Type your message...">
<button id="send-button" onclick="sendMessage()">Send</button>
</div>
<div id="riddle-container">
<h4 style="text-align: center;">Riddle of the Day</h4>
<p id="riddle-text"></p>
</div>

<div>
<input type="text" id="answer-input" placeholder="Enter your answer...">
<button id="check-answer" onclick="checkAnswer()">Check Answer</button>
<div id="chat-container">
<div id="chat-box"></div>
<div id="users-list">
<h4 style="color: #4A4848;" >Users</h4>
<ul id="userList">
<li>System</li>
</ul>
</div>

<script>
const chatBox = document.getElementById('chat-box');
const messageInput = document.getElementById('message-input');
const answerInput = document.getElementById('answer-input');
const userList = document.getElementById('userList');
const riddleText = document.getElementById('riddle-text');
const users = new Set(['System']);
let username;
let currentRiddle;

function displayRiddle() {
const riddles = [
{ question: "What has keys but can't open locks?", answer: "piano" },
{ question: "What has a head, a tail, but no body?", answer: "coin" },
{ question: "What comes once in a minute, twice in a moment, but never in a thousand years?", answer: "m" },
{ question: "I'm tall when I'm young, and I'm short when I'm old. What am I?", answer: "candle" },
{ question: "What has to be broken before you can use it?", answer: "egg" }
];
const riddleIndex = new Date().getDate() % riddles.length;
currentRiddle = riddles[riddleIndex];
riddleText.textContent = currentRiddle.question;
}

function checkForMidnight() {
const currentDate = new Date().toDateString();
if (localStorage.getItem('riddleDate') !== currentDate) {
displayRiddle();
localStorage.setItem('riddleDate', currentDate);
}
}

function requestUsername() {
while (true) {
const enteredUsername = prompt("Enter your username:");
if (enteredUsername && !users.has(enteredUsername)) {
username = enteredUsername;
addUser(username);
displayMessage(`You have joined as ${username}.`, true);
break;
} else {
alert("Username is taken or invalid. Please try again.");
}
}
}

function displayMessage(message, isSystem = false) {
const messageElement = document.createElement('div');
messageElement.classList.add('message', isSystem ? 'system-message' : 'user-message');
messageElement.textContent = message;
chatBox.appendChild(messageElement);
chatBox.scrollTop = chatBox.scrollHeight;
}

function addUser(newUsername) {
users.add(newUsername);
const userItem = document.createElement('li');
userItem.textContent = newUsername;
userList.appendChild(userItem);
}

function sendMessage() {
const messageText = messageInput.value.trim();
if (messageText !== '') {
displayMessage(`${username}: ${messageText}`);
messageInput.value = '';
}
}

function checkAnswer() {
const userAnswer = answerInput.value.trim().toLowerCase();
if (userAnswer === currentRiddle.answer) {
displayMessage(`${username} got it right!`, true);
</div>

<div class="input-group">
<input type="text" id="message-input" placeholder="Type your message...">
<button id="send-button" onclick="sendMessage()">Send</button>
</div>

<div class="input-group">
<input type="text" id="answer-input" placeholder="Enter your answer(with no extra characters)...">
<button id="check-answer" onclick="checkAnswer()">Check Answer</button>
</div>

<script>
const chatBox = document.getElementById('chat-box');
const messageInput = document.getElementById('message-input');
const answerInput = document.getElementById('answer-input');
const userList = document.getElementById('userList');
const riddleText = document.getElementById('riddle-text');
const users = new Set(['System']);
let username;
let currentRiddle;

function displayRiddle() {
const riddles = [
{ question: "What has keys but can't open locks?", answer: "piano" },
{ question: "What has a head, a tail, but no body?", answer: "coin" },
{ question: "What comes once in a minute, twice in a moment, but never in a thousand years?", answer: "m" },
{ question: "I'm tall when I'm young, and I'm short when I'm old. What am I?", answer: "candle" },
{ question: "What has to be broken before you can use it?", answer: "egg" }
];
const riddleIndex = new Date().getDate() % riddles.length;
currentRiddle = riddles[riddleIndex];
riddleText.textContent = currentRiddle.question;
}

function requestUsername() {
while (true) {
const enteredUsername = prompt("Enter your username:");
if (enteredUsername && !users.has(enteredUsername)) {
username = enteredUsername;
addUser(username);
displayMessage(`You have joined as ${username}.`, true);
break;
} else {
displayMessage(`${username} guessed wrong! Try again.`, true);
alert("Username is taken or invalid. Please try again.");
}
answerInput.value = '';
}

displayMessage("Welcome to the Riddle Room Chat!", true);
requestUsername();
displayRiddle();
localStorage.setItem('riddleDate', new Date().toDateString());
setInterval(checkForMidnight, 60000);
</script>
</body>
</html>
}

function displayMessage(message, isSystem = false) {
const messageElement = document.createElement('div');
messageElement.classList.add('message', isSystem ? 'system-message' : 'user-message');
messageElement.textContent = message;
chatBox.appendChild(messageElement);
chatBox.scrollTop = chatBox.scrollHeight;
}

function addUser(newUsername) {
users.add(newUsername);
const userItem = document.createElement('li');
userItem.textContent = newUsername;
userList.appendChild(userItem);
}

function sendMessage() {
const messageText = messageInput.value.trim();
if (messageText !== '') {
displayMessage(`${username}: ${messageText}`);
messageInput.value = '';
}
}

function checkAnswer() {
const userAnswer = answerInput.value.trim().toLowerCase();
if (userAnswer === currentRiddle.answer) {
displayMessage(`${username} got it right!`, true);
} else {
displayMessage(`${username} guessed wrong! Try again.`, true);
}
answerInput.value = '';
}

displayMessage("Welcome to the Riddle Room Chat!", true);
requestUsername();
displayRiddle();
</script>
Loading

0 comments on commit 89ed9da

Please sign in to comment.