Skip to content

Commit e63b9e6

Browse files
coffandrocoffandro
committed
Cleanup site majorly
1 parent 01afe18 commit e63b9e6

16 files changed

Lines changed: 227 additions & 350 deletions

File tree

‎src/app.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="utf-8" />
55
<link rel="icon" href="%sveltekit.assets%/Logo.png" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
<title>Breadbird Games</title>
7+
<title>BreadBird Games</title>
88
%sveltekit.head%
99
</head>
1010
<body data-sveltekit-preload-data="hover">

src/lib/Grid/Items/Developer.svelte renamed to src/lib/Grid/Items/developer-tile.svelte

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
1-
<svelte:options customElement="developer-tile" />
2-
31
<script lang="ts">
4-
let {
5-
thumbnailPath = "",
2+
export let thumbnailPath = "",
63
name = "",
74
pronouns = "",
8-
description = "",
9-
} = $props();
5+
description = "";
106
</script>
117

128
<div class="grid-item">
@@ -98,6 +94,8 @@
9894
margin-bottom: 10px;
9995
width: 350px;
10096
height: 200px;
97+
max-width: 350px;
98+
max-height: 200px;
10199
border-radius: 15px;
102100
}
103101
</style>

src/lib/Grid/Items/Game.svelte renamed to src/lib/Grid/Items/game-tile.svelte

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
1-
<svelte:options customElement="game-tile" />
2-
31
<script lang="ts">
4-
let {
5-
thumbnailPath = "",
2+
export let thumbnailPath = "",
63
name = "",
74
description = "",
8-
link = "",
9-
} = $props();
5+
link = "";
106
</script>
117

128
<a href={link} class="grid-item">
@@ -103,6 +99,8 @@
10399
flex: 1;
104100
width: 350px;
105101
height: 200px;
102+
max-width: 350px;
103+
max-height: 200px;
106104
border-radius: 15px;
107105
overflow: hidden;
108106
display: block;

src/lib/Grid/Grid.svelte renamed to src/lib/Grid/grid.svelte

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
<svelte:options customElement="grid-container" />
2-
31
<div class="grid-container">
42
<slot />
53
</div>

‎src/lib/Menu/MenuItem.svelte‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
<script>
2-
let { path } = $props();
2+
import { isActive } from "$lib";
3+
4+
export let path = "",
5+
title = "",
6+
pageNames;
37
</script>
48

59
<li>
6-
<a href={path}><slot /></a>
10+
<a class={isActive(title, pageNames)} href={path}>{title}</a>
711
</li>
812

913
<style>
@@ -22,4 +26,8 @@
2226
color: var(--text);
2327
cursor: pointer;
2428
}
29+
30+
.active {
31+
background-color: var(--mantle-secondary);
32+
}
2533
</style>

‎src/lib/Navbar/navbar.svelte‎

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,58 @@
1-
<svelte:options customElement="navbar-component" />
2-
31
<script lang="ts">
42
import Menu from "$lib/Menu/Menu.svelte";
53
import MenuItem from "$lib/Menu/MenuItem.svelte";
4+
import { isActive } from "$lib";
65
76
let { pageName = "" } = $props();
87
9-
const isActive = (tabName: string) => {
10-
return tabName === pageName ? "active" : "";
11-
};
12-
138
const modules = import.meta.glob<Object>(
149
"../../routes/games/*/+page.svelte",
1510
{
1611
eager: true,
1712
},
1813
);
14+
15+
console.log(pageName);
16+
17+
let pageNames = pageName.split("/");
1918
</script>
2019

20+
<svelte:head>
21+
<title>{pageNames[pageNames.length - 1]}</title>
22+
</svelte:head>
23+
2124
<ul id="navbar">
22-
<li class="navbar-item {isActive('Index')}" id="logo">
25+
<li class="navbar-item {isActive('BreadBird Games', pageNames)}" id="logo">
2326
<a href="/"><img src="/Logo.png" alt="home" /></a>
2427
</li>
2528
<!-- margin left auto to move to the right, also moves all children after to the right -->
2629
<li style="margin-left: auto;">
2730
<Menu>
28-
<a class={isActive("Games")} id="games" slot="toggle">Games</a>
29-
31+
<a class={isActive("Games", pageNames)} id="games" slot="toggle">Games</a>
32+
3033
{#each Object.entries(modules) as [_path, module]}
3134
<MenuItem
35+
class={isActive(
36+
_path
37+
.replace("../../routes/games/", "")
38+
.replace("/+page.svelte", ""),
39+
pageNames
40+
)}
3241
path="/games/{_path
3342
.replace('../../routes/games/', '')
3443
.replace('/+page.svelte', '')}"
35-
>
36-
{_path
44+
title={
45+
_path
3746
.replace("../../routes/games/", "")
38-
.replace("/+page.svelte", "")}
47+
.replace("/+page.svelte", "")
48+
}
49+
pageNames={pageNames}
50+
>
3951
</MenuItem>
4052
{/each}
4153
</Menu>
4254
</li>
43-
<li class="navbar-item {isActive('About')}">
55+
<li class="navbar-item {isActive('About', pageNames)}">
4456
<a href="/about"><span id="about">About Us!</span></a>
4557
</li>
4658
</ul>

