Release/0.4.0 (#213)

* Add husky and test it

Format code on commit

* Update lint staged command - Test 2

* Update lint stage - Test 3

* Remove lint-staged - Test 4

Doesn't seem to work for some reason. Trying to do it without lintstaged

* Update package.json

* Add husky config - Test 5

* Add lint-staged.config

* Add ts to precommit and update gitignore

* Fix codestyle

It doesn't work for some reason

* Add editorconfig

* branch init

* added minimum player filter

* setup PWA

* hotfix

* Bugfix: Added a default background-color

* Minor changes

* Test fopbal.svelte error

* Add husky documentation to README

* Update README

* Put lang=ts back to fopbal.svelte

* .

* cache all responses

* added fallback page (now working yet)

* modified service worker

* Remove indent size in editor config

* Update gitignore

* Update header styling

* Bugfix: Made filterTitle dynamisch

* refactor: svelte fetch

* Add: Reusable Submit/Cancel button

* Change: changed REM to EM

* fix: format

* Add env.js

* Removed: Got rid of the HR because it wasn't semantisch

* fix: removed unused import

* Design: Minor change in margins and removed background color

* Update package.json

* add: Game detail loads from API

* fix: package lock

* fix: formatting

* Update group filter for cards

* fix: disabled button

* Add min players on card

* Update src/routes/games/[game].svelte

removed unused typing

* Fix: Small CSS fix

* update margin bottom

* Remove /games in example .env

* add: basic error page

* add: save gamedata

* fix: save on click

* add: static files cache

* Add: Offline component

* Add edit button on game pages

* fix: removed secure-preview

* Add: OfflineCard + 404

* Install: Husky install

* Format issue

* Removed: SVG and Changed: error message

* Update: error status

Co-authored-by: Thijs <[email protected]>

* Fixed the spam click

* Change: We still need to change from English to Dutch

* Add strapi api

* Add: Like button for game page

* Update games to dynamic data from Strapi

* Add strapi api url in .env.example

* Fix: removed catch

* Update .env.example & uncomment a comment

* .env

* added homepage

* fix

* added recent 5 games

* refactor: new home structure

* Add: label task to a bug issue

A bug is also a task

* Add fallback to dynamic values from API

* removed .husky

* add .husky to gitignore

* Update strapi api url in .env.example

* Add: Like button for game page

* .env

* added homepage

* fix

* added recent 5 games

* added homepage

* added recent 5 games

* refactor: new home structure

* Update pipe syntac in gamelistcard

* Update comment in if statement

* Add: Like number

* merge changes

* Remove: decimals from color

* Add: Like button for game page

* Add: Like number

* Remove: decimals from color

* fix: url games to spellen

* added reset filter

* added reset filter

* reset filter button

* Add: non-ssr offline message for game

* add: SSR offline page for games

* Update src/routes/games/__error.svelte

Co-authored-by: Jochem Vogel <[email protected]>

* Add: non-ssr offline message for game

* add: SSR offline page for games

* Update src/routes/games/__error.svelte

Co-authored-by: Jochem Vogel <[email protected]>

* fix: games -> spellen

* fix: using layout and semantic HTML

* fix: formatting

* fix: login link not working

* fix: turned on strapi cms

* fix: removed comment

* add: husky

* add .husky to gitignore

* fix: formating

* Add: menu styling / PS: non-active maybe different colors

* Add: icons out of library && disabled edit icon

* Add: reset filter icon

* fixed the menu issue

* Removed: login link in a href

* Add: Commented out the login section

* Add: / instead of /inloggen

* added accordion on detail page

* final changes

* Update overall styling of the GameListOverview page

Implemented the redesign

* Add label component

* Remove branch name from PR template

* CLI Netlify

* merge resolved

* Removed: snackbar in index

* fixed bug for translation

* add: global CSS

* fix: formatting

* add: background to header

* add: underline on active-path

* Add bug and task label to new bug (issue)

* 0.4.0-0

Co-authored-by: Jochem Vogel <[email protected]>
Co-authored-by: sreen020 <[email protected]>
Co-authored-by: Rooyydoe <[email protected]>
Co-authored-by: Roy Kuijper <[email protected]>
Co-authored-by: sreen020 <[email protected]>
Co-authored-by: Jochem Vogel <[email protected]>

.github/ISSUE_TEMPLATE/bug.md

@@ -1,7 +1,7 @@
 ---
 name: Bug
 about: Een bug in de applicatie
-labels: bug task
+labels: bug, task
 assignees: ''
 ---
 

.github/PULL_REQUEST_TEMPLATE.md

@@ -2,8 +2,6 @@
 
 Closes #
 
-Branch name:
-
 _[Please include a summary of the change and which issue is fixed]_
 
 ## Type of change

.gitignore

@@ -19,4 +19,4 @@ functions
 .pnpm-debug.log
 
 .env
-.husky
+.husky

.husky/.gitignore

@@ -0,0 +1 @@
+_

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "jungle_gym",
-	"version": "0.3.0",
+	"version": "0.4.0-0",
 	"description": "JungleGym is an app for primary school teachers that will help them with their gymnastics lessons",
 	"scripts": {
 		"dev": "svelte-kit dev",

src/app.css

@@ -6,14 +6,37 @@
 
 	--color-turquoise: hsl(192, 80%, 80%);
 	--color-dark-blue: hsl(221, 43%, 16%);
-	--color-light-orange: hsl(13, 100%, 84%);
+	--color-light-orange: hsl(92, 30%, 64%);
 	--color-light-orange-hover: hsl(13, 100%, 89%);
 	--color-pink: hsl(337, 92%, 64%);
 	--color-black: hsl(0, 0%, 11%);
 	--color-grey: hsl(240, 5%, 45%);
 	--color-light-grey: hsl(198, 19%, 89%);
 	--color-lighter-grey: hsl(0, 0%, 95%);
 	--color-white: hsl(0, 0%, 100%);
+
+	--color-accent-1: #266525;
+	--color-accent-2: #e04646;
+
+	--font-heading: 'Montserrat Alternates', sans-serif;
+	--font-body: 'Poppins', sans-serif;
+	--font-body-color: var(--color-black);
+	--font-heading-color: var(--color-dark-blue);
+	--font-heading-base-size: 20px;
+}
+
+#svelte {
+	position: relative;
+	overflow-x: hidden;
+}
+
+body {
+	color: var(--font-body-color);
+	font-family: var(--font-body);
+	background-color: var(--color-white);
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
 }
 
 h1,
