Skip to content

Commit

Permalink
fix: minor UI patch + NEWS api integration
Browse files Browse the repository at this point in the history
  • Loading branch information
BRAVO68WEB committed Jan 23, 2024
1 parent 2208f84 commit bf4840e
Show file tree
Hide file tree
Showing 17 changed files with 1,966 additions and 862 deletions.
1 change: 0 additions & 1 deletion apps/web/src/App.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
// App.js
import { Routes, Route } from "react-router-dom";
import Home from "./pages/home";
import Player from "./pages/app";
Expand Down
38 changes: 38 additions & 0 deletions apps/web/src/components/news.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { useEffect, useState } from "react";
import apiClient from "../libs/api.client";

const News = () => {
const [news, setNews] = useState([]);

useEffect(() => {
apiClient.get("/news", {
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${localStorage.getItem("token")}`,
}
}).then((response) => {
setNews(response.data.message);
});
}, []);

return (
<div className='news'>
{news.map((item) => (
<div className='news-item'>
<h3>
message : {
item.msg
}
</h3>
<p>
posted_at : {
(new Date(item.created_at)).toUTCString()
}
</p>
</div>
))}
</div>
);
}

export default News
23 changes: 10 additions & 13 deletions apps/web/src/pages/about.jsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,21 @@


import Navbar from "../components/navbar";
import { url } from '../libs/api.client';


function Home() {
return (
<>
<Navbar pageTitle={"About"} />
<div className='about-elements'>
<h2>Guides</h2>
<div className="action-card">
<a href="https://www.youtube.com/watch?v=9Pzj7Aj25lw">How to use the scoreboard</a>
</div>
<div className='about-elements'>
<h2>Guides</h2>
<div className="">
<a href="https://blog.encryptedge.in/2024/rcs-ctf-guide">RCS CTF Guide</a>
</div>

<h2>API URL</h2>
<div className="action-card">
{url}
</div>
</div>
<h2>API URL</h2>
<div className="">
{url}
</div>
</div>
</>
);
}
Expand Down
1 change: 0 additions & 1 deletion apps/web/src/pages/app.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

import { useEffect, useState } from "react";
import Machines from "../components/machine";
import Challenge from "../components/challenge";
Expand Down
5 changes: 2 additions & 3 deletions apps/web/src/pages/leaderboard.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

import { useEffect, useState } from "react";
import apiClient from "../libs/api.client";
import Navbar from "../components/navbar";
Expand All @@ -18,8 +17,8 @@ function Leaderboard() {
},
})
.then((response) => {
if (!Array.isArray(response.data)) return (window.location.href = "/");
setLeaderboard(response.data);
if (!Array.isArray(response.data.message)) return (window.location.href = "/");
setLeaderboard(response.data.message);
})
.catch(() => {
console.log("Failed to get leaderboard");
Expand Down
7 changes: 4 additions & 3 deletions apps/web/src/pages/news.jsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@

import Navbar from "../components/navbar";
import News from "../components/news";

function News() {
function NewsHome() {
return (
<>
<Navbar pageTitle={"News"} />
<News />
</>
);
}

export default News;
export default NewsHome;
12 changes: 10 additions & 2 deletions apps/web/src/pages/whoami.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,8 @@ function WhoAmI() {
"Authorization": "Bearer " + token,
}
}).then(res => {
if(res.data.error) return window.location.href = '/login'
if(res.data.message === 'Invalid token') return window.location.href = '/login';
if(res.data.error) return window.location.href = '/'
if(res.data.message === 'Invalid token') return window.location.href = '/';
setTeamStats(res.data.message);
})
}, [])
Expand All @@ -68,17 +68,25 @@ function WhoAmI() {
{userWhoami?.first_name} {userWhoami?.last_name}
</span>
<br />
Email: <span className='user-email'>{userWhoami?.email}</span>
<br />
</div>
<div className='team-wrapper'>
<h2>$ Team</h2>
ID: <span className='team-id'>{teamWhoami?.id}</span>
<br />
Name: <span className='team-name'>{teamWhoami?.name}</span>
<br />
Join Code: <span className='team-join-code'>{teamWhoami?.join_code}</span>
<br />
Total Member: <span className='team-total-member'>{teamWhoami?.users?.length}</span>
</div>
</div>
<div className='stats-wrapper'>
<h2>$ Stats</h2>
<h4>
Total Score : {teamStats?.score}
</h4>
<table>
<thead>
<tr>
Expand Down
97 changes: 18 additions & 79 deletions apps/web/src/styles/App.css
Original file line number Diff line number Diff line change
Expand Up @@ -141,9 +141,11 @@
height: 100%;
display: flex;
flex-direction: column;
gap: 1em;
gap: 2em;
align-items: center;
justify-content: center;
padding: 2rem 0 2rem 0;
margin: auto;
}

.btn {
Expand All @@ -159,33 +161,6 @@
animation:
t 1.2s 0.5s both,
b 1.2s 1.3s both;
/* This adds pixilated border */
clip-path: polygon(
0px calc(100% - 9px),
3px calc(100% - 9px),
3px calc(100% - 6px),
6px calc(100% - 3px),
9px calc(100% - 3px),
9px 100%,
calc(100% - 9px) 100%,
calc(100% - 9px) calc(100% - 3px),
calc(100% - 6px) calc(100% - 3px),
calc(100% - 3px) calc(100% - 6px),
calc(100% - 3px) calc(100% - 9px),
100% calc(100% - 9px),
100% 9px,
calc(100% - 3px) 9px,
calc(100% - 3px) 6px,
calc(100% - 6px) 3px,
calc(100% - 9px) 3px,
calc(100% - 9px) 0px,
9px 0px,
9px 3px,
6px 3px,
3px 6px,
3px 9px,
0px 9px
);
}
@keyframes t {
to {
Expand All @@ -204,16 +179,14 @@
width: 90%;
border-radius: 0.5em;
padding: 0.5em;
font-family: Minecraft;
font-family: "Roboto", sans-serif;
font-size: 0.7em;
}

.home-head {
animation: slide-in-bck-center 1000ms normal;
}

/* This is challenge section components */

/* This gives pixilated borders to website */
.player-component {
clip-path: polygon(
Expand Down Expand Up @@ -249,56 +222,22 @@
}
.player-challenge-button {
margin: 10px;
clip-path: polygon(
0px calc(100% - 6px),
2px calc(100% - 6px),
2px calc(100% - 4px),
4px calc(100% - 2px),
6px calc(100% - 2px),
6px 100%,
calc(100% - 6px) 100%,
calc(100% - 6px) calc(100% - 2px),
calc(100% - 4px) calc(100% - 2px),
calc(100% - 2px) calc(100% - 4px),
calc(100% - 2px) calc(100% - 6px),
100% calc(100% - 6px),
100% 6px,
calc(100% - 2px) 6px,
calc(100% - 2px) 4px,
calc(100% - 4px) 2px,
calc(100% - 6px) 2px,
calc(100% - 6px) 0px,
6px 0px,
6px 2px,
4px 2px,
2px 4px,
2px 6px,
0px 6px
);
}
.player-challenge-compl-button {
margin: 5px;
border: #646cff 1px solid;
clip-path: polygon(
0px calc(100% - 4px),
2px calc(100% - 4px),
2px calc(100% - 2px),
4px calc(100% - 2px),
4px 100%,
calc(100% - 4px) 100%,
calc(100% - 4px) calc(100% - 2px),
calc(100% - 2px) calc(100% - 2px),
calc(100% - 2px) calc(100% - 4px),
100% calc(100% - 4px),
100% 4px,
calc(100% - 2px) 4px,
calc(100% - 2px) 2px,
calc(100% - 4px) 2px,
calc(100% - 4px) 0px,
4px 0px,
4px 2px,
2px 2px,
2px 4px,
0px 4px
);
}

.news {
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 10px;
}

.news-item {
font-size: 1.5em;
font-weight: bold;
border: 1px solid #ccc;
border-radius: 10px;
}
1 change: 1 addition & 0 deletions packages/api/config/env.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ const ZodEnvironmentVariables = z.object({
MAIL_FROM_EMAIL: z.string(),
MAIL_FROM_NAME: z.string(),
DISCORD_BLOOD_HOOK: z.string(),
DISCORD_NEWS_HOOK: z.string(),
UPSTASH_REDIS_REST_URL: z.string(),
UPSTASH_REDIS_REST_TOKEN: z.string(),
});
Expand Down
44 changes: 44 additions & 0 deletions packages/api/controllers/news.controller.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import { Context } from "hono";

import { NewsService } from "../services/news.service";

export class NewsController extends NewsService {
public getNews = async (ctx: Context) => {
try {
const data = await this.getNewsS();
return ctx.json({
status: 200,
message: data
});
}
catch (error: any) {
return ctx.json({
status: 500,
message: error.message
}, 500);
}
};

public addNews = async (ctx: Context) => {
try {
const { msg } = await ctx.req.json();
if (!msg) {
return ctx.json({
status: 400,
message: "No message provided"
}, 400);
}
const data = await this.addNewsS(msg);
return ctx.json({
status: 201,
message: data
}, 201);
}
catch (error: any) {
return ctx.json({
status: 500,
message: error.message
}, 500);
}
};
}
Loading

0 comments on commit bf4840e

Please sign in to comment.