From 037f929a8c87cdde278652790cd7d1fac1ec56e4 Mon Sep 17 00:00:00 2001 From: GayLord Date: Wed, 23 Oct 2024 16:27:37 +0200 Subject: [PATCH] Fix bugs and add final colors --- public/assets/css/theme-haxxor.css | 85 +++++++++++++++--------------- public/assets/scripts/haxxor.js | 14 ++++- 2 files changed, 54 insertions(+), 45 deletions(-) diff --git a/public/assets/css/theme-haxxor.css b/public/assets/css/theme-haxxor.css index 2c7f9d7..c932608 100644 --- a/public/assets/css/theme-haxxor.css +++ b/public/assets/css/theme-haxxor.css @@ -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) } diff --git a/public/assets/scripts/haxxor.js b/public/assets/scripts/haxxor.js index ba9fd53..edb8b62 100644 --- a/public/assets/scripts/haxxor.js +++ b/public/assets/scripts/haxxor.js @@ -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) ); } }