Add Trivia Game App to examples (#4898)

* add trivia game app example * delete unused files, move triviaMachine to src and refactor guard with assertEvent --------- Co-authored-by: Javier Tinoco <javiertinoco@MacBook-Pro-de-Javier.local>
statelyai · May 16, 2024 · 34ec48c · 34ec48c
1 parent e405ef1
commit 34ec48c
Show file tree

Hide file tree

Showing 43 changed files with 8,149 additions and 0 deletions.
diff --git a/examples/trivia-game-example/.eslintrc.cjs b/examples/trivia-game-example/.eslintrc.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/examples/trivia-game-example/.gitignore b/examples/trivia-game-example/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/trivia-game-example/README.md b/examples/trivia-game-example/README.md
@@ -0,0 +1,40 @@
+# Trivia Game Rick & Morty
+
+This app is a trivia game based on the Rick & Morty characters. The user has to select the right character based on a single image and four different options. The rules are the following:
+- The user has 3 lifes and zero points at the start
+- If the user guesses the character correctly then 10 points will be awarded
+- If the user makes an incorrect guess then one life will be taken
+- The user has one clue for each question
+- The game is won by achieving 100 points
+- The game is lost if all lifes are lost
+- You can reset and play again after losing or winning
+
+## Machine Context
+In order for the machine to work, we need to define first the context for it. The context has all the variables needed that the machine can access and modify.
+<img width="504" alt="image" src="https://github.com/natar10/trivia-rm/assets/12553364/c1ab0219-d76a-4b9b-b087-4e36094991be">
+
+## States and transitions
+A machine is composed of states. Each state defines where the app can be, and also the logic that can be applied. If we need to move to another state, we call a transition. The transitions define the destination and origin state to where the app can go to. 
+For example:
+<img width="734" alt="image" src="https://github.com/natar10/trivia-rm/assets/12553364/29d90483-0366-4a3c-b7b7-c071c63e4579">
+
+Here we have our initial state: `questionStart`. To move to another state, we use the transition `user.selectAnswer`. If the answer is correct we'll go to the `correctAnswer` state, otherwise we'll end up in the `incorrectAnswer` state. 
+
+You can see the complete machine for this project [here](https://stately.ai/registry/editor/f64904b1-65f9-4946-aace-ddfc9fd05c29?machineId=aec325d6-2d51-4334-afc4-f2c02a67aa05)
+
+### Installation
+
+Install all required packages with:
+
+```bash
+pnpm install
+```
+
+### Development
+
+Start the development server on http://localhost:5173
+
+```bash
+yarn dev
+```
+
diff --git a/examples/trivia-game-example/index.html b/examples/trivia-game-example/index.html
@@ -0,0 +1,81 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vite + React + TS</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+<style lang="sass">
+  @import url("https://fonts.googleapis.com/css?family=Shadows+Into+Light");
+  @import "~bootstrap/scss/bootstrap.scss";
+
+  .trivia {
+    font-family: "Shadows Into Light", cursive;
+    font-size: 120px;
+    text-align: center;
+  }
+
+  .small-trivia {
+    font-family: "Shadows Into Light", cursive;
+    font-size: 60px;
+    text-align: center;
+  }
+
+  body {
+    font-family: "Shadows Into Light", cursive;
+  }
+
+  .list-group-item {
+    font-size: 1.8em;
+  }
+
+  .img-loading {
+    width: 300px;
+    height: 300px;
+    align-self: center;
+    margin: 0 auto;
+    padding: 100px;
+    border: solid 3px #13acc9;
+    border-radius: 100%;
+    box-shadow: 2px 0px 14px #efff67;
+  }
+
+  .img-character {
+    width: 300px;
+    height: 300px;
+    align-self: center;
+    margin: 0 auto;
+    border: solid 3px #13acc9;
+    border-radius: 100%;
+    box-shadow: 2px 0px 14px #efff67;
+  }
+
+  .small-spinner {
+    margin: 0px 3px 16px 0;
+  }
+
+  li {
+    font-size: 1.7em;
+  }
+
+  @media only screen and (max-width: 800px) {
+    .bigImage {
+      width: 90%;
+    }
+  }
+
+  @media only screen and (min-width: 801px) {
+    .bigImage {
+      width: 40%;
+    }
+  }
+</style>
+
+</html>
diff --git a/examples/trivia-game-example/package.json b/examples/trivia-game-example/package.json
@@ -0,0 +1,52 @@
+{
+  "name": "trivia-game-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@xstate/react": "^4.1.1",
+    "axios": "^1.6.8",
+    "bootstrap": "^4.6.2",
+    "jest": "^26.6.3",
+    "jquery": "^3.7.0",
+    "popper.js": "^1.16.1",
+    "postcss-cli": "^8.3.1",
+    "ramda": "^0.27.2",
+    "react": "^18.2.0",
+    "react-bootstrap": "^1.6.7",
+    "react-dom": "^18.2.0",
+    "react-error-boundary": "^3.1.4",
+    "react-loading-overlay-ts": "^2.0.2",
+    "react-router": "^6.14.2",
+    "react-router-dom": "^6.14.2",
+    "react-select": "^4.3.1",
+    "sinon": "^9.2.4",
+    "styled-components": "^5.3.11",
+    "whatwg-fetch": "^3.6.17",
+    "xstate": "^5.13.0"
+  },
+  "devDependencies": {
+    "@types/ramda": "^0.30.0",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@types/styled-components": "^5.1.34",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "postcss": "^8.4.38",
+    "sass": "^1.77.1",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0"
+  }
+}