Fix bugs and add final colors

This commit is contained in:
GayLord 2024-10-23 16:27:37 +02:00
parent 6d9e0b3ef4
commit 037f929a8c
2 changed files with 54 additions and 45 deletions

View File

@ -3,29 +3,29 @@
--is-dark-theme: true; --is-dark-theme: true;
--color-primary: #54a13c; --color-primary: #54a13c;
--color-primary-contrast: rgb(115, 222, 82); --color-primary-contrast: rgb(115, 222, 82);
--color-primary-dark-1: #82ad74; --color-primary-dark-1: #6bb953;
--color-primary-dark-2: #679cd0; --color-primary-dark-2: #88d172;
--color-primary-dark-3: #7aa8d6; --color-primary-dark-3: #a3d194;
--color-primary-dark-4: #8db5dc; --color-primary-dark-4: #cceac3;
--color-primary-dark-5: #b3cde7; --color-primary-dark-5: #e5f4e0;
--color-primary-dark-6: #d9e6f3; --color-primary-dark-6: #f0f8ee;
--color-primary-dark-7: #f4f8fb; --color-primary-dark-7: #ffffff;
--color-primary-light-1: #3876b3; --color-primary-light-1: #63bc49;
--color-primary-light-2: #31699f; --color-primary-light-2: #5fb645;
--color-primary-light-3: #2b5c8b; --color-primary-light-3: #458531;
--color-primary-light-4: #254f77; --color-primary-light-4: #305d22;
--color-primary-light-5: #193450; --color-primary-light-5: #1e3a15;
--color-primary-light-6: #0c1a28; --color-primary-light-6: #182e12;
--color-primary-light-7: #04080c; --color-primary-light-7: #081006;
--color-primary-alpha-10: #4183c419; --color-primary-alpha-10: #54a13c19;
--color-primary-alpha-20: #4183c433; --color-primary-alpha-20: #54a13c33;
--color-primary-alpha-30: #4183c44b; --color-primary-alpha-30: #54a13c4b;
--color-primary-alpha-40: #4183c466; --color-primary-alpha-40: #54a13c66;
--color-primary-alpha-50: #4183c480; --color-primary-alpha-50: #54a13c80;
--color-primary-alpha-60: #4183c499; --color-primary-alpha-60: #54a13c99;
--color-primary-alpha-70: #4183c4b3; --color-primary-alpha-70: #54a13cb3;
--color-primary-alpha-80: #4183c4cc; --color-primary-alpha-80: #54a13ccc;
--color-primary-alpha-90: #4183c4e1; --color-primary-alpha-90: #54a13ce1;
--color-primary-hover: #172d11; --color-primary-hover: #172d11;
--color-primary-active: #172d11; --color-primary-active: #172d11;
--color-secondary: #224019; --color-secondary: #224019;
@ -42,19 +42,19 @@
--color-secondary-dark-11: #c5cbd2; --color-secondary-dark-11: #c5cbd2;
--color-secondary-dark-12: #cfd4da; --color-secondary-dark-12: #cfd4da;
--color-secondary-dark-13: #d2d7dc; --color-secondary-dark-13: #d2d7dc;
--color-secondary-light-1: #313940; --color-secondary-light-1: #66c848;
--color-secondary-light-2: #292f35; --color-secondary-light-2: #4a9333;
--color-secondary-light-3: #1d2226; --color-secondary-light-3: #315f23;
--color-secondary-light-4: #171b1e; --color-secondary-light-4: #13260e;
--color-secondary-alpha-10: #3b444c19; --color-secondary-alpha-10: #22401919;
--color-secondary-alpha-20: #3b444c33; --color-secondary-alpha-20: #22401933;
--color-secondary-alpha-30: #3b444c4b; --color-secondary-alpha-30: #2240194b;
--color-secondary-alpha-40: #3b444c66; --color-secondary-alpha-40: #22401966;
--color-secondary-alpha-50: #3b444c80; --color-secondary-alpha-50: #66716380;
--color-secondary-alpha-60: #3b444c99; --color-secondary-alpha-60: #22401999;
--color-secondary-alpha-70: #3b444cb3; --color-secondary-alpha-70: #224019b3;
--color-secondary-alpha-80: #3b444ccc; --color-secondary-alpha-80: #224019cc;
--color-secondary-alpha-90: #3b444ce1; --color-secondary-alpha-90: #224019e1;
--color-secondary-button: var(--color-secondary-dark-4); --color-secondary-button: var(--color-secondary-dark-4);
--color-secondary-hover: var(--color-secondary-dark-3); --color-secondary-hover: var(--color-secondary-dark-3);
--color-secondary-active: var(--color-secondary-dark-2); --color-secondary-active: var(--color-secondary-dark-2);
@ -199,7 +199,7 @@
--color-input-border-hover: var(--color-secondary-dark-1); --color-input-border-hover: var(--color-secondary-dark-1);
--color-light: #00001728; --color-light: #00001728;
--color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
--color-light-border: #e8f3ff28; --color-light-border: #3ca81eb6;
--color-hover: #13240e; --color-hover: #13240e;
--color-active: #101f0c; --color-active: #101f0c;
--color-menu: #000000; --color-menu: #000000;
@ -207,9 +207,9 @@
--color-markup-table-row: #e8f3ff0f; --color-markup-table-row: #e8f3ff0f;
--color-markup-code-block: #e8f3ff12; --color-markup-code-block: #e8f3ff12;
--color-markup-code-inline: #e8f3ff28; --color-markup-code-inline: #e8f3ff28;
--color-button: #171a1e; --color-button: #000000;
--color-code-bg: #14171a; --color-code-bg: #14171a;
--color-shadow: #00001758; --color-shadow: #04040558;
--color-secondary-bg: #000; --color-secondary-bg: #000;
--color-expand-button: #2f363d; --color-expand-button: #2f363d;
--color-placeholder-text: var(--color-text-light-3); --color-placeholder-text: var(--color-text-light-3);
@ -238,6 +238,9 @@
color-scheme: dark; color-scheme: dark;
} }
.full {
position: relative
}
.ui.input { .ui.input {
animation: glow 800ms ease-out infinite alternate; animation: glow 800ms ease-out infinite alternate;
@ -259,10 +262,6 @@
background: #000000 background: #000000
} }
.ui.ui.ui.ui.small.button {
background: #000000
}
@keyframes bg-animation { @keyframes bg-animation {
0% { transform: translate(0,0) } 0% { transform: translate(0,0) }

View File

@ -89,6 +89,7 @@ function createTetris() {
this.bgCanvas.width = this.fgCanvas.width = this.width; this.bgCanvas.width = this.fgCanvas.width = this.width;
this.bgCanvas.height = this.fgCanvas.height = this.height; this.bgCanvas.height = this.fgCanvas.height = this.height;
this.bgCtx = this.bgCanvas.getContext("2d"); this.bgCtx = this.bgCanvas.getContext("2d");
this.fgCtx = this.fgCanvas.getContext("2d"); this.fgCtx = this.fgCanvas.getContext("2d");
@ -122,6 +123,8 @@ function createTetris() {
this.level = 0; this.level = 0;
this.loseBlock = 0; this.loseBlock = 0;
// init the board // init the board
this.board = []; this.board = [];
this.boardWidth = Math.floor(this.width / this.unitSize); this.boardWidth = Math.floor(this.width / this.unitSize);
@ -478,13 +481,20 @@ function createTetris() {
var width = window.innerWidth, var width = window.innerWidth,
boardDiv = 20 * Math.round(window.innerWidth / 20), boardDiv = 20 * Math.round(window.innerWidth / 20),
boards = 8, boards = 1,
bWidth = boardDiv / boards, bWidth = boardDiv / boards,
tetrisInstances = []; tetrisInstances = [];
let barsHeight = document.getElementsByClassName("secondary-nav")[0].clientHeight + document.getElementById("navbar").clientHeight;
let footer_size = document.getElementsByClassName("page-footer")[0].clientHeight;
let bheight = window.innerHeight - barsHeight - footer_size;
console.log(window.innerHeight, document.getElementsByClassName("secondary-nav")[0].clientHeight, document.getElementById("navbar").clientHeight);
for (var w = 0; w < boards; w++) { for (var w = 0; w < boards; w++) {
tetrisInstances.push( tetrisInstances.push(
new Tetris(20 * Math.round((w * bWidth) / 20), 0, bWidth) new Tetris(20 * Math.round((w * bWidth) / 20), barsHeight, bWidth, bheight)
); );
} }
} }