Slide Roulette

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

slide-roulette-demo-small.mp4

Other contributors

• Marinella Mastrosimone (UX/UI)
• Massimiliano Attianese (Dev)
• Antonio Rocco (Dev)

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 QwikDev/qwik#6024 (comment)
• 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

TODO

• Add dark/light theme switcher button
• Pages and slides transitions
• Offline mode (PWA)
• Custom topics (textarea + local storage? remote url?)