Battlesnake/frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'main' into auth-print-2

Browse source
This commit is contained in:
JBB0807 2025-04-21 18:32:13 -07:00
commit 1d615b8257
15 changed files with 411 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
public/images/grid-background.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 252 KiB

3
src/components/Header.jsx
View file

@ -17,6 +17,9 @@ const Header = () => {
<li>
<Link to="/login">Login</Link>
</li>
<li>
<Link to="/assignment">Assignment</Link>
</li>
</ul>
</nav>
</header>

4
src/components/Hero.jsx
View file

@ -6,10 +6,10 @@ function Hero() {
return (
<section className="hero">
<div className="hero-text">
<p className="intro">Welcome to BattleSnake!!!</p>
<p className="intro">Welcome to Bytecamp!!!</p>
<h1>Play for Fun!</h1>
<p className="desc">
A competitive game where your code is the controller. All you need is
A competitive game where your code is the controller.<br /> All you need is
a web server that responds to the Battlesnake API.
</p>
<button className="cta">Start Battle</button>

42
src/components/Navbar.jsx
View file

@ -1,19 +1,41 @@
import React from 'react'
import '../scss/styles.scss'
import '../scss/components/_navbar.scss'
import React from "react";
import "../scss/styles.scss";
import "../scss/components/_navbar.scss";
import { Link } from "react-router-dom";
const Navbar = () => {
return (
<nav className="navbar">
<div className="navbar__logo">MyApp</div>
<ul className="navbar__links">
<li><a href="/" className="navbar__link">Home</a></li>
<li><a href="/notebook" className="navbar__link">NoteBook</a></li>
<li><a href="/assignment" className="navbar__link">Assignment</a></li>
<li><a href="/editor" className="navbar__link">Editor</a></li>
<li>
<Link to="/" className="navbar__link">
Home
</Link>
</li>
<li>
<Link to="/notebook" className="navbar__link">
NoteBook
</Link>
</li>
<li>
<Link to="/assignment" className="navbar__link">
Assignment
</Link>
</li>
<li>
<Link to="/editor" className="navbar__link">
Editor
</Link>
</li>
<li>
<Link to="/login" className="navbar__link">
Login
</Link>
</li>
</ul>
</nav>
)
}
);
};
export default Navbar
export default Navbar;

3
src/main.jsx
View file

@ -5,11 +5,10 @@ import "./scss/styles.scss";
import Navbar from "./components/Navbar";
import Hero from "./components/Hero";
import Services from "./components/Services";
import Header from "./components/Header";
createRoot(document.getElementById("root")).render(
<StrictMode>
<AppRouter />
</StrictMode>
);

107
src/pages/AssignmentPage.jsx Normal file
View file

@ -0,0 +1,107 @@
// Page - Assignment
import { useEffect, useState } from 'react';
import '../scss/styles.scss';
const AssignmentPage = () => {
const [files, setFiles] = useState([]);
useEffect(() => {
document.title = 'Assignment';
}, []);
const handleFileChange = (e) => {
if (e.target.files) {
const newFiles = Array.from(e.target.files);
setFiles(prevFiles => [...prevFiles, ...newFiles]);
}
};
const handleRemoveFile = (index) => {
setFiles(prevFiles => prevFiles.filter((_, i) => i !== index));
};
const handleSubmit = (e) => {
e.preventDefault();
// Here you would typically send the files to a server
console.log('Files to submit:', files);
alert('Assignment submitted successfully!');
};
return (
<main className="assignment-page">
<section>
<div className="assignment-header">
<h2>Assignment Submission</h2>
<div className="due-date">
<p>Due on Jan 16, 2025 11:59 PM</p>
</div>
</div>
<div className="assignment-container">
<div className="assignment-info">
<h3>Submit Assignment</h3>
<p className="files-count">({files.length}) file(s) to submit</p>
<p className="submission-note">After uploading, you must click Submit to complete the submission.</p>
</div>
<div className="file-upload-section">
<div className="upload-buttons">
<label className="file-upload-btn">
<input
type="file"
multiple
onChange={handleFileChange}
style={{ display: 'none' }}
/>
Add a File
</label>
<button className="record-audio-btn">Record Audio</button>
<button className="record-video-btn">Record Video</button>
</div>
{files.length > 0 && (
<div className="files-list">
<h4>Selected Files:</h4>
<ul>
{files.map((file, index) => (
<li key={index} className="file-item">
<span className="file-name">{file.name}</span>
<span className="file-size">({(file.size / 1024).toFixed(2)} KB)</span>
<button
className="remove-file-btn"
onClick={() => handleRemoveFile(index)}
>
Remove
</button>
</li>
))}
</ul>
</div>
)}
</div>
<div className="comments-section">
<h4>Comments</h4>
<textarea
placeholder="Add a comment (optional)"
rows="4"
></textarea>
</div>
<div className="submission-buttons">
<button
className="submit-btn"
onClick={handleSubmit}
disabled={files.length === 0}
>
Submit
</button>
<button className="cancel-btn">Cancel</button>
</div>
</div>
</section>
</main>
);
};
export default AssignmentPage;

16
src/pages/LoginPage.jsx
View file

@ -8,7 +8,7 @@ const LoginPage = () => {
const [type, setType] = useState("signIn");
useEffect(() => {
document.title = "Login / Sign Up";
document.title = "Login / Instructor";
}, []);
const handleOnClick = (text) => {
@ -23,7 +23,7 @@ const LoginPage = () => {
return (
<main className="login-page">
<section>
<h2>Sign In/Sign Up</h2>
<h2>Student/Instructor</h2>
<div className={containerClass} id="container">
<SignUpForm />
<SignInForm />
@ -31,26 +31,24 @@ const LoginPage = () => {
<div className="overlay">
<div className="overlay-panel overlay-left">
<h1>Welcome Back!</h1>
<p>
To keep connected with us please login with your personal info
</p>
<p>Please login with your personal info</p>
<button
className="ghost"
id="signIn"
onClick={() => handleOnClick("signIn")}
>
Sign In
Student
</button>
</div>
<div className="overlay-panel overlay-right">
<h1>Hello, Friend!</h1>
<p>Enter your personal details and start journey with us</p>
<h1>Hello, Instructor!</h1>
<p>Please enter your personal details here</p>
<button
className="ghost"
id="signUp"
onClick={() => handleOnClick("signUp")}
>
Sign Up
Instructor
</button>
</div>
</div>

20
src/pages/SignIn.jsx
View file

@ -35,22 +35,16 @@ function SignInForm() {
return (
<div className="form-container sign-in-container">
<form onSubmit={handleOnSubmit}>
<h1>Sign in</h1>
<div className="social-container">
<a className="social" onClick={googleAuth}>
<h1>Student</h1>
{/* <div className="social-container">
<a href="#" className="social">
<i className="fab fa-google-plus-g" />
</a>
<a href="#" className="social">
<i className="fab fa-facebook-f" />
</a>
<a href="#" className="social">
<i className="fab fa-linkedin-in" />
</a>
</div>
<span>or use your account</span>
</div> */}
<input
type="email"
placeholder="Email"
placeholder="Student Name"
name="email"
value={state.email}
onChange={handleChange}
@ -62,7 +56,7 @@ function SignInForm() {
value={state.password}
onChange={handleChange}
/>
<a href="#">Forgot your password?</a>
<button>Sign In</button>
</form>
</div>

18
src/pages/SignUp.jsx
View file

@ -18,7 +18,7 @@ function SignUpForm() {
const { name, email, password } = state;
alert(
`You are sign up with name: ${name} email: ${email} and password: ${password}`
`You are signed in with name: ${name} email: ${email} and password: ${password}`
);
for (const key in state) {
@ -29,20 +29,18 @@ function SignUpForm() {
}
};
const googleAuth = () => {
window.open("https://byte-camp-auth-service.fly.dev/auth/google", "_self");
};
return (
<div className="form-container sign-up-container">
<form onSubmit={handleOnSubmit}>
<h1>Create Account</h1>
<h1>Instructor</h1>
<div className="social-container">
<a href="#" className="social">
<i className="fab fa-facebook-f" />
</a>
<a href="#" className="social">
<a href="#" className="social" onClick={googleAuth}>
<i className="fab fa-google-plus-g" />
</a>
<a href="#" className="social">
<i className="fab fa-linkedin-in" />
</a>
</div>
<span>or use your email for registration</span>
<input
@ -66,7 +64,7 @@ function SignUpForm() {
onChange={handleChange}
placeholder="Password"
/>
<button>Sign Up</button>
<button>Sign in</button>
</form>
</div>
);

19
src/routers/AppRouter.jsx
View file

@ -11,6 +11,7 @@ import HomePage from "../pages/HomePage";
import LoginPage from "../pages/LoginPage";
import PageCodeEditor from "../pages/CodeEditor";
import PageNotFound from "../pages/PageNotFound";
import AssignmentPage from "../pages/AssignmentPage";
import Hero from "../components/Hero";
import Navbar from "../components/Navbar";
import Services from "../components/Services";
@ -19,32 +20,30 @@ const AppRouter = () => {
return (
<BrowserRouter>
<div className="wrapper">
{/* <Header /> */}
<Navbar />
<Routes>
<Route
path="/"
element={
// <ProtectedRoute>
<Hero />
// </ProtectedRoute>
<>
<Hero />
<Services />
</>
}
/>
{/* <Services /> */}
<Route path="login" element={<LoginPage />} />
<Route path="/login" element={<LoginPage />} />
<Route
path="editor"
path="/editor"
element={
<ProtectedRoute>
<PageCodeEditor />
</ProtectedRoute>
}
/>
<Route path="/assignment" element={<AssignmentPage />} />
<Route path="*" element={<PageNotFound />} />
</Routes>
<Services />
<Footer />
</div>
</BrowserRouter>

3
src/scss/components/Hero.scss
View file

@ -4,9 +4,12 @@
align-items: center;
padding: 4rem 3rem;
background-color: #f9f5f2;
padding-top: 40rem;
.hero-text {
max-width: 50%;
margin-left: 3rem;
// font-family: "Limelight", sans-serif;
.intro {

5
src/scss/components/_navbar.scss
View file

@ -6,6 +6,11 @@
padding: 1rem 2rem;
color: white;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
&__logo {
font-size: 1.5rem;

31
src/scss/page/_login.scss
View file

@ -1,3 +1,21 @@
// .login-page {
// min-height: 100vh;
// display: flex;
// justify-content: center;
// align-items: center;
// background-image: url("../../../public/images/grid-background.png");
// background-size: cover;
// background-position: center;
// background-repeat: no-repeat;
// background-attachment: fixed;
// section {
// width: 100%;
// max-width: 800px;
// padding: 20px;
// }
// }
.App {
font-family: sans-serif;
text-align: center;
@ -10,7 +28,12 @@
}
body {
background: #f6f5f7;
background: transparent;
background-image: url("../../../public/images/grid-background.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
display: flex;
justify-content: center;
align-items: center;
@ -27,6 +50,8 @@ h1 {
h2 {
text-align: center;
color: #fff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
p {
@ -227,8 +252,8 @@ input {
justify-content: center;
align-items: center;
margin: 0 5px;
height: 40px;
width: 40px;
height: 60px;
width: 60px;
}
footer {

198
src/scss/page/assignment.scss Normal file
View file

@ -0,0 +1,198 @@
// Assignment Page Styling
.assignment-page {
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem;
section {
width: 100%;
max-width: 900px;
}
.assignment-header {
margin-bottom: 2rem;
border-bottom: 1px solid #e0e0e0;
padding-bottom: 1rem;
h2 {
font-size: 3rem;
margin-bottom: 1rem;
color: #ffffff;
}
.due-date {
color: #c6c6c6;
font-size: 1.2rem;
}
}
.assignment-container {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 2rem;
.assignment-info {
margin-bottom: 2rem;
h3 {
font-size: 1.4rem;
margin-bottom: 0.5rem;
color: #333;
}
.files-count {
font-size: 1rem;
margin-bottom: 0.5rem;
}
.submission-note {
font-size: 0.9rem;
color: #666;
}
}
.file-upload-section {
margin-bottom: 2rem;
.upload-buttons {
display: flex;
gap: 1rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
.file-upload-btn,
.record-audio-btn,
.record-video-btn {
background-color: #f5f5f5;
border: 1px solid #ddd;
border-radius: 4px;
padding: 0.6rem 1rem;
cursor: pointer;
font-size: 0.9rem;
transition: all 0.2s ease;
color: #333;
&:hover {
background-color: #e9e9e9;
}
}
}
.files-list {
background-color: #f9f9f9;
border-radius: 6px;
padding: 1rem;
h4 {
margin-bottom: 0.8rem;
font-size: 1rem;
}
ul {
list-style: none;
padding: 0;
.file-item {
display: flex;
align-items: center;
padding: 0.5rem 0;
border-bottom: 1px solid #eee;
&:last-child {
border-bottom: none;
}
.file-name {
flex-grow: 1;
font-weight: 500;
}
.file-size {
color: #777;
margin: 0 1rem;
font-size: 0.8rem;
}
.remove-file-btn {
background-color: transparent;
border: none;
color: #ff5252;
cursor: pointer;
font-size: 0.8rem;
padding: 0.3rem 0.6rem;
&:hover {
text-decoration: underline;
}
}
}
}
}
}
.comments-section {
margin-bottom: 2rem;
h4 {
margin-bottom: 0.8rem;
font-size: 1rem;
}
textarea {
width: 100%;
border: 1px solid #ddd;
border-radius: 4px;
padding: 0.8rem;
font-family: inherit;
resize: vertical;
&:focus {
outline: none;
border-color: #4a90e2;
}
}
}
.submission-buttons {
display: flex;
gap: 1rem;
.submit-btn,
.cancel-btn {
padding: 0.7rem 1.5rem;
border-radius: 4px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.submit-btn {
background-color: #4a90e2;
color: white;
border: none;
&:hover {
background-color: #3a7bc8;
}
&:disabled {
background-color: #a0c3e8;
cursor: not-allowed;
}
}
.cancel-btn {
background-color: transparent;
border: 1px solid #ddd;
color: #666;
&:hover {
background-color: #f5f5f5;
}
}
}
}
}

1
src/scss/styles.scss
View file

@ -13,6 +13,7 @@
@use "./page//home";
@use "./page//login";
@use "./page/code_editor";
@use "./page/assignment";
// Utilities
@use "./utilities/utility-classes";