-
-
-
-
-
-
-
+
+
+
score: 0
+
lines: 0
+
level: 1
+
+
+
+
+
stored block
+
+
+
+
+
-
-
-
-
-
+
+
+
diff --git a/src/js/game.js b/src/js/game.js
index fbd6469..6b3a2a7 100644
--- a/src/js/game.js
+++ b/src/js/game.js
@@ -7,12 +7,14 @@ class Game {
ctx.lineWidth = 1;
this.score = 0;
+ this.lines = 0;
+ this.level = 1;
this.stop = this.pause = false;
board = this.redraw(true);
this.drawNextBlock();
local_scores();
- new_score(this.sore);
+ new_score(this.sore, this.level);
}
redraw(setup = false) {
@@ -57,10 +59,7 @@ class Game {
context.fillRect(row * block_size + 1, col * block_size + 1, block_size - 2, block_size - 2);
}
- drawNextBlock(shape, piece) {
- let ctx2 = nextBlockCtx;
- let canvas2 = nextBlockCanvas;
-
+ drawNextBlock(shape, piece, ctx2 = nextBlockCtx, canvas2 = nextBlockCanvas) {
canvas2.width = canvas2.height = block_size * 5;
ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
@@ -161,9 +160,8 @@ class Game {
board.map((row, i) => {
if (!row.includes(0) && !row.includes(1) && !row.includes(2)) {
- combo += redraw ? 1 : 0;
+ combo += 1;
redraw = true;
- this.score += 100;
// lower everything (remove row & put new row on top)
clearSound.currentTime = 0;
@@ -173,14 +171,45 @@ class Game {
}
});
- this.score += 200 * combo;
- new_score(this.score);
+ if (combo == 1) {
+ this.score += 40;
+ } else if (combo == 2) {
+ this.score += 100;
+ } else if (combo == 3) {
+ this.score += 300;
+ } else if (combo == 4) {
+ this.score += 1200;
+ }
+
+ this.lines += combo;
+ document.querySelector("#lines").innerHTML = this.lines;
+
+ if (this.lines >= this.level * 5) {
+ this.level += 1;
+ this.lines = 0;
+ document.querySelector("#level").innerHTML = this.level;
+ auto_speed -= this.level > 5 ? 50 : 100;
+ }
+ new_score(this.score, this.level);
if (redraw) this.redraw();
}
- togglePause() {
- this.pause = !this.pause;
+ togglePause(setPause = undefined) {
+ if (setPause != undefined) {
+ this.pause = setPause;
+ } else {
+ this.pause = !this.pause;
+ }
+
+ // pause screen & music
+ if (this.pause) {
+ document.querySelector(".center.column").classList.remove("game_started");
+ soundtrack.pause();
+ } else {
+ document.querySelector(".center.column").classList.add("game_started");
+ soundtrack.play();
+ }
}
shadow(redraw = true, block = piece) {
@@ -190,7 +219,7 @@ class Game {
const result = (() => {
let oldRow;
- for (let row = 0; row < rows; row++) {
+ for (let row = piece?.extraY ? piece.extraY : 0; row < rows; row++) {
// check if valid move
let clipping = (() => {
for (let i in shape) {
@@ -225,10 +254,37 @@ class Game {
}
}
+ swap_block() {
+ let old_stored_piece = this.stored_piece;
+ let old_shape = piece.shape;
+
+ // store current shape
+ this.stored_piece = piece.piece;
+
+ // check if valid move
+ if (this.isClipping(0, 0, shapes[shapeTypes[this.stored_piece]], 3)) return;
+ this.drawNextBlock(shapes[shapeTypes[this.stored_piece]], this.stored_piece, storedBlockCtx, storedBlockCanvas);
+
+ // remove current/old block = clear trail
+ piece.placeBlock(false, true, old_shape);
+
+ // draw new stored shape
+ if (old_stored_piece == undefined) {
+ piece.placeBlock();
+ return;
+ }
+
+ piece.piece = old_stored_piece;
+ piece.shape = shapes[shapeTypes[old_stored_piece]];
+ piece.width = 3;
+ this.redraw();
+ piece.placeBlock();
+ }
+
end() {
this.stop = true;
- new_score(this.score, true);
+ new_score(this.score, this.level, true);
document.querySelector("#game").classList.add("over");
console.log("game over");
@@ -238,10 +294,6 @@ class Game {
soundtrack.currentTime = 0;
endSound.play();
- // reset button
- startHTML.disabled = false;
- startHTML.style.opacity = "1";
-
// sent new highscore to server
upload_highscore(this.score);
}
diff --git a/src/js/piece.js b/src/js/piece.js
index bc29e61..d8b8672 100644
--- a/src/js/piece.js
+++ b/src/js/piece.js
@@ -56,18 +56,25 @@ class Piece {
if (newBlock) {
this.piece = nextPiece;
this.shape = shapes[shapeTypes[this.piece]];
+ shape = this.shape;
this.nextBlock();
+
+ this.color = colors[this.piece];
+
+ // change logo colors
+ document.documentElement.style.setProperty("--colorGradientStart", colors[this.piece]);
+ document.documentElement.style.setProperty("--colorGradientEnd", colors[this.piece]);
}
// color
- color = ctx.fillStyle = clearTrail ? "white" : colors[this.piece];
+ ctx.fillStyle = clearTrail ? "white" : colors[this.piece];
// fill blocks
- for (let i in this.shape) {
+ for (let i in shape) {
let col = (i % this.width) + Math.floor(cols / 2) - 2 + this.extraX;
let row = Math.floor(i / this.width) + this.extraY;
- if (this.shape[i] != 0) {
+ if (shape[i] != 0) {
// check if taken
if (newBlock && board[row][col] > 2) {
this.disable(true);
@@ -75,8 +82,8 @@ class Piece {
}
// change matrix & visual board
- board[row][col] = clearTrail ? 0 : this.shape[i];
- game.drawBlock(row, col, this.shape[i]);
+ board[row][col] = clearTrail ? 0 : shape[i];
+ game.drawBlock(row, col, shape[i]);
}
}
@@ -167,6 +174,7 @@ class Piece {
keyPress(e) {
let key = e.key;
key == "Escape" || key == "p" ? game.togglePause() : 0;
+ key == "s" || key == "Control" ? game.swap_block() : 0;
if (game.stop || game.pause) return;
key == "ArrowUp" ? piece.rotate() : 0;
diff --git a/src/js/setup.js b/src/js/setup.js
index 0ddff53..bc4a25f 100644
--- a/src/js/setup.js
+++ b/src/js/setup.js
@@ -1,19 +1,28 @@
/** @format */
// global variables
-const canvas = document.querySelector("#gameCanvas");
-const nextBlockCanvas = document.querySelector("#nextBlock");
+const canvas = document.querySelector("canvas#game");
+const nextBlockCanvas = document.querySelector("canvas#next_piece");
+const storedBlockCanvas = document.querySelector("canvas#stored_piece");
const ctx = canvas.getContext("2d");
const nextBlockCtx = nextBlockCanvas.getContext("2d");
+const storedBlockCtx = storedBlockCanvas.getContext("2d");
const cols = 10;
const rows = 16;
-const colors = ["LightSkyBlue", "DeepSkyBlue", "LightSalmon", "Gold", "DarkSeaGreen", "Plum", "Tomato"];
-const scoresHTML = document.querySelector("#personalScores");
-const usernameHTML = document.querySelector("#username");
-const startHTML = document.querySelector("#start");
+//nice neutral colors
+const colors = ["#84E3C8", "#A8E6CF", "#DCEDC1", "#FFD3B6", "#FFAAA5", "#FF8B94", "#FF7480"];
+// const colors = ["LightSkyBlue", "DeepSkyBlue", "LightSalmon", "Gold", "DarkSeaGreen", "Plum", "Tomato"];
+//nice one color:
+// const colors = ["#EDF2FB", "#E2EAFC", "#D7E3FC", "#CCDBFD", "#C1D3FE", "#B6CCFE", "#ABC4FF"];
+//high constrast
+// const colors = ["#00FFFF", "#FFFF00", "#800080", "#00FF00", "#FF0000", "#0000FF", "#FF7F00"];
+// const colors = ["PaleTurquoise", "LightCyan", "PaleGoldenrod", "LightCoral", "PaleVioletRed", "LightSkyBlue", "LightSalmon"];
+const scoresHTML = document.querySelector("#personal_scores");
const effectsIcon = document.querySelector("#effects");
const trackIcon = document.querySelector("#track");
const speedIcon = document.querySelector("#speedIcon");
+const usernameHTML = document.querySelector("#username");
+const throphy_logo = document.querySelector(".throphy");
const soundtrack = new Audio("./assets/music/Tetris Soundtrack.mp3");
const clearSound = new Audio("./assets/music/clear.mp3");
@@ -21,7 +30,6 @@ const endSound = new Audio("./assets/music/success.wav");
const rotateSound = new Audio("./assets/music/rotate.mp3");
const dropSound = new Audio("./assets/music/drop.mp3");
const soundOptions = [soundtrack, endSound, clearSound, rotateSound, dropSound];
-const totalVolume = () => document.querySelector("#volume").dataset.state * 0.5;
const speedIcons = [
"M20,4.052A12,12,0,0,0,3.612,21.572,4.993,4.993,0,0,0,7.12,23h9.767a4.84,4.84,0,0,0,3.354-1.288A12.053,12.053,0,0,0,20,4.052ZM18.868,20.259A2.862,2.862,0,0,1,16.887,21H7.12a3,3,0,0,1-2.11-.858,10,10,0,1,1,13.858.117ZM20,13a7.932,7.932,0,0,1-2.408,5.715,1,1,0,0,1-1.4-1.43c4.141-3.956.6-11.095-5.05-10.223a1,1,0,0,1-.286-1.981A8.026,8.026,0,0,1,20,13ZM7.806,17.284a1,1,0,0,1-1.4,1.432,7.973,7.973,0,0,1-2.327-6.859,1,1,0,0,1,1.981.286A5.966,5.966,0,0,0,7.806,17.284ZM14,13a2,2,0,1,1-3.932-.518L6.293,8.707A1,1,0,0,1,7.707,7.293l3.775,3.775A2.008,2.008,0,0,1,14,13Z",
@@ -30,15 +38,21 @@ const speedIcons = [
"M23.9,11.437A12,12,0,0,0,4,4.052a12.055,12.055,0,0,0-.246,17.66A4.847,4.847,0,0,0,7.114,23H16.88a4.988,4.988,0,0,0,3.508-1.429A11.942,11.942,0,0,0,23.9,11.437ZM18.99,20.142A3.005,3.005,0,0,1,16.88,21H7.114a2.863,2.863,0,0,1-1.982-.741A10.045,10.045,0,0,1,5.337,5.543a10,10,0,0,1,13.653,14.6ZM20,13a7.927,7.927,0,0,1-2.409,5.715,1,1,0,1,1-1.4-1.43C20.039,13.684,17.268,6.9,12,7a6.024,6.024,0,0,0-5.939,5.142,1,1,0,0,1-1.98-.284C5.766,2.13,19.73,3.113,20,13Zm-6,0a2.013,2.013,0,0,1-3.184,1.612L5.949,16.748a1,1,0,1,1-.8-1.832l4.867-2.136A2,2,0,0,1,14,13Z",
];
-let board, game, piece, color, block_size, autoInterval, dropInterval;
-let speed = speedIcon.dataset.state * 10;
+let board, game, piece, block_size, autoInterval, dropInterval;
+let speed = 40 - Number(speedIcon.dataset.state) * 10;
+let auto_speed = 750;
let username = window.localStorage.getItem("username");
let startScreen = false;
// event listeners
+throphy_logo.onload = () => {
+ let block = Math.floor(Math.random() * (throphy_logo.children.length - 2)) + 1;
+ throphy_logo.querySelector(`#block${block}`).style.visibility = "visible";
+};
+
window.onload = () => {
soundtrack.loop = true;
- soundtrack.volume = totalVolume() * 0.5;
+ soundtrack.volume = 0.5 * trackIcon.dataset.state;
change_dimensions();
usernameHTML.value = username ? username : "";
@@ -53,27 +67,13 @@ window.onload = () => {
if (!game) return;
if (document.hidden) {
- game.pause = true;
+ game.togglePause(true);
} else {
- game.pause = false;
+ game.togglePause(false);
}
});
- startHTML.addEventListener("click", () => {
- game = new Game();
-
- startHTML.style.opacity = "0";
- startHTML.disabled = true;
- piece = new Piece();
-
- soundtrack.currentTime = 0;
- soundtrack.play();
-
- gtag("event", "new_game", {
- category: "game_event",
- discription: "New game started!",
- });
- });
+ document.addEventListener("keydown", start_game);
usernameHTML.addEventListener("input", () => {
username = usernameHTML.value;
@@ -85,24 +85,41 @@ window.onload = () => {
});
document.querySelector("#optionsToggle").addEventListener("click", (e) => {
- let currentOpacity = document.querySelector(".options").style.opacity;
- document.querySelector(".options").style.opacity = currentOpacity == 0 ? 1 : 0;
- });
-
- document.querySelector(".options").addEventListener("click", (e) => {
- if (e.target.classList.contains("options") || e.target.id == "speedIcon" || !e.target) return;
- toggleMusicIcon(e);
+ let currentOpacity = document.documentElement.style.getPropertyValue("--settingsOpacity");
+ document.documentElement.style.setProperty("--settingsOpacity", currentOpacity == 0 ? 1 : 0);
});
- speedIcon.addEventListener("click", () => {
- let state = Number(speedIcon.dataset.state);
- speedIcon.dataset.state = state >= 4 ? 1 : state + 1;
- speedIcon.children[0].setAttribute("d", speedIcons[state - 1]);
- speed = state * 10;
- });
+ for (let element of document.querySelectorAll(".settingIcon2")) {
+ element.addEventListener("click", (e) => {
+ if (element.id == "speedIcon") {
+ toggleMusicIcon(e, false);
+ let state = Number(speedIcon.dataset.state);
+ speed = 40 - state * 10;
+ return;
+ }
+ toggleMusicIcon(e);
+ });
+ }
};
// functions
+// start game
+function start_game() {
+ if (document.activeElement.id == "username") return;
+ document.removeEventListener("keydown", start_game);
+ game = new Game();
+
+ document.querySelector(".center.column").classList.add("game_started");
+ piece = new Piece();
+
+ soundtrack.currentTime = 0;
+ soundtrack.play();
+
+ gtag("event", "new_game", {
+ category: "game_event",
+ discription: "New game started!",
+ });
+}
// canvas
function change_dimensions(redraw = false) {
canvas.height = (document.querySelector("#game").clientHeight - 4) * 0.95;
@@ -113,21 +130,13 @@ function change_dimensions(redraw = false) {
}
// icons
-function toggleMusicIcon(click) {
+function toggleMusicIcon(click, changeVolume = true) {
let icon = click.target;
let old_state = Number(icon.dataset.state);
- icon.dataset.state = old_state == icon.dataset.max ? 0 : old_state + 1;
+ icon.dataset.state = old_state == icon.dataset.max ? (changeVolume ? 0 : 1) : old_state + 1;
icon.src = icon.src.replace(`${old_state}.svg`, `${icon.dataset.state}.svg`);
- iconChangeVolume(icon.id != "volume" ? icon : 0);
-
- if (totalVolume() == 0) {
- effectsIcon.src = "./assets/icons/effects-0.svg";
- trackIcon.src = "./assets/icons/music-0.svg";
- } else {
- effectsIcon.src = `icons/effects-${effectsIcon.dataset.state}.svg`;
- trackIcon.src = `icons/music-${trackIcon.dataset.state}.svg`;
- }
+ changeVolume ? iconChangeVolume(icon) : 0;
}
function iconChangeVolume(icon) {
@@ -140,7 +149,7 @@ function iconChangeVolume(icon) {
for (let change of changes) {
let newVolume = soundOptions.indexOf(change) > 1 ? effectsLevel : trackLevel * 0.5;
- change.volume = newVolume * totalVolume();
+ change.volume = newVolume;
}
}
@@ -148,7 +157,8 @@ function iconChangeVolume(icon) {
const local_scores = (clear = false) => {
if (clear) {
scoresHTML.innerHTML = "
It seems like you haven't played yet!";
- window.localStorage.clear();
+ window.localStorage.removeItem("scores");
+ window.localStorage.removeItem("levels");
return;
}
@@ -167,24 +177,37 @@ const local_scores = (clear = false) => {
window.localStorage.setItem("scores", sortedScores);
scoresHTML.innerHTML = "";
+ let levels = {};
+ if (window.localStorage.getItem("levels")) {
+ levels = JSON.parse(window.localStorage.getItem("levels"));
+ }
for (let score of sortedScores) {
- scoresHTML.innerHTML += `
${score}`;
+ scoresHTML.innerHTML += `
level ${levels[score]}: ${score}`;
}
return sortedScores;
};
-function new_score(newScore, final = false) {
+function new_score(newScore, level, final = false) {
document.querySelector("#score").innerHTML = newScore;
if (!final) return;
- document.querySelector("#finalScore").innerHTML = newScore;
+ // document.querySelector("#finalScore").innerHTML = newScore;
- if (!newScore) return;
+ if (!newScore || !level) return;
let scores = local_scores();
scores.push(newScore);
+
+ let levels = {};
+ if (window.localStorage.getItem("levels")) {
+ levels = JSON.parse(window.localStorage.getItem("levels"));
+ }
+
+ levels[newScore] = level;
+
window.localStorage.setItem("scores", scores);
+ window.localStorage.setItem("levels", JSON.stringify(levels));
local_scores();
gtag("event", "game_end", {
@@ -247,5 +270,5 @@ function lowerAutomaticaly() {
}
piece.move("y;1");
- }, 750);
+ }, auto_speed);
}
diff --git a/src/style.css b/src/style.css
index f8b3dde..a9f1f22 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,163 +1,372 @@
-@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Comfortaa&family=DM+Mono&family=Press+Start+2P&display=swap');
+
+/* SETUP */
+:root {
+ --colorGradientStart: rgb(93.725% 22.353% 13.725%);
+ --colorGradientEnd: rgb(64.052% 0% 0%);
+ --stroke: rgb(155, 30, 15);
+ --settingsOpacity: 0;
+
+ --lightBackground: #FAFAFA;
+ --darkBackground: #212121;
+
+ --error: #FFAAA5;
+}
html,
-body,
-#game {
+body {
height: 100%;
- margin-top: 0;
+ width: 100%;
+ margin: 0;
}
body {
- display: flex;
- justify-content: space-evenly;
- align-items: center;
overflow: hidden;
+}
- /* background: radial-gradient(circle at 48.7% 44.3%, rgb(30, 144, 231) 0%, rgb(56, 113, 209) 22.9%, rgb(38, 76, 140) 76.7%, rgb(31, 63, 116) 100.2%); */
+/* SKELETON */
+.main_layout {
+ height: 100%;
+ width: 100%;
+ background-color: #FAFAFA;
+ display: grid;
+ grid-template-columns: 1fr auto 1fr;
+ column-gap: 17px;
+ justify-items: stretch;
}
-#game {
- position: relative;
+.main_layout>.column {
+ max-height: 100vh;
+}
+
+.column>div {
+ overflow: hidden;
+}
+
+.left.column {
+ display: grid;
+ grid-template-rows: 15% 50% 35%;
+ justify-items: end;
+}
+
+.center.column {
display: flex;
- justify-content: center;
align-items: center;
+ height: 100%;
}
-canvas {
- background-color: white;
- border: 2px solid lightgrey;
- opacity: 100%;
- border-radius: 7px;
+.right.column {
+ display: grid;
+ grid-template-rows: 0.5fr 1fr 1fr;
+ justify-items: start;
+ align-items: stretch;
}
-.TRscore {
- color: grey;
- font-size: 0.7rem;
- font-family: "Press Start 2P";
- position: absolute;
- top: 2.5%;
- right: 0;
- margin: 12px;
+/* CONTENT */
+.left>div,
+.right>div {
+ /* background-color: #D9D9D9; */
+ margin: 17px;
+ width: calc(100% - 2 * 17px);
+ max-width: 200px;
+ border: 1px solid lightgrey;
+ border-radius: 10px;
}
-.start-end {
- position: absolute;
- z-index: 1;
+canvas#game {
height: 100%;
+ width: 100%;
+}
+
+.game_info {
display: flex;
+ flex-direction: column;
justify-content: center;
- align-items: center;
}
-#start {
- z-index: 2;
- position: absolute;
- opacity: 1;
+.next_piece,
+.stored_piece {
+ height: auto;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
}
-#game-over {
- opacity: 0%;
+
+.canvas_wrapper {
+ height: calc(100% - 2.5rem - 2px);
+ width: 100%;
display: flex;
- flex-direction: column;
justify-content: center;
align-items: center;
- font-family: "Press Start 2P";
+ align-content: center;
}
-#game-over>h2 {
- color: black;
- font-size: 24px;
+.canvas_wrapper>canvas {
+ margin: 10px;
+ height: calc(100% - 20px);
+ max-height: 150px;
+ aspect-ratio: 1/1;
+ width: auto;
+ border: 1px solid rgb(211 211 211 / 24%);
+ border-radius: 10px;
+ box-shadow: rgba(100, 100, 111, 0.05) 0px 7px 8px 0px;
}
-#game-over>p {
- color: #000000b3;
- font-size: 15px;
+.next_piece h2,
+.stored_piece h2 {
+ margin-bottom: 0;
}
-.over #game-over {
- transition: opacity 3s;
+.game {
+ border-radius: 10px;
+ border: 1px solid lightgrey;
+ height: 95%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ /* width: 330px; */
+ aspect-ratio: 1/1.65;
+ width: auto;
+}
+
+h2 {
opacity: 100%;
+ font-size: 1rem;
+ font-family: "DM Mono";
+ /* font-family: "Comfortaa"; */
+ text-align: center;
+ margin: 1rem;
}
-.over #canvas {
- transition: opacity 3s;
- opacity: 50%;
+p {
+ font-family: "DM Mono";
+ font-size: 0.9rem;
+ margin: 0;
+ margin-left: 1rem;
}
-.options {
- display: inline-block;
- vertical-align: top;
+.icons,
+.startScreen {
+ position: absolute;
+ height: 95%;
+ width: 100%;
+ aspect-ratio: 1/1.65;
+ width: auto;
+}
+
+.startScreen {
+ backdrop-filter: blur(3px);
display: flex;
+ align-items: center;
+ justify-content: center;
flex-direction: column;
- opacity: 0;
transition: opacity 1s;
- align-items: center;
}
-img {
- padding: 5px;
- user-select: none;
+.startText {
+ font-family: "Press Start 2P";
+ font-size: 0.75rem;
+ animation: toggleOpacity 1s steps(1, start) infinite;
+ color: grey;
}
-.left,
-.right {
- flex: 1;
- position: relative;
- height: 95%;
- display: inline-flex;
+.throphy {
+ width: 50%;
+ height: 50%;
+ fill: grey;
+}
+
+.game_started .startText {
+ animation: none;
+}
+
+.game_started .startScreen,
+.game_started .icons {
+ opacity: 0;
+ backdrop-filter: none;
+}
+
+@keyframes toggleOpacity {
+
+ 0%,
+ 100% {
+ opacity: 0.1;
+ }
+
+ 50% {
+ opacity: 1;
+ }
+}
+
+.right.column>div {
+ border-right: none;
+ border-bottom-right-radius: 0px;
+ border-top-right-radius: 0px;
+}
+
+.left.column>div {
+ border-left: none;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+}
+
+.left.column> :first-child,
+.right.column> :first-child {
+ border-top: none;
+ border-top-right-radius: 0px;
+ border-top-left-radius: 0px;
+}
+
+.left.column> :last-child,
+.right.column> :last-child {
+ border-bottom: none;
+ border-bottom-right-radius: 0px;
+ border-bottom-left-radius: 0px;
+}
+
+.public_scores,
+.personal_scores {
+ display: flex;
flex-direction: column;
align-items: center;
}
-.personal {
- display: inline-flex;
- flex-direction: column;
+.h2_wrapper {
+ backdrop-filter: blur(1px);
+ width: 100%;
+ height: fit-content;
+ position: sticky;
+ top: 0;
+ padding-top: 0.5rem;
+}
+
+.h2_wrapper:has(svg) {
+ display: flex;
align-items: center;
+ justify-content: center;
+}
+
+.h2_wrapper:has(svg)>h2 {
+ margin-right: 0.2rem;
+}
+
+
+.scores {
+ min-width: 70%;
+ overflow-y: scroll;
+}
+
+div.rang {
+ min-width: 70%;
}
-input {
+input.rang {
background-color: white;
border: 1px solid lightgrey;
border-radius: 5px;
+ width: 90%;
+ margin: 5px;
+ padding: 5px;
}
-input:invalid {
- border-color: red;
- background-color: rgb(255, 99, 71, 0.5);
+input.rang:invalid {
+ border-color: #FF8B94;
+ background-color: #FFAAA5;
}
-#nextBlock {
- position: absolute;
- top: calc(2.5% - 2px);
- left: 100%;
+.scores>ol,
+.rang {
+ list-style-position: inside;
+ padding-left: 0;
+ margin-top: 0;
}
-.icons {
- position: fixed;
+
+.scores ol li,
+.rang li {
+ opacity: 100%;
+ font-size: 0.85rem;
+ font-family: "DM Mono";
+}
+
+.scores ol li::marker,
+.rang li::marker {
+ font-family: Arial, Helvetica, sans-serif;
+}
+
+.scores::-webkit-scrollbar {
+ width: 7px;
+ margin-bottom: 15px;
+}
+
+.scores::-webkit-scrollbar-track {
+ margin-bottom: 16px;
+}
+
+.scores::-webkit-scrollbar-thumb {
+ background: #888;
+ border-radius: 10px;
+ opacity: 0;
+}
+
+.settingsIcon_wrapper {
+ position: absolute;
height: 100%;
- top: 0;
- right: 0;
+ width: fit-content;
display: flex;
+ right: 0;
flex-direction: column;
}
-.icons svg {
- width: 25px;
- height: 25px;
- margin: 15px;
- fill: #6b6b6b;
+.settingsIcon_wrapper>svg,
+.settingsIcon_wrapper>img {
+ position: relative;
+}
+
+.settingIcon,
+.settingIcon2 {
+ width: 30px;
+ height: 30px;
+ fill: grey;
+ right: 0;
+ position: absolute;
+ margin: 10px;
transition: fill 1s;
+ user-select: none;
+}
+
+.settingIcon2 {
+ margin-top: 5px;
+ margin-bottom: 5px;
+ opacity: var(--settingsOpacity);
+ transition: opacity 1s, filter 1s;
+}
+
+img.settingIcon2:hover {
+ filter: brightness(0%);
}
-svg>path {
- pointer-events: none;
+.dropIcon,
+.resetIcon {
+ fill: grey;
+ transition: fill 1s;
}
-.icons svg:hover {
+.settingIcon:hover,
+.dropIcon:hover,
+.resetIcon:hover {
fill: black;
}
-.icons>.bottom {
- bottom: 0;
- position: absolute;
+.logo {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.logo>svg {
+ width: 80%;
+ filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2));
}
\ No newline at end of file
+