From 0318ffbd7a2795d45c874ec341307a017f1834ae Mon Sep 17 00:00:00 2001 From: Kraken Date: Thu, 8 Apr 2021 15:21:49 +0200 Subject: [PATCH 1/3] Edited Scrollbar (WIP) The Scrollbar anti lag initiative --- Frontend/Index.html | 7 ++++++- Frontend/Javascript/OverlayScrollbar.js | 10 ++++++++++ Frontend/Javascript/ScrollController.js | 21 +++++++++++++++++++++ 3 files changed, 37 insertions(+), 1 deletion(-) create mode 100644 Frontend/Javascript/OverlayScrollbar.js create mode 100644 Frontend/Javascript/ScrollController.js diff --git a/Frontend/Index.html b/Frontend/Index.html index ba86c38..3bddecb 100755 --- a/Frontend/Index.html +++ b/Frontend/Index.html @@ -14,6 +14,7 @@ + @@ -22,6 +23,7 @@ + @@ -697,12 +699,15 @@ + + + - + diff --git a/Frontend/Javascript/OverlayScrollbar.js b/Frontend/Javascript/OverlayScrollbar.js new file mode 100644 index 0000000..edfa535 --- /dev/null +++ b/Frontend/Javascript/OverlayScrollbar.js @@ -0,0 +1,10 @@ +document.addEventListener("DOMContentLoaded", function() { + //The first argument are the elements to which the plugin shall be initialized + //The second argument has to be at least a empty object or a object with your desired options + OverlayScrollbars(document.querySelectorAll('body'), { }); +}); + +$(function() { + //The passed argument has to be at least a empty object or a object with your desired options + $('body').overlayScrollbars({ }); +}); \ No newline at end of file diff --git a/Frontend/Javascript/ScrollController.js b/Frontend/Javascript/ScrollController.js new file mode 100644 index 0000000..1f89603 --- /dev/null +++ b/Frontend/Javascript/ScrollController.js @@ -0,0 +1,21 @@ +/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */ +$(document).ready(function() { + var instance = $('body').overlayScrollbars(); + var prevScrollpos = instance.scroll().position.y; + + console.log(prevScrollpos); + + window.onscroll = function() { + + var currentScrollPos = instance.scroll().position.y; + console.log(currentScrollPos); + if (prevScrollpos > currentScrollPos) { + $("#header").css({"top" : "0"}); + } else { + $("#header").css({"top" : "-50px"}); + } + + prevScrollpos = currentScrollPos; + } + +}); \ No newline at end of file From d55a4e8f53e9dac4769d62ed51cc0eeb93a4aab5 Mon Sep 17 00:00:00 2001 From: Ida Tiegel Date: Wed, 7 Apr 2021 15:25:23 +0200 Subject: [PATCH 2/3] update --- Frontend/Index.html | 109 ++++++++++++++++++++------------------ Frontend/Styles/Index.css | 10 ++++ 2 files changed, 66 insertions(+), 53 deletions(-) diff --git a/Frontend/Index.html b/Frontend/Index.html index f4bc4fa..363b91d 100755 --- a/Frontend/Index.html +++ b/Frontend/Index.html @@ -303,62 +303,68 @@ Denne hjemmeside er lavet til alle som elsker at udvikle spil og konkurerre.

- Game jam handler om at udvikle et spil i grupper på begrænset tid. Denne tidsbegrænsning er beregnet til at simulere presset fra en deadline og til at fremme kreativitet blandt ideer produceret af Game Jam teams. Selve Game Jammet handler om at udfodre sig selv og andre. Det giver god øvelse i forhold til sine egne evner indenfor programmering og design. Det viser selvfølelig også hvor godt man arbejder i grupper og hvor meget man kan nå på den tid man har fået til at lave sit spil i. Vi elsker at se hvordan de forskellige udviklere vælger sin fremgangs måde, og hvad som er vigtigst for de forskellige grupper at få med. Dette giver både nye ideer til alle samt en anden måde at tænke på. Vi ved jo alle sammen godt, at ingen tænker på den samme måde, og det er også det som er spændene. Man ved aldrig hvad temaet er inden man går i gang. Man kan have en ide om hvad for et spil man vil lave, men når man får temaet afvide, kan det være at man får en ny synsvinkel på hvordan man vil løse opgaven. læs mere under Regler. + Game jam handler om at udvikle et spil i grupper på begrænset tid. Denne tidsbegrænsning er beregnet til at simulere presset fra en deadline og til at fremme kreativitet blandt ideer produceret af Game Jam teams. Selve Game Jammet handler om at udfodre sig selv og andre. Det giver god øvelse i forhold til sine egne evner indenfor programmering og design. Det viser selvfølelig også hvor godt man arbejder i grupper og hvor meget man kan nå på den tid man har fået til at lave sit spil i. Vi elsker at se hvordan de forskellige udviklere vælger sin fremgangs måde, og hvad som er vigtigst for de forskellige grupper at få med. Dette giver både nye ideer til alle samt en anden måde at tænke på. Vi ved jo alle sammen godt, at ingen tænker på den samme måde, og det er også det som er spændene. Man ved aldrig hvad temaet er inden man går i gang. Man kan have en ide om hvad for et spil man vil lave, men når man får temaet afvide, kan det være at man får en ny synsvinkel på hvordan man vil løse opgaven. læs mere under Regler.

Hvad er Game jam?

- Game Jam er et sted hvor du og dine venner kan samles og konkurrer om at lave det bedste spil på begrænset tid. Her har i chancen for at gøre hvad i er bedst til, nemlig at udvikle jeres eget spil.Det er spændende, hyggeligt og selvfølelig rigtigt sjovt. Under Lodtrækning bliver der trækket lod om et tema spillet skal handle om. + Game Jam er et sted hvor du og dine venner kan samles og konkurrer om at lave det bedste spil på begrænset tid. Her har i chancen for at gøre hvad i er bedst til, nemlig at udvikle jeres eget spil.Det er spændende, hyggeligt og selvfølelig rigtigt sjovt. Under Lodtrækning bliver der trækket lod om et tema spillet skal handle om.

+
Hvorfor skal du deltage?
-

- Her er 7 gode grunde til hvorfor lige præcis du burde deltage -

+ +
+ +
-

- 1. Tids planlægning -

-

- Når du deltager i flere af Game Jams forbedrer du din evne til tidsplanlægning. Du begynder bedre at estimere den tid, det vil tage for en bestemt opgave. Denne færdighed er også meget vigtigt at forstå, om visse funktioner er det værd, og hvis du endda skal implementere dem eller ej. -

-

- 2. Hastighed -

-

- Deltagelse i Game Jammet vil forbedre din hastighed. For eksempel, som programmør, vil du se nogle genvej til at gøre det mindre smukt i koden, men funktionelt det samme, som er vigtigt for et Game jam. Som et hold vil du lære at beslutte, hvilken mulighed du skal vælge, hvilket spil du skal gøre meget hurtigere. Når du laver prototyper, vil du også støde på en masse værktøjer og tricks, som du kan bruge på senere prototyper eller spil, fordi du allerede prøvet dem og nu ved, hvad de er bedst egnet til. -

-

- 3. Forbedre prototypeevner -

-

- Game Jams omfavner virkelig tanken om, at du skal gøre spillet spilbart først. Uden kunst, lyde osv. I mange tilfælde efter dette får du ideen, hvis mekanikerne giver mening, eller hvis det har potentiale. Du vil bemærke nogle ting, som du ikke tænkte så meget på, men som er meget vigtige for at få spillet spilbart, som du vil blive nødt til at løse som det næste. Når spillet er spilbart, vil du fortsætte med at arbejde med ting, som du ikke ville udgive dit spil uden. -

-

- 4. Eksperimenter som du lyster -

-

- Du kommer automatisk til at være mere villig til at prøve tingene ud og se, om de vil fungere eller ej. Men det afhænger naturligvis af, hvor lang tid det kommer til at tage at implementere visse funktioner og prøve dem af. Så en god tidsplans vil helt sikkert hjælpe. Du ved aldrig om en af de funktioner vil redde projektet og sikre dig førstepladsen. +

+ 1. Tids planlægning +

+

+ Når du deltager i flere af Game Jams forbedrer du din evne til tidsplanlægning. Du begynder bedre at estimere den tid, det vil tage for en bestemt opgave. Denne færdighed er også meget vigtigt at forstå, om visse funktioner er det værd, og hvis du endda skal implementere dem eller ej. +

+

+ 2. Hastighed +

+

+ Deltagelse i Game Jammet vil forbedre din hastighed. For eksempel, som programmør, vil du se nogle genvej til at gøre det mindre smukt i koden, men funktionelt det samme, som er vigtigt for et Game jam. Som et hold vil du lære at beslutte, hvilken mulighed du skal vælge, hvilket spil du skal gøre meget hurtigere. Når du laver prototyper, vil du også støde på en masse værktøjer og tricks, som du kan bruge på senere prototyper eller spil, fordi du allerede prøvet dem og nu ved, hvad de er bedst egnet til. +

+ +

+ 3. Forbedre prototypeevner +

+

+ Game Jams omfavner virkelig tanken om, at du skal gøre spillet spilbart først. Uden kunst, lyde osv. I mange tilfælde efter dette får du ideen, hvis mekanikerne giver mening, eller hvis det har potentiale. Du vil bemærke nogle ting, som du ikke tænkte så meget på, men som er meget vigtige for at få spillet spilbart, som du vil blive nødt til at løse som det næste. Når spillet er spilbart, vil du fortsætte med at arbejde med ting, som du ikke ville udgive dit spil uden. +

+

+ 4. Eksperimenter som du lyster +

+

+ Du kommer automatisk til at være mere villig til at prøve tingene ud og se, om de vil fungere eller ej. Men det afhænger naturligvis af, hvor lang tid det kommer til at tage at implementere visse funktioner og prøve dem af. Så en god tidsplans vil helt sikkert hjælpe. Du ved aldrig om en af de funktioner vil redde projektet og sikre dig førstepladsen. + +

+

+ 5. Forbedre dine overordnede spiludviklingsevner +

+

+ Jo flere game jams du deltager i, jo flere ting til du opdage. Du lærer hvad som gør et spil bedre og hvilke funktioner som kan redde dig i sidste ende. Du kan prøve en masse forskellige genre, som du måske ikke ville have overvejet at prøve af før. Det vil også vise dig, hvilke genre som er lettere eller sværere at udvikle. +

+

+ 6. Mød nye mennesker og skab et netværk +

+

+ Game jams er fantastisk til at møde nye mennesker som du deler interesse med, samt styrke dine nuværende relationer hvis du deltager i et game jam med dem som et team. Når du skaber nye relationer der deler den samme interesse som dig, er det nemt at få inputs fra hinanden. Det kan muligvis være at du havde et problem som du aldrig helt fandt ud af, hvor din nye relation kan forklare hvordan han/hun ville have gjort, eller omvendt. +

+

+ 7. Hav det sjovt! +

+

+ Game Jams er super sjovt! Man udfordre sig selv, får nye ideer og man får lov til at se hvordan andre tænker ved at løse den samme opgave. Er du et konkurrance menneske gør det kun det hele meget bedre. En undersøgelse af McFunkyPants viser at over 95% af deltagere har haft det sjovt under deltagelse og vil gerne deltage i endnu en. +

+
+
-

-

- 5. Forbedre dine overordnede spiludviklingsevner -

-

- Jo flere game jams du deltager i, jo flere ting til du opdage. Du lærer hvad som gør et spil bedre og hvilke funktioner som kan redde dig i sidste ende. Du kan prøve en masse forskellige genre, som du måske ikke ville have overvejet at prøve af før. Det vil også vise dig, hvilke genre som er lettere eller sværere at udvikle. -

-

- 6. Mød nye mennesker og skab et netværk -

-

- Game jams er fantastisk til at møde nye mennesker som du deler interesse med, samt styrke dine nuværende relationer hvis du deltager i et game jam med dem som et team. Når du skaber nye relationer der deler den samme interesse som dig, er det nemt at få inputs fra hinanden. Det kan muligvis være at du havde et problem som du aldrig helt fandt ud af, hvor din nye relation kan forklare hvordan han/hun ville have gjort, eller omvendt. -

-

- 7. Hav det sjovt! -

-

- Game Jams er super sjovt! Man udfordre sig selv, får nye ideer og man får lov til at se hvordan andre tænker ved at løse den samme opgave. Er du et konkurrance menneske gør det kun det hele meget bedre. En undersøgelse af McFunkyPants viser at over 95% af deltagere har haft det sjovt under deltagelse og vil gerne deltage i endnu en. -

@@ -417,9 +423,6 @@
- -
+
  • 1.
  • 2.
    • @@ -676,7 +679,7 @@
  • 5.
  • 6.
-
+ diff --git a/Frontend/Styles/Index.css b/Frontend/Styles/Index.css index ee3e23c..3c89585 100755 --- a/Frontend/Styles/Index.css +++ b/Frontend/Styles/Index.css @@ -858,4 +858,14 @@ image_gruppenavn{ #return-to-top:hover i { color: rgba(255, 255, 255, .55);; top: 5px; +} + +.Collapse-Button { + width: 30%; + text-align: center; + font-weight: bold; + font-size: 18px; + border: double; + border-color: rgb(0, 113, 185); + border-radius: 15px; } \ No newline at end of file From 5c3d29352fcac43c7081465c62312d861f23a12d Mon Sep 17 00:00:00 2001 From: Kraken Date: Fri, 9 Apr 2021 10:30:50 +0200 Subject: [PATCH 3/3] Scrollbar finished New scrollbar with no lag setup finished --- Frontend/Index.html | 3 - Frontend/Javascript/HeaderFunctionality.js | 145 --------------------- Frontend/Javascript/OverlayScrollbar.js | 43 +++++- Frontend/Javascript/ScrollController.js | 21 --- 4 files changed, 40 insertions(+), 172 deletions(-) delete mode 100755 Frontend/Javascript/HeaderFunctionality.js delete mode 100644 Frontend/Javascript/ScrollController.js diff --git a/Frontend/Index.html b/Frontend/Index.html index 39e13d2..d20309f 100755 --- a/Frontend/Index.html +++ b/Frontend/Index.html @@ -700,14 +700,11 @@ - - - diff --git a/Frontend/Javascript/HeaderFunctionality.js b/Frontend/Javascript/HeaderFunctionality.js deleted file mode 100755 index 7ce20d4..0000000 --- a/Frontend/Javascript/HeaderFunctionality.js +++ /dev/null @@ -1,145 +0,0 @@ -$(document).ready(function() { - const scrollableObj = document.getElementById('content'); - - var scrollBar = new MiniBar('#content', { - barType: "default", - scrollX: false, - scrollY: true, - scrollAmount: 20, - onScroll: function() { - // Resize header on scroll. - if($('.smart-scroll').length > 0) { - scrollableObj.addEventListener('wheel', ScrollDirection); - - const NavCollapse = document.getElementById('navbarSupportedContent'); - - const BackToTop = $('#return-to-top'); - const nav = $('.smart-scroll'); - const body = $('body'); - - const container = document.querySelector('.mb-content'); - - if (container.scrollTop <= 0) - { - body.removeClass('bodyScrolled-down').addClass('bodyScrolled-up'); - nav.removeClass('scrolled-down').addClass('scrolled-up'); - BackToTop.fadeOut(300); - scrollBar.update(); - } - - - function ScrollDirection(event) { - var delta; - - if (event.wheelDelta) - { - delta = event.wheelDelta; - } - else - { - delta = -1 * event.deltaY; - } - - if (delta < 0) - { - body.removeClass('bodyScrolled-up').addClass('bodyScrolled-down'); - nav.removeClass('scrolled-up').addClass('scrolled-down'); - BackToTop.fadeIn(300); - NavCollapse.classList.remove('show'); - scrollBar.update(); - } - else if (delta > 0) - { - body.removeClass('bodyScrolled-down').addClass('bodyScrolled-up'); - nav.removeClass('scrolled-down').addClass('scrolled-up'); - BackToTop.fadeOut(300); - scrollBar.update(); - } - } - } - } - }); - - $('body').onSwipe(function(results) { - const NavCollapse = document.getElementById('navbarSupportedContent'); - - const BackToTop = $('#return-to-top'); - const nav = $('.smart-scroll'); - const body = $('body'); - - if (results.up) - { - body.removeClass('bodyScrolled-up').addClass('bodyScrolled-down'); - nav.removeClass('scrolled-up').addClass('scrolled-down'); - BackToTop.fadeIn(300); - NavCollapse.classList.remove('show'); - } - - if (results.down) - { - body.removeClass('bodyScrolled-down').addClass('bodyScrolled-up'); - nav.removeClass('scrolled-down').addClass('scrolled-up'); - BackToTop.fadeOut(300); - } - }) - - GoToTop = function() { - scrollBar.scrollToTop(); - - // Show the Navbar on click. - $('#header').removeClass('scrolled-down').addClass('scrolled-up'); - $('body').removeClass('bodyScrolled-down').addClass('bodyScrolled-up'); - - $('#return-to-top').fadeOut(300); - } - - // Floating button functionality - $('#return-to-top').click(function() { - GoToTop(); - }); - - // Smooth scrolling when click to nav - $('.NavLink').click(function(e) { - // Target element id. - var id = $(this).attr('href'); - - // Target element. - var $id = $(id); - - // If no id was provided, return nothing. - if ($id.length === 0) - { - return; - } - - // Prevent standard hash navigation (avoid blinking in IE). - e.preventDefault(); - - // Top position relative to the document. - var pos = $id.position().top; - - if (pos >= 0) - { - $('#return-to-top').fadeIn(300); - } - - // Animated top scrolling. - if (pos === 0) - { - scrollBar.scrollTo(pos, 'y'); - } - else if (pos > 0) - { - scrollBar.scrollBy(pos, 'y'); - } - else if (pos < 0) - { - scrollBar.scrollBy(pos, 'y'); - } - - // Hide the Navbar on click. - $('#header').addClass('scrolled-down'); - $('body').addClass('bodyScrolled-down'); - return; - }); -}); \ No newline at end of file diff --git a/Frontend/Javascript/OverlayScrollbar.js b/Frontend/Javascript/OverlayScrollbar.js index edfa535..007c41d 100644 --- a/Frontend/Javascript/OverlayScrollbar.js +++ b/Frontend/Javascript/OverlayScrollbar.js @@ -1,10 +1,47 @@ +let instance; + document.addEventListener("DOMContentLoaded", function() { //The first argument are the elements to which the plugin shall be initialized //The second argument has to be at least a empty object or a object with your desired options - OverlayScrollbars(document.querySelectorAll('body'), { }); + instance = OverlayScrollbars(document.querySelectorAll('body'), { }); }); $(function() { - //The passed argument has to be at least a empty object or a object with your desired options - $('body').overlayScrollbars({ }); + + var prevScrollpos = instance.scroll().position.y; + const BackToTop = $('#return-to-top'); + + instance.options("callbacks.onScroll", function(e) { + + var currentScrollPos = instance.scroll().position.y; + if (prevScrollpos > currentScrollPos) { + //Scroll down + $("#header").css({"top" : "0"}); + } else { + //Scroll up + $("#header").css({"top" : "-50px"}); + } + + if (currentScrollPos <= 50) { + //Scroll down + BackToTop.fadeOut(300); + } else { + //Scroll up + BackToTop.fadeIn(300); + } + + prevScrollpos = currentScrollPos; + }); + + GoToTop = function() { + instance.scroll({ y : "0%" }); + + $("#header").css({"top" : "0"}); + BackToTop.fadeOut(300); + } + + // Floating button functionality + $('#return-to-top').click(function() { + GoToTop(); + }); }); \ No newline at end of file diff --git a/Frontend/Javascript/ScrollController.js b/Frontend/Javascript/ScrollController.js deleted file mode 100644 index 1f89603..0000000 --- a/Frontend/Javascript/ScrollController.js +++ /dev/null @@ -1,21 +0,0 @@ -/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */ -$(document).ready(function() { - var instance = $('body').overlayScrollbars(); - var prevScrollpos = instance.scroll().position.y; - - console.log(prevScrollpos); - - window.onscroll = function() { - - var currentScrollPos = instance.scroll().position.y; - console.log(currentScrollPos); - if (prevScrollpos > currentScrollPos) { - $("#header").css({"top" : "0"}); - } else { - $("#header").css({"top" : "-50px"}); - } - - prevScrollpos = currentScrollPos; - } - -}); \ No newline at end of file