BradNut/boredgame
1
0
Fork 0
mirror of https://github.com/BradNut/boredgame synced 2025-09-08 17:40:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Format with built in prettier format rules.

Browse source
This commit is contained in:
Bradley Shellnut 2022-07-07 12:32:55 -07:00
parent ff536be706
commit 18e7cb1992
31 changed files with 870 additions and 890 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.vscode/settings.json vendored
View file

@ -1,6 +1,3 @@
{
"cSpell.words": [
"kickstarter",
"msrp"
]
"cSpell.words": ["kickstarter", "msrp"]
}

12
src/app.css
View file

@ -20,10 +20,12 @@ body {
min-height: 100vh;
margin: 0;
background-color: var(--primary-color);
background: linear-gradient(180deg,
background: linear-gradient(
180deg,
var(--primary-color) 0%,
var(--secondary-color) 10.45%,
var(--tertiary-color) 41.35%);
var(--tertiary-color) 41.35%
);
}
body::before {
@ -34,9 +36,11 @@ body::before {
top: 0;
left: 10vw;
z-index: -1;
background: radial-gradient(50% 50% at 50% 50%,
background: radial-gradient(
50% 50% at 50% 50%,
var(--pure-white) 0%,
rgba(255, 255, 255, 0) 100%);
rgba(255, 255, 255, 0) 100%
);
opacity: 0.05;
}

30
src/app.html
View file

@ -1,43 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="utf-8" />
<meta name="description" content="Bored? Find a game! Bored Game!" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script>
const htmlElement = document.documentElement
const userTheme = localStorage.theme
const userFont = localStorage.font
const htmlElement = document.documentElement;
const userTheme = localStorage.theme;
const userFont = localStorage.font;
// check if the user set a theme
if (userTheme) {
htmlElement.dataset.theme = userTheme
htmlElement.dataset.theme = userTheme;
}
// otherwise check for user preference
if (!userTheme && prefersDarkMode) {
htmlElement.dataset.theme = '🌛 Night'
localStorage.theme = '🌛 Night'
htmlElement.dataset.theme = '🌛 Night';
localStorage.theme = '🌛 Night';
}
if (!userTheme && prefersLightMode) {
htmlElement.dataset.theme = '☀️ Daylight'
localStorage.theme = '☀️ Daylight'
htmlElement.dataset.theme = '☀️ Daylight';
localStorage.theme = '☀️ Daylight';
}
// if nothing is set default to dark mode
if (!userTheme && !prefersDarkMode && !prefersLightMode) {
htmlElement.dataset.theme = '🌛 Night'
localStorage.theme = '🌛 Night'
htmlElement.dataset.theme = '🌛 Night';
localStorage.theme = '🌛 Night';
}
</script>
%sveltekit.head%
</head>
</head>
<body>
<body>
<div id="svelte">%sveltekit.body%</div>
</body>
</body>
</html>

4
src/lib/components/preferences/themes.svelte
View file

@ -12,8 +12,8 @@
'🌛 Night': { name: '🌛 Night' },
'☀️ Daylight': { name: '☀️ Daylight' },
'🐺 Night Howl': { name: '🐺 Night Howl' },
'🧠 Night Mind': { name: '🧠 Night Mind' },
}
'🧠 Night Mind': { name: '🧠 Night Mind' }
};
let selectedTheme = getTheme() ?? themes['🌛 Night'];

8
src/lib/types.ts
View file

