Skip to content

Commit a1caba8

Browse files
muratkaanmesummuratkaanmesum
committed
t
1 parent 9d5b1ed commit a1caba8

File tree

2 files changed

+183
-52
lines changed

2 files changed

+183
-52
lines changed

‎API/static/scripts/spa.js

+1-52
Original file line numberDiff line numberDiff line change
@@ -522,57 +522,6 @@ const routes = new Map([
522522
</div>
523523
`
524524
}],
525-
['game', {
526-
auth_required: true,
527-
url: ['/play/'],
528-
html: `
529-
530-
<div
531-
class="background container-fluid social-background"
532-
style="padding: 0"
533-
>
534-
<div class="game-container">
535-
536-
<div class="game-wrapper">
537-
<div class="game-data-wrapper">
538-
539-
<div class="game-player-data" id="player-one">
540-
<div class="player-image">
541-
<img src="https://picsum.photos/seed/picsum/200/300" alt="Player 2">
542-
</div>
543-
<div class="player-description" id="player-one-details">
544-
<span class="player-name">Player 1</span>
545-
<span class="player-points">Points?</span>
546-
</div>
547-
</div>
548-
<div class="game-points">
549-
<h1 id="game-points" class="skeleton">
550-
551-
</h1>
552-
</div>
553-
<div class="game-player-data" id="player-two">
554-
<div class="player-image">
555-
<img src="https://picsum.photos/seed/picsum/200/300" alt="Player 2">
556-
</div>
557-
<div class="player-description" id="player-two-details">
558-
<span class="player-name">Player 2</span>
559-
<span class="player-name">Points?</span>
560-
</div>
561-
</div>
562-
563-
</div>
564-
<div class="" id="canvas-wrapper">
565-
<div class="spectators-wrapper" id="spectators-wrapper">
566-
</div>
567-
<div class="canvas-wrapper">
568-
<canvas class="canvas-class" id="pongCanvas" width="1368" height="600"></canvas>
569-
</div>
570-
</div>
571-
</div>
572-
</div>
573-
</div>
574-
`
575-
}],
576525
['error', {
577526
auth_required: false,
578527
url: ['/error/'],
@@ -762,12 +711,12 @@ const routeToFile = [
762711
[['/social/', '/social/\\w+/g'], 'social'],
763712
[['/home/'], 'home'],
764713
[['/verification/'], 'verification'],
765-
[['/play/'], 'offline-game'],
766714
[[/game\/([0-9a-fA-F]{8}-[0-9a-fA-F]{4}-4[0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12})/], 'game'],
767715
[['/matchmaking/'], 'matchmaking'],
768716
[['/tournaments/'], 'tournaments'],
769717
[['/create-tournament/'], 'create-tournament'],
770718
[[/tournament\/([0-9a-fA-F]{8}-[0-9a-fA-F]{4}-4[0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12})/], 'tournament'],
719+
[['/play/'], 'offline-game'],
771720
]
772721
const requiredScripts = [
773722
'/static/components/Notification.js',

‎API/static/styles/offline-game.css

+182
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
.game-container{
2+
width: 90%;
3+
margin: auto;
4+
padding: 2rem 0;
5+
height: 100%;
6+
}
7+
.game-wrapper{
8+
display: flex;
9+
flex-direction: column;
10+
gap: 10px;
11+
height: 100%;
12+
position: relative;
13+
}
14+
.game-data-wrapper
15+
{
16+
display: flex;
17+
align-items: center;
18+
justify-content: space-between;
19+
font-size: smaller;
20+
position: relative;
21+
}
22+
.game-player-data
23+
{
24+
display: flex;
25+
align-items: center;
26+
gap: 10px;
27+
}
28+
.player-image{
29+
aspect-ratio: 1/1;
30+
width: 3rem;
31+
height: 3rem;
32+
border-radius: 50%;
33+
}
34+
.player-image img {
35+
aspect-ratio: 1/1;
36+
width: 3rem;
37+
height: 3rem;
38+
border-radius: 50%;
39+
}
40+
.game-points h1{
41+
font-size: 3rem;
42+
}
43+
.player-description{
44+
font-weight: bold;
45+
font-size: large;
46+
display: flex;
47+
flex-direction: column;
48+
gap: 5px;
49+
}
50+
.canvas-wrapper
51+
{
52+
position: relative;
53+
width: 1368px;
54+
height: 600px;
55+
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
56+
border-radius: 2rem;
57+
}
58+
#canvas-wrapper{
59+
width: 100%;
60+
height: 100%;
61+
display: flex;
62+
align-items: center;
63+
justify-content: center;
64+
}
65+
#countdown {
66+
position: absolute;
67+
top: 50%;
68+
left: 50%;
69+
transform: translate(-50%, -50%);
70+
font-size: 5rem;
71+
color: white;
72+
font-weight: bold;
73+
user-select: none;
74+
z-index: 20;
75+
animation: fadeIn 1s linear;
76+
}
77+
#game-message-wrapper{
78+
position: absolute;
79+
height: 100%;
80+
width: 100%;
81+
display: flex;
82+
align-items: center;
83+
justify-content: center;
84+
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
85+
top: 0;
86+
gap: 10px;
87+
z-index: 20;
88+
user-select: none;
89+
}
90+
@keyframes fadeIn {
91+
from { opacity: 0; }
92+
to { opacity: 1; }
93+
}
94+
95+
@keyframes fadeOut {
96+
from { opacity: 1; }
97+
to { opacity: 0; }
98+
}
99+
.winner-wrapper{
100+
display: flex;
101+
align-items: center;
102+
justify-content: center;
103+
animation: fadeIn 1s;
104+
gap: 20px;
105+
}
106+
107+
.play-again {
108+
cursor: pointer;
109+
transition: all 0.5s;
110+
}
111+
112+
.play-again:hover {
113+
scale: 1.06;
114+
}
115+
116+
.info-area {
117+
display: flex;
118+
flex-direction: column;
119+
}
120+
121+
.winner-wrapper h1 h2 {
122+
margin: 0;
123+
}
124+
.winner-image-wrapper{
125+
aspect-ratio: 1/1;
126+
width: 5rem;
127+
height: 5rem;
128+
border-radius: 50%;
129+
}
130+
.spectators-wrapper{
131+
position: absolute;
132+
right: 50%;
133+
top: 3rem;
134+
display: flex;
135+
justify-content: center;
136+
}
137+
.spectator-image{
138+
aspect-ratio: 1/1;
139+
width: 2rem;
140+
height: 2rem;
141+
border-radius: 50%;
142+
margin-right: -1rem; /* Half of the width */
143+
}
144+
145+
.spectator-image img{
146+
aspect-ratio: 1/1;
147+
width: 2rem;
148+
height: 2rem;
149+
border-radius: 50%;
150+
}
151+
@keyframes fadeIn {
152+
from { opacity: 0; }
153+
to { opacity: 1; }
154+
}
155+
156+
.popup-container {
157+
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
158+
list-style: none;
159+
z-index: 10;
160+
border: 1px solid white;
161+
user-select: none;
162+
padding: 10px;
163+
position: absolute;
164+
top: 3rem;
165+
display: flex;
166+
flex-direction: column;
167+
min-width: 150px;
168+
}
169+
170+
.popup-container h6 {
171+
text-align: center;
172+
}
173+
174+
.popup-content {
175+
padding: 2px;
176+
gap: 25px;
177+
width: 100px;
178+
display: flex;
179+
font-size: small;
180+
align-items: center;
181+
justify-content: space-between;
182+
}

0 commit comments

Comments
 (0)