slide-roulette

Slide Roulette

A slide roulette app: one random topic and 3 (or more) random slides (with just an image) to test your improvising skills!

https://github.com/user-attachments/assets/1f5ebb68-74ec-496f-8157-2bc0210c239a

Other contributors

Contribution guidelines

...just open a PR! 🙃 I'll be happy to review it and merge it if it's good!

First time contributing to an open source project? See First Contributions repo and How to make your first Open Source contribution.

See Slide Roulette Project for more details about next steps (WIP).

How to add a new language

1. Create a new TypeScript file in `src/topics` folder, called as the language code (e.g. `en.ts` for English)

The structure should be as follows:

// src/topics/en.ts
export default {
    languageCode: "en",
    languageName: "English",
    conjunction: "and",
    one: ["shadows", "trees"],
    two: ["with a strange shape of clowns", "created to scare people"]
}

Set the proper conjunction for the language (e.g. and for English, e for Italian, etc.)
Add random plural nouns in the one array (e.g shadows, trees, etc.)
Add random sentences related (or not) to the plural nouns in the two array
Please remember that different levels will compose those 2 arrays:
- Level 1: Randomly select one single element from one array
- Level 2: Randomly select 2 elements from one array and compose them with the conjunction
- Level 3: Starts from Level 2 but adds a random sentence from the two array

2. Import the file `src/topics/en.ts` in the `src/utils/topics.ts` file and add a switch case for that specific file

// src/utils/topics.ts
import en from "../topics/en"; // <- IMPORT FILE

switch (lang) {
    // ...
    case "en":          // <- ADD A SWITCH CASE
        topics = en;
        break;
    // ...
}

3. Add the language code in the `src/config.ts` file inside the `languages.list` array in order to show it in the language selector dropdown menu.

// src/config.ts
const config = {
    //...
    languages: {
        list: [
            // ADD A NEW LANGUAGE HERE
            {code: "en", name: "English"},
        ],
    },
    // ...
}

Thanks to

Qwik
Vercel
ChatGPT for the topics generation
Unsplash for the random images
Lorem Picsum for the random images (if Unsplash is down)
Unsample for the local random images (if Unsplash/Lorem Picsum service is down)
Bing Image Generation for the logo
Play Speechless by Carmelo Ventimiglia for the idea
Canvas Confetti for the confetti effect
Fancy Border Radius Generator for the Jeff Goldblum Image's border

Notes

Error: [PLUGIN_ERROR]: Invalid module "@qwik-city-plan" is not a valid package name imported from /Users/daniel/Projects/github/slide-roulette/node_modules/@builder.io/qwik-city/index.qwik.mjs

See https://github.com/QwikDev/qwik/issues/6024#issuecomment-2029467547
TLDR: move dependencies to devDependencies

Custom topic

Just add a &customTopic=My custom topic at the end of the URL created after clicking "Setup done".

e.g. https://slide-roulette.danielzotti.it/slides/?language=it&level=1&slidesCount=5&orientation=landscape&customTopic=Cissone