From 256a8e56ab7bf2e210853ebe2a183929b4ff9502 Mon Sep 17 00:00:00 2001 From: 222448082Ashen <167728161+222448082Ashen@users.noreply.github.com> Date: Tue, 6 Jan 2026 00:46:56 +0530 Subject: [PATCH 1/2] Add games showcase with swiper and styles Introduces a new GameCardSwiper React component to display a games showcase carousel on the homepage. Adds three example game pages (Space Shooter, Platformer Adventure, Puzzle Master) under docs/games, and updates the Astro config to include new stylesheets and a sidebar section for games. Also adds related CSS for buttons and game cards, and updates the docs index to display the showcase. --- astro.config.mjs | 6 + .../json-files/usage-example-references.json | 157 +++++++++++++----- .../react/GameCardSwiper/GameCardSwiper.jsx | 69 ++++++++ .../react/GameCardSwiper/swiperstyles.css | 17 ++ src/content/docs/games/platformer.mdx | 10 ++ src/content/docs/games/puzzle-master.mdx | 17 ++ src/content/docs/games/space-shooter.mdx | 17 ++ src/content/docs/index.mdx | 7 + src/styles/button-styles.css | 25 +++ src/styles/games.css | 42 +++++ 10 files changed, 323 insertions(+), 44 deletions(-) create mode 100644 src/components/react/GameCardSwiper/GameCardSwiper.jsx create mode 100644 src/components/react/GameCardSwiper/swiperstyles.css create mode 100644 src/content/docs/games/platformer.mdx create mode 100644 src/content/docs/games/puzzle-master.mdx create mode 100644 src/content/docs/games/space-shooter.mdx create mode 100644 src/styles/button-styles.css create mode 100644 src/styles/games.css 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/json-files/usage-example-references.json b/scripts/json-files/usage-example-references.json index c41688ec6..554152979 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", @@ -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": [ + "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,6 +587,24 @@ "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", @@ -575,7 +619,7 @@ }, { "funcKey": "draw_bitmap_named", - "title": "SplashKit Logo", + "title": "SplashKit Logo\r", "url": "/api/graphics/#draw-bitmap-named", "functions": [ "open_window", @@ -1041,7 +1085,7 @@ }, { "funcKey": "fill_rectangle_on_bitmap", - "title": "Cityscape", + "title": "Cityscape\r", "url": "/api/graphics/#fill-rectangle-on-bitmap", "functions": [ "open_window", @@ -1112,7 +1156,7 @@ }, { "funcKey": "fill_triangle_on_bitmap", - "title": "Hooray! A Red Hat", + "title": "Hooray! A Red Hat\r", "url": "/api/graphics/#fill-triangle-on-bitmap", "functions": [ "open_window", @@ -1172,7 +1216,7 @@ }, { "funcKey": "free_font", - "title": "Freeing Fonts", + "title": "Freeing Fonts\r", "url": "/api/graphics/#free-font", "functions": [ "open_window", @@ -1211,7 +1255,7 @@ }, { "funcKey": "load_font", - "title": "Using Fonts", + "title": "Using Fonts\r", "url": "/api/graphics/#load-font", "functions": [ "open_window", @@ -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,7 +1347,7 @@ "physics": [ { "funcKey": "sprite_bitmap_collision", - "title": "Does SplashKit have bugs?", + "title": "Does SplashKit have bugs?\r", "url": "/api/physics/#sprite-bitmap-collision", "functions": [ "open_window", @@ -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,7 +1451,7 @@ "sprites": [ { "funcKey": "create_sprite", - "title": "Creating a Player Sprite", + "title": "Creating a Player Sprite\r", "url": "/api/sprites/#create-sprite", "functions": [ "open_window", @@ -1425,7 +1469,7 @@ }, { "funcKey": "draw_sprite", - "title": "Drawing a Player Sprite", + "title": "Drawing a Player Sprite\r", "url": "/api/sprites/#draw-sprite", "functions": [ "open_window", @@ -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", @@ -1673,7 +1717,7 @@ }, { "funcKey": "current_ticks", - "title": "How many ticks?", + "title": "How many ticks?\r", "url": "/api/utilities/#current-ticks", "functions": [ "write_line", @@ -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": [ + "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/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}

+
+ Read More + {game.playable && ( + Try Game + )} +
+
+
+ + ))} + +
+ ); +} diff --git a/src/components/react/GameCardSwiper/swiperstyles.css b/src/components/react/GameCardSwiper/swiperstyles.css new file mode 100644 index 000000000..d1757a950 --- /dev/null +++ b/src/components/react/GameCardSwiper/swiperstyles.css @@ -0,0 +1,17 @@ +.games-showcase-container { + padding: 20px 0; +} + +.game-swiper { + padding-bottom: 40px !important; +} + +.swiper-button-next, +.swiper-button-prev { + color: var(--sk-logo-blue); +} + +.swiper-pagination-bullet-active { + background-color: var(--sk-logo-blue); +} + diff --git a/src/content/docs/games/platformer.mdx b/src/content/docs/games/platformer.mdx new file mode 100644 index 000000000..ac905e890 --- /dev/null +++ b/src/content/docs/games/platformer.mdx @@ -0,0 +1,10 @@ +--- +title: Platformer Adventure +description: Jump your way to victory. +--- + +# Platformer Adventure + +This is a platformer game. It is currently not playable in the browser. + +Check out the source code on GitHub! diff --git a/src/content/docs/games/puzzle-master.mdx b/src/content/docs/games/puzzle-master.mdx new file mode 100644 index 000000000..72a9b9c62 --- /dev/null +++ b/src/content/docs/games/puzzle-master.mdx @@ -0,0 +1,17 @@ +--- +title: Puzzle Master +description: Solve complex puzzles. +--- + +import SKOTutorialButton from '../../../components/SKOTutorialButton.astro'; + +# Puzzle Master + +Solve complex puzzles using logic. + + diff --git a/src/content/docs/games/space-shooter.mdx b/src/content/docs/games/space-shooter.mdx new file mode 100644 index 000000000..522671e3c --- /dev/null +++ b/src/content/docs/games/space-shooter.mdx @@ -0,0 +1,17 @@ +--- +title: Space Shooter +description: A classic space shooter game. +--- + +import SKOTutorialButton from '../../../components/SKOTutorialButton.astro'; + +# Space Shooter + +This is a classic space shooter game built with SplashKit. + + diff --git a/src/content/docs/index.mdx b/src/content/docs/index.mdx index c6aae2879..40030dbad 100644 --- a/src/content/docs/index.mdx +++ b/src/content/docs/index.mdx @@ -25,6 +25,7 @@ hero: import { Card, LinkCard, CardGrid } from "@astrojs/starlight/components"; +import GameCardSwiper from '../../components/react/GameCardSwiper/GameCardSwiper.jsx'; #### To install SplashKit, copy and paste the following into your terminal @@ -34,6 +35,12 @@ bash <(curl -s https://raw.githubusercontent.com/splashkit/skm/master/install-sc
See the [Installation Guides](/installation/) for more details.
+## Games Showcase + +The Games Showcase is an engaging feature to have on the homepage. It makes the site feel more dynamic and interactive, and it showcases the scope of what’s possible with SplashKit from visuals to gameplay mechanics. + + + ## Features diff --git a/src/styles/button-styles.css b/src/styles/button-styles.css new file mode 100644 index 000000000..d1d482965 --- /dev/null +++ b/src/styles/button-styles.css @@ -0,0 +1,25 @@ +:root { + --sk-logo-blue: rgba(1, 172, 194, 1); + --sk-logo-dark-blue: #3E50B1; +} + +.sko-button { + background-color: var(--sk-logo-blue); + color: white; + border: none; + padding: 10px 20px; + border-radius: 5px; + cursor: pointer; + font-size: 1rem; + transition: background-color 0.3s ease; + font-family: inherit; + font-weight: bold; + text-decoration: none; + display: inline-block; +} + +.sko-button:hover { + background-color: var(--sk-logo-dark-blue); + color: white; + text-decoration: none; +} diff --git a/src/styles/games.css b/src/styles/games.css new file mode 100644 index 000000000..6e20290e6 --- /dev/null +++ b/src/styles/games.css @@ -0,0 +1,42 @@ +.games-showcase { + padding: 2rem 0; + width: 100%; +} + +.game-card { + border: 1px solid var(--sl-color-gray-5); + border-radius: 0.5rem; + overflow: hidden; + background-color: var(--sl-color-bg-nav); + height: 100%; + display: flex; + flex-direction: column; +} + +.game-card img { + width: 100%; + height: 200px; + object-fit: cover; +} + +.game-card-content { + padding: 1rem; + flex-grow: 1; + display: flex; + flex-direction: column; +} + +.game-card h3 { + margin-top: 0; + margin-bottom: 0.5rem; +} + +.game-card p { + flex-grow: 1; +} + +.game-card-actions { + margin-top: 1rem; + display: flex; + gap: 0.5rem; +} From 203a8aa4d5353f213e3a7f8e45f979d0512c6fa5 Mon Sep 17 00:00:00 2001 From: 222448082Ashen <167728161+222448082Ashen@users.noreply.github.com> Date: Tue, 6 Jan 2026 00:58:18 +0530 Subject: [PATCH 2/2] Improve usage example URL handling and naming Updated scripts to append '-functions' to example URLs for overloaded functions, using api.json for detection. Enhanced fallback naming in api-pages-script.cjs for missing group names by formatting example names. Updated usage-example-references.json URLs to match new convention. --- scripts/api-pages-script.cjs | 5 +- .../json-files/usage-example-references.json | 84 +++++++++---------- scripts/usage-example-scraping.cjs | 20 ++++- 3 files changed, 65 insertions(+), 44 deletions(-) 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 554152979..5411bd9ce 100644 --- a/scripts/json-files/usage-example-references.json +++ b/scripts/json-files/usage-example-references.json @@ -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", @@ -527,7 +527,7 @@ { "funcKey": "rectangle_around", "title": "A perpetually moving circle which increases and decreases in size, surrounded by a rectangle shape", - "url": "/api/geometry/#rectangle-around", + "url": "/api/geometry/#rectangle-around-functions", "functions": [ "open_window", "create_timer", @@ -608,7 +608,7 @@ { "funcKey": "clear_screen", "title": "Background Color", - "url": "/api/graphics/#clear-screen", + "url": "/api/graphics/#clear-screen-functions", "functions": [ "open_window", "color_blue", @@ -644,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", @@ -665,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", @@ -699,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", @@ -713,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", @@ -735,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", @@ -756,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", @@ -778,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", @@ -800,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", @@ -818,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", @@ -838,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", @@ -858,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", @@ -872,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", @@ -891,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", @@ -910,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", @@ -924,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", @@ -938,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", @@ -964,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", @@ -980,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", @@ -999,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", @@ -1017,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", @@ -1035,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", @@ -1053,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", @@ -1073,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", @@ -1086,7 +1086,7 @@ { "funcKey": "fill_rectangle_on_bitmap", "title": "Cityscape\r", - "url": "/api/graphics/#fill-rectangle-on-bitmap", + "url": "/api/graphics/#fill-rectangle-on-bitmap-functions", "functions": [ "open_window", "load_bitmap", @@ -1104,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", @@ -1144,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", @@ -1157,7 +1157,7 @@ { "funcKey": "fill_triangle_on_bitmap", "title": "Hooray! A Red Hat\r", - "url": "/api/graphics/#fill-triangle-on-bitmap", + "url": "/api/graphics/#fill-triangle-on-bitmap-functions", "functions": [ "open_window", "emojis", @@ -1177,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", @@ -1236,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", @@ -1269,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", @@ -1348,7 +1348,7 @@ { "funcKey": "sprite_bitmap_collision", "title": "Does SplashKit have bugs?\r", - "url": "/api/physics/#sprite-bitmap-collision", + "url": "/api/physics/#sprite-bitmap-collision-functions", "functions": [ "open_window", "load_bitmap", @@ -1452,7 +1452,7 @@ { "funcKey": "create_sprite", "title": "Creating a Player Sprite\r", - "url": "/api/sprites/#create-sprite", + "url": "/api/sprites/#create-sprite-functions", "functions": [ "open_window", "load_bitmap", @@ -1470,7 +1470,7 @@ { "funcKey": "draw_sprite", "title": "Drawing a Player Sprite\r", - "url": "/api/sprites/#draw-sprite", + "url": "/api/sprites/#draw-sprite-functions", "functions": [ "open_window", "load_bitmap", @@ -1629,7 +1629,7 @@ { "funcKey": "write", "title": "Progress Bar Simulation", - "url": "/api/terminal/#write", + "url": "/api/terminal/#write-functions", "functions": [ "write_line", "delay" @@ -1665,7 +1665,7 @@ { "funcKey": "write_line", "title": "Hello World string", - "url": "/api/terminal/#write-line", + "url": "/api/terminal/#write-line-functions", "functions": [] }, { @@ -1777,7 +1777,7 @@ { "funcKey": "rnd", "title": "Coin Flip", - "url": "/api/utilities/#rnd", + "url": "/api/utilities/#rnd-functions", "functions": [ "write_line", "delay", @@ -1839,7 +1839,7 @@ { "funcKey": "close_window", "title": "Starts a countdown to close the window at the push of a button.", - "url": "/api/windows/#close-window", + "url": "/api/windows/#close-window-functions", "functions": [ "open_window", "create_timer", 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);