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.

Sign up for GitHub

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

Jump to bottom

Issueid #227199 fix: [storylingo] player names are not visible properly #24

Open
wants to merge 3 commits into
base: release-0.2
Choose a base branch
from
Open

Issueid #227199 fix: [storylingo] player names are not visible properly #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c64f27c
Issueid #227199 fix: [storylingo] player names are not visible properly
ajinkyapandetekdi Sep 19, 2024
c74b9b5
Issueid #227199 fix: [storylingo] player names are not visible properly
ajinkyapandetekdi Sep 19, 2024
b4df326
Issueid #227199 fix: [storylingo] player names are not visible properly
ajinkyapandetekdi Sep 19, 2024
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
8 changes: 4 additions & 4 deletions src/components/Game.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@ function Game() {
}, [voiceText]);

console.log("check stoy line", storyLine);
const { Player1, Player2 } = usePlayers();
const { Player1, Player2 } = usePlayers();
return (
<div className="main-container">
<div className="top-header">
Expand Down Expand Up @@ -277,7 +277,7 @@ function Game() {
style={{
marginTop: "5px",
color: "yellow",
fontFamily: "fantasy",
fontFamily: '"Comic Sans MS", "Papyrus", cursive',
fontSize: "13px",
fontWeight: "600",
}}
Expand All @@ -297,7 +297,7 @@ function Game() {
</p>
</div>
<img
src={ storyLine <= Story.length - 1
src={ storyLine <= Story.length - 1
? require(`../assets/blank_text.png`)
: require(`../assets/over.png`)
}
Expand Down Expand Up @@ -355,7 +355,7 @@ function Game() {
style={{
marginTop: "5px",
color: "yellow",
fontFamily: "fantasy",
fontFamily: '"Comic Sans MS", "Papyrus", cursive',
fontSize: "13px",
fontWeight: "600",
}}
Expand Down
10 changes: 5 additions & 5 deletions src/components/Player.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ import jwt from "jwt-decode";
import { usePlayers } from "../utility/helperHook";

function Player() {
const { Player1, Player2 } = usePlayers();
const { Player1, Player2 } = usePlayers();
const [current, setCurrent] = useState("");
const [currentUserLogin,setIsCurrentUserLogin] = useState(!!localStorage.getItem('token'))
const [isBuddyLogin,setIsBuddyLogin] = useState(!!localStorage.getItem('buddyToken'))

function setPlayers(item) {
setCurrent(item);
localStorage.setItem("players", item);
Expand Down Expand Up @@ -62,7 +62,7 @@ function Player() {
setPlayers("p1s");
}}
className={
current === "p1s" ? "no_Of_Player_Selected" : "no_Of_Player"
current === "p1s" || current === "p2s" ? "no_Of_Player_Selected" : "no_Of_Player"
}
>
{Player1 === "" ? "1 Player" : Player1.student_name}
Expand Down Expand Up @@ -93,13 +93,13 @@ function Player() {
setPlayers("p1s");
}}
className={
current === "p1s" ? "no_Of_Player_Selected" : "no_Of_Player"
current === "p1s" || current === "p2s" ? "no_Of_Player_Selected" : "no_Of_Player"
}
>
{Player1 === "" ? "1 Player" : Player1.student_name}
</p>
</>

<>
<p
onClick={() => {
Expand Down
8 changes: 4 additions & 4 deletions src/components/Result.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const Snowflake = (props) => {
};

function Result() {
const { Player1, Player2 } = usePlayers();
const { Player1, Player2 } = usePlayers();
let player1 = localStorage.getItem("p1");
let player2 = localStorage.getItem("p2");
let score1 = localStorage.getItem("score1");
Expand Down Expand Up @@ -113,7 +113,7 @@ function Result() {
}
>
{numberOfPlayers === "p1s" ? (
<h1 className="mint">GAME OVER</h1>
<h1 className="mint">GAME OVER</h1>
) : Number(score1) > Number(score2) ? (
<h1 className="mint">{Player1.student_name || "Player 1"} WON</h1>
) : Number(score1) === Number(score2) ? (
Expand Down Expand Up @@ -145,7 +145,7 @@ function Result() {
style={{
marginTop: "5px",
color: "yellow",
fontFamily: "fantasy",
fontFamily: '"Comic Sans MS", "Papyrus", cursive',
fontSize: "16px",
fontWeight: "600",
}}
Expand All @@ -170,7 +170,7 @@ function Result() {
style={{
marginTop: "5px",
color: "yellow",
fontFamily: "fantasy",
fontFamily: '"Comic Sans MS", "Papyrus", cursive',
fontSize: "16px",
fontWeight: "600",
}}
Expand Down
65 changes: 36 additions & 29 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,11 @@ html {
margin: 0;
padding: 0;
}

* {
box-sizing: border-box;
}

body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
Expand Down Expand Up @@ -82,7 +84,7 @@ code {
padding: 15px 90px;
border-radius: 10px;
color: white;
font-family: fantasy;
font-family: "Comic Sans MS", "Papyrus", cursive;
background-color: grey;
font-size: 25px;
opacity: 0.9;
Expand All @@ -93,10 +95,9 @@ code {
margin-bottom: 30px;
padding: 15px 90px;
border-radius: 10px;
/* color: white; */
font-family: fantasy;
background: rgb(2,0,36);
background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(252,255,103,1) 0%, rgba(255,205,80,1) 100%);
font-family: "Comic Sans MS", "Papyrus", cursive;
background: rgb(2, 0, 36);
background: radial-gradient(circle, rgba(2, 0, 36, 1) 0%, rgba(252, 255, 103, 1) 0%, rgba(255, 205, 80, 1) 100%);
font-weight: 500;
font-size: 25px;
opacity: 0.9;
Expand All @@ -105,9 +106,7 @@ code {

@font-face {
font-family: 'Rocher';
/* src: url('../../all-games-storyling/src/assets/fontFamily/RocherColorGX.woff2');
*/
src: url('./assets/fontFamily/RocherColorGX.woff2');
src: url('./assets/fontFamily/RocherColorGX.woff2');
}

body {
Expand All @@ -129,38 +128,42 @@ h1 {
font-palette: --Mint;
font-family: Rocher;
}

.min-test {
font-size: 32px;
font-palette: --Mint;
font-family: Rocher;
cursor: pointer;
}

.min-selectstory {
margin-top: 40px;
font-size: 38px;
font-palette: --Mint;
font-family: Rocher;
}
.position-set{

.position-set {
display: flex;
flex-direction: column;
position: absolute;
margin-left: 35px;
margin-top: 8px;
}

.story-text {
width: 472px;
height: 325px;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-weight: bold;
padding-left: 45px;
padding-right: 45px;
font-size: 18px;
height: 325px;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-weight: bold;
padding-left: 45px;
padding-right: 45px;
font-size: 18px;

/* align-self: center;
padding-left: 45px;
Expand All @@ -169,11 +172,11 @@ h1 {
font-weight: bold;
width: 500px;
height: 500px; */
}
}



@media only screen and (min-width:0) and (max-width: 600px) {
@media only screen and (min-width:0) and (max-width: 600px) {
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
Expand All @@ -187,7 +190,7 @@ h1 {
height: 100%;
}

.position-set{
.position-set {
margin-top: -18px;
}

Expand All @@ -198,15 +201,17 @@ h1 {
width: 90%;
padding-left: 24px;
padding-right: 45px;
}
.player_text{
}

.player_text {
font-size: 20px;
margin-top: 50px;
position: relative;
}
}

@media only screen and (min-width:600px) and (max-width: 1597px) {
.position-set{
.position-set {
display: flex;
flex-direction: column;
align-items: center;
Expand All @@ -216,14 +221,16 @@ h1 {
margin-top: 8px;
padding-left: 30px;
}

.story-text {
text-align: center;
font-size: 18px;
font-weight: bold;
width: 400px;
}
}
}
.storyling-logo{

.storyling-logo {
cursor: pointer;
height: 25px;
}
}