From cef106b51244cfe52049ff083976280b7123a36e Mon Sep 17 00:00:00 2001 From: wearrrrr Date: Fri, 29 Nov 2024 15:42:35 -0600 Subject: [PATCH] Add the ability to pin games on the games page. --- public/img/checkmark.svg | 3 + public/img/games/pin-outline.svg | 3 + public/img/games/pin.svg | 3 + src/components/GameItem.astro | 15 ++++- src/json/games.json | 78 +++++++++++------------ src/layouts/Layout.astro | 7 +-- src/pages/[lang]/games.astro | 105 +++++++++++++++++++++++++++---- 7 files changed, 157 insertions(+), 57 deletions(-) create mode 100644 public/img/checkmark.svg create mode 100644 public/img/games/pin-outline.svg create mode 100644 public/img/games/pin.svg diff --git a/public/img/checkmark.svg b/public/img/checkmark.svg new file mode 100644 index 0000000..09048d1 --- /dev/null +++ b/public/img/checkmark.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/img/games/pin-outline.svg b/public/img/games/pin-outline.svg new file mode 100644 index 0000000..ebda5b6 --- /dev/null +++ b/public/img/games/pin-outline.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/img/games/pin.svg b/public/img/games/pin.svg new file mode 100644 index 0000000..c9bd7d6 --- /dev/null +++ b/public/img/games/pin.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/components/GameItem.astro b/src/components/GameItem.astro index 3797a9c..3e27188 100644 --- a/src/components/GameItem.astro +++ b/src/components/GameItem.astro @@ -2,7 +2,8 @@ const { game } = Astro.props; --- -
+
+ {game.name}

{game.name}