‎src/lib/Pages/game-page.svelte‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<script>
2+
import Navbar from "$lib/Navbar/navbar.svelte";
3+
4+
export let title = "",
5+
description = "",
6+
gameLink = "",
7+
sourceLink = "";
8+
</script>
9+
10+
11+
<Navbar pageName="Games/{title}"></Navbar>
12+
13+
<div id="content">
14+
{#if title != ""}
15+
<h1>{title}</h1>
16+
{/if}
17+
{#if description != ""}
18+
<h4>
19+
{description}
20+
</h4>
21+
{/if}
22+
<slot/>
23+
<hr />
24+
<div class="links">
25+
{#if gameLink != ""}
26+
<a href={gameLink}
27+
>Game
28+
<i class="icon fa-solid fa-gamepad"></i></a
29+
>
30+
{/if}
31+
{#if sourceLink != ""}
32+
<a href={sourceLink}
33+
>Code
34+
<i class="icon fa-brands fa-github"></i></a
35+
>
36+
{/if}
37+
</div>
38+
</div>
39+
40+
<style>
41+
:global(body) {
42+
background-color: transparent;
43+
}
44+
45+
#background {
46+
position: fixed;
47+
top: 0;
48+
left: 0;
49+
padding: 0;
50+
margin: 0;
51+
height: 100vh;
52+
width: 100vw;
53+
overflow-x: hidden;
54+
z-index: -1;
55+
}
56+
57+
h1 {
58+
text-align: center;
59+
}
60+
61+
h4 {
62+
text-align: center;
63+
}
64+
65+
.icon {
66+
font-size: 128px;
67+
color: var(--text);
68+
}
69+
70+
.links {
71+
display: flex;
72+
justify-content: space-around;
73+
}
74+
75+
.links a {
76+
text-decoration: none;
77+
border-radius: 35px;
78+
border: 3px solid var(--text);
79+
display: flex;
80+
justify-content: center;
81+
flex-direction: column;
82+
text-align: center;
83+
color: var(--text);
84+
padding: 0 10px 0 10px;
85+
}
86+
87+
#content {
88+
margin: 15px;
89+
padding: 0 0 10px 10px;
90+
background-color: white;
91+
border-radius: 15px;
92+
}
93+
</style>

‎src/lib/index.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,14 @@
11
// place files you want to import through the `$lib` alias in this folder.
2+
export const isActive = (tabName: string, pageNames: string[]) => {
3+
let response = "";
4+
5+
// console.log(tabName);
6+
7+
pageNames.forEach(name => {
8+
if (name == tabName) {
9+
response = "active";
10+
}
11+
});
12+
return response;
13+
// return tabName === pageName ? "active" : "";
14+
};

‎src/routes/+layout.svelte‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<script>
2+
import "$lib/Styles/global.css";
3+
4+
let { children } = $props();
5+
</script>
6+
7+
{@render children()}

‎src/routes/+page.svelte‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,36 @@
11
<script>
2-
import "$lib/Styles/global.css";
32
import Navbar from "$lib/Navbar/navbar.svelte";
4-
import Grid from "$lib/Grid/Grid.svelte";
5-
import gameTile from "$lib/Grid/Items/Game.svelte";
3+
import Grid from "$lib/Grid/grid.svelte";
4+
import GameTile from "$lib/Grid/Items/game-tile.svelte";
65
</script>
76

8-
<navbar-component pageName="Index"></navbar-component>
7+
<Navbar pageName="BreadBird Games"></Navbar>
98

109
<h1>Welcome to Bread Bird Games</h1>
11-
<grid-container>
12-
<game-tile
10+
11+
<Grid>
12+
<GameTile
1313
link="/games/Unanswered%20Questions%20with%20H.N.%20Andersen"
1414
thumbnailPath="/gameThumbs/HNAndersen.png"
1515
name="Unanswered Questions with H.N. Andersen"
1616
description="A small game in collaboration with Asia House, to provide a brain break and teach the story of H.N. Andersen."
17-
></game-tile>
18-
<game-tile
17+
></GameTile>
18+
<GameTile
1919
link="/games/Fight%20for%20the%20Forest"
2020
thumbnailPath="/gameThumbs/FightForForest.png"
2121
name="Fight for the Forest"
2222
description="A award winning 2 player arcade game where you fight for who will control the forest."
23-
></game-tile>
24-
<game-tile
23+
></GameTile>
24+
<GameTile
2525
link="/games/Switcheroo"
2626
thumbnailPath="/gameThumbs/Switcheroo.png"
2727
name="Switcheroo"
2828
description="A winning game jam submission where play as two characters who have been merged split again."
29-
></game-tile>
30-
<game-tile
29+
></GameTile>
30+
<GameTile
3131
link="/games/Meleetonin"
3232
thumbnailPath="/gameThumbs/Meleetonin.png"
3333
name="Meleetonin"
3434
description="A game jam submission from the Nordic Game jam 2025 where you play as a a young boy who's unable to sleep."
35-
></game-tile>
36-
</grid-container>
35+
></GameTile>
36+
</Grid>

0 commit comments

Comments
 (0)