Skip to content

Commit

Permalink
[Fix] Resolve issues and refactor code in pongame and CSS files
Browse files Browse the repository at this point in the history
  • Loading branch information
@ael-mouz
ael-mouz committed May 12, 2024
1 parent edc1b9a commit dfbc38b
Show file tree
Hide file tree
Showing 7 changed files with 281 additions and 232 deletions.
16 changes: 16 additions & 0 deletions app/back-end/game/consumers.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -230,6 +230,22 @@ async def start_game(self):
# delete_room(self.room_name)
return
await self.broadcast_message({"action": "start_game"})
message = {
"action": "score",
"user1score": room.getScores()["user1"],
"user2score": room.getScores()["user2"],
}
await self.broadcast_message(message)
ball_position, ball_velocity = room.get_updated_ball()
message = {
"action": "update",
"ball_position_x": ball_position["x"],
"ball_position_z": ball_position["z"],
"ball_velocity_x": ball_velocity["velocity_x"],
"ball_velocity_z": ball_velocity["velocity_z"],
}
await self.broadcast_message(message)
await asyncio.sleep(5)
room.ball_update()
room.ball_intersect()
room.paddle_update()
Expand Down
281 changes: 175 additions & 106 deletions app/front-end/src/app/dashboard/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,12 @@ import { LineController } from 'chart.js/auto';
import { useRouter } from 'next/navigation'
import { Dropdown } from 'react-bootstrap';
import ExportCSV from '@/components/export';
import { CategoryScale,
LinearScale,
Title,
Legend,
import { CategoryScale,
LinearScale,
Title,
Legend,
Tooltip,
PointElement,
PointElement,
LineElement } from 'chart.js';

interface TotalMinutes {
Expand Down Expand Up @@ -71,7 +71,7 @@ export default function Dashboard() {
const gameData: GameData[] = [];
const gameCsv: GameData[] = [];
useEffect(() => {
const fetchData = async () =>
const fetchData = async () =>
{
const access = Cookies.get('access');

Expand Down Expand Up @@ -105,8 +105,8 @@ export default function Dashboard() {
const period = 'year';
const response = await fetch('http://localhost:8000/api/game-stats-report', {
method: 'POST',
headers:
{
headers:
{
Authorization: `Bearer ${access}` ,
'Content-Type': 'application/json'
},
Expand Down Expand Up @@ -175,17 +175,17 @@ export default function Dashboard() {

const chartLabels = dashboardData?.total_minutes.months || [];
const chartData = dashboardData?.total_minutes.minutes_months || [];

Chart.register(
CategoryScale,
LinearScale,
Title,
Legend,
Tooltip,
LineController,
PointElement,
CategoryScale,
LinearScale,
Title,
Legend,
Tooltip,
LineController,
PointElement,
LineElement);

Chart.defaults.font.family = 'Itim';
Chart.defaults.font.size = 14;
const options: ChartOptions<'line'> = {
Expand All @@ -200,7 +200,7 @@ export default function Dashboard() {
},
},
};

const labels: string[] = chartLabels;
const data: ChartData<'line'> = {
labels,
Expand All @@ -216,100 +216,169 @@ export default function Dashboard() {
};

return (
<div className={`container-fluid ${styles.page_body} vh-100`}>
{/* {csvData && <ExportCSV data={gameCsv} filename="game_history.csv"></ExportCSV>} */}
<div className="row m-0 mt-5">
<div className="col-12 mt-5">
<div className={`row ${styles.card} m-1`}>
<div className='col-12 col-md-6'>
<div className={`${styles.index_img}`}>
<div className={`row`}>
<small className={`itim-font ${styles.small_title}`}>upcoming</small>
</div>
<div className={`row`}>
<div className={`col-12 col-md-8`}>
<h1 className={`${styles.titles} valo-font`}>THE ULTIMATE PING-PONG GAME.</h1>
</div>
</div>
<div className={`row`}>
<div className={`col-12 col-md-12`}>
<h6 className={`${styles.med_titles} itim-font`}>Welcome to our online ping pong paradise! Dive into
the fast-paced world of table tennis with our website,
where players of all levels can connect, compete,
and improve their skills. From casual matches to intense
tournaments, we've got everything you need to serve up some
excitement!
</h6>
</div>
<div>
<ButtonValo onClick={clickButton} value="Play" />
</div>
</div>
</div>
</div>
<div className='col-12 col-md-6'>
<div className={`${styles.imageContainer} position-relative`}>
<Image src="/dashboard_char.png" width={350} height={350} alt="anime charachter" />
</div>
</div>
<div className={`container-fluid ${styles.page_body} vh-100`}>
{/* {csvData && <ExportCSV data={gameCsv} filename="game_history.csv"></ExportCSV>} */}
<div className="row m-0 mt-5">
<div className="col-12 mt-5">
<div className={`row ${styles.card} m-1`}>
<div className="col-12 col-md-6">
<div className={`${styles.index_img}`}>
<div className={`row`}>
<small className={`itim-font ${styles.small_title}`}>
upcoming
</small>
</div>
<div className={`row`}>
<div className={`col-12 col-md-8`}>
<h1 className={`${styles.titles} valo-font`}>
THE ULTIMATE PING-PONG GAME.
</h1>
</div>
</div>
<div className={`row`}>
<div className={`col-12 col-md-12`}>
<h6 className={`${styles.med_titles} itim-font`}>
Welcome to our online ping pong paradise! Dive into the
fast-paced world of table tennis with our website, where
players of all levels can connect, compete, and improve
their skills. From casual matches to intense
tournaments, we've got everything you need to serve up
some excitement!
</h6>
</div>
<div>
<ButtonValo onClick={clickButton} value="Play" />
</div>
</div>
</div>
</div>
<div className="col-12 col-md-6">
<div className={`${styles.imageContainer} position-relative`}>
<Image
src="/dashboard_char.png"
width={350}
height={350}
alt="anime charachter"
priority
/>
</div>
<div className="col-12 mt-3">
<div className="row">
<div className="col-12 col-lg-6">
<div className={`d-flex flex-column p-3 ${styles.card} ${styles.buttom_cards} m-1`}>
<div className='row'>
<div className='col-6 d-flex align-items-start justify-content-start'>
<p className={`itim-font ${styles.med_titles}`}><FaHistory color='#FFEBEB'/> GAME HISTORY</p>
</div>
<div className='col-6 d-flex align-items-end justify-content-end'>
<Dropdown onClick={toggleDropdown}>
<Dropdown.Toggle variant="dark" id="dropdown-basic" className={`itim-font ${styles.all_down}`}>
ALL
</Dropdown.Toggle>
</div>
</div>
</div>
<div className="col-12 mt-3">
<div className="row">
<div className="col-12 col-lg-6">
<div
className={`d-flex flex-column p-3 ${styles.card} ${styles.buttom_cards} m-1`}
>
<div className="row">
<div className="col-6 d-flex align-items-start justify-content-start">
<p className={`itim-font ${styles.med_titles}`}>
<FaHistory color="#FFEBEB" /> GAME HISTORY
</p>
</div>
<div className="col-6 d-flex align-items-end justify-content-end">
<Dropdown onClick={toggleDropdown}>
<Dropdown.Toggle
variant="dark"
id="dropdown-basic"
className={`itim-font ${styles.all_down}`}
>
ALL
</Dropdown.Toggle>

<Dropdown.Menu show={dropdownOpen}>
<Dropdown.Item href="#/action-1" className='itim-font'>This Day</Dropdown.Item>
<Dropdown.Item href="#/action-2" className='itim-font'>This Month</Dropdown.Item>
<Dropdown.Item href="#/action-3" className='itim-font'>This Year</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
</div>
<hr style={{color: '#FFEBEB', backgroundColor: '#FFEBEB', height: 1}}/>
<GameHistoryCard data={gameData}/>
</div>
</div>
<div className={`col-12 col-lg-6 ${styles.chart_grid}`}>
<div className={`d-flex flex-column p-3 ${styles.card} ${styles.buttom_cards} m-1`}>
<div className='row'>
<div className='col-6 d-flex align-items-start justify-content-start'>
<p className={`itim-font ${styles.med_titles}`}><BiStats color='#FFEBEB'/> MY GAME STATS</p>
</div>
<div className='col-6 d-flex align-items-end justify-content-end'>
<Dropdown onClick={toggleDropdownGameStats}>
<Dropdown.Toggle variant="dark" id="dropdown-basic" className={`itim-font ${styles.all_down}`}>
ALL
</Dropdown.Toggle>
<Dropdown.Menu show={dropdownOpen}>
<Dropdown.Item
href="#/action-1"
className="itim-font"
>
This Day
</Dropdown.Item>
<Dropdown.Item
href="#/action-2"
className="itim-font"
>
This Month
</Dropdown.Item>
<Dropdown.Item
href="#/action-3"
className="itim-font"
>
This Year
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
</div>
<hr
style={{
color: "#FFEBEB",
backgroundColor: "#FFEBEB",
height: 1,
}}
/>
<GameHistoryCard data={gameData} />
</div>
</div>
<div className={`col-12 col-lg-6 ${styles.chart_grid}`}>
<div
className={`d-flex flex-column p-3 ${styles.card} ${styles.buttom_cards} m-1`}
>
<div className="row">
<div className="col-6 d-flex align-items-start justify-content-start">
<p className={`itim-font ${styles.med_titles}`}>
<BiStats color="#FFEBEB" /> MY GAME STATS
</p>
</div>
<div className="col-6 d-flex align-items-end justify-content-end">
<Dropdown onClick={toggleDropdownGameStats}>
<Dropdown.Toggle
variant="dark"
id="dropdown-basic"
className={`itim-font ${styles.all_down}`}
>
ALL
</Dropdown.Toggle>

<Dropdown.Menu show={dropdownOpenGameStats}>
<Dropdown.Item href="#/action-1" className='itim-font'>This Month</Dropdown.Item>
<Dropdown.Item href="#/action-2" className='itim-font'>3 Months</Dropdown.Item>
<Dropdown.Item href="#/action-3" className='itim-font'>1 Year</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
</div>
<hr style={{color: '#FFEBEB', backgroundColor: '#FFEBEB', height: 1}}/>
<div className='d-flex align-items-center justify-content-center h-75'>
<div>&nbsp;</div>
<Line className='itim-font' options={options} data={data} />
</div>
</div>
</div>
<Dropdown.Menu show={dropdownOpenGameStats}>
<Dropdown.Item
href="#/action-1"
className="itim-font"
>
This Month
</Dropdown.Item>
<Dropdown.Item
href="#/action-2"
className="itim-font"
>
3 Months
</Dropdown.Item>
<Dropdown.Item
href="#/action-3"
className="itim-font"
>
1 Year
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
</div>
<hr
style={{
color: "#FFEBEB",
backgroundColor: "#FFEBEB",
height: 1,
}}
/>
<div className="d-flex align-items-center justify-content-center h-75">
<div>&nbsp;</div>
<Line className="itim-font" options={options} data={data} />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
12 changes: 6 additions & 6 deletions app/front-end/src/app/game/(choose-opponent)/chooseOpponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,12 +41,12 @@ function ChooseOpponent({ setPageId }: Props) {
<div
className={`${styles.option} col-10 col-sm-3 col-md-8 col-xl-3 p-1`}
>
<Link href="/game/RemoteMatchGame">
<OptionCard
cardTitle="MATCH GAME"
imageSrc="back3.png"
setPageId={setPageId}
></OptionCard>
<Link href="/game/RemoteMatchGame"style={{ textDecoration: "none" }}>
<OptionCard
cardTitle="MATCH GAME"
imageSrc="back3.png"
setPageId={setPageId}
></OptionCard>
</Link>
</div>

Expand Down
Loading

0 comments on commit dfbc38b

Please sign in to comment.