diff --git a/astro.config.mjs b/astro.config.mjs
index ba2997f09..a14c140a9 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -54,6 +54,8 @@ export default defineConfig({
"/src/styles/custom.css",
"/src/styles/background.css",
"/src/styles/cards.css",
+ "/src/styles/button-styles.css",
+ "/src/styles/games.css",
],
social: [
{ icon: 'github', label: 'GitHub', href: 'https://github.com/splashkit' },
@@ -64,6 +66,10 @@ export default defineConfig({
src: "./src/assets/favicon.svg",
},
sidebar: [
+ {
+ label: "Try Games",
+ autogenerate: { directory: "games" },
+ },
{
label: "Installation",
collapsed: false,
diff --git a/scripts/api-pages-script.cjs b/scripts/api-pages-script.cjs
index 45dbc63fd..0f6d4214f 100644
--- a/scripts/api-pages-script.cjs
+++ b/scripts/api-pages-script.cjs
@@ -814,7 +814,10 @@ for (const categoryKey in jsonData) {
if (allExamples.length > 0) {
mdxContent += `**API Documentation Code Examples**:\n\n`
allExamples.forEach((example) => {
- const exampleName = getGroupName(jsonData, example.name);
+ let exampleName = getGroupName(jsonData, example.name);
+ if (!exampleName) {
+ exampleName = example.name.split("_").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+ }
mdxContent += `- [${exampleName}](${example.url}): ${example.title}\n`
})
}
diff --git a/scripts/json-files/usage-example-references.json b/scripts/json-files/usage-example-references.json
index c41688ec6..5411bd9ce 100644
--- a/scripts/json-files/usage-example-references.json
+++ b/scripts/json-files/usage-example-references.json
@@ -2,7 +2,7 @@
"audio": [
{
"funcKey": "play_music_named",
- "title": "Music Playback",
+ "title": "Music Playback\r",
"url": "/api/audio/#play-music-named",
"functions": [
"audio_ready",
@@ -14,7 +14,7 @@
},
{
"funcKey": "resume_music",
- "title": "Pausing and Resuming Game Music",
+ "title": "Pausing and Resuming Game Music\r",
"url": "/api/audio/#resume-music",
"functions": [
"audio_ready",
@@ -142,7 +142,7 @@
},
{
"funcKey": "closest_point_on_circle",
- "title": "Closest Point to Mouse on Circle",
+ "title": "Closest Point to Mouse on Circle\r",
"url": "/api/geometry/#closest-point-on-circle",
"functions": [
"open_window",
@@ -161,6 +161,25 @@
"close_all_windows"
]
},
+ {
+ "funcKey": "lines_intersect",
+ "title": "Simple Line Intersect Check",
+ "url": "/api/geometry/#lines-intersect",
+ "functions": [
+ "open_window",
+ "Point2D",
+ "line_from_point_to_point",
+ "draw_line_record",
+ "color_red",
+ "draw_text_no_font_no_size",
+ "color_black",
+ "color_blue",
+ "color_green",
+ "refresh_screen",
+ "delay",
+ "close_all_windows"
+ ]
+ },
{
"funcKey": "line_intersects_rect",
"title": "Avoid the Rectangle",
@@ -256,25 +275,6 @@
"close_all_windows"
]
},
- {
- "funcKey": "lines_intersect",
- "title": "Simple Line Intersect Check",
- "url": "/api/geometry/#lines-intersect",
- "functions": [
- "open_window",
- "Point2D",
- "line_from_point_to_point",
- "draw_line_record",
- "color_red",
- "draw_text_no_font_no_size",
- "color_black",
- "color_blue",
- "color_green",
- "refresh_screen",
- "delay",
- "close_all_windows"
- ]
- },
{
"funcKey": "point_at",
"title": "Flower Grid",
@@ -312,7 +312,7 @@
{
"funcKey": "point_in_circle",
"title": "Mouse in a Circle",
- "url": "/api/geometry/#point-in-circle",
+ "url": "/api/geometry/#point-in-circle-functions",
"functions": [
"open_window",
"circle_at_from_points",
@@ -331,7 +331,7 @@
{
"funcKey": "point_in_rectangle",
"title": "Cursor Jail",
- "url": "/api/geometry/#point-in-rectangle",
+ "url": "/api/geometry/#point-in-rectangle-functions",
"functions": [
"rectangle_from",
"create_timer",
@@ -377,7 +377,7 @@
{
"funcKey": "point_on_line",
"title": "Mouse Point On Line?",
- "url": "/api/geometry/#point-on-line",
+ "url": "/api/geometry/#point-on-line-functions",
"functions": [
"line_from",
"open_window",
@@ -508,7 +508,7 @@
},
{
"funcKey": "random_window_point",
- "title": "Random Portals",
+ "title": "Random Portals\r",
"url": "/api/geometry/#random-window-point",
"functions": [
"open_window",
@@ -524,6 +524,32 @@
"close_window"
]
},
+ {
+ "funcKey": "rectangle_around",
+ "title": "A perpetually moving circle which increases and decreases in size, surrounded by a rectangle shape",
+ "url": "/api/geometry/#rectangle-around-functions",
+ "functions": [
+ "open_window",
+ "create_timer",
+ "start_timer",
+ "quit_requested",
+ "point_at",
+ "cosine",
+ "sine",
+ "circle_at",
+ "timer_ticks",
+ "reset_timer",
+ "process_events",
+ "clear_screen_to_white",
+ "draw_rectangle_record",
+ "color_black",
+ "rectangle_around_circle",
+ "fill_circle_record",
+ "color_red",
+ "refresh_screen",
+ "close_all_windows"
+ ]
+ },
{
"funcKey": "same_point",
"title": "Point 2D Guessing Game",
@@ -561,10 +587,28 @@
"close_all_windows"
]
},
+ {
+ "funcKey": "bitmap_center",
+ "title": "Draw a bitmap with a red dot at its center\r",
+ "url": "/api/graphics/#bitmap-center",
+ "functions": [
+ "open_window",
+ "load_bitmap",
+ "clear_screen",
+ "color_white",
+ "draw_bitmap",
+ "fill_circle_record",
+ "color_red",
+ "circle_at",
+ "refresh_screen",
+ "delay",
+ "close_all_windows"
+ ]
+ },
{
"funcKey": "clear_screen",
"title": "Background Color",
- "url": "/api/graphics/#clear-screen",
+ "url": "/api/graphics/#clear-screen-functions",
"functions": [
"open_window",
"color_blue",
@@ -575,7 +619,7 @@
},
{
"funcKey": "draw_bitmap_named",
- "title": "SplashKit Logo",
+ "title": "SplashKit Logo\r",
"url": "/api/graphics/#draw-bitmap-named",
"functions": [
"open_window",
@@ -600,7 +644,7 @@
{
"funcKey": "draw_circle_on_bitmap",
"title": "Creating a Red Planet",
- "url": "/api/graphics/#draw-circle-on-bitmap",
+ "url": "/api/graphics/#draw-circle-on-bitmap-functions",
"functions": [
"open_window",
"create_bitmap",
@@ -621,7 +665,7 @@
{
"funcKey": "draw_circle_on_window",
"title": "Bubbles",
- "url": "/api/graphics/#draw-circle-on-window",
+ "url": "/api/graphics/#draw-circle-on-window-functions",
"functions": [
"open_window",
"clear_screen",
@@ -655,7 +699,7 @@
{
"funcKey": "draw_ellipse",
"title": "Radiating Wave",
- "url": "/api/graphics/#draw-ellipse",
+ "url": "/api/graphics/#draw-ellipse-functions",
"functions": [
"open_window",
"clear_screen",
@@ -669,7 +713,7 @@
{
"funcKey": "draw_line",
"title": "Colourful Starburst",
- "url": "/api/graphics/#draw-line",
+ "url": "/api/graphics/#draw-line-functions",
"functions": [
"open_window",
"clear_screen",
@@ -691,7 +735,7 @@
{
"funcKey": "draw_line_on_bitmap",
"title": "Drawing a Route on a Map",
- "url": "/api/graphics/#draw-line-on-bitmap",
+ "url": "/api/graphics/#draw-line-on-bitmap-functions",
"functions": [
"open_window",
"create_bitmap",
@@ -712,7 +756,7 @@
{
"funcKey": "draw_line_on_window",
"title": "Basic Line Drawing",
- "url": "/api/graphics/#draw-line-on-window",
+ "url": "/api/graphics/#draw-line-on-window-functions",
"functions": [
"open_window",
"clear_screen",
@@ -734,7 +778,7 @@
{
"funcKey": "draw_pixel",
"title": "Cursor Trail",
- "url": "/api/graphics/#draw-pixel",
+ "url": "/api/graphics/#draw-pixel-functions",
"functions": [
"point_at",
"color_blue",
@@ -756,7 +800,7 @@
{
"funcKey": "draw_quad",
"title": "Ninja Star",
- "url": "/api/graphics/#draw-quad",
+ "url": "/api/graphics/#draw-quad-functions",
"functions": [
"quad_from",
"open_window",
@@ -774,7 +818,7 @@
{
"funcKey": "draw_quad_on_bitmap",
"title": "3D Cube",
- "url": "/api/graphics/#draw-quad-on-bitmap",
+ "url": "/api/graphics/#draw-quad-on-bitmap-functions",
"functions": [
"open_window",
"create_bitmap",
@@ -794,7 +838,7 @@
{
"funcKey": "draw_quad_on_window",
"title": "Halved Ninja Star",
- "url": "/api/graphics/#draw-quad-on-window",
+ "url": "/api/graphics/#draw-quad-on-window-functions",
"functions": [
"quad_from",
"open_window",
@@ -814,7 +858,7 @@
{
"funcKey": "draw_rectangle",
"title": "Rectangle Staircase",
- "url": "/api/graphics/#draw-rectangle",
+ "url": "/api/graphics/#draw-rectangle-functions",
"functions": [
"open_window",
"clear_screen",
@@ -828,7 +872,7 @@
{
"funcKey": "draw_triangle",
"title": "Triangle Coordinates",
- "url": "/api/graphics/#draw-triangle",
+ "url": "/api/graphics/#draw-triangle-functions",
"functions": [
"open_window",
"clear_screen_to_white",
@@ -847,7 +891,7 @@
{
"funcKey": "draw_triangle_on_bitmap",
"title": "Mountain Peaks",
- "url": "/api/graphics/#draw-triangle-on-bitmap",
+ "url": "/api/graphics/#draw-triangle-on-bitmap-functions",
"functions": [
"open_window",
"create_bitmap",
@@ -866,7 +910,7 @@
{
"funcKey": "draw_triangle_on_window",
"title": "Colourful Bunting Flags",
- "url": "/api/graphics/#draw-triangle-on-window",
+ "url": "/api/graphics/#draw-triangle-on-window-functions",
"functions": [
"open_window",
"clear_screen",
@@ -880,7 +924,7 @@
{
"funcKey": "fill_circle",
"title": "Basic Blue Circle",
- "url": "/api/graphics/#fill-circle",
+ "url": "/api/graphics/#fill-circle-functions",
"functions": [
"open_window",
"clear_screen",
@@ -894,7 +938,7 @@
{
"funcKey": "fill_circle_on_bitmap",
"title": "Rainbow Caterpillar",
- "url": "/api/graphics/#fill-circle-on-bitmap",
+ "url": "/api/graphics/#fill-circle-on-bitmap-functions",
"functions": [
"open_window",
"create_bitmap",
@@ -920,7 +964,7 @@
{
"funcKey": "fill_circle_on_window",
"title": "Traffic Lights",
- "url": "/api/graphics/#fill-circle-on-window",
+ "url": "/api/graphics/#fill-circle-on-window-functions",
"functions": [
"open_window",
"clear_screen",
@@ -936,7 +980,7 @@
{
"funcKey": "fill_ellipse",
"title": "Basic Blue Ellipse",
- "url": "/api/graphics/#fill-ellipse",
+ "url": "/api/graphics/#fill-ellipse-functions",
"functions": [
"open_window",
"clear_screen",
@@ -955,7 +999,7 @@
{
"funcKey": "fill_ellipse_on_bitmap",
"title": "Water Ripples",
- "url": "/api/graphics/#fill-ellipse-on-bitmap",
+ "url": "/api/graphics/#fill-ellipse-on-bitmap-functions",
"functions": [
"open_window",
"create_bitmap",
@@ -973,7 +1017,7 @@
{
"funcKey": "fill_quad",
"title": "Coloured Star",
- "url": "/api/graphics/#fill-quad",
+ "url": "/api/graphics/#fill-quad-functions",
"functions": [
"quad_from",
"open_window",
@@ -991,7 +1035,7 @@
{
"funcKey": "fill_quad_on_bitmap",
"title": "Microsoft Windows Logo",
- "url": "/api/graphics/#fill-quad-on-bitmap",
+ "url": "/api/graphics/#fill-quad-on-bitmap-functions",
"functions": [
"open_window",
"create_bitmap",
@@ -1009,7 +1053,7 @@
{
"funcKey": "fill_quad_on_window",
"title": "Halved Coloured Star",
- "url": "/api/graphics/#fill-quad-on-window",
+ "url": "/api/graphics/#fill-quad-on-window-functions",
"functions": [
"quad_from",
"open_window",
@@ -1029,7 +1073,7 @@
{
"funcKey": "fill_rectangle",
"title": "Basic Blue Rectangle",
- "url": "/api/graphics/#fill-rectangle",
+ "url": "/api/graphics/#fill-rectangle-functions",
"functions": [
"open_window",
"clear_screen_to_white",
@@ -1041,8 +1085,8 @@
},
{
"funcKey": "fill_rectangle_on_bitmap",
- "title": "Cityscape",
- "url": "/api/graphics/#fill-rectangle-on-bitmap",
+ "title": "Cityscape\r",
+ "url": "/api/graphics/#fill-rectangle-on-bitmap-functions",
"functions": [
"open_window",
"load_bitmap",
@@ -1060,7 +1104,7 @@
{
"funcKey": "fill_rectangle_on_window",
"title": "Filled Rectangles on Separate Windows",
- "url": "/api/graphics/#fill-rectangle-on-window",
+ "url": "/api/graphics/#fill-rectangle-on-window-functions",
"functions": [
"open_window",
"move_window_to",
@@ -1100,7 +1144,7 @@
{
"funcKey": "fill_triangle",
"title": "Basic Red Triangle",
- "url": "/api/graphics/#fill-triangle",
+ "url": "/api/graphics/#fill-triangle-functions",
"functions": [
"open_window",
"clear_screen_to_white",
@@ -1112,8 +1156,8 @@
},
{
"funcKey": "fill_triangle_on_bitmap",
- "title": "Hooray! A Red Hat",
- "url": "/api/graphics/#fill-triangle-on-bitmap",
+ "title": "Hooray! A Red Hat\r",
+ "url": "/api/graphics/#fill-triangle-on-bitmap-functions",
"functions": [
"open_window",
"emojis",
@@ -1133,7 +1177,7 @@
{
"funcKey": "fill_triangle_on_window",
"title": "Filled Triangles on Separate Windows",
- "url": "/api/graphics/#fill-triangle-on-window",
+ "url": "/api/graphics/#fill-triangle-on-window-functions",
"functions": [
"open_window",
"move_window_to",
@@ -1172,7 +1216,7 @@
},
{
"funcKey": "free_font",
- "title": "Freeing Fonts",
+ "title": "Freeing Fonts\r",
"url": "/api/graphics/#free-font",
"functions": [
"open_window",
@@ -1192,7 +1236,7 @@
{
"funcKey": "has_font",
"title": "Checking for Font using Variable",
- "url": "/api/graphics/#has-font",
+ "url": "/api/graphics/#has-font-functions",
"functions": [
"write",
"font_named",
@@ -1211,7 +1255,7 @@
},
{
"funcKey": "load_font",
- "title": "Using Fonts",
+ "title": "Using Fonts\r",
"url": "/api/graphics/#load-font",
"functions": [
"open_window",
@@ -1225,7 +1269,7 @@
{
"funcKey": "refresh_screen",
"title": "House Drawing",
- "url": "/api/graphics/#refresh-screen",
+ "url": "/api/graphics/#refresh-screen-functions",
"functions": [
"open_window",
"clear_screen",
@@ -1242,7 +1286,7 @@
},
{
"funcKey": "text_width_font_named",
- "title": "Underline Text using Text Width",
+ "title": "Underline Text using Text Width\r",
"url": "/api/graphics/#text-width-font-named",
"functions": [
"open_window",
@@ -1303,8 +1347,8 @@
"physics": [
{
"funcKey": "sprite_bitmap_collision",
- "title": "Does SplashKit have bugs?",
- "url": "/api/physics/#sprite-bitmap-collision",
+ "title": "Does SplashKit have bugs?\r",
+ "url": "/api/physics/#sprite-bitmap-collision-functions",
"functions": [
"open_window",
"load_bitmap",
@@ -1323,7 +1367,7 @@
},
{
"funcKey": "sprite_collision",
- "title": "Colliding Sprites",
+ "title": "Colliding Sprites\r",
"url": "/api/physics/#sprite-collision",
"functions": [
"open_window",
@@ -1342,7 +1386,7 @@
},
{
"funcKey": "sprite_point_collision",
- "title": "Determine Sprite Collisions with Points",
+ "title": "Determine Sprite Collisions with Points\r",
"url": "/api/physics/#sprite-point-collision",
"functions": [
"open_window",
@@ -1365,7 +1409,7 @@
},
{
"funcKey": "sprite_rectangle_collision",
- "title": "Detect Sprite Collisions with Rectangles",
+ "title": "Detect Sprite Collisions with Rectangles\r",
"url": "/api/physics/#sprite-rectangle-collision",
"functions": [
"open_window",
@@ -1390,7 +1434,7 @@
"raspberry": [
{
"funcKey": "raspi_i2c_write_data",
- "title": "LED Text Scrolling",
+ "title": "LED Text Scrolling\r",
"url": "/api/raspberry/#raspi-i2c-write-data",
"functions": [
"write_line",
@@ -1407,8 +1451,8 @@
"sprites": [
{
"funcKey": "create_sprite",
- "title": "Creating a Player Sprite",
- "url": "/api/sprites/#create-sprite",
+ "title": "Creating a Player Sprite\r",
+ "url": "/api/sprites/#create-sprite-functions",
"functions": [
"open_window",
"load_bitmap",
@@ -1425,8 +1469,8 @@
},
{
"funcKey": "draw_sprite",
- "title": "Drawing a Player Sprite",
- "url": "/api/sprites/#draw-sprite",
+ "title": "Drawing a Player Sprite\r",
+ "url": "/api/sprites/#draw-sprite-functions",
"functions": [
"open_window",
"load_bitmap",
@@ -1443,7 +1487,7 @@
},
{
"funcKey": "free_sprite",
- "title": "Freeing a Sprite",
+ "title": "Freeing a Sprite\r",
"url": "/api/sprites/#free-sprite",
"functions": [
"open_window",
@@ -1465,7 +1509,7 @@
},
{
"funcKey": "sprite_set_position",
- "title": "Setting Sprite Position",
+ "title": "Setting Sprite Position\r",
"url": "/api/sprites/#sprite-set-position",
"functions": [
"open_window",
@@ -1485,7 +1529,7 @@
},
{
"funcKey": "sprite_set_velocity",
- "title": "Setting Velocity of Sprite",
+ "title": "Setting Velocity of Sprite\r",
"url": "/api/sprites/#sprite-set-velocity",
"functions": [
"open_window",
@@ -1507,7 +1551,7 @@
},
{
"funcKey": "sprite_set_x",
- "title": "Setting Sprite X-coordinate",
+ "title": "Setting Sprite X-coordinate\r",
"url": "/api/sprites/#sprite-set-x",
"functions": [
"open_window",
@@ -1524,7 +1568,7 @@
},
{
"funcKey": "sprite_set_y",
- "title": "Setting Sprite Y-coordinate",
+ "title": "Setting Sprite Y-coordinate\r",
"url": "/api/sprites/#sprite-set-y",
"functions": [
"open_window",
@@ -1541,7 +1585,7 @@
},
{
"funcKey": "sprite_x",
- "title": "Sprite x-coordinate",
+ "title": "Sprite x-coordinate\r",
"url": "/api/sprites/#sprite-x",
"functions": [
"open_window",
@@ -1561,7 +1605,7 @@
},
{
"funcKey": "sprite_y",
- "title": "Sprite y-coordinate",
+ "title": "Sprite y-coordinate\r",
"url": "/api/sprites/#sprite-y",
"functions": [
"open_window",
@@ -1585,7 +1629,7 @@
{
"funcKey": "write",
"title": "Progress Bar Simulation",
- "url": "/api/terminal/#write",
+ "url": "/api/terminal/#write-functions",
"functions": [
"write_line",
"delay"
@@ -1621,7 +1665,7 @@
{
"funcKey": "write_line",
"title": "Hello World string",
- "url": "/api/terminal/#write-line",
+ "url": "/api/terminal/#write-line-functions",
"functions": []
},
{
@@ -1673,7 +1717,7 @@
},
{
"funcKey": "current_ticks",
- "title": "How many ticks?",
+ "title": "How many ticks?\r",
"url": "/api/utilities/#current-ticks",
"functions": [
"write_line",
@@ -1733,7 +1777,7 @@
{
"funcKey": "rnd",
"title": "Coin Flip",
- "url": "/api/utilities/#rnd",
+ "url": "/api/utilities/#rnd-functions",
"functions": [
"write_line",
"delay",
@@ -1790,5 +1834,30 @@
"write_line"
]
}
+ ],
+ "windows": [
+ {
+ "funcKey": "close_window",
+ "title": "Starts a countdown to close the window at the push of a button.",
+ "url": "/api/windows/#close-window-functions",
+ "functions": [
+ "open_window",
+ "create_timer",
+ "quit_requested",
+ "process_events",
+ "clear_window",
+ "color_white",
+ "button_at_position",
+ "rectangle_from",
+ "start_timer",
+ "draw_text_font_as_string",
+ "color_black",
+ "timer_ticks",
+ "reset_timer",
+ "draw_interface",
+ "refresh_window",
+ "close_all_windows"
+ ]
+ }
]
}
\ No newline at end of file
diff --git a/scripts/usage-example-scraping.cjs b/scripts/usage-example-scraping.cjs
index 0ec5376cf..a69c4ae5b 100644
--- a/scripts/usage-example-scraping.cjs
+++ b/scripts/usage-example-scraping.cjs
@@ -8,6 +8,7 @@ const path = require('path'); // Handle and transform file paths
const srcDirectory = "./public/usage-examples"; //directory to be scraped
const outputDirectory = "./scripts/json-files/usage-example-references.json" //directory where "Usage Example" functions will be savedc
+const apiJsonPath = "./scripts/json-files/api.json"; // Path to api.json
// ------------------------------------------------------------------------------
// Scraping all of the folders in usage example and retrieving the functions and title
@@ -18,6 +19,14 @@ function getAvailableExamplesFunctionUsage(dir) {
const ignoreKey = new Set(["if", "else", "elif", "while", "for", "range", "int", "str", "match"]);
+ // Load api.json
+ let apiJson = {};
+ try {
+ apiJson = JSON.parse(fs.readFileSync(apiJsonPath, 'utf8'));
+ } catch (err) {
+ console.error("Error reading api.json:", err);
+ }
+
const folders = fs.readdirSync(dir);
folders.forEach(folder => {
const folderPath = path.join(dir, folder);
@@ -52,10 +61,19 @@ function getAvailableExamplesFunctionUsage(dir) {
let funcEntry = result[folderKey].find(entry => entry.funcKey === funcKey);
if (!funcEntry) {
+ let urlHash = funcKey.replaceAll("_", "-");
+ // Check for overload
+ if (apiJson[folderKey] && apiJson[folderKey].functions) {
+ const overloads = apiJson[folderKey].functions.filter(f => f.name === funcKey);
+ if (overloads.length > 1) {
+ urlHash += "-functions";
+ }
+ }
+
funcEntry = {
funcKey: funcKey,
title: title,
- url: `/api/${folderKey}/#${funcKey.replaceAll("_", "-")}`,
+ url: `/api/${folderKey}/#${urlHash}`,
functions: []
};
result[folderKey].push(funcEntry);
diff --git a/src/components/react/GameCardSwiper/GameCardSwiper.jsx b/src/components/react/GameCardSwiper/GameCardSwiper.jsx
new file mode 100644
index 000000000..f0ae399fa
--- /dev/null
+++ b/src/components/react/GameCardSwiper/GameCardSwiper.jsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Navigation, Pagination, Autoplay } from 'swiper/modules';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+import './swiperstyles.css';
+
+const games = [
+ {
+ title: "Space Shooter",
+ description: "A classic space shooter game built with SplashKit.",
+ link: "/games/space-shooter",
+ playable: true
+ },
+ {
+ title: "Platformer Adventure",
+ description: "Jump your way to victory in this platformer.",
+ link: "/games/platformer",
+ playable: false
+ },
+ {
+ title: "Puzzle Master",
+ description: "Solve complex puzzles using logic.",
+ link: "/games/puzzle-master",
+ playable: true
+ }
+];
+
+export default function GameCardSwiper() {
+ return (
+
+
+ {games.map((game, index) => (
+
+
+
+
{game.title}
+
{game.description}
+
+
+
+