@ -9,7 +9,7 @@ export type ToastData = {
duration: number;
type: ToastType;
message: string;
}
};
export type GameType = {
id: string;
@ -18,7 +18,7 @@ export type GameType = {
url: string;
edit_url: string;
thumb_url: string;
image_url: string,
image_url: string;
price: number;
price_ca: number;
price_uk: number;
@ -33,7 +33,7 @@ export type GameType = {
description: string;
players: string;
playtime: string;
}
};
export type SearchQuery = {
client_id: string;
@ -84,4 +84,4 @@ export type SearchQuery = {
lt_reddit_week_count?: number;
lt_reddit_day_count?: number;
fields?: string;
}
};

6
src/lib/zodValidation.ts
View file

@ -1,10 +1,10 @@
import { z } from "zod";
import { z } from 'zod';
export const BoardGameSearch = z.object({
minAge: z.number(),
maxAge: z.number(),
minPlayers: z.number(),
maxPlayers: z.number(),
maxPlayers: z.number()
});
export const Game = z.object({
@ -26,5 +26,5 @@ export const Game = z.object({
min_age: z.number(),
description: z.string(),
players: z.string(),
playtime: z.string(),
playtime: z.string()
});

13
src/routes/_api.ts
View file

@ -9,14 +9,19 @@
guarantees are made. Don't use it to organize your life.)
*/
import { URLSearchParams } from "url";
import { URLSearchParams } from 'url';
const base = 'https://api.boardgameatlas.com/api';
export function boardGameApi(method: string, resource: string, queryParams: Record<string, string>, data?: Record<string, unknown>) {
export function boardGameApi(
method: string,
resource: string,
queryParams: Record<string, string>,
data?: Record<string, unknown>
) {
queryParams.client_id = import.meta.env.VITE_PUBLIC_CLIENT_ID;
const urlQueryParams = new URLSearchParams(queryParams)
const url = `${base}/${resource}${urlQueryParams ? `?${urlQueryParams}` : ''}`
const urlQueryParams = new URLSearchParams(queryParams);
const url = `${base}/${resource}${urlQueryParams ? `?${urlQueryParams}` : ''}`;
return fetch(url, {
method,
headers: {

20
src/routes/api/games/index.ts
View file

@ -1,5 +1,5 @@
import type { RequestHandler } from "@sveltejs/kit";
import type { SearchQuery } from "$lib/types";
import type { RequestHandler } from '@sveltejs/kit';
import type { SearchQuery } from '$lib/types';
export const post: RequestHandler = async ({ request }) => {
const form = await request.formData();
@ -8,8 +8,8 @@ export const post: RequestHandler = async ({ request }) => {
order_by: 'rank',
ascending: false,
limit: 20,
client_id: import.meta.env.VITE_PUBLIC_CLIENT_ID,
}
client_id: import.meta.env.VITE_PUBLIC_CLIENT_ID
};
const minAge = form.get('minAge');
const minPlayers = form.get('minPlayers');
@ -47,7 +47,7 @@ export const post: RequestHandler = async ({ request }) => {
if (exactMinPlayers) {
queryParams.min_players = +minPlayers;
} else {
queryParams.gt_min_players = (+minPlayers === 1 ? 0 : (+minPlayers - 1));
queryParams.gt_min_players = +minPlayers === 1 ? 0 : +minPlayers - 1;
}
}
@ -70,12 +70,14 @@ export const post: RequestHandler = async ({ request }) => {
const urlQueryParams = new URLSearchParams(newQueryParams);
const url = `https://api.boardgameatlas.com/api/search${urlQueryParams ? `?${urlQueryParams}` : ''}`
const url = `https://api.boardgameatlas.com/api/search${
urlQueryParams ? `?${urlQueryParams}` : ''
}`;
const response = await fetch(url, {
method: 'get',
headers: {
'content-type': 'application/json'
},
}
});
console.log('response', response);
if (response.status === 404) {
@ -94,7 +96,7 @@ export const post: RequestHandler = async ({ request }) => {
console.log('games', games);
return {
body: {
games: gameResponse?.games,
games: gameResponse?.games
}
};
}
@ -102,4 +104,4 @@ export const post: RequestHandler = async ({ request }) => {
return {
status: response.status
};
}
};

26
src/routes/games/index.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts">
import type { Game } from "$lib/types";
import { Checkbox, NumberInput } from "carbon-components-svelte";
import type { Game } from '$lib/types';
import { Checkbox, NumberInput } from 'carbon-components-svelte';
// import { enhance } from "$lib/form";
let games: Game[] = [];
@ -28,7 +28,6 @@ import { Checkbox, NumberInput } from "carbon-components-svelte";
let exactMaxPlayers = false;
</script>
<svelte:head>
<title>Games</title>
</svelte:head>
@ -50,7 +49,12 @@ import { Checkbox, NumberInput } from "carbon-components-svelte";
invalidText="Number must be between 0 and 120"
label="Min Age"
/>
<Checkbox name="exactMinAge" bind:value={exactMinAge} labelText="Search exact?" bind:checked={exactMinAge} />
<Checkbox
name="exactMinAge"
bind:value={exactMinAge}
labelText="Search exact?"
bind:checked={exactMinAge}
/>
</div>
<div>
<NumberInput
@ -61,7 +65,12 @@ import { Checkbox, NumberInput } from "carbon-components-svelte";
invalidText="Number must be between 1 and 50"
label="Min Players"
/>
<Checkbox name="exactMinPlayers" labelText="Search exact?" bind:value={exactMinPlayers} bind:checked={exactMinPlayers} />
<Checkbox
name="exactMinPlayers"
labelText="Search exact?"
bind:value={exactMinPlayers}
bind:checked={exactMinPlayers}
/>
</div>
<div>
<NumberInput
@ -72,7 +81,12 @@ import { Checkbox, NumberInput } from "carbon-components-svelte";
invalidText="Number must be between 1 and 50"
label="Max Players"
/>
<Checkbox name="exactMaxPlayers" labelText="Search exact?" bind:value={exactMaxPlayers} bind:checked={exactMaxPlayers} />
<Checkbox
name="exactMaxPlayers"
labelText="Search exact?"
bind:value={exactMaxPlayers}
bind:checked={exactMaxPlayers}
/>
</div>
</fieldset>
<button type="submit" disabled={submitting}>Submit</button>

6
src/routes/index.ts
View file

@ -19,8 +19,8 @@ export const post: RequestHandler = async ({ request, locals }) => {
gt_min_players: String(+minPlayers === 1 ? 0 : +minPlayers - 1),
lt_max_players: String(+maxPlayers + 1),
gt_min_age: String(+minAge === 1 ? 0 : +minAge - 1),
lt_max_age: String(+maxAge + 1),
}
lt_max_age: String(+maxAge + 1)
};
const response = await boardGameApi('get', `search`, queryParams);
console.log('response', response);
if (response.status === 404) {
@ -39,7 +39,7 @@ export const post: RequestHandler = async ({ request, locals }) => {
console.log('games', games);
return {
body: {
games: gameResponse?.games,
games: gameResponse?.games
}
};
}

16
src/styles/global.scss
View file

@ -28,7 +28,7 @@
--yellow: #ffc600;
--light: #ffffff;
--dark: #000000;
--lightGrey: #C5C5C5;
--lightGrey: #c5c5c5;
--lightGray: var(--lightGrey);
--imGoingToFaint: #fbfbfb;
--redBrown: #633539;
@ -45,7 +45,7 @@
--headerBackground: var(--greyBlue);
--footerBackground: var(--darkGrey);
--linkHover: var(--white);
--lightHairLine: #C5C5C5;
--lightHairLine: #c5c5c5;
--radius-base: 1rem;
@ -79,12 +79,9 @@
/* Elevation */
--level-0: none;
--level-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--level-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
--level-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
--level-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04);
--level-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--level-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--level-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
/* Z Indexes */
--zBase: 1;
@ -150,7 +147,6 @@ body {
height: 100%;
}
::-webkit-scrollbar {
width: 4px;
height: 4px;
@ -175,7 +171,7 @@ body {
font-size: var(--font-18);
color: var(--color-text-primary);
// background-color: var(--color-bg-primary);
background-color: #2D3A3A;
background-color: #2d3a3a;
// background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 60'%3E%3Cg %3E%3Crect fill='%23555555' width='11' height='11'/%3E%3Crect fill='%23565656' x='10' width='11' height='11'/%3E%3Crect fill='%23575757' y='10' width='11' height='11'/%3E%3Crect fill='%23575757' x='20' width='11' height='11'/%3E%3Crect fill='%23585858' x='10' y='10' width='11' height='11'/%3E%3Crect fill='%23595959' y='20' width='11' height='11'/%3E%3Crect fill='%235a5a5a' x='30' width='11' height='11'/%3E%3Crect fill='%235b5b5b' x='20' y='10' width='11' height='11'/%3E%3Crect fill='%235c5c5c' x='10' y='20' width='11' height='11'/%3E%3Crect fill='%235c5c5c' y='30' width='11' height='11'/%3E%3Crect fill='%235d5d5d' x='40' width='11' height='11'/%3E%3Crect fill='%235e5e5e' x='30' y='10' width='11' height='11'/%3E%3Crect fill='%235f5f5f' x='20' y='20' width='11' height='11'/%3E%3Crect fill='%23606060' x='10' y='30' width='11' height='11'/%3E%3Crect fill='%23616161' y='40' width='11' height='11'/%3E%3Crect fill='%23626262' x='50' width='11' height='11'/%3E%3Crect fill='%23626262' x='40' y='10' width='11' height='11'/%3E%3Crect fill='%23636363' x='30' y='20' width='11' height='11'/%3E%3Crect fill='%23646464' x='20' y='30' width='11' height='11'/%3E%3Crect fill='%23656565' x='10' y='40' width='11' height='11'/%3E%3Crect fill='%23666666' y='50' width='11' height='11'/%3E%3Crect fill='%23676767' x='60' width='11' height='11'/%3E%3Crect fill='%23686868' x='50' y='10' width='11' height='11'/%3E%3Crect fill='%23686868' x='40' y='20' width='11' height='11'/%3E%3Crect fill='%23696969' x='30' y='30' width='11' height='11'/%3E%3Crect fill='%236a6a6a' x='20' y='40' width='11' height='11'/%3E%3Crect fill='%236b6b6b' x='10' y='50' width='11' height='11'/%3E%3Crect fill='%236c6c6c' x='70' width='11' height='11'/%3E%3Crect fill='%236d6d6d' x='60' y='10' width='11' height='11'/%3E%3Crect fill='%236e6e6e' x='50' y='20' width='11' height='11'/%3E%3Crect fill='%236e6e6e' x='40' y='30' width='11' height='11'/%3E%3Crect fill='%236f6f6f' x='30' y='40' width='11' height='11'/%3E%3Crect fill='%23707070' x='20' y='50' width='11' height='11'/%3E%3Crect fill='%23717171' x='80' width='11' height='11'/%3E%3Crect fill='%23727272' x='70' y='10' width='11' height='11'/%3E%3Crect fill='%23737373' x='60' y='20' width='11' height='11'/%3E%3Crect fill='%23747474' x='50' y='30' width='11' height='11'/%3E%3Crect fill='%23747474' x='40' y='40' width='11' height='11'/%3E%3Crect fill='%23757575' x='30' y='50' width='11' height='11'/%3E%3Crect fill='%23767676' x='90' width='11' height='11'/%3E%3Crect fill='%23777777' x='80' y='10' width='11' height='11'/%3E%3Crect fill='%23787878' x='70' y='20' width='11' height='11'/%3E%3Crect fill='%23797979' x='60' y='30' width='11' height='11'/%3E%3Crect fill='%237a7a7a' x='50' y='40' width='11' height='11'/%3E%3Crect fill='%237b7b7b' x='40' y='50' width='11' height='11'/%3E%3Crect fill='%237c7c7c' x='90' y='10' width='11' height='11'/%3E%3Crect fill='%237c7c7c' x='80' y='20' width='11' height='11'/%3E%3Crect fill='%237d7d7d' x='70' y='30' width='11' height='11'/%3E%3Crect fill='%237e7e7e' x='60' y='40' width='11' height='11'/%3E%3Crect fill='%237f7f7f' x='50' y='50' width='11' height='11'/%3E%3Crect fill='%23808080' x='90' y='20' width='11' height='11'/%3E%3Crect fill='%23818181' x='80' y='30' width='11' height='11'/%3E%3Crect fill='%23828282' x='70' y='40' width='11' height='11'/%3E%3Crect fill='%23838383' x='60' y='50' width='11' height='11'/%3E%3Crect fill='%23848484' x='90' y='30' width='11' height='11'/%3E%3Crect fill='%23848484' x='80' y='40' width='11' height='11'/%3E%3Crect fill='%23858585' x='70' y='50' width='11' height='11'/%3E%3Crect fill='%23868686' x='90' y='40' width='11' height='11'/%3E%3Crect fill='%23878787' x='80' y='50' width='11' height='11'/%3E%3Crect fill='%23888888' x='90' y='50' width='11' height='11'/%3E%3C/g%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;

68
src/styles/theme.scss
View file

@ -9,11 +9,7 @@ html[data-theme='🌛 Night'] {
/* Menu */
--clr-menu-text: hsl(0 0% 78%);
--clr-menu-bg: linear-gradient(
180deg,
hsl(180 7% 14%) 0%,
hsl(216 7% 14%) 100%
);
--clr-menu-bg: linear-gradient(180deg, hsl(180 7% 14%) 0%, hsl(216 7% 14%) 100%);
--clr-menu-arrow-bg: hsl(180 7% 14%);
--clr-menu-border: hsl(0 0% 19%);
@ -24,11 +20,7 @@ html[data-theme='🌛 Night'] {
/* Hero */
--clr-hero-txt: hsl(174 27% 73%);
--clr-hero-bg: linear-gradient(
270deg,
hsl(210 15% 13%) 43%,
hsl(176 19% 15%) 66%
);
--clr-hero-bg: linear-gradient(270deg, hsl(210 15% 13%) 43%, hsl(176 19% 15%) 66%);
--clr-hero-divider-bg: hsl(0 0% 21%);
--clr-input-txt: hsl(177 100% 15%);
--clr-input-bg: hsl(210 13% 24%);
@ -36,11 +28,7 @@ html[data-theme='🌛 Night'] {
--clr-input-border: hsl(0 0% 21%);
/* Card */
--clr-card-bg: linear-gradient(
180deg,
hsl(180 7% 14%) 0%,
hsl(216 7% 14%) 100%
);
--clr-card-bg: linear-gradient(180deg, hsl(180 7% 14%) 0%, hsl(216 7% 14%) 100%);
--clr-card-txt: hsl(0 0% 78%);
/* Link */
@ -70,9 +58,9 @@ html[data-theme='🌛 Night'] {
--clr-token-3: hsl(173 100% 66%);
--clr-token-4: hsl(0 0% 98%);
--clr-token-5: hsl(173 10% 60%);
}
}
html[data-theme='☀️ Daylight'] {
html[data-theme='☀️ Daylight'] {
/* Global */
--clr-primary: hsl(220 100% 50%);
--clr-txt: hsl(220 10% 10%);
@ -132,9 +120,9 @@ html[data-theme='🌛 Night'] {
--clr-token-3: hsl(220 100% 50%);
--clr-token-4: hsl(0 0% 20%);
--clr-token-5: hsl(0 0% 60%);
}
}
html[data-theme='🐺 Night Howl'] {
html[data-theme='🐺 Night Howl'] {
/* Global */
--clr-primary: hsl(207 100% 94%);
--clr-txt: hsl(210 40% 80%);
@ -145,11 +133,7 @@ html[data-theme='🌛 Night'] {
/* Menu */
--clr-menu-text: hsl(210 40% 80%);
--clr-menu-bg: linear-gradient(
180deg,
hsl(210 47% 14%) 0%,
hsl(210 47% 12%) 100%
);
--clr-menu-bg: linear-gradient(180deg, hsl(210 47% 14%) 0%, hsl(210 47% 12%) 100%);
--clr-menu-arrow-bg: hsl(210 47% 14%);
--clr-menu-border: hsl(210 40% 20%);
@ -160,11 +144,7 @@ html[data-theme='🌛 Night'] {
/* Hero */
--clr-hero-txt: hsl(210 40% 60%);
--clr-hero-bg: linear-gradient(
270deg,
hsl(210 47% 12%) 43%,
hsl(210 47% 14%) 66%
);
--clr-hero-bg: linear-gradient(270deg, hsl(210 47% 12%) 43%, hsl(210 47% 14%) 66%);
--clr-hero-divider-bg: hsl(210 40% 20%);
--clr-input-txt: hsl(210 40% 20%);
--clr-input-bg: hsl(210 40% 16%);
@ -172,11 +152,7 @@ html[data-theme='🌛 Night'] {
--clr-input-border: hsl(210 40% 20%);
/* Card */
--clr-card-bg: linear-gradient(
180deg,
hsl(210 47% 14%) 0%,
hsl(210 47% 12%) 100%
);
--clr-card-bg: linear-gradient(180deg, hsl(210 47% 14%) 0%, hsl(210 47% 12%) 100%);
--clr-card-txt: hsl(210 40% 60%);
/* Link */
@ -206,9 +182,9 @@ html[data-theme='🌛 Night'] {
--clr-token-3: hsl(180 100% 43%);
--clr-token-4: hsl(206 50% 98%);
--clr-token-5: hsl(217 10% 64%);
}
}
html[data-theme='🧠 Night Mind'] {
html[data-theme='🧠 Night Mind'] {
/* Global */
--clr-primary: hsl(9 100% 84%);
--clr-txt: hsl(265 28% 98%);
@ -219,11 +195,7 @@ html[data-theme='🌛 Night'] {
/* Menu */
--clr-menu-text: hsl(265 28% 98%);
--clr-menu-bg: linear-gradient(
180deg,
hsl(265 28% 20%) 0%,
hsl(265 28% 18%) 100%
);
--clr-menu-bg: linear-gradient(180deg, hsl(265 28% 20%) 0%, hsl(265 28% 18%) 100%);
--clr-menu-arrow-bg: hsl(265 28% 20%);
--clr-menu-border: hsl(265 28% 24%);
@ -234,11 +206,7 @@ html[data-theme='🌛 Night'] {
/* Hero */
--clr-hero-txt: hsl(265 28% 80%);
--clr-hero-bg: linear-gradient(
270deg,
hsl(265 28% 20%) 43%,
hsl(265 28% 24%) 66%
);
--clr-hero-bg: linear-gradient(270deg, hsl(265 28% 20%) 43%, hsl(265 28% 24%) 66%);
--clr-hero-divider-bg: hsl(265 28% 24%);
--clr-input-txt: hsl(265 28% 20%);
--clr-input-bg: hsl(265 28% 24%);
@ -246,11 +214,7 @@ html[data-theme='🌛 Night'] {
--clr-input-border: hsl(265 28% 26%);
/* Card */
--clr-card-bg: linear-gradient(
180deg,
hsl(265 28% 22%) 0%,
hsl(265 28% 20%) 100%
);
--clr-card-bg: linear-gradient(180deg, hsl(265 28% 22%) 0%, hsl(265 28% 20%) 100%);
--clr-card-txt: hsl(265 28% 80%);
/* Link */
@ -280,4 +244,4 @@ html[data-theme='🌛 Night'] {
--clr-token-3: hsl(358 80% 80%);
--clr-token-4: hsl(256 80% 98%);
--clr-token-5: hsl(265 10% 60%);
}
}

2
svelte.config.js
View file

@ -10,7 +10,7 @@ const config = {
adapter: adapter(),
alias: {
$components: 'src/components',
$root: './src',
$root: './src'
},
// Override http methods in the Todo forms
methodOverride: {