From 2e8393470552de83689da562104aaa41cbb33e86 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A8=D1=82=D0=B5=D0=BD=D0=B3=D0=B0=D1=83=D1=8D=D1=80=20?= =?UTF-8?q?=D0=9D=D0=B8=D0=BA=D0=B8=D1=82=D0=B0=20=D0=94=D0=BC=D0=B8=D1=82?= =?UTF-8?q?=D1=80=D0=B8=D0=B5=D0=B2=D0=B8=D1=87?= Date: Sun, 29 Oct 2023 00:01:32 +0300 Subject: [PATCH] 123 --- MyOwnGame.Frontend/index.html | 2 +- .../public/pages/loading/loading.html | 53 +++ .../public/pages/loading/loading.scss | 5 + .../public/pages/lobby/lobby.html | 37 ++ .../public/pages/lobby/lobby.js | 208 +++++++++++ .../public/pages/lobby/lobby.scss | 334 ++++++++++++++++++ .../public/pages/login/login.html | 17 + .../public/pages/login/login.scss | 67 ++++ .../public/pages/main/main.html | 19 + MyOwnGame.Frontend/public/pages/main/main.js | 2 + .../public/pages/main/main.scss | 91 +++++ .../{ => public}/scripts/cookies.js | 0 .../{ => public}/scripts/page.js | 0 .../{ => public}/scripts/page_routing.js | 0 .../{ => public/scripts}/url_utils.js | 0 15 files changed, 834 insertions(+), 1 deletion(-) create mode 100644 MyOwnGame.Frontend/public/pages/loading/loading.html create mode 100644 MyOwnGame.Frontend/public/pages/loading/loading.scss create mode 100644 MyOwnGame.Frontend/public/pages/lobby/lobby.html create mode 100644 MyOwnGame.Frontend/public/pages/lobby/lobby.js create mode 100644 MyOwnGame.Frontend/public/pages/lobby/lobby.scss create mode 100644 MyOwnGame.Frontend/public/pages/login/login.html create mode 100644 MyOwnGame.Frontend/public/pages/login/login.scss create mode 100644 MyOwnGame.Frontend/public/pages/main/main.html create mode 100644 MyOwnGame.Frontend/public/pages/main/main.js create mode 100644 MyOwnGame.Frontend/public/pages/main/main.scss rename MyOwnGame.Frontend/{ => public}/scripts/cookies.js (100%) rename MyOwnGame.Frontend/{ => public}/scripts/page.js (100%) rename MyOwnGame.Frontend/{ => public}/scripts/page_routing.js (100%) rename MyOwnGame.Frontend/{ => public/scripts}/url_utils.js (100%) diff --git a/MyOwnGame.Frontend/index.html b/MyOwnGame.Frontend/index.html index fbed40f..e16e432 100644 --- a/MyOwnGame.Frontend/index.html +++ b/MyOwnGame.Frontend/index.html @@ -6,7 +6,7 @@ Vite App - + diff --git a/MyOwnGame.Frontend/public/pages/loading/loading.html b/MyOwnGame.Frontend/public/pages/loading/loading.html new file mode 100644 index 0000000..976530c --- /dev/null +++ b/MyOwnGame.Frontend/public/pages/loading/loading.html @@ -0,0 +1,53 @@ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
\ No newline at end of file diff --git a/MyOwnGame.Frontend/public/pages/loading/loading.scss b/MyOwnGame.Frontend/public/pages/loading/loading.scss new file mode 100644 index 0000000..c0698dd --- /dev/null +++ b/MyOwnGame.Frontend/public/pages/loading/loading.scss @@ -0,0 +1,5 @@ +.loading-container { + display: flex; + align-items: center; + justify-content: center; +} \ No newline at end of file diff --git a/MyOwnGame.Frontend/public/pages/lobby/lobby.html b/MyOwnGame.Frontend/public/pages/lobby/lobby.html new file mode 100644 index 0000000..494644e --- /dev/null +++ b/MyOwnGame.Frontend/public/pages/lobby/lobby.html @@ -0,0 +1,37 @@ +
+
+
+ +
+
+
Отключиться
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ Музыка + +
+
+
+
+ +
+
+
+ +
+
\ No newline at end of file diff --git a/MyOwnGame.Frontend/public/pages/lobby/lobby.js b/MyOwnGame.Frontend/public/pages/lobby/lobby.js new file mode 100644 index 0000000..02fff6a --- /dev/null +++ b/MyOwnGame.Frontend/public/pages/lobby/lobby.js @@ -0,0 +1,208 @@ +let audio; +let isAdmin; +let canChooseAnswer; + +/* +====================== + Initialization +====================== +*/ + +session.players.forEach(player => { + addPlayer(player); +}); +if(session.currentRound) + setRound(session.currentRound); +if(session.selectQuestionPlayer) + setPlayerSelecting(session.selectQuestionPlayer); + +// DEBUG +if(isAdmin){ + session.gameInfo.rounds.forEach((round, i) => { + document.querySelector("#tools").innerHTML += ` +
${round.name}
+ `; + }); +} + +document.querySelector("#invite-field").value = `${window.location.href}?invite=${session.id}`; + + +/* +====================== + From API +====================== +*/ + +function addPlayer(player){ + const imageUrl = `${address}/avatars/${player.avatarImage}`; + + if(player.isAdmin){ + isAdmin = player.id == userId; + const adminPanel = document.querySelector("#admin-panel"); + if(!adminPanel) { + adminPanel = document.createElement("div"); + adminPanel.classList = "admin-panel"; + document.querySelector("#left-panel").appendChild(adminPanel); + } + + adminPanel.innerHTML = ` +
Ведущий
+
+
${player.name}
+ `; + } else { + let profilePane = document.querySelector(`#player-${player.id}`); + if(!profilePane) { + profilePane = document.createElement("div"); + profilePane.classList = "player"; + profilePane.id = `player-${player.id}`; + document.querySelector("#players").appendChild(profilePane); + + profilePane.innerHTML = ` +
+
+
+
+
+
+ `; + } + profilePane.querySelector(".player-image").style.backgroundImage = `url('${imageUrl}')`; + profilePane.querySelector(".player-name").innerHTML = player.name; + profilePane.querySelector(".player-score").innerHTML = player.score; + + if(player.isDisconnected) + setPlayerOffline(player); + else if(session.selectQuestionPlayer && player.id == session.selectQuestionPlayer.id) + setPlayerSelecting(player); + else + setPlayerStatus(player.id, null); + } +} + +function removePlayer(player){ + if(player.isAdmin) + document.querySelector("#admin-panel")?.remove(); + else + document.querySelector(`#player-${player.id}`)?.remove(); +} + +function setRound(roundInfo){ + const questions = document.querySelector("#questions"); + questions.innerHTML = ""; + + roundInfo.themes.forEach((theme, i) => { + let themePanel = document.createElement("div"); + themePanel.classList = "theme-line"; + themePanel.id = `theme-${i}`; + questions.appendChild(themePanel); + + themePanel.innerHTML += ` +
${theme.name}
+ `; + + theme.prices.forEach((price, r) => { + themePanel.innerHTML += ` +
${roundInfo.isFinal ? "удалить" : price.price}
+ `; + }); + }); + + console.log(roundInfo); +} + +function setPlayerSelecting(player){ + setPlayerStatus(player.id, "выбирает", "rgba(100, 200, 100, 1)", "rgba(0, 90, 0, 1)"); + canChooseAnswer = player.id == userId; + document.body.classList.toggle("can-choose-price", canChooseAnswer); +} + +function setPlayerOffline(player){ + setPlayerStatus(player.id, "отключен", "rgba(100, 100, 100, 1)", "rgba(200, 200, 200, 1)"); +} + +function showQuestion(question, type, time, position){ + console.log("Showing question:"); + console.log(question); + console.log("With type:"); + console.log(type); + console.log("At position:"); + console.log(position); + + const priceElement = document.querySelector(`#theme-${position.themeNumber} #price-${position.questionNumber}`); + priceElement.classList.add("selected"); + + setTimeout(() => { + priceElement.classList.remove("selected"); + processQuestionPart(question, 0); + }, 1000); +} + +/* +====================== + Functions +====================== +*/ + +function getPlayerStatus(id){ + return document.querySelector(`#player-${id} .player-status`)?.innerHTML; +} + +function setPlayerStatus(id, status, bg, color){ + const profilePane = document.querySelector(`#player-${id}`); + if(profilePane){ + profilePane.classList.toggle("has-status", status != null); + + const statusPanel = profilePane.querySelector(".player-status"); + statusPanel.innerHTML = status; + statusPanel.style.backgroundColor = bg; + statusPanel.style.color = color; + } +} + +function requestRound(roundIndex){ + connection.invoke("ChangeRound", roundIndex); +} + +function requestPrice(theme, price){ + connection.invoke("SelectQuestion", theme, price); +} + +function setVolume(volume){ + audio.volume = volume / 100; +} + +function processQuestionPart(parts, i){ + if(i == parts.length){ + return; + } + const part = parts[i]; + + const questions = document.querySelector(`#questions`); + const imageQuestion = document.querySelector(`#image-question`); + const textQuestion = document.querySelector(`#text-question`); + const musicQuestion = document.querySelector(`#music-question`); + + questions.style.display = "none"; + textQuestion.style.display = part.type == 1 ? "flex" : "none"; + musicQuestion.style.display = part.type == 2 ? "flex" : "none"; + imageQuestion.style.display = part.type == 3 ? "flex" : "none"; + + if(part.type == 1){ + textQuestion.querySelector(`#text-content`).textContent = part.text; + setTimeout(() => processQuestionPart(parts, i+1), part.text.length * 200); + } + if(part.type == 2){ + audio = new Audio(`${address}/content/${session.id}/${part.url}`); + audio.addEventListener("loadedmetadata", () => { + setTimeout(() => processQuestionPart(parts, i+1), audio.duration * 1000); + }); + audio.play(); + } + if(part.type == 3){ + imageQuestion.querySelector(`#image-content`).style.backgroundImage + = `url("${address}/content/${session.id}/${part.url}")`; + setTimeout(() => processQuestionPart(parts, i+1), 3000); + } +} \ No newline at end of file diff --git a/MyOwnGame.Frontend/public/pages/lobby/lobby.scss b/MyOwnGame.Frontend/public/pages/lobby/lobby.scss new file mode 100644 index 0000000..60f7359 --- /dev/null +++ b/MyOwnGame.Frontend/public/pages/lobby/lobby.scss @@ -0,0 +1,334 @@ +#content { + display: flex; + --border: 1.5px solid lightgrey; +} + +.side-panel { + width: 250px; + border-right: var(--border); + border-left: var(--border); + background: var(--background); + + #admin-panel { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + + .admin-label { + width: 100%; + margin-bottom: 25px; + border-bottom: var(--border); + + font-size: 30px; + font-family: FtAnimaRegular; + line-height: 50px; + text-align: center; + } + + .admin-image { + background: url("http://fooxboy.ru:3000/avatars/78afb4bd-1ff8-4d81-8975-715cdc5884fe.png"); + background-size: cover; + border-radius: 999px; + + width: 180px; + aspect-ratio: 1/1; + } + + .admin-name { + text-align: center; + font-size: 17pt; + } + } + + #tools { + padding: 10px; + } +} + +#center-panel { + flex: 1; + display: flex; + flex-direction: column; + + border-bottom: var(--border); +} + +#field { + flex: 1; + margin: 30px; + height: 1px; +} + +#questions { + display: flex; + flex-direction: column; + align-items: flex-start; + + .theme-line { + display: flex; + justify-content: center; + height: 100px; + + overflow: hidden; + + color: white; + font-family: FtAnimaRegular; + font-size: 16pt; + font-weight: 600; + + user-select: none; /* Standard syntax */ + + .theme-name { + position: relative; + display: flex; + justify-content: center; + align-items: center; + + width: 300px; + background: #7979ff; + color: white; + + padding: 0 10px 0 10px; + text-wrap: balance; + text-align: center; + + z-index: 1; + + &:before { + content: ""; + position: absolute; + bottom: 0; + left: 5%; + width: 90%; + height: 2px; + background: rgba(0, 0, 0, 0.15); + } + } + + .price { + position: relative; + display: flex; + justify-content: center; + align-items: center; + + width: 120px; + margin: 3px 0; + + transition: background 0.2s ease; + + background: rgb(220, 220, 220); + color: rgba(50, 50, 50, 1.0); + + &:before { + content: ""; + position: absolute; + right: 0; + top: 25%; + width: 2px; + height: 50%; + background: rgba(0, 0, 0, 0.1); + } + + &:last-of-type { + border-radius: 0 20px 20px 0; + &:before { + content: none; + } + } + + &.answered { + background: rgb(180, 180, 180); + color: rgba(120, 120, 120, 1.0); + } + + .can-choose-price &:hover{ + background: rgba(240, 240, 240, 1); + cursor: pointer; + } + + &.selected { + animation: 0.5s infinite ease-in-out selectedAnimation; + + @keyframes selectedAnimation { + 50% { + background: rgb(100, 220, 100); + } + } + } + } + + &:first-child { + height: 100px; + .theme-name{ + border-radius: 20px 0 0 0; + } + .price { + margin-top: 0; + } + } + + &:last-child { + height: 100px; + .theme-name{ + border-radius: 0 0 0 20px; + &:before { + content: none; + } + } + .price { + margin-bottom: 0; + } + } + + div:nth-of-type(2) { + margin-left: -20px; + padding-left: 20px; + box-shadow: inset 24px 0px 4px -2px rgba(0, 0, 0, 0.3); + } + } +} + +#image-question { + width: 100%; + height: 100%; + display: none; + + #image-content { + width: 100%; + height: 100%; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + } +} + +#text-question { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + display: none; + + #text-content { + color: white; + font-size: 40pt; + font-weight: 600; + text-align: center; + + background: #5959cf; + padding: 40px; + border-radius: 10px; + } +} + +#music-question { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + display: none; + + #music-content { + display: flex; + gap: 40px; + flex-direction: column; + + color: white; + font-size: 40pt; + font-weight: 600; + text-align: center; + + background: #5959cf; + padding: 40px; + border-radius: 10px; + } +} + +#players { + display: flex; + justify-content: center; + gap: 60px; + + padding: 10px 0; +} + +.player { + width: 150px; + height: auto; + overflow: hidden; + + display: flex; + flex-direction: column; + + &.has-status { + .player-status { + translate: 0 0%; + } + } + + .player-status { + display: flex; + justify-content: center; + align-items: center; + box-sizing: border-box; + + font-family: FtAnimaRegular; + font-weight: 600; + + border-radius: 10px 10px 0 0; + margin-bottom: -10px; + padding-bottom: 10px; + z-index: -1; + + height: 45px; + + translate: 0 100%; + transition: translate 0.5s ease; + } + + .player-info { + background: rgba(240, 240, 240, 1); + border-radius: 10px; + box-shadow: 0 0 2px 3px rgba(0, 0, 0, 0.2); + + .player-image { + background: url("http://fooxboy.ru:3000/avatars/78afb4bd-1ff8-4d81-8975-715cdc5884fe.png"); + background-size: cover; + border-radius: 999px; + + margin: 15px; + box-sizing: border-box; + aspect-ratio: 1/1; + } + + .player-name { + text-align: center; + font-size: 14pt; + padding-bottom: 10px; + } + } + + .player-score { + display: flex; + justify-content: center; + align-items: center; + + border-radius: 0 0 10px 10px; + margin-top: -10px; + padding-top: 10px; + z-index: -1; + + height: 45px; + font-family: segments; + border-top: 1.5px solid rgba(0, 0, 0, 0.15); + + background: rgba(0, 60, 0, 1); + color: rgba(0, 240, 0, 1); + border: 2px solid rgba(0, 80, 0, 1); + + box-sizing: border-box; + } +} \ No newline at end of file diff --git a/MyOwnGame.Frontend/public/pages/login/login.html b/MyOwnGame.Frontend/public/pages/login/login.html new file mode 100644 index 0000000..858fd50 --- /dev/null +++ b/MyOwnGame.Frontend/public/pages/login/login.html @@ -0,0 +1,17 @@ +
+
+
Популярная телевизионная игра теперь в онлайне
+
Open-source проект, повторяющий популярное шоу на телевидении "Своя игра".
+
+ + GitHub +
+
+
+
+ +
🡢
+
+
\ No newline at end of file diff --git a/MyOwnGame.Frontend/public/pages/login/login.scss b/MyOwnGame.Frontend/public/pages/login/login.scss new file mode 100644 index 0000000..814e0ce --- /dev/null +++ b/MyOwnGame.Frontend/public/pages/login/login.scss @@ -0,0 +1,67 @@ +#login-pane { + display: flex; + justify-content: center; + align-items: center; + gap: 15px; + box-shadow: 0 0 20px 2px black; + + background: var(--background); + margin: 100px 0; + height: calc(100% - 200px); + box-sizing: border-box; + + #texts { + width: 600px;; + display: flex; + flex-direction: column; + align-items: flex-start; + + #title { + font-weight: 400; + font-size: 55pt; + margin-bottom: 20px; + letter-spacing: -2px; + } + #description { + font-size: 11pt; + margin-bottom: 35px; + } + } + + #image { + display: grid; + justify-items: center; + align-items: center; + gap: 20px; + + #user-icon { + grid-row: 1; + grid-column: 1; + + position: relative; + border-radius: 15px; + width: 230px; + aspect-ratio: 1/1; + border-radius: 999px; + background: var(--user-image); + background-size: cover; + cursor: pointer; + } + + #user-name-field { + grid-row: 2; + grid-column: 1; + width: 100%; + } + + #next-button { + grid-row: 2; + grid-column: 2; + + width: 35px; + height: 35px; + padding: 0; + line-height: 4px; + } + } +} \ No newline at end of file diff --git a/MyOwnGame.Frontend/public/pages/main/main.html b/MyOwnGame.Frontend/public/pages/main/main.html new file mode 100644 index 0000000..9e14ce9 --- /dev/null +++ b/MyOwnGame.Frontend/public/pages/main/main.html @@ -0,0 +1,19 @@ +
+
+
СВОЯ ИГРА
+
+
+
+
123123
+
+
+
+ +
🡢
+
+
или
+
Создать лобби
+
+ +
+
\ No newline at end of file diff --git a/MyOwnGame.Frontend/public/pages/main/main.js b/MyOwnGame.Frontend/public/pages/main/main.js new file mode 100644 index 0000000..8ede32d --- /dev/null +++ b/MyOwnGame.Frontend/public/pages/main/main.js @@ -0,0 +1,2 @@ +document.body.querySelector("#account-name").innerHTML = userName; +document.body.querySelector("#account-id").innerHTML = `#${userId}`; \ No newline at end of file diff --git a/MyOwnGame.Frontend/public/pages/main/main.scss b/MyOwnGame.Frontend/public/pages/main/main.scss new file mode 100644 index 0000000..94cc66e --- /dev/null +++ b/MyOwnGame.Frontend/public/pages/main/main.scss @@ -0,0 +1,91 @@ +#content { + display: flex; + align-items: center; + justify-content: center; + + #pane { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + height: 100%; + padding: 0 100px; + + /* + width: 100%; + padding: 100px 0; + */ + background: var(--background); + + + #title { + font-family: FtAnimaRegular; + font-size: 70pt; + line-height: 60pt; + } + + #account { + display: flex; + align-items: center; + gap: 10px; + width: 510px; + + font-size: 20px; + border-top: 1.5px solid rgba(0, 0, 0, 0.2); + //border-radius: 10px; + padding: 10px; + box-sizing: border-box; + + margin-bottom: 60px; + + #account-image { + width: 50px; + height: 50px; + border-radius: 99px; + background: var(--user-image); + background-size: contain; + } + #account-name { + flex: 1; + } + #account-id { + color: lightgrey; + } + } + + #buttons { + display: flex; + flex-direction: column; + gap: 13px; + width: 300px; + + & .button { + height: 30px; + border-radius: 7px; + } + + .connect-container{ + display: flex; + + input { + flex: 1; + border-radius: 7px 0 0 7px; + font-size: 12pt; + width: 1px; + } + .button { + border-radius: 0 7px 7px 0; + width: 20px; + } + } + + .or { + width: 100%; + display: flex; + justify-content: center; + color: gray; + } + } + } +} \ No newline at end of file diff --git a/MyOwnGame.Frontend/scripts/cookies.js b/MyOwnGame.Frontend/public/scripts/cookies.js similarity index 100% rename from MyOwnGame.Frontend/scripts/cookies.js rename to MyOwnGame.Frontend/public/scripts/cookies.js diff --git a/MyOwnGame.Frontend/scripts/page.js b/MyOwnGame.Frontend/public/scripts/page.js similarity index 100% rename from MyOwnGame.Frontend/scripts/page.js rename to MyOwnGame.Frontend/public/scripts/page.js diff --git a/MyOwnGame.Frontend/scripts/page_routing.js b/MyOwnGame.Frontend/public/scripts/page_routing.js similarity index 100% rename from MyOwnGame.Frontend/scripts/page_routing.js rename to MyOwnGame.Frontend/public/scripts/page_routing.js diff --git a/MyOwnGame.Frontend/url_utils.js b/MyOwnGame.Frontend/public/scripts/url_utils.js similarity index 100% rename from MyOwnGame.Frontend/url_utils.js rename to MyOwnGame.Frontend/public/scripts/url_utils.js