@@ -11,9 +12,10 @@ const { game } = Astro.props; diff --git a/src/json/games.json b/src/json/games.json index 9ff6565..f1ec9ed 100644 --- a/src/json/games.json +++ b/src/json/games.json @@ -38,6 +38,21 @@ "image": "/games/basketball-stars/logo.png", "slug": "basketball-stars" }, + "bitlife": { + "name": "BitLife", + "description": "BitLife is a life simulator that lets you live your life however you want. Make choices that will affect your character's life from birth to death.", + "image": "/games/bitlife/logo.png", + "slug": "bitlife", + "unity": true, + "vertical": true + }, + "bloons": { + "name": "Bloons", + "description": "The first ever bloons game! Pop the balloons with darts and complete the levels. A simple yet surprisingly addictive game.", + "image": "/games/flash/img/bloons.webp", + "slug": "bloons", + "flash": true + }, "bloons-tower-defense-2": { "name": "Bloons Tower Defense 2", "description": "Bloons Tower Defense 2 is a popular tower defense game originally released in Flash by Ninja Kiwi. Strategically place your defenses, upgrade your units, and stop all balloons from passing through.", @@ -52,13 +67,6 @@ "slug": "bloons-tower-defense-4", "flash": true }, - "bloons": { - "name": "Bloons", - "description": "The first ever bloons game! Pop the balloons with darts and complete the levels. A simple yet surprisingly addictive game.", - "image": "/games/flash/img/bloons.webp", - "slug": "bloons", - "flash": true - }, "bloxors": { "name": "Bloxors", "description": "Bloxorz is a tricky puzzle game that tests your logical skills and sheer brain power. The objective is to get the block into the square hole and avoid falling off the edge. Put your brain to the test and see how far you get!", @@ -66,14 +74,6 @@ "slug": "bloxors", "flash": true }, - "bitlife": { - "name": "BitLife", - "description": "BitLife is a life simulator that lets you live your life however you want. Make choices that will affect your character's life from birth to death.", - "image": "/games/bitlife/logo.png", - "slug": "bitlife", - "unity": true, - "vertical": true - }, "cannon-basketball-4": { "name": "Cannon Basketball 4", "description": "Use your mouse to aim and shoot the cannon. Move your mouse further from the cannon to make a more powerful shot. Use the guide to get a ball into the net with as few attempts as possible!", @@ -274,13 +274,6 @@ "slug": "henry-stickman-breaking-the-bank", "flash": true }, - "henry-stickman-stealing-the-diamond": { - "name": "Stealing the Diamond", - "description": "Help Henry Stickman steal a diamond from a museum! Choose your path and see how your choices affect the outcome.", - "image": "/games/flash/img/stealing-the-diamond.avif", - "slug": "henry-stickman-stealing-the-diamond", - "flash": true - }, "henry-stickman-escaping-the-prison": { "name": "Escaping the Prison", "description": "Help Henry Stickman escape from prison! Choose your path and see how your choices affect the outcome.", @@ -288,6 +281,13 @@ "slug": "henry-stickman-escaping-the-prison", "flash": true }, + "henry-stickman-fleeing-the-complex": { + "name": "Fleeing the Complex", + "description": "Help Henry Stickman flee from a complex! Choose your path and see how your choices affect the outcome.", + "image": "/games/flash/img/fleeing-the-complex.avif", + "slug": "henry-stickman-fleeing-the-complex", + "flash": true + }, "henry-stickman-infiltrating-the-airship": { "name": "Infiltrating the Airship", "description": "Help Henry Stickman infiltrate an airship! Choose your path and see how your choices affect the outcome.", @@ -295,11 +295,11 @@ "slug": "henry-stickman-infiltrating-the-airship", "flash": true }, - "henry-stickman-fleeing-the-complex": { - "name": "Fleeing the Complex", - "description": "Help Henry Stickman flee from a complex! Choose your path and see how your choices affect the outcome.", - "image": "/games/flash/img/fleeing-the-complex.avif", - "slug": "henry-stickman-fleeing-the-complex", + "henry-stickman-stealing-the-diamond": { + "name": "Stealing the Diamond", + "description": "Help Henry Stickman steal a diamond from a museum! Choose your path and see how your choices affect the outcome.", + "image": "/games/flash/img/stealing-the-diamond.avif", + "slug": "henry-stickman-stealing-the-diamond", "flash": true }, "idle-breakout": { @@ -431,12 +431,6 @@ "image": "/games/temple-run-2/logo.webp", "slug": "temple-run-2" }, - "there-is-no-game": { - "name": "There is No Game", - "description": "There is No Game is a unique interactive experience that plays with the concept of video games. It's a humorous and clever adventure that breaks the fourth wall.", - "image": "/games/there-is-no-game/logo.png", - "slug": "there-is-no-game" - }, "the-binding-of-isaac": { "name": "The Binding of Isaac", "description": "When Isaac’s mother starts hearing the voice of God demanding a sacrifice be made to prove her faith, Isaac escapes into the basement facing droves of deranged enemies, lost brothers and sisters, his fears, and eventually his mother.", @@ -444,6 +438,12 @@ "slug": "the-binding-of-isaac", "flash": true }, + "there-is-no-game": { + "name": "There is No Game", + "description": "There is No Game is a unique interactive experience that plays with the concept of video games. It's a humorous and clever adventure that breaks the fourth wall.", + "image": "/games/there-is-no-game/logo.png", + "slug": "there-is-no-game" + }, "tunnelrush": { "name": "Tunnel Rush", "description": "Tunnel Rush is a fast-paced endless runner game where you navigate through a colorful tunnel filled with obstacles. How far can you go?", @@ -451,6 +451,12 @@ "slug": "tunnelrush", "unity": true }, + "ul6": { + "name": "Ultima 6", + "description": "Ultima 6 is a classic role-playing game that takes you on an epic adventure in a fantasy world. Explore, battle, and complete quests to save the realm.", + "image": "/games/ul6/logo.png", + "slug": "ul6" + }, "unfairmario": { "name": "Unfair Mario", "description": "Unfair Mario is a platformer game that challenges your skills and patience. Expect the unexpected as you navigate through tricky levels filled with hidden traps.", @@ -458,12 +464,6 @@ "slug": "unfairmario", "flash": true }, - "ul6": { - "name": "Ultima 6", - "description": "Ultima 6 is a classic role-playing game that takes you on an epic adventure in a fantasy world. Explore, battle, and complete quests to save the realm.", - "image": "/games/ul6/logo.png", - "slug": "ul6" - }, "vex3": { "name": "Vex 3", "description": "Vex 3 is a challenging platformer game where you navigate through various levels filled with obstacles and traps. Can you complete all the levels?", diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 7c1ddea..4940a9f 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -162,7 +162,6 @@ const DESCRIPTION = } body { - /* background-color: var(--background-color); */ max-width: 100vw; display: flex; flex-direction: column; @@ -174,9 +173,9 @@ const DESCRIPTION = opacity: 1; } - // button, input { - // font-family: "Varela Round", sans-serif; - // } + button, input { + font-family: "Varela Round", sans-serif; + } main { width: 90%; diff --git a/src/pages/[lang]/games.astro b/src/pages/[lang]/games.astro index 6b7e01f..519ba71 100644 --- a/src/pages/[lang]/games.astro +++ b/src/pages/[lang]/games.astro @@ -21,22 +21,28 @@ export function getStaticPaths() {
-
- { - Object.keys(games).map((key) => { - const game = (games as any)[key]; - return ; - }) - } +
+
+
+ { + Object.keys(games).map((key) => { + const game = (games as any)[key]; + return ; + }) + } +
+