Fix bugs and add final colors
This commit is contained in:
GayLord
parent
6d9e0b3ef4
commit
037f929a8c
@ -3,29 +3,29 @@
|
||||
--is-dark-theme: true;
|
||||
--color-primary: #54a13c;
|
||||
--color-primary-contrast: rgb(115, 222, 82);
|
||||
--color-primary-dark-1: #82ad74;
|
||||
--color-primary-dark-2: #679cd0;
|
||||
--color-primary-dark-3: #7aa8d6;
|
||||
--color-primary-dark-4: #8db5dc;
|
||||
--color-primary-dark-5: #b3cde7;
|
||||
--color-primary-dark-6: #d9e6f3;
|
||||
--color-primary-dark-7: #f4f8fb;
|
||||
--color-primary-light-1: #3876b3;
|
||||
--color-primary-light-2: #31699f;
|
||||
--color-primary-light-3: #2b5c8b;
|
||||
--color-primary-light-4: #254f77;
|
||||
--color-primary-light-5: #193450;
|
||||
--color-primary-light-6: #0c1a28;
|
||||
--color-primary-light-7: #04080c;
|
||||
--color-primary-alpha-10: #4183c419;
|
||||
--color-primary-alpha-20: #4183c433;
|
||||
--color-primary-alpha-30: #4183c44b;
|
||||
--color-primary-alpha-40: #4183c466;
|
||||
--color-primary-alpha-50: #4183c480;
|
||||
--color-primary-alpha-60: #4183c499;
|
||||
--color-primary-alpha-70: #4183c4b3;
|
||||
--color-primary-alpha-80: #4183c4cc;
|
||||
--color-primary-alpha-90: #4183c4e1;
|
||||
--color-primary-dark-1: #6bb953;
|
||||
--color-primary-dark-2: #88d172;
|
||||
--color-primary-dark-3: #a3d194;
|
||||
--color-primary-dark-4: #cceac3;
|
||||
--color-primary-dark-5: #e5f4e0;
|
||||
--color-primary-dark-6: #f0f8ee;
|
||||
--color-primary-dark-7: #ffffff;
|
||||
--color-primary-light-1: #63bc49;
|
||||
--color-primary-light-2: #5fb645;
|
||||
--color-primary-light-3: #458531;
|
||||
--color-primary-light-4: #305d22;
|
||||
--color-primary-light-5: #1e3a15;
|
||||
--color-primary-light-6: #182e12;
|
||||
--color-primary-light-7: #081006;
|
||||
--color-primary-alpha-10: #54a13c19;
|
||||
--color-primary-alpha-20: #54a13c33;
|
||||
--color-primary-alpha-30: #54a13c4b;
|
||||
--color-primary-alpha-40: #54a13c66;
|
||||
--color-primary-alpha-50: #54a13c80;
|
||||
--color-primary-alpha-60: #54a13c99;
|
||||
--color-primary-alpha-70: #54a13cb3;
|
||||
--color-primary-alpha-80: #54a13ccc;
|
||||
--color-primary-alpha-90: #54a13ce1;
|
||||
--color-primary-hover: #172d11;
|
||||
--color-primary-active: #172d11;
|
||||
--color-secondary: #224019;
|
||||
@ -42,19 +42,19 @@
|
||||
--color-secondary-dark-11: #c5cbd2;
|
||||
--color-secondary-dark-12: #cfd4da;
|
||||
--color-secondary-dark-13: #d2d7dc;
|
||||
--color-secondary-light-1: #313940;
|
||||
--color-secondary-light-2: #292f35;
|
||||
--color-secondary-light-3: #1d2226;
|
||||
--color-secondary-light-4: #171b1e;
|
||||
--color-secondary-alpha-10: #3b444c19;
|
||||
--color-secondary-alpha-20: #3b444c33;
|
||||
--color-secondary-alpha-30: #3b444c4b;
|
||||
--color-secondary-alpha-40: #3b444c66;
|
||||
--color-secondary-alpha-50: #3b444c80;
|
||||
--color-secondary-alpha-60: #3b444c99;
|
||||
--color-secondary-alpha-70: #3b444cb3;
|
||||
--color-secondary-alpha-80: #3b444ccc;
|
||||
--color-secondary-alpha-90: #3b444ce1;
|
||||
--color-secondary-light-1: #66c848;
|
||||
--color-secondary-light-2: #4a9333;
|
||||
--color-secondary-light-3: #315f23;
|
||||
--color-secondary-light-4: #13260e;
|
||||
--color-secondary-alpha-10: #22401919;
|
||||
--color-secondary-alpha-20: #22401933;
|
||||
--color-secondary-alpha-30: #2240194b;
|
||||
--color-secondary-alpha-40: #22401966;
|
||||
--color-secondary-alpha-50: #66716380;
|
||||
--color-secondary-alpha-60: #22401999;
|
||||
--color-secondary-alpha-70: #224019b3;
|
||||
--color-secondary-alpha-80: #224019cc;
|
||||
--color-secondary-alpha-90: #224019e1;
|
||||
--color-secondary-button: var(--color-secondary-dark-4);
|
||||
--color-secondary-hover: var(--color-secondary-dark-3);
|
||||
--color-secondary-active: var(--color-secondary-dark-2);
|
||||
@ -199,7 +199,7 @@
|
||||
--color-input-border-hover: var(--color-secondary-dark-1);
|
||||
--color-light: #00001728;
|
||||
--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-active: #101f0c;
|
||||
--color-menu: #000000;
|
||||
@ -207,9 +207,9 @@
|
||||
--color-markup-table-row: #e8f3ff0f;
|
||||
--color-markup-code-block: #e8f3ff12;
|
||||
--color-markup-code-inline: #e8f3ff28;
|
||||
--color-button: #171a1e;
|
||||
--color-button: #000000;
|
||||
--color-code-bg: #14171a;
|
||||
--color-shadow: #00001758;
|
||||
--color-shadow: #04040558;
|
||||
--color-secondary-bg: #000;
|
||||
--color-expand-button: #2f363d;
|
||||
--color-placeholder-text: var(--color-text-light-3);
|
||||
@ -238,6 +238,9 @@
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
.full {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.ui.input {
|
||||
animation: glow 800ms ease-out infinite alternate;
|
||||
@ -259,10 +262,6 @@
|
||||
background: #000000
|
||||
}
|
||||
|
||||
.ui.ui.ui.ui.small.button {
|
||||
background: #000000
|
||||
}
|
||||
|
||||
|
||||
@keyframes bg-animation {
|
||||
0% { transform: translate(0,0) }
|
||||
|
||||
@ -89,6 +89,7 @@ function createTetris() {
|
||||
this.bgCanvas.width = this.fgCanvas.width = this.width;
|
||||
this.bgCanvas.height = this.fgCanvas.height = this.height;
|
||||
|
||||
|
||||
this.bgCtx = this.bgCanvas.getContext("2d");
|
||||
this.fgCtx = this.fgCanvas.getContext("2d");
|
||||
|
||||
@ -122,6 +123,8 @@ function createTetris() {
|
||||
this.level = 0;
|
||||
this.loseBlock = 0;
|
||||
|
||||
|
||||
|
||||
// init the board
|
||||
this.board = [];
|
||||
this.boardWidth = Math.floor(this.width / this.unitSize);
|
||||
@ -478,13 +481,20 @@ function createTetris() {
|
||||
|
||||
var width = window.innerWidth,
|
||||
boardDiv = 20 * Math.round(window.innerWidth / 20),
|
||||
boards = 8,
|
||||
boards = 1,
|
||||
bWidth = boardDiv / boards,
|
||||
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++) {
|
||||
tetrisInstances.push(
|
||||
new Tetris(20 * Math.round((w * bWidth) / 20), 0, bWidth)
|
||||
new Tetris(20 * Math.round((w * bWidth) / 20), barsHeight, bWidth, bheight)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user