- {Room.roomPlayersList?.map((user, index) => (
-
-
+ return rooms.map((Room) => {
+ const playerSlots = [];
+
+ // 生成玩家头像或空白框，总数等于房间最大玩家数
+ for (let i = 0; i < Room.roomMaxNum; i++) {
+ if (i < Room.roomPlayersList.length) {
+ const user = Room.roomPlayersList[i];
+ playerSlots.push(
+
- ))}
-
-
-
{Room.roomName}
-
{Room.theme}
-
- {Room.status}
-
+ );
+ } else {
+ // 空白框
+ playerSlots.push(
+
+
+
+ );
+ }
+ }
+
+ return (
+
+
+ {playerSlots}
+
+
+
{Room.roomName}
+
{Room.theme}
+
+ {Room.status}
+
+
-
- ));
+ )
+ });
};
- if (user === null) {
- return
Loading... ;
- }
+ // if (user === null) {
+ // return
Loading... ;
+ // }
return (
-
-
-
{user.username}
-
-
logout
+ {user && (
+
+
+
{user.username}
+
+ Logout
+
-
+ )}
Kaeps
i
@@ -511,62 +479,69 @@ const Lobby = () => {
-
- {
- toggleAvatarPop();
- toggleProfilePop();
- }}>
-
-
+ User ID: {user.id}
+ Register Date: {user.registerDate}
- {/*RegisterDate: {user && new Date(user.registerDate).toLocaleDateString()}
*/}
+ {/*RegisterDate: {user && new Date(user.registerDate).toLocaleDateString()}
*/}
-
- {
- toggleProfilePop();
- }}>
- Cancel
-
- doEdit()}
- disabled = {username === "" || username === user.username}
- >
- Edit
-
-
-
-
+
+
+ )}
-
- {avatarList?.map((avatar, index) => (
-
+ {AVATAR_LIST?.map((avatar, index) => (
+
{
changeAvatar(avatar).then(r => toggleAvatarPop);
toggleAvatarPop();
@@ -576,10 +551,16 @@ const Lobby = () => {
-
+ DEFAULT_MAX_PLAYERS || roomTheme === "" || isNaN(maxRoomPlayers)}
+ className="create-room" onClick={createRoom}>Create Room
+ Cancel
+
+ }
>
Create Room
@@ -598,12 +579,12 @@ const Lobby = () => {
Number of Maximum Players:
- DEFAULT_MAX_PLAYERS || roomTheme === ""}
- className="create-room" onClick={createRoom}>Create Room
- Cancel
-
-
+
+ {
+ navigate("/guide");
+ toggleInfoPop();
+ }}>
+ Guide
+
+
+ Close
+
+
+ }>
Welcome to KAEPS!
-
Here are some guides for playing this game:
+
Here are some guides to help you get started with the game:
- Speaker: Receives a word, records it, inverts the audio, and sends it to other players.Challenger: Receives the reversed audio recording from the speaker.
- The challenger should then mimic this reversed recording.
- After recording their own version of the reversed audio, they should play it backwards to guess the original word.Scoring: Correctly deciphering the word scores you points.Turns: Each round has one Speaker and multiple Challengers. Players take turns to be the Speaker.Speaker: The speaker receives a word, records it, inverts the recording, and then sends this inverted audio to other players.Challenger: Challengers listen to the inverted audio sent by the speaker.
+ You must mimic this recording and then play their recording backwards to guess the original word.
+ You can guess multiple times before time is up.
+ Scoring: Points are awarded for correctly guessing the word. The faster you guess, the more points you earn.Turns: The game is played in rounds. Each round has one speaker and several challengers. Players alternate roles as the Speaker to ensure fairness.
+
Click GUIDE for more detailed instructions.
Join a room or create one to play with friends!
-
-
-
- Close
-
+
diff --git a/src/components/views/RuleGuide.tsx b/src/components/views/RuleGuide.tsx
new file mode 100644
index 0000000..e233f24
--- /dev/null
+++ b/src/components/views/RuleGuide.tsx
@@ -0,0 +1,325 @@
+import React, { useState,useEffect, useRef, useMemo, useLayoutEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import Guide from "byte-guide";
+import { PlayerList } from "./GameroomPlayerList";
+import { Roundstatus } from "./GameroomRoundStatus";
+import { ValidateAnswerForm } from "./GameroomAnswerForm";
+import BaseContainer from "components/ui/BaseContainer";
+import Header from "./Header";
+import { FFmpeg } from "@ffmpeg/ffmpeg";
+import "../../styles/views/RuleGuide.scss";
+import { showToast} from "../../helpers/toastService";
+
+const mockGameTheme = "FOOD";
+const mockRoomName = "GuideRoom";
+const mockGlobalVolume = 0.5;
+const MS_PER_SEC = 1000;
+const DEFAULT_ROUND_DURATION_S = 20;
+
+const mockGameInfo = {
+ roomID: "1",
+ currentSpeaker: {
+ userID: "id2",
+ username: "myself",
+ avatar: "dog-face"
+ },
+ currentAnswer: "Banana",
+ roundStatus: "speak",
+ currentRoundNum: 1
+};
+const mockSharedAudioList = {
+ "id1": "fakeURL"
+};
+
+const mockPlayerLists = [
+ {
+ user: {
+ id: "id1",
+ name: "user1",
+ avatar: "clown-face"
+ },
+ score: {
+ total: 0
+ },
+ ifGuess: true,
+ roundFinished: false,
+ ready: true
+ },
+ {
+ user: {
+ id: "id2",
+ name: "myself",
+ avatar: "dog-face"
+ },
+ score: {
+ total: 0
+ },
+ ifGuess: false,
+ roundFinished: false,
+ ready: true
+ },
+ {
+ user: {
+ id: "id3",
+ name: "user3",
+ avatar: "cat-face"
+ },
+ score: {
+ total: 0
+ },
+ ifGuess: true,
+ roundFinished: false,
+ ready: true
+ },
+ {
+ user: {
+ id: "id4",
+ name: "user4",
+ avatar: "angry-face"
+ },
+ score: {
+ total: 0
+ },
+ ifGuess: true,
+ roundFinished: false,
+ ready: true
+
+ }
+];
+const gameOver = false;
+const user = {
+ token: "mockToken",
+ id: "id2",
+ username: "myself",
+};
+const currentSpeakerAudioURL = "fakeURL";
+
+const RuleGuide = () => {
+ useLayoutEffect(() => {
+ // remove the guide key from localStorage
+ if (localStorage.getItem("RuleGuide")) {
+ localStorage.removeItem("RuleGuide");
+ }
+ }, []);
+ const navigate = useNavigate();
+ const roundStatusComponentRef = useRef(null);
+ const [gameInfo, setGameInfo] = useState(mockGameInfo);
+ const [playerInfo, setPlayerInfo] = useState(mockPlayerLists);
+ const endTime = useMemo(() => new Date(Date.now() + DEFAULT_ROUND_DURATION_S * MS_PER_SEC).toISOString(), [gameInfo.roundStatus]);
+ const ffmpegObj = useMemo(() => {
+ const ffmpeg = new FFmpeg();
+ try {
+ ffmpeg.load();
+ }
+ catch (e) {
+ console.error(e);
+ alert("Failed to load ffmpeg");
+ }
+
+ return ffmpeg;
+ });
+
+ useEffect(() => {
+ const handleEscKey = (event) => {
+ if (event.key === "Escape") {
+ event.preventDefault(); // Cancel the default action
+ navigate("/lobby");
+ }
+ };
+
+ window.addEventListener("keydown", handleEscKey);
+
+ return () => {
+ window.removeEventListener("keydown", handleEscKey);
+ };
+ }, [navigate]);
+
+
+ return (
+
+ {/* */}
+
+
{
+ // setGlobalVolume(e.target.value);
+ // console.log("[volume] set to", e.target.value);
+ }
+ }
+ onClickMute={
+ () => {
+ // if (globalVolume === 0) {
+ // setGlobalVolume(globalVolumeBeforeMute.current);
+ // } else {
+ // globalVolumeBeforeMute.current = globalVolume;
+ // setGlobalVolume(0);
+ // }
+ }
+ }
+ volume={mockGlobalVolume}
+ />
+ {!gameOver && (
+ { }}
+ ref={roundStatusComponentRef}
+ />
+ )}
+
+ {gameInfo.roundStatus === "guess" && (
+
+ { }}
+ roundFinished={false}
+ />
+
+ )}
+ {gameInfo.roundStatus === "speak" && (
+
{
+ //console.log("upload audio");
+ // throttledUploadAudio();
+ }
+ }>upload
+ )}
+ {gameInfo.roundStatus === "guess" && (
+
{
+ //console.log("upload audio");
+ // throttledUploadAudio();
+ }
+ }>share your audio
+ )}
+
{
+ setGameInfo(
+ {
+ ...gameInfo,
+ roundStatus: "guess",
+ currentSpeaker: {
+ userID: "id3",
+ username: "user3",
+ avatar: "cat-face"
+ }
+ }
+ );
+ setPlayerInfo(
+ playerInfo.map(
+ (player) => {
+ if (player.user.id === "id3") {
+ return {
+ ...player,
+ ifGuess: false
+ };
+ }
+ if (player.user.name === "myself") {
+ return {
+ ...player,
+ ifGuess: true
+ };
+ }
+
+ return {
+ ...player,
+ };
+ }
+ )
+ );
+ }
+ },
+ {
+ selector: ".roundstatus",
+ title: "Guess-Phase",
+ content: "Now, user3 is the Speaker, and you need to guess the word by simulating the reversed audio",
+ placement: "left",
+ },
+ {
+ selector: ".speakPlayerContainer",
+ title: "Guess-Phase",
+ content: "Click here to listen to the speaker's audio",
+ },
+ {
+ selector: ".remindermssg",
+ title: "Guess-Phase",
+ content: "You shuold simulate the reversed audio and reverse it again to figure out the word",
+ placement: "top",
+ },
+ {
+ selector: ".inputarea",
+ title: "Guess-Phase",
+ content: "After you figure out the word, you can submit your answer here, also you can share your audio with others (Optional)",
+ placement: "top",
+ },
+ {
+ selector: ".btn-player",
+ title: "Guess-Phase",
+ content: "When someone shares their audio, you can click here to listen to their audio",
+ beforeStepChange: () => {
+ showToast("Congratulations! You have successfully completed the Rule Guide!\nEnjoy the game!", "success");
+ navigate("/lobby");
+ }
+ },
+ ]}
+ localKey="RuleGuide"
+ arrow={true}
+ visible={true}
+ lang="en"
+ mask={true}
+ step={0}
+ />
+
+ );
+}
+
+export default RuleGuide;
\ No newline at end of file
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
index 123b55a..d0c3ab0 100644
--- a/src/constants/constants.ts
+++ b/src/constants/constants.ts
@@ -16,3 +16,56 @@ export const HTTP_STATUS = {
INTERNAL_SERVER_ERROR: 500
};
+export const AVATAR_LIST : string[] = [
+ "angry-face",
+ "angry-face-with-horns",
+ "anguished-face",
+ "anxious-face-with-sweat",
+ "astonished-face",
+ "beaming-face-with-smiling-eyes",
+ "cat-face",
+ "clown-face",
+ "cold-face",
+ "confounded-face",
+ "confused-face",
+ "cow-face",
+ "cowboy-hat-face",
+ "crying-face",
+ "disappointed-face",
+ "disguised-face",
+ "dog-face",
+ "dotted-line-face",
+ "downcast-face-with-sweat",
+ "dragon-face",
+ "drooling-face",
+ "expressionless-face",
+ "face-blowing-a-kiss",
+ "face-exhaling",
+ "face-holding-back-tears",
+ "face-in-clouds",
+ "face-savoring-food",
+ "face-screaming-in-fear",
+ "face-vomiting",
+ "face-with-crossed-out-eyes",
+ "face-with-diagonal-mouth",
+ "face-with-hand-over-mouth",
+ "face-with-head-bandage",
+ "face-with-medical-mask",
+ "face-with-monocle",
+ "face-with-open-eyes-and-hand-over-mouth",
+ "face-with-open-mouth",
+ "face-with-peeking-eye",
+ "face-with-raised-eyebrow",
+ "face-with-rolling-eyes",
+ "face-with-spiral-eyes",
+ "face-with-steam-from-nose",
+ "face-with-symbols-on-mouth",
+ "face-with-tears-of-joy",
+ "face-with-thermometer",
+ "face-with-tongue",
+ "face-without-mouth",
+ "fearful-face",
+ "first-quarter-moon-face",
+ "flushed-face"
+]
+
diff --git a/src/styles/ui/Popup.scss b/src/styles/ui/Popup.scss
index 0732e27..de35d3d 100644
--- a/src/styles/ui/Popup.scss
+++ b/src/styles/ui/Popup.scss
@@ -6,9 +6,9 @@
border: none;
border-radius: 10px;
box-shadow: 0 0 0 10px $classicYellow;
- min-height: auto;
+ min-height: fit-content;
}
-.popup::-webkit-scrollbar {
+.popup-content::-webkit-scrollbar {
width: 10px;
height: 10px;
&-track {
@@ -23,10 +23,28 @@
}
}
.popup-content {
- height: 100%;
- padding: 20px;
+ max-height: 60vh;
+ max-width: 100vw;
+ padding-left: 20px;
+ padding-right: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
+ overflow: scroll;
+}
+.popup-button-container {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: flex-end;
+ Button {
+ height: auto;
+ font-size: 1em;
+ padding: 0.6em;
+ margin: 0 10px;
+ color: white;
+ background-color: $classicYellow;
+ text-transform: none;
+ }
}
diff --git a/src/styles/views/Lobby.scss b/src/styles/views/Lobby.scss
index c2dee16..70a4d5f 100644
--- a/src/styles/views/Lobby.scss
+++ b/src/styles/views/Lobby.scss
@@ -6,18 +6,8 @@
for more information visit https://sass-lang.com/guide
*/
-
-.lobby {
- &.container {
- background: rgba(255, 255, 255);
- padding: 1.5em;
- border-radius: $borderRadius;
- display: flex;
- flex-direction: column;
- align-items: center;
- box-shadow: $dropShadow;
- }
- &.room-list::-webkit-scrollbar {
+// scrollbar styling for the whole page
+::-webkit-scrollbar {
width: 10px;
height: 10px;
@@ -31,6 +21,20 @@
-webkit-border-radius: 10px;
border-radius: 10px;
}
+}
+Button {
+ font-family: sans-serif;
+}
+
+.lobby {
+ &.container {
+ background: rgba(255, 255, 255);
+ padding: 1.5em;
+ border-radius: $borderRadius;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ box-shadow: $dropShadow;
}
&.room-list-wrapper {
position: absolute; // Using absolute positioning
@@ -51,6 +55,14 @@
flex-direction: column;
flex-grow: 1;
overflow-y: auto;
+ h1 {
+ color: $whiteYellow;
+ text-shadow: none;
+ text-transform: none;
+ margin-inline: 5%;
+ font-weight: 800;
+ font-size: 2em;
+ }
&.btn-container {
all: initial; // avoid the inherited styles
position: relative; // absolute position relative to the parent
@@ -65,6 +77,7 @@
left: 0%;
margin-top: 30px;
flex-grow: 1;
+ font-family: sans-serif;
.create-room-btn {
bottom: 0%;
min-width: fit-content;
@@ -128,26 +141,26 @@
margin-inline: 5%;
justify-content: space-between;
flex-direction: row;
- text-align: center;
+ text-align: end;
}
.room {
background-color: #fff;
margin-bottom: 10px;
border-radius: 8px;
text-align: center;
+ cursor: pointer;
+ //text-align: center;
//overflow: hidden;
-
.room-header {
margin-left: 10px;
flex-shrink: 0; // Allow both children to grow and take up equal space
display: flex;
flex-direction: column; // Stack the children of these containers vertically
align-items: center; // Center the items horizontally
- justify-content: center; // Center the items vertically
+ justify-content: flex-end; // Center the items vertically
padding: 10px;
- text-align: center;
+ text-align: right;
}
-
.room-header {
flex-shrink: 0;
flex-grow: 0;
@@ -155,11 +168,10 @@
margin-left: 10px;
flex-direction: column; /* Stack children vertically */
align-items: center; /* Horizontally center */
- justify-content: center; /* Vertically center */
- text-align: center;
+ justify-content: flex-end; /* Vertically center */
+ text-align: right;
padding: 10px; // Align room details to the end of the flex container
}
-
.room-footer {
display: flex;
justify-content: space-between;
@@ -171,50 +183,68 @@
}
}
}
-.avatar-list {
- display: flex;
- flex-wrap: wrap; // Allow avatar list to wrap
- justify-content: flex-start; // Align avatars to the left
- margin: 0 -10px; // Offset for each avatar's margin, adjustable as needed
- .player {
- width: 20%; // Four avatars per row, each taking 25% of total width
- padding-left: 10%; // Padding around each avatar, adjustable as needed
- box-sizing: border-box; // Include padding in width calculation
+.avatar-popup{
+ max-width: 80vw;
+ justify-content: center;
+ .popup-content{
+ display: flex;
+ }
+ .avatar-list {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ padding: 0;
+ }
- i {
- display: block; // Ensure icons are block-level
- font-size: 3.8rem; // Icon size
- cursor: pointer; // Show pointer on hover
- margin: 10px 0; // Vertical spacing, adjustable as needed
- }
+ .avatar-container {
+ border-radius: 10%;
+ padding: 10px;
+ margin: 10px;
+ box-sizing: border-box;
+ background-color: #D9D9D9; /* Default background color */
+ transition: background-color 0.5s ease;
}
+
+ .avatar-container.selected {
+ background-color: $lightYellow; /* Background color for selected avatar */
+ }
+
+ .avatar-container:hover {
+ background-color: darken(#D9D9D9, 20%);
+ }
+ .avatar-container.selected:hover {
+ background-color: $lightYellow;
+ }
+
+ i {
+ display: block;
+ font-size: 3.8rem;
+ cursor: pointer;
+ }
+
}
.player {
+ height: 100%;
+ aspect-ratio: 1;
margin-right: 10px;
margin-left: 10px;
text-align: center;
-
.player-avatar {
- width: 40px;
- height: 40px;
+ width: 60.8px;
+ height: 60.8px;
border-radius: 50%;
background-color: #D9D9D9; // Default background color
}
-
.player-username {
font-size: 0.8em;
}
}
.room-players {
- //width: 70%;
-
align-items: flex-start; // Align the players to the start of the flex container
flex: 1 1 auto; // Allow both children to grow and take up equal space
display: flex;
flex-direction: row; // Stack children vertically
- //align-items: center; // Horizontally center items
- //justify-content: center; // Vertically center items
padding: 10px;
overflow-x: auto;
white-space: nowrap;
@@ -225,20 +255,26 @@
}
.room-status {
padding: 4px;
- width: 70px;
+ //width: 70px;
display: inline-block;
text-align: center;
+ border-radius: $borderRadius; // 确保你已定义了 $borderRadius 变量
+
&.in-game {
- border-radius: $borderRadius;
background-color: orange;
}
- &.free {
-
- border-radius: $borderRadius;
- background-color: lightgreen;
+ &.waiting {
+ background-color: lightgreen; // 等待状态的颜色
+ }
+ &.game-over {
+ background-color: lightcoral; // 游戏结束状态的颜色
}
}
.player {
+ background: rgba(217, 217, 217, 1);
+ border-radius: 20px;
+ width: 85px;
+ height: 85px;
&.container {
margin: 0.5em 0;
width: 20em;
@@ -246,7 +282,7 @@
border-radius: $borderRadius;
display: flex;
align-items: center;
- background: lighten($background, 5);
+ background: gray;
}
&.status {
font-weight: 600;
@@ -296,61 +332,62 @@
.information {
position: absolute;
+ display: flex;
top: 0;
- right: 0;
- width: 1.5rem;
- height: 2rem;
- font-size: 1.5rem;
+ right: -10%;
+ width: 10%;
+ aspect-ratio: 1;
+ font-size: 0.15em;
font-weight: bold;
- //display: flex;
text-align: center;
- //line-height: 2rem;
+ align-items: center;
+ justify-content: center;
color: white;
background: $classicYellow;
- border-radius: $borderRadius;
- //padding: 0.25rem;
+ border-radius: 50%;
cursor: pointer;
}
-.intro-popup {
- height:60%;
- //width: 500px;
- &.btn-container {
- width: 200px;
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: flex-end;
- //margin-top: 10%;
- Button {
- height: auto;
- font-size: 1em;
- padding: 0.6em;
- margin: 0 10px;
- color: white;
- background-color: $classicYellow;
- }
- }
-}
.intro-cnt {
width: 450px;
+ max-width: 40vw;
+ ul {
+ padding-left: 1rem;
+ }
}
.profile-popup {
- height:60%;
&.content {
display: flex;
flex-direction: column;
flex-grow: 1;
- font-size: 1.5em;
- .title {
- font-size: 1.5em;
- margin-bottom: 20px;
- display: inline;
- text-align: center;
+ justify-content: center;
+ // font-size: 1.5em;
+ .field{
+ display: flex;
+ flex-direction: row;
+ align-content: center;
+ .label {
+ display: flex;
+ align-items: center;
+ }
+ }
+ input {
+ width: 300px;
+ max-width: 60vw;
+ padding-left: 10px;
+ border: 1px solid black;
+ border-radius: 0.75em;
+ background: transparentize(white, 0.4);
+ color: $textColor;
}
.avatar-container {
display: flex;
justify-content: center; /* Horizontally center */
margin-bottom: 3rem;
+ i {
+ font-size: 10rem;
+ color: $classicYellow;
+ cursor: pointer;
+ }
}
}
@@ -381,34 +418,34 @@
background-color: $classicYellow;
}
}
- &.label {
- display: flex;
- font-size: 32px;
- }
- &.field {
- display: flex;
- flex-direction: row;
- justify-content: center;
- }
- &.input {
- height: 35px;
- padding-left: 15px;
- margin-left: 4px;
- border: none;
- border-radius: 0.75em;
- margin-top: 5px;
- background: #FFF3CF;
- color: $textColor;
- }
+ // &.label {
+ // display: flex;
+ // font-size: 32px;
+ // }
+ // &.field {
+ // display: flex;
+ // flex-direction: row;
+ // justify-content: center;
+ // }
+ // &.input {
+ // height: 35px;
+ // padding-left: 15px;
+ // margin-left: 4px;
+ // border: none;
+ // border-radius: 0.75em;
+ // margin-top: 5px;
+ // background: #FFF3CF;
+ // color: $textColor;
+ // }
}
.room-creation-popup {
- height: 60%;
+ //height: 60%;
&.content {
display: flex;
flex-direction: column;
flex-grow: 1;
- font-size: 2em;
+ font-size: 1.5em;
.title {
font-size: 1.5em;
margin-bottom: 20px;
@@ -416,8 +453,9 @@
text-align: center;
}
input {
- height: 100px;
+ height: 20%;
width: 600px;
+ max-width: 60vw;
padding-left: 1px;
margin-left: 4px;
border: 1px solid black;
@@ -433,9 +471,10 @@
align-items: center;
justify-items: center;
width: 600px;
- height: 100px;
- margin-top: 20px;
- margin-bottom: 40px;
+ max-width: 60vw;
+ height: 60px;
+ //margin-top: 20px;
+ // margin-bottom: 40px;
select {
appearance: none;
-webkit-appearance: none;
@@ -478,6 +517,7 @@
left: 0%;
margin-top: 10px;
flex-grow: 1;
+ font-family: sans-serif;
.logout-btn {
bottom: 1%;
min-width: fit-content;
@@ -493,6 +533,5 @@
color: white;
text-transform: none;
font-weight: bolder;
-
}
}
diff --git a/src/styles/views/Login.scss b/src/styles/views/Login.scss
index 4dca06f..286afe4 100644
--- a/src/styles/views/Login.scss
+++ b/src/styles/views/Login.scss
@@ -48,11 +48,13 @@
font-weight: 300;
}
&.button-container {
+ font-family: sans-serif;
display: flex;
justify-content: center;
margin-top: 2em;
}
&.button-container1 {
+ font-family: sans-serif;
display: flex;
justify-content: center;
margin-top: -1em;
diff --git a/src/styles/views/Register.scss b/src/styles/views/Register.scss
index e24ac68..3356612 100644
--- a/src/styles/views/Register.scss
+++ b/src/styles/views/Register.scss
@@ -48,11 +48,13 @@
font-weight: 300;
}
&.button-container {
+ font-family: sans-serif;
display: flex;
justify-content: center;
margin-top: 1em;
}
&.button-container1 {
+ font-family: sans-serif;
display: flex;
justify-content: center;
margin-top: 0em;
diff --git a/src/styles/views/RuleGuide.scss b/src/styles/views/RuleGuide.scss
new file mode 100644
index 0000000..fef0fc9
--- /dev/null
+++ b/src/styles/views/RuleGuide.scss
@@ -0,0 +1,22 @@
+@import "../theme";
+$modal-background: $lightYellow;
+
+.guide-modal {
+ background-color: $modal-background;
+ .guide-modal-arrow {
+ background-color: $modal-background;
+ }
+ button{
+ background-color: $darkBlue;
+ color: $whiteYellow;
+ border: 1px solid $darkBlue;
+ &:hover {
+ background-color: $middleBlue;
+ color: $whiteYellow;
+ border: 1px solid $middleBlue;
+ }
+ }
+ .guide-modal-close-icon {
+ display: none;
+ }
+}