!build.cmd

@@ -0,0 +1,3 @@
+@echo off
+call npm run dist:prod
+pause

.babelrc

@@ -0,0 +1,27 @@
+{
+  "presets": [
+    [
+      "@babel/env",
+      {
+        "targets": {
+          "esmodules": true
+        },
+        "modules": "umd"
+      }
+    ]
+  ],
+  "plugins": [
+    [
+      "@babel/plugin-proposal-class-properties",
+      {
+        "loose": true
+      }
+    ],
+    [
+      "@babel/plugin-proposal-private-methods",
+      {
+        "loose": true
+      }
+    ]
+  ]
+}

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+/.tmp
+/dist

README.md

@@ -1,2 +1,36 @@
-# EnhancedAniwatch
-Enhancment extension for https://aniwatch.me/
+# Aniwatch Plus
+*Aniwatch Plus* is an unofficial extension which provides several UI improvments for https://aniwatch.me. 
+
+## Features
+* adds quick search to website
+* cleaner style for lists
+* better presentation of anime requests
+
+## Browser Support
+We currently support the following browsers in current versions:
+* Google Chrome
+* Mozilla Firefox
+* Opera
+* Microsoft Edge
+
+### Installation
+This extension isn´t available in browser stores yet. Please download from [releases](https://github.com/Serraniel/AniwatchPlus/releases) for your browser and check how to manually install an extension into your browser. If you want to install the extension in Microsoft Edge, please use the Chrome release version.
+
+## Development
+### Tools
+This project requires you to install [NPM](https://nodejs.org/en/download/) and [gulp](https://www.npmjs.com/package/gulp).
+
+### Build
+```sh
+# mandatory
+npm install -d
+
+# build release version into './dist'
+npm run dist:prod
+
+# build dev version into './div' and start the watcher
+npm run watch
+
+# clean build and dist directories
+npm run clean
+```

gulpfile.js

@@ -0,0 +1,282 @@
+const gulp = require('gulp');
+const cssnano = require('cssnano')
+const gulpLoadPlugins = require('gulp-load-plugins')
+const uglify = require('gulp-uglify-es').default;
+const del = require('del');
+const browserify = require('browserify');
+const babelify = require('babelify');
+const source = require('vinyl-source-stream');
+const buffer = require('vinyl-buffer');
+const merge = require('merge-stream');
+const fs = require('fs');
+
+const $ = gulpLoadPlugins()
+
+$.sass.compiler = require('sass');
+
+/* ============================================================================
+Base consts
+============================================================================ */
+
+// Project sources
+const src = {
+    root: 'src',
+    manifests: 'src/manifests',
+    styles: 'src/stylesheets',
+    scripts: 'src/javascript',
+    images: 'src/images',
+}
+
+// Build path
+const tmp = {
+    root: '.tmp',
+    manifests: '.tmp/manifests',
+    styles: '.tmp/stylesheets',
+    scripts: '.tmp/javascript',
+    images: '.tmp/images',
+}
+
+// Dist path
+const dist = {
+    root: 'dist',
+    chrome: {
+        root: 'dist/chrome',
+        styles: 'dist/chrome/stylesheets',
+        scripts: 'dist/chrome/javascript',
+        images: 'dist/chrome/images',
+    },
+    firefox: {
+        root: 'dist/firefox',
+        styles: 'dist/firefox/stylesheets',
+        scripts: 'dist/firefox/javascript',
+        images: 'dist/firefox/images',
+    },
+    opera: {
+        root: 'dist/opera',
+        styles: 'dist/opera/stylesheets',
+        scripts: 'dist/opera/javascript',
+        images: 'dist/opera/images',
+    },
+    zip: 'dist/zips',
+}
+
+// Build mode
+const isProd = process.env.NODE_ENV === 'production';
+const isDev = !isProd;
+
+/* ============================================================================
+Build tasks
+============================================================================ */
+
+gulp.task('styles', () => {
+    return gulp.src(`${src.styles}/*.scss`)
+        .pipe($.plumber())
+        // sourcemap initialization
+        .pipe($.if(isDev, $.sourcemaps.init()))
+        // sass compilation
+        .pipe($.sass.sync({
+            outputStyle: 'expanded',
+            precision: 7,
+            includePaths: ['.'],
+        }).on('error', $.sass.logError))
+        // autoprefix
+        .pipe($.autoprefixer())
+        // out stream size
+        .pipe($.size({
+            showFiles: true
+        }))
+        .pipe(gulp.dest(tmp.styles))
+        .pipe($.rename({ suffix: '.min' }))
+        // minimize and optimize
+        .pipe($.if('*.css', $.postcss([
+            cssnano({
+                safe: true,
+                autoprefixer: false,
+                zindex: false,
+                reduceIdents: {
+                    keyframes: true,
+                },
+            })
+        ])))
+        // out stream size
+        .pipe($.size({
+            showFiles: true
+        }))
+        // write sourcemaps
+        .pipe($.if(isDev, $.sourcemaps.write()))
+        .pipe(gulp.dest(tmp.styles))
+})
+
+gulp.task('scripts', () => {
+    let b = browserify({
+        entries: `${src.scripts}/index.js`,
+        debug: isDev
+    });
+
+    return b.transform('babelify').bundle()
+        .pipe($.plumber())
+        .pipe(source('app.js'))
+        .pipe(buffer())
+        .pipe($.if(isDev, $.sourcemaps.init({ loadMaps: true })))
+        .pipe(uglify({ compress: { drop_console: isProd, drop_debugger: isProd } }))
+        .pipe($.rename({ suffix: '.min' }))
+        .pipe($.size({
+            showFiles: true,
+        }))
+        .pipe($.if(isDev, $.sourcemaps.write()))
+        .pipe(gulp.dest(`${tmp.scripts}`))
+})
+
+gulp.task('images', () => {
+    return gulp.src(`${src.images}/**/*`)
+        .pipe($.plumber())
+        .pipe($.imagemin([
+            $.imagemin.gifsicle({ interlaced: true }),
+            $.imagemin.mozjpeg({ progressive: true }),
+            $.imagemin.optipng(),
+            $.imagemin.svgo({ plugins: [{ cleanupIDs: false }] })
+        ]))
+        .pipe($.size({
+            showFiles: true,
+        }))
+        .pipe(gulp.dest(tmp.images))
+})
+
+gulp.task('manifests', () => {
+    const templateFile = `${src.manifests}/manifest.template.json`;
+
+    let template = JSON.parse(fs.readFileSync(templateFile))
+
+    return gulp.src(`${src.manifests}/**/!(*.template).json`)
+        .pipe($.plumber())
+        .pipe($.replace('$name', template.name))
+        .pipe($.replace('$shortName', template.short_name))
+        .pipe($.replace('$version', template.version))
+        .pipe($.replace('$semanticVersion', template.version_name))
+        .pipe($.replace('$description', template.description))
+        .pipe($.replace('$author', template.author))
+        .pipe($.replace('$developer', JSON.stringify(template.developer)))
+        .pipe($.replace('$homepageURL', template.homepage_url))
+        .pipe($.size({
+            showFiles: true,
+        }))
+        .pipe(gulp.dest(tmp.manifests))
+})
+
+/* ============================================================================
+Watchers
+============================================================================ */
+
+gulp.task('watch', (done) => {
+    gulp.watch(`${src.styles}/**/*.scss`, gulp.series('clean:build', 'styles', 'dist:copy', 'dist:zip'))
+
+    gulp.watch(`${src.scripts}/**/*.js`, gulp.series('clean:build', 'scripts', 'dist:copy', 'dist:zip'))
+
+    gulp.watch(`${src.images}/**/*`, gulp.series('clean:build', 'images', 'dist:copy', 'dist:zip'))
+
+    gulp.watch(`${src.manifests}/**/*.*`, gulp.series('clean:build', 'manifests', 'dist:copy', 'dist:zip'))
+
+    done();
+})
+
+/* ============================================================================
+Clean
+============================================================================ */
+
+gulp.task('clean:build', del.bind(null, [tmp.root]))
+
+gulp.task('clean:dist', del.bind(null, [dist.root], { force: true })) // Das Force brauchen wir, da das Assets Verzeichnis außerhalb des Working Directories ist.
+
+gulp.task('clean', gulp.series('clean:build', 'clean:dist'))
+
+/* ============================================================================
+BUILD CLEAN ALL
+============================================================================ */
+
+gulp.task('build', gulp.series('manifests', 'images', 'scripts', 'styles'));
+
+gulp.task('build:clean', gulp.series('clean:build', 'manifests', 'images', 'scripts', 'styles'));
+
+/* ============================================================================
+DIST CLEAN ALL
+============================================================================ */
+
+gulp.task('dist:chrome', (done) => {
+    return merge(
+        // copy images
+        gulp.src(`${tmp.images}/**/*`)
+        .pipe(gulp.dest(dist.chrome.images)),
+
+        // copy scripts
+        gulp.src(`${tmp.scripts}/**/*.{min.js,min.js.gz}`)
+        .pipe(gulp.dest(dist.chrome.scripts)),
+
+        // copy styles
+        gulp.src(`${tmp.styles}/*.{min.css,min.css.gz}`)
+        .pipe(gulp.dest(dist.chrome.styles)),
+
+        gulp.src(`${tmp.manifests}/chrome*`)
+        .pipe($.rename('manifest.json'))
+        .pipe(gulp.dest(dist.chrome.root))
+    );
+})
+
+gulp.task('dist:firefox', (done) => {
+    return merge(
+        // copy images
+        gulp.src(`${tmp.images}/**/*`)
+        .pipe(gulp.dest(dist.firefox.images)),
+
+        // copy scripts
+        gulp.src(`${tmp.scripts}/**/*.{min.js,min.js.gz}`)
+        .pipe(gulp.dest(dist.firefox.scripts)),
+
+        // copy styles
+        gulp.src(`${tmp.styles}/*.{min.css,min.css.gz}`)
+        .pipe(gulp.dest(dist.firefox.styles)),
+
+        gulp.src(`${tmp.manifests}/firefox*`)
+        .pipe($.rename('manifest.json'))
+        .pipe(gulp.dest(dist.firefox.root))
+    );
+})
+
+gulp.task('dist:opera', (done) => {
+    return merge(
+        // copy images
+        gulp.src(`${tmp.images}/**/*`)
+        .pipe(gulp.dest(dist.opera.images)),
+
+        // copy scripts
+        gulp.src(`${tmp.scripts}/**/*.{min.js,min.js.gz}`)
+        .pipe(gulp.dest(dist.opera.scripts)),
+
+        // copy styles
+        gulp.src(`${tmp.styles}/*.{min.css,min.css.gz}`)
+        .pipe(gulp.dest(dist.opera.styles)),
+
+        gulp.src(`${tmp.manifests}/opera*`)
+        .pipe($.rename('manifest.json'))
+        .pipe(gulp.dest(dist.opera.root))
+    );
+})
+
+gulp.task('dist:copy', gulp.series('dist:chrome', 'dist:firefox', 'dist:opera'));
+
+gulp.task('dist:zip', (done) => {
+    gulp.src(`${dist.chrome.root}/**/*`)
+        .pipe($.zip('chrome.zip'))
+        .pipe(gulp.dest(dist.root));
+
+    gulp.src(`${dist.firefox.root}/**/*`)
+        .pipe($.zip('firefox.zip'))
+        .pipe(gulp.dest(dist.root));
+
+    gulp.src(`${dist.opera.root}/**/*`)
+        .pipe($.zip('opera.zip'))
+        .pipe(gulp.dest(dist.root));
+
+    done();
+})
+
+gulp.task('dist', gulp.series('clean', 'build', 'dist:copy', 'dist:zip'));

manifest.json

@@ -1,32 +0,0 @@
-  {
-      "name": "Enhanced Aniwatch",
-      "short_name": "Enhanced Ani",
-      "version": "0.1.0.0",
-      "description": "Enhanced Aniwatch is a slim extension which provides several UI improvments for https://aniwatch.me.",
-      "manifest_version": 2,
-      "author": "Serraniel",
-      "homepage_url": "https://github.com/Serraniel/EnhancedAniwatch",
-      "content_scripts": [{
-              "matches": [
-                  "*://aniwatch.me/*"
-              ],
-              "js": [
-                  "utils/colors.js",
-                  "utils/helpers.js",
-                  "utils/aniwatchCore.js"
-              ],
-              "run_at": "document_start"
-          },
-          {
-              "matches": [
-                  "*://aniwatch.me/*"
-              ],
-              "js": [
-                  "enhancements/quickSearch.js",
-                  "enhancements/animeRequests.js",
-                  "enhancements/lists.js"
-              ],
-              "run_at": "document_end"
-          }
-      ]
-  }

package.json

@@ -0,0 +1,71 @@
+{
+    "name": "aniwatch-plus",
+    "version": "0.1.0-beta.0",
+    "description": "Aniwatch Plus is a browser extension for https://aniwatch.me/",
+    "main": "index.js",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "clean": "gulp clean",
+        "build": "gulp build",
+        "build:prod": "cross-env NODE_ENV=production gulp build",
+        "dist": "gulp dist",
+        "dist:prod": "cross-env NODE_ENV=production gulp dist",
+        "watch": "gulp dist && gulp watch"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/Serraniel/AniwatchPlus.git"
+    },
+    "author": {
+        "name": "Serraniel",
+        "email": "mail@serraniel.dev",
+        "url": "https://serraniel.dev"
+    },
+    "contributors": [
+        {
+            "name": "Kaffem"
+        }
+    ],
+    "license": "MPL-2.0",
+    "bugs": {
+        "url": "https://github.com/Serraniel/AniwatchPlus/issues",
+        "email": "mail@serraniel.dev"
+    },
+    "homepage": "https://github.com/Serraniel/AniwatchPlus#readme",
+    "dependencies": {
+        "regenerator-runtime": "^0.13.7"
+    },
+    "devDependencies": {
+        "@babel/compat-data": "^7.11.0",
+        "@babel/core": "^7.11.4",
+        "@babel/helper-module-imports": "^7.10.4",
+        "@babel/plugin-proposal-class-properties": "^7.10.4",
+        "@babel/plugin-proposal-private-methods": "^7.10.4",
+        "@babel/preset-env": "^7.11.0",
+        "@babel/register": "^7.10.5",
+        "babelify": "^10.0.0",
+        "browserify": "^16.5.2",
+        "cross-env": "^7.0.2",
+        "cssnano": "^4.1.10",
+        "del": "^5.1.0",
+        "gulp": "^4.0.2",
+        "gulp-autoprefixer": "^7.0.1",
+        "gulp-babel": "^8.0.0",
+        "gulp-if": "^3.0.0",
+        "gulp-imagemin": "^7.1.0",
+        "gulp-load-plugins": "^2.0.4",
+        "gulp-plumber": "^1.2.1",
+        "gulp-postcss": "^8.0.0",
+        "gulp-rename": "^2.0.0",
+        "gulp-replace": "^1.0.0",
+        "gulp-sass": "^4.1.0",
+        "gulp-size": "^3.0.0",
+        "gulp-sourcemaps": "^2.6.5",
+        "gulp-uglify-es": "^2.0.0",
+        "gulp-zip": "^5.0.2",
+        "merge-stream": "^2.0.0",
+        "sass": "^1.26.10",
+        "vinyl-buffer": "^1.0.1",
+        "vinyl-source-stream": "^2.0.0"
+    }
+}

src/javascript/enhancements/animeRequests.js

@@ -1,11 +1,17 @@
-registerScript(node => {
+import * as core from '../utils/aniwatchCore';
+import * as color from '../utils/colors';
+import * as helper from '../utils/helpers';
+
+export function init() {
+    core.registerScript(node => {
         // run the scripts
-    if (isHtmlElement(node)) {
+        if (helper.isHtmlElement(node)) {
             changeFollowedStarColor(node);
             changeBorderColorOwnRequests(node);
             removeUnknownUsers(node);
         }
     }, "/requests");
+}
 
 function changeFollowedStarColor(node) {
     const starIcon = 'star';
@@ -14,7 +20,7 @@ function changeFollowedStarColor(node) {
     let followedItems = Array.from(node.querySelectorAll('i')).filter(i => i.innerText.trim() === starIcon);
 
     // change color
-    followedItems.forEach(item => item.style.color = aniBlue);
+    followedItems.forEach(item => item.style.color = color.aniBlue);
 }
 
 function changeBorderColorOwnRequests(node) {
@@ -25,7 +31,7 @@ function changeBorderColorOwnRequests(node) {
 
         // highlight left border for own request
         if (profileLink.length > 0) {
-            item.style.borderColor = aniBlue
+            item.style.borderColor = color.aniBlue
         }
     }
 

src/javascript/enhancements/lists.js

@@ -1,9 +1,14 @@
-registerScript(node => {
+import * as core from '../utils/aniwatchCore';
+import * as helper from '../utils/helpers';
+
+export function init() {
+    core.registerScript(node => {
         // run the scripts
-    if (isHtmlElement(node)) {
+        if (helper.isHtmlElement(node)) {
             addListHorizontalSeparators(node)
         }
     }, ".*");
+}
 
 function addListHorizontalSeparators(node) {
     const targetTagName = 'MD-LIST-ITEM'; // tagName is upper case

src/javascript/enhancements/quickSearch.js

@@ -1,9 +1,14 @@
+import * as core from '../utils/aniwatchCore';
+import * as helper from '../utils/helpers';
+
 const quickSearchID = 'ea-quickSearch';
 const quickSearchLink = 'ea-quickSearchLink';
 
-runAfterLoad(() => {
+export function init() {
+    core.runAfterLoad(() => {
         initSearch();
     }, ".*");
+}
 
 function initSearch() {
     let entry = document.createElement('li');
@@ -58,7 +63,7 @@ function handleQuickSearch(event) {
 }
 
 function handleSearchForShiftF(event) {
-    if (isShiftPressed) {
+    if (helper.isShiftPressed) {
         if (event.key === 'F') {
             event.preventDefault();
             document.getElementById(quickSearchID).focus();

src/javascript/index.js

@@ -0,0 +1,21 @@
+import regeneratorRuntime from "regenerator-runtime";
+
+// core
+import { initCore } from './utils/aniwatchCore';
+// helper
+import { initHelpers } from './utils/helpers';
+// enhancements
+import { init as animeRequests } from './enhancements/animeRequests';
+import { init as lists } from './enhancements/lists';
+import { init as quickSearch } from './enhancements/quickSearch';
+
+// core
+initCore();
+
+//helper
+initHelpers();
+
+// enhancements
+animeRequests();
+lists();
+quickSearch();

src/javascript/utils/aniwatchCore.js

@@ -1,18 +1,9 @@
+import * as helper from './helpers';
+
 let __scripts = [];
 let __afterLoadScripts = [];
 
-function registerScript(func, pattern = '.*') {
-    __scripts.push({ "function": func, "pattern": pattern });
-}
-
-function runScripts(node) {
-    __scripts.forEach(script => {
-        if (window.location.pathname.match(script.pattern)) {
-            script.function(node);
-        }
-    });
-}
-
+export function initCore() {
     let observer = new MutationObserver(mutations => {
         mutations.forEach(mutation => {
             for (let i = 0; i < mutation.addedNodes.length; i++) {
@@ -27,11 +18,26 @@ observer.observe(document.documentElement || document.body, {
         attributes: true
     });
 
+    helper.onReady(() => awaitPageLoaded());
+}
+
+export function registerScript(func, pattern = '.*') {
+    __scripts.push({ "function": func, "pattern": pattern });
+}
+
+export function runScripts(node) {
+    __scripts.forEach(script => {
+        if (window.location.pathname.match(script.pattern)) {
+            script.function(node);
+        }
+    });
+}
+
 function findPreloader() {
     return document.getElementById('preloader');
 }
 
-function runAfterLoad(func, pattern = '.*') {
+export function runAfterLoad(func, pattern = '.*') {
     let preloader = findPreloader();
     if (typeof preloader !== undefined && preloader.style.display !== "none") {
         __afterLoadScripts.push({ "function": func, "pattern": pattern });
@@ -40,8 +46,6 @@ function runAfterLoad(func, pattern = '.*') {
     }
 }
 
-document.addEventListener("DOMContentLoaded", event => awaitPageLoaded(), false);
-
 function awaitPageLoaded() {
     let preLoader = findPreloader();
 

src/javascript/utils/colors.js

@@ -0,0 +1 @@
+export const aniBlue = '#348fff';

src/javascript/utils/helpers.js

@@ -0,0 +1,35 @@
+export var isShiftPressed = false;
+export var isCtrlPressed = false;
+
+export function isHtmlElement(object) {
+    return object instanceof HTMLElement;
+}
+
+export function initHelpers() {
+    document.addEventListener('keydown', event => handleKeyDown(event));
+    document.addEventListener('keyup', event => handleKeyUp(event));
+}
+
+export function onReady(fn) {
+    if (document.readyState != 'loading') {
+        fn();
+    } else {
+        document.addEventListener('DOMContentLoaded', fn);
+    }
+}
+
+function handleKeyDown(event) {
+    handleKeyToggle(event, true);
+}
+
+function handleKeyUp(event) {
+    handleKeyToggle(event, false);
+}
+
+function handleKeyToggle(event, isPressed) {
+    if (event.key === 'Shift') {
+        isShiftPressed = isPressed;
+    } else if (event.key === 'Control') {
+        isCtrlPressed = isPressed;
+    }
+}

src/manifests/chrome.manifest.json

@@ -0,0 +1,23 @@
+{
+    "name": "$name",
+    "short_name": "$shortName",
+    "version": "$version",
+    "version_name": "$semanticVersion",
+    "description": "$description",
+    "manifest_version": 2,
+    "author": "$author",
+    "homepage_url": "$homepageURL",
+    "icons": {
+        "48": "images/icon/icon_48.png",
+        "96": "images/icon/icon_96.png"
+    },
+    "content_scripts": [{
+        "matches": [
+            "*://aniwatch.me/*"
+        ],
+        "js": [
+            "javascript/app.min.js"
+        ],
+        "run_at": "document_end"
+    }]
+}

src/manifests/firefox.manifest.json

@@ -0,0 +1,23 @@
+{
+    "name": "$name",
+    "short_name": "$shortName",
+    "version": "$version",
+    "description": "$description",
+    "manifest_version": 2,
+    "author": "$author",
+    "developer": $developer,
+    "homepage_url": "$homepageURL",
+    "icons": {
+        "48": "images/icon/icon_48.png",
+        "96": "images/icon/icon_96.png"
+    },
+    "content_scripts": [{
+        "matches": [
+            "*://aniwatch.me/*"
+        ],
+        "js": [
+            "javascript/app.min.js"
+        ],
+        "run_at": "document_end"
+    }]
+}

src/manifests/manifest.template.json

@@ -0,0 +1,27 @@
+{
+    "name": "Aniwatch Plus",
+    "short_name": "AW+",
+    "version": "0.1.0.0",
+    "version_name": "0.1 Beta",
+    "description": "Aniwatch Plus is an unofficial extension which provides several UI improvments for https://aniwatch.me.",
+    "manifest_version": 2,
+    "author": "Serraniel",
+    "developer": {
+        "name": "Serraniel",
+        "url": "https://github.com/Serraniel"
+    },
+    "homepage_url": "https://github.com/Serraniel/AniwatchPlus",
+    "icons": {
+        "48": "images/icon/icon_48.png",
+        "96": "images/icon/icon_96.png"
+    },
+    "content_scripts": [{
+        "matches": [
+            "*://aniwatch.me/*"
+        ],
+        "js": [
+            "javascript/app.min.js"
+        ],
+        "run_at": "document_end"
+    }]
+}

src/manifests/opera.manifest.json

@@ -0,0 +1,24 @@
+{
+    "name": "$name",
+    "short_name": "$shortName",
+    "version": "$version",
+    "version_name": "$semanticVersion",
+    "description": "$description",
+    "manifest_version": 2,
+    "author": "$author",
+    "developer": $developer,
+    "homepage_url": "$homepageURL",
+    "icons": {
+        "48": "images/icon/icon_48.png",
+        "96": "images/icon/icon_96.png"
+    },
+    "content_scripts": [{
+        "matches": [
+            "*://aniwatch.me/*"
+        ],
+        "js": [
+            "javascript/app.min.js"
+        ],
+        "run_at": "document_end"
+    }]
+}

utils/colors.js

@@ -1 +0,0 @@
-const aniBlue = '#348fff';

utils/helpers.js

@@ -1,25 +0,0 @@
-var isShiftPressed = false;
-var isCtrlPressed = false;
-
-function isHtmlElement(object) {
-    return object instanceof HTMLElement;
-}
-
-document.addEventListener('keydown', event => handleKeyDown(event));
-document.addEventListener('keyup', event => handleKeyUp(event));
-
-function handleKeyDown(event) {
-    handleKeyToggle(event, true);
-}
-
-function handleKeyUp(event) {
-    handleKeyToggle(event, false);
-}
-
-function handleKeyToggle(event, isPressed) {
-    if (event.key === 'Shift') {
-        isShiftPressed = isPressed;
-    } else if (event.key === 'Control') {
-        isCtrlPressed = isPressed;
-    }
-}