Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Web facelift #14

Merged
merged 63 commits into from
Jul 27, 2022
Merged
Changes from 1 commit
Commits
Show all changes
63 commits
Select commit Hold shift + click to select a range
16e8955
New design for homepage
SebastianH-ctrl Jul 14, 2022
c9b4e38
cygni-phone update
SebastianH-ctrl Jul 15, 2022
32b7326
Removed about & getting-started from header
SebastianH-ctrl Jul 15, 2022
313643a
began on search-game and login
SebastianH-ctrl Jul 15, 2022
4f617dd
Fixed footer on StartView
oliviaharlin Jul 18, 2022
5429043
Started on GameView and TournamentSettings and fixed other views
oliviaharlin Jul 18, 2022
0b9b5da
Merge branch 'main' into web-facelift
Dolvur Jul 19, 2022
c3722f7
Continued on gameboardview, settingsview, modal
Dolvur Jul 19, 2022
c21a22e
Player screen
SebastianH-ctrl Jul 19, 2022
abfd33d
Styled modal
oliviaharlin Jul 19, 2022
157997c
Changed color
oliviaharlin Jul 19, 2022
fe27a6d
Merge branch 'web-facelift' of https://github.com/cygni/snakebot-reac…
oliviaharlin Jul 19, 2022
5f258f6
new enums, design
SebastianH-ctrl Jul 19, 2022
cdf4a19
Loadingpage CSS
SebastianH-ctrl Jul 19, 2022
bc11b73
style.scss
SebastianH-ctrl Jul 19, 2022
ac69016
Added btn to be able to go back to settings from playerlist
SebastianH-ctrl Jul 19, 2022
b561b3f
Tournament bracket styling
SebastianH-ctrl Jul 20, 2022
d86404a
Fixed margins in score board and started on footer fix
oliviaharlin Jul 20, 2022
cf286bd
Merge branch 'web-facelift' of https://github.com/cygni/snakebot-reac…
oliviaharlin Jul 20, 2022
6a4eab4
small h1 fixes
SebastianH-ctrl Jul 20, 2022
75e81ec
Fixed modal backdrop
oliviaharlin Jul 20, 2022
8f08e7c
Merge branch 'web-facelift' of https://github.com/cygni/snakebot-reac…
oliviaharlin Jul 20, 2022
bd65ae5
Small fixes with margins in score board
oliviaharlin Jul 20, 2022
6c5793e
footer complete
SebastianH-ctrl Jul 20, 2022
5f4ad57
Adjusted margins on start page for wider screens
oliviaharlin Jul 20, 2022
537d05a
Fixed tournament spoiling
SebastianH-ctrl Jul 21, 2022
0e63b1f
Fixed alignment with switch toggle buttons
oliviaharlin Jul 21, 2022
f068e5d
Merge branch 'web-facelift' of https://github.com/cygni/snakebot-reac…
oliviaharlin Jul 21, 2022
719a1a0
Buttons in tournament GameView
SebastianH-ctrl Jul 21, 2022
ca35f39
Added tournament buttons in gameboardview
SebastianH-ctrl Jul 21, 2022
4e24ffa
fixed loading page strructure
SebastianH-ctrl Jul 21, 2022
5bdbd97
fixed so that gameboard buttons are only visible in tournament mode
SebastianH-ctrl Jul 21, 2022
ce4704c
Sketchy button problem is sketchy
SebastianH-ctrl Jul 21, 2022
0235330
Prevented mockup from cropping on smaller screens
oliviaharlin Jul 21, 2022
87b8d75
Updated Readme
SebastianH-ctrl Jul 22, 2022
d7a4daf
fixed error message from server
SebastianH-ctrl Jul 22, 2022
30f229d
moved podium to bracket
SebastianH-ctrl Jul 22, 2022
16f886e
percentage for loading screen
SebastianH-ctrl Jul 22, 2022
ae56dbc
Remove unused stuff
Dolvur Jul 25, 2022
53355a9
Fix go next btn in tournament, hide view game on TBD, show last frame…
Dolvur Jul 25, 2022
d12ae06
Refactor views and tournament components
Dolvur Jul 25, 2022
6691520
Add button hover and active css
Dolvur Jul 25, 2022
697b28a
More refactoring
Dolvur Jul 25, 2022
df06efd
Alert to reconnect if socket gets disconnected
Dolvur Jul 26, 2022
e9d764f
Move and rename
Dolvur Jul 26, 2022
a0288f9
Fix imports and improve tournament game starting
Dolvur Jul 26, 2022
32ee37c
Refactor
Dolvur Jul 26, 2022
0adb95f
Update package.json
Dolvur Jul 26, 2022
bbe70bc
Folder rename (#13)
Dolvur Jul 26, 2022
9fa568f
Tooltip for maxplayers setting
SebastianH-ctrl Jul 26, 2022
d944c96
Update stylesheet.scss
SebastianH-ctrl Jul 26, 2022
8aec764
Socket tries to reconnect if closed
Dolvur Jul 26, 2022
961348d
Add create new tournament button on Schedule
Dolvur Jul 26, 2022
ff0d76e
Merge branch 'web-facelift' of https://github.com/cygni/snakebot-reac…
Dolvur Jul 26, 2022
51d46ee
Decrease TTS volume
Dolvur Jul 26, 2022
a2b7154
css change button width
Dolvur Jul 26, 2022
3f2c2ee
Settings input
Dolvur Jul 26, 2022
7de253f
fix footer
SebastianH-ctrl Jul 26, 2022
afc2474
CSS footer and instagram photo
Dolvur Jul 27, 2022
3d21218
new youtubevideo
SebastianH-ctrl Jul 27, 2022
97e4162
Add contributors
Dolvur Jul 27, 2022
ff86c6c
safe routing for invalid gameID
SebastianH-ctrl Jul 27, 2022
13024b2
Merge branch 'web-facelift' of https://github.com/cygni/snakebot-reac…
SebastianH-ctrl Jul 27, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Fixed margins in score board and started on footer fix
oliviaharlin committed Jul 20, 2022
commit d86404afa64640bf5abba5504b76d358f618f102
2 changes: 2 additions & 0 deletions src/components/Modal.tsx
Original file line number Diff line number Diff line change
@@ -4,11 +4,13 @@ import { useSelector } from "react-redux"
import type { RootState } from '../context/store';
import Podium from '../assets/images/Podium.svg';
import { BsX } from 'react-icons/bs'
import { useEffect } from "react";


function Modal({setIsOpen} :any){
const snakes = useSelector((state: RootState) => state.currentFrame);
console.log("test")

return (
<>
<div className="darkBG" onClick={() => setIsOpen(false)}/>
15 changes: 10 additions & 5 deletions src/components/ScoreBoard.tsx
Original file line number Diff line number Diff line change
@@ -31,17 +31,22 @@ function ScoreBoard() {
return (
<div className="activePlayers">
<h2>Leaderboard</h2>
<div className="leaderboard">
<ul>
{
Object.keys(snakes).sort(sortSnakes).map((snakeID, index) => (
<li key={index}>
<img src={getCurrentSnakeHead(snakes[snakeID]).src} alt="snakehead" />
<p className='name'>{snakes[snakeID].name}</p>
<p className='points'>{snakes[snakeID].points} points</p>
</li>
<li key={index}>
<img src={getCurrentSnakeHead(snakes[snakeID]).src} alt="snakehead" />
<div className="list-content">
<p className='name'>{snakes[snakeID].name}</p>
{/* <p className='points'>{snakes[snakeID].points} points</p> */}
<p className="points">12 points</p>
</div>
</li>
))
}
</ul>
</div>
</div>
)
}
2 changes: 1 addition & 1 deletion src/components/Tournament/TournamentSchedule.tsx
Original file line number Diff line number Diff line change
@@ -25,7 +25,7 @@ function TournamentSchedule() {
<article style={{ textAlign: 'center' }}>
<h1>{tournamentName}</h1>
</article>
<div className="tournament">
<div className="tournamentschedule">
{levels.slice(0).reverse().map((level, index) => (
<div key={index}>
<div className={roundClassName(level) + ' round-box'}>
198 changes: 160 additions & 38 deletions src/stylesheet.scss
Original file line number Diff line number Diff line change
@@ -124,6 +124,8 @@ iframe{
padding-top: 8rem;
padding-bottom: 8rem;
position: relative;


}


@@ -175,13 +177,21 @@ header {
}
}

#root{
position: relative;
min-height: 100vh;
}

footer {
padding: 2rem 5rem 2rem;
background-color: #e3d9d7;
height: 7rem;
position: relative;
left: 0;
right: 0;
bottom: 0;
margin-top: auto;
position: absolute;



img {
width: 150px;
@@ -653,11 +663,16 @@ footer {

/* The game */
.thegame {
margin: 2rem;
margin: 3rem auto;
width: auto;
min-height: 90vh;
display: table;
min-height: -webkit-calc(100vh - 15rem);
min-height: -moz-calc(100vh - 15rem);
min-height: calc(100vh - 15rem);
// display: flex;
// justify-content: center;


/* Gameboard with controls */
.gameboard {
@@ -728,54 +743,57 @@ footer {
margin-right: 2rem;
float: left;
font-size: 14px;
width: 220px;
width: 270px;

h2 {
margin: 0 0.5rem 0.25rem;
margin: 0 0.5rem 1rem;
}


// figure {
// display: inline-block;
// margin: 0;
// padding: 4px 0 0 4px;
// width: 24px;
// height: 24px;
// // background-color: #141631;
// margin: 5px 5px 0 0;
// border-radius: 3px;

// }
.leaderboard{
border: 1px solid rgb(223,223,223);
border-radius: 10px;
text-align: left;
padding-right: 1em;
padding-left: 1em;
}

ul {
padding: 0;
margin: 0;
border: 2px solid rgb(223,223,223);
border-radius: 10px;
// line-height: 60px;
margin-top: 0;
margin-bottom: 0;
margin-right: auto;
margin-left: auto;
display: block;
list-style: none;

li {
border-top: 2px solid rgb(223,223,223);
margin: 1rem;
border-top: 1px solid rgb(223,223,223);
padding-top: 1em;
padding-bottom: 1em;
//margin: 1rem;
overflow: hidden;
// text-align: center;
// vertical-align: middle;
display: grid;
grid-template-columns: 1fr 3fr;

// padding: 0.5rem;
// white-space: nowrap;
// text-overflow: ellipsis;

// padding-top: auto;
// padding-bottom: auto;

.list-content{
//vertical-align: middle;
display: table;

}

&:first-child {
border-top: none;
}

p {
margin: 0;
font-weight: 600;
display: inline-block;
vertical-align: middle;
margin-top: auto;
margin-bottom: auto;
display: table-cell;
text-align: center;
vertical-align: middle;
}

img {
@@ -785,13 +803,9 @@ footer {
padding: 1rem;
}

.name {
// float: left;
}

.points {
float: right;
color: rgb(223,223,223);
width: auto;
}
}
}
@@ -1004,4 +1018,112 @@ footer {
100% {
opacity: 1;
}
}

.flex {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: baseline;
align-content: space-between;
}

.round-box {
border-radius: 8px;
margin: 0;
padding: 1rem 2rem 2rem;
margin: auto;

h2 {
font-size: 30px;
text-align: left;
font-weight: 300;
display: inline-block;
}
}

.game {
display: inline-block;
list-style: none;
padding: 0;
//width: 200px;
margin: 0 1rem;
overflow: auto;

li {
background-color: #D3D3D3;
padding: 5px 10px;
margin: 0 0 3px 0;
font-size: 14px;
border-radius: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;

&:hover {
background-color: #f7f7e9;
}
}
}

.spacer {
background-color: #ddd;
height: 20px;
width: 3px;
margin: auto;
}

.thefinalwinner {
display: block;
width: 400px;
margin: auto;
margin-bottom: 3rem;

li {
font-size: 24px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
background-color: gold;
padding: 1rem;

&:hover {
background-color: gold;
}
}
}

li {
&.looser {
background-color: #eee;
color: #999;
}

.gotogame {
background-color: transparent;
text-align: center;
font-size: 12px;
font-weight: bold;
padding: 0;
}

.gotogame:hover {
background-color: transparent;
}

}

.points {
display: inline-block;
width: 24px;
font-weight: bold;
}

.livedlongest {
width: 16px;
height: 16px;
float: right;
margin-top: 3px;
}
12 changes: 9 additions & 3 deletions src/views/GameboardView.tsx
Original file line number Diff line number Diff line change
@@ -57,18 +57,23 @@ function GameboardView() {
console.log("här ska det hända något")
if(gameEnded){
setModalOpen(true);
}
}, [gameEnded])

useEffect(() => {
if(modalOpen){
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = 'visible'; //denna behöver lyssna på när modalen stängs och inte när gameEnded uppdateras, bör ändras!!!
document.body.style.overflow = 'visible';
}
}, [gameEnded])

},[modalOpen])


return (
<section className="page clear-fix">
{BracketNavigation()}

{modalOpen && <Modal setIsOpen={setModalOpen} />}
<div className="thegame">
<ScoreBoard />
<div className="gameboard" >
@@ -87,6 +92,7 @@ function GameboardView() {
<ControllBar/>
</div>
</div>
{modalOpen && <Modal setIsOpen={setModalOpen} />}
</section>
)
}