@@ -23,17 +46,16 @@ h4,
 h5,
 h6 {
 	font-family: var(--font-heading);
+	color: var(--font-heading-color);
 }
 
-p {
-	font-family: var(--font-body);
+main {
+	padding: 0 1em;
 }
 
-body {
-	color: var(--color-dark-blue);
-	font-family: var(--font-body);
-	background-color: var(--color-white);
-	padding: 0 1em;
+a {
+	color: inherit;
+	text-decoration: none;
 }
 
 button:hover {
@@ -45,28 +67,12 @@ button:active {
 	transition: transform 0.2s;
 }
 
-p,
-li {
-	color: var(--color-grey);
-}
-
 button {
-	font-family: var(--font-body);
-}
-
-button:hover {
-	cursor: pointer;
-}
-
-button:active {
-	transform: scale(0.98);
-	transition: transform 0.2s;
-}
-
-.hide-underline {
-	text-decoration: none;
+	font-family: inherit;
 }
 
-.no-transform-button:active {
-	transform: none;
+section > h1 {
+	font-size: 1.2em;
+	font-weight: 600;
+	margin-bottom: 0;
 }

src/lib/GameList/GameListCard.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Game } from '$lib/games';
+	import CardLabel from '$lib/shared/Label/CardLabel.svelte';
 
 	export let game: Game;
 
@@ -28,33 +29,37 @@
 	const minGroup = targetGroupArr[0];
 	const maxGroup = targetGroupArr.slice(-1)[0];
 
-	const targetGroupString = `Groep ${minGroup} t/m ${maxGroup}`;
+	let targetGroupString;
+	if (minGroup === 1 && maxGroup === 8) {
+		targetGroupString = 'Alle groepen';
+	} else {
+		targetGroupString = `Groep ${minGroup} t/m ${maxGroup}`;
+	}
 </script>
 
 <article>
 	<h1>{game.name}</h1>
+	{#if game.offline}
+		<h2>Offline beschikbaar</h2>
+	{/if}
 	<ul>
-		<li>{targetGroupString}</li>
-		<li class="category-label">{game.category.name || game.category}</li>
-		<li>Min. spelers: {game.minimumPlayers}</li>
-		{#if game.offline}
-			<li class="offline">Offline Beschikbaar</li>
-		{/if}
+		<CardLabel>{targetGroupString}</CardLabel>
+		<CardLabel>{game.category.name || game.category}</CardLabel>
+		<CardLabel>
+			<i class="icon-persons" />
+			{game.minimumPlayers}
+		</CardLabel>
 	</ul>
 </article>
 
 <style>
 	article {
-		background-color: var(--color-lighter-grey);
-		border-radius: 1em;
+		background-color: var(--color-white);
+		border-radius: 1.5em;
 		margin: 1em 0;
 		padding: 1em;
 		justify-content: space-between;
-	}
-
-	li.offline {
-		background-color: var(--color-grey);
-		color: var(--color-white);
+		filter: drop-shadow(0 0.2em 0.2em hsl(120, 46%, 89%));
 	}
 
 	ul {
@@ -67,36 +72,39 @@
 	}
 
 	article h1 {
-		color: var(--color-dark-blue);
 		display: flex;
 		justify-content: space-between;
 		margin: 0;
-		margin-bottom: 1em;
 		line-height: 2em;
-		min-height: 4em;
+		font-size: 1.25em;
 	}
 
 	article h1::after {
-		content: '>';
-		border-radius: 50%;
+		content: '';
+		background: url('$lib/assets/icons/GameCard/cardArrow.svg') no-repeat center;
+		width: 2em;
+		height: 2em;
+	}
+	.icon-persons::before {
+		content: '';
+		display: block;
+		background: url('$lib/assets/icons/GameCard/minPlayers.svg') no-repeat center;
 		width: 2em;
 		height: 2em;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		border: none;
 	}
 
-	li {
-		background-color: var(--color-light-orange);
-		padding: 0.3em 1em;
-		border-radius: 1em;
-		margin-right: 0.5em;
+	article h2 {
+		margin: 0;
+		margin-bottom: 2em;
+		padding: 0;
+		font-family: var(--font-body);
 		font-size: 0.8em;
-		margin-bottom: 0.5em;
+		font-weight: normal;
+		font-style: italic;
+		opacity: 0.5;
 	}
 
-	.category-label {
-		text-transform: capitalize;
+	ul {
+		margin-top: 1em;
 	}
 </style>

src/lib/GameList/GameListCarousel.svelte

@@ -47,12 +47,6 @@
 		min-width: 13rem;
 	}
 
-	h1 {
-		font-size: 1.2em;
-		font-weight: 600;
-		margin-bottom: 0;
-	}
-
 	ul a:focus {
 		cursor: pointer;
 	}

src/lib/GameList/GameListFilter.svelte

@@ -122,13 +122,9 @@
 		class:border-change-open={open}
 	>
 		Filter
-		<img src="../icons/filter.svg" alt="Filter icon" />
-		<img
-			class:dropdown-close={open}
-			class:dropdown-open={!open}
-			src="../icons/dropdown.svg"
-			alt="Dropdown icon"
-		/>
+		<i class="material-icons">filter_list</i>
+		<i class:dropdown-close={!open} class:dropdown-open={open} class="material-icons">expand_more</i
+		>
 	</button>
 	<article class:filter-options-close={!open} class:filter-options-open={open}>
 		<FilterButton filterTitle="Spelsoort" on:click={() => (category = !category)} />
@@ -141,14 +137,16 @@
 		<!-- <FilterButton filterTitle="materialen" on:click={() => (materialen = !materialen)} /> -->
 
 		<div>
-			<a href="/spellen" on:click={resetAllFilters}>Reset filters</a>
+			<a href="/spellen" on:click={resetAllFilters}
+				>Reset filters<i class="material-icons">cached</i></a
+			>
 		</div>
 	</article>
 </section>
 
 {#if category}
 	<GameListPopup
-		filterTitle="category"
+		filterTitle="Categorie"
 		filterItems={gameNames}
 		activeQueries={query.getAll('category')}
 		on:close={() => (category = !category)}
@@ -198,28 +196,28 @@
 		height: 3em;
 	}
 
-	section button img:nth-of-type(1) {
+	section button i:nth-of-type(1) {
 		padding: 0em 0.5em;
 		width: 1.1em;
 		height: 1.1em;
 	}
 
 	.dropdown-close {
-		padding: 0em 0.5em;
+		padding: 0.2em 0.5em;
 		margin-left: auto;
 		width: 0.75em;
 		height: 0.75em;
-		transform: rotate(180deg);
-		transition: transform 200ms linear;
+		transform: rotateX(180deg);
+		transition: transform 200ms ease-in;
 	}
 
 	.dropdown-open {
-		padding: 0em 0.5em;
+		padding: 0 0.5em;
 		margin-left: auto;
 		width: 0.75em;
 		height: 0.75em;
-		transform: rotate(0deg);
-		transition: transform 200ms linear;
+		transform: rotateX(0deg);
+		transition: transform 200ms ease-in;
 	}
 
 	article {
@@ -236,6 +234,10 @@
 		cursor: pointer;
 	}
 
+	article div a i {
+		padding-left: 0.3em;
+	}
+
 	.filter-options-open {
 		max-height: 31.25em;
 		padding: 1.5em 1em 0;
@@ -258,4 +260,8 @@
 	.border-change-open {
 		border-radius: 1em 1em 0em 0em;
 	}
+
+	.no-transform-button:active {
+		transform: none;
+	}
 </style>

src/lib/GameList/GameListPopup.svelte

@@ -41,7 +41,7 @@
 </script>
 
 <section in:fly={{ y: 500, duration: 500 }} out:fly={{ y: 500, duration: 500 }}>
-	<h1>Filter op {filterTitle}</h1>
+	<h1>Filter op <span>{filterTitle}</span></h1>
 	{#if filterTitle !== 'minimumPlayers'}
 		<form on:submit|preventDefault={submitForm}>
 			<fieldset>
@@ -92,6 +92,10 @@
 		text-align: center;
 	}
 
+	section h1 span {
+		text-transform: capitalize;
+	}
+
 	form {
 		display: flex;
 		flex-direction: column;