Skip to content

Commit

Permalink
Added more things to questionaire prior to game
Browse files Browse the repository at this point in the history
  • Loading branch information
@BraydenKO
BraydenKO committed Dec 30, 2024
1 parent 6cee52b commit 2e5b2f1
Showing 1 changed file with 115 additions and 104 deletions.
219 changes: 115 additions & 104 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,103 +4,110 @@
<title>Main Menu</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
height: 100vh;
background-color: #f0f0f0;
font-family: sans-serif;
flex-direction: column; /* Stack elements vertically */
}

#container {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px; /* Add some padding around the content */
border: 1px solid #ccc; /* Optional: add a border */
border-radius: 8px; /* Optional: round the corners */
background-color: white; /* Optional: set a background color */
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 300px;
}

.question {
margin-bottom: 10px;
margin-bottom: 20px;
}

.options {
display: flex;
gap: 10px; /* Space between options */
margin-bottom: 15px;
margin-bottom: 10px;
}

.options label {
cursor: pointer; /* Make labels clickable */
padding: 5px 10px;
select {
width: 100%;
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #eee;
}

input[type="radio"] {
display: none; /* Hide the actual radio buttons */
}

input[type="radio"]:checked + label {
background-color: #4CAF50; /* Highlight selected option */
color: white;
border-color: #4CAF50;
border-radius: 4px;
}


#start-button {
padding: 15px 30px;
font-size: 1.2em;
background-color: #4CAF50;
border: none;
display: block;
width: 100%;
padding: 10px;
background-color: #007bff;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
border: none;
border-radius: 4px;
cursor: pointer;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
margin-top: 20px;
text-align: center;
}
#start-button:hover {
background-color: #0056b3;
}

#title {
font-size: 3em;
margin-bottom: 20px;
text-align: center;
margin-bottom: 20px;
}
#blurb{
#blurb {
text-align: center;
margin-bottom: 20px;
}
</style>
</style>
</head>
<body>
<div id="container">
<h1 id="title">Mouse Follower Game</h1>
<div class="question">
1) What are you using to play this game?
<div class="options">
<input type="radio" id="trackpad" name="input_device" value="trackpad">
<label for="trackpad">Trackpad</label>
<input type="radio" id="mouse" name="input_device" value="mouse">
<label for="mouse">Mouse</label>
<input type="radio" id="controller" name="input_device" value="controller">
<label for="controller">Controller</label>
<select id="input_device" name="input_device">
<option value="" disabled selected>Select your option</option>
<option value="trackpad">Trackpad</option>
<option value="mouse">Mouse</option>
<option value="controller">Controller</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="question">
2) Have you played this game before?
<div class="options">
<input type="radio" id="yes" name="played_before" value="yes">
<label for="yes">Yes</label>
<input type="radio" id="no" name="played_before" value="no">
<label for="no">No</label>
<select id="played_before" name="played_before">
<option value="" disabled selected>Select your option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
</div>
<div class="question">
3) What is your age?
<div class="options">
<input type="number" id="age" name="age" min="1" max="120">
</div>
</div>
<div class="question">
4) What is your handedness?
<div class="options">
<select id="handedness" name="handedness">
<option value="" disabled selected>Select your option</option>
<option value="left">Left-handed</option>
<option value="right">Right-handed</option>
<option value="ambidextrous">Ambidextrous</option>
</select>
</div>
</div>
<div class="question">
5) What is your gender?
<div class="options">
<select id="gender" name="gender">
<option value="" disabled selected>Select your option</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div id="blurb">
Expand All @@ -109,52 +116,56 @@ <h1 id="title">Mouse Follower Game</h1>
<button id="start-button">Start Game</button>
</div>

<div id="app"></div>
<script type="module">
import { initializeFirebase } from './firebaseConfig.js';
import {doc, setDoc, Timestamp } from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore.js';
import {signInAnonymously } from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js';

const { db, auth } = initializeFirebase();

signInAnonymously(auth)
.then(() => {
document.getElementById('start-button').addEventListener('click', async () => {
let inputDevice = document.querySelector('input[name="input_device"]:checked')?.value;
let playedBefore = document.querySelector('input[name="played_before"]:checked')?.value;
localStorage.setItem("playedBefore", playedBefore);
<div id="app"></div>
<script type="module">
import { initializeFirebase } from './firebaseConfig.js';
import { doc, setDoc, Timestamp } from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore.js';
import { signInAnonymously } from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js';

const { db, auth } = initializeFirebase();

signInAnonymously(auth)
.then(() => {
document.getElementById('start-button').addEventListener('click', async () => {
let inputDevice = document.getElementById('input_device')?.value;
let playedBefore = document.getElementById('played_before')?.value;
let age = document.getElementById('age')?.value;
let handedness = document.getElementById('handedness')?.value;
let gender = document.getElementById('gender')?.value;

localStorage.setItem("playedBefore", playedBefore);

if (inputDevice && playedBefore) { // If both options are selected
if(playedBefore === "no"){ // If the user has not played before upload the data
try {
await setDoc(doc(db, "game_inputs", auth.currentUser.uid), {
inputDevice,
playedBefore,
uid: auth.currentUser.uid,
timestamp: Timestamp.fromDate(new Date())
});
console.log("Data saved!");
window.location.href = 'game.html';
} catch (error) {
console.error("Firestore write error:", error.message);
console.error("Error details:", error);
alert("Error saving data. Please try again.");
}
} else{ // Let the user play but don't upload data
if (inputDevice && playedBefore && age && handedness && gender) { // If all options are selected
if (playedBefore === "no") { // If the user has not played before upload the data
try {
await setDoc(doc(db, "game_inputs", auth.currentUser.uid), {
inputDevice,
playedBefore,
age,
handedness,
gender,
uid: auth.currentUser.uid,
timestamp: Timestamp.fromDate(new Date())
});
console.log("Data saved!");
window.location.href = 'game.html';
} catch (error) {
console.error("Firestore write error:", error.message);
console.error("Error details:", error);
alert("Error saving data. Please try again.");
}

} else {
alert("Please select both input device and played before options.");
} else { // Let the user play but don't upload data
window.location.href = 'game.html';
}
});
})
.catch((error) => {
console.error("Auth Error:", error.message);
console.error("Error details:", error);
} else {
alert("Please answer all questions.");
}
});
</script>


})
.catch((error) => {
console.error("Auth Error:", error.message);
console.error("Error details:", error);
});
</script>
</body>
</html>

0 comments on commit 2e5b2f1

Please sign in to comment.