Some improvements to games view

Signed-off-by: Cintia Sanchez Garcia <[email protected]>

ui/webapp/package.json

@@ -8,6 +8,7 @@
     "dev": "vite --host",
     "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
     "format:diff": "prettier --list-different \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
+    "prettier:fix": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
     "lint": "eslint src --max-warnings 0",
     "lint:fix": "eslint src --max-warnings 0 --fix",
     "preview": "vite preview"

ui/webapp/src/layout/common/SVGIcon.tsx

@@ -478,6 +478,25 @@ const Flutter = (props: IconProps) => (
   </svg>
 );
 
+const Games = (props: IconProps) => (
+  <svg
+    class={props.class}
+    stroke="currentColor"
+    fill="currentColor"
+    stroke-width="0"
+    viewBox="0 0 24 24"
+    height="1em"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill="none"
+      stroke-width="2"
+      d="M12,6 L12,2 M12,6 C14.4983324,6.0444148 16.0056152,6 17,6 C19,6 21,6.5 22,10 C23,13.5 23,15.5 23,18 C23,20.5 21,21 19,21 C17,21 15.9456522,17 12,17 C8.05434783,17 7,21 5,21 C3,21 1,20.5 1,18 C1,15.5 1,13.5 2,10 C3,6.5 5,6 7,6 C7.99438477,6 9.50166757,6.0444148 12,6 L12,6 L12,6 Z M18,15 C18.5522847,15 19,14.5522847 19,14 C19,13.4477153 18.5522847,13 18,13 C17.4477153,13 17,13.4477153 17,14 C17,14.5522847 17.4477153,15 18,15 Z M14,12 C14.5522847,12 15,11.5522847 15,11 C15,10.4477153 14.5522847,10 14,10 C13.4477153,10 13,10.4477153 13,11 C13,11.5522847 13.4477153,12 14,12 Z M4,12 L10,12 M7,9 L7,15"
+    />
+  </svg>
+);
+
 const GitHub = (props: IconProps) => (
   <svg
     class={props.class}
@@ -1159,6 +1178,7 @@ const icons: ValidComponent[] = [
   Filters,
   Flickr,
   Flutter,
+  Games,
   GitHub,
   GitHubCircle,
   Guide,

ui/webapp/src/layout/common/Searchbar.tsx

@@ -241,7 +241,9 @@ const Searchbar = (props: Props) => {
       <Show when={visibleDropdown() && !isNull(itemsList())}>
         <div
           ref={setDropdownRef}
-          class={`dropdown-menu dropdown-menu-left p-0 w-100 rounded-0 show noFocus overflow-auto visibleScroll ${styles.dropdown} ${styles[`listLength-${itemsList()!.length}`]}`}
+          class={`dropdown-menu dropdown-menu-left p-0 w-100 rounded-0 show noFocus overflow-auto visibleScroll ${
+            styles.dropdown
+          } ${styles[`listLength-${itemsList()!.length}`]}`}
           role="listbox"
           id="search-list"
         >

ui/webapp/src/layout/common/itemModal/RepositoriesSection.tsx

@@ -72,10 +72,14 @@ const RepositoryInfo = (props: RepoProps) => {
               <div class="d-none d-md-flex">
                 <ExternalLink
                   class={`d-flex ${styles.goodFirstBadge}`}
-                  href={`https://github.com/${formatRepoUrl(props.repository.url)}/issues?q=is%3Aopen+is%3Aissue+label%3A"good+first+issue"`}
+                  href={`https://github.com/${formatRepoUrl(
+                    props.repository.url
+                  )}/issues?q=is%3Aopen+is%3Aissue+label%3A"good+first+issue"`}
                 >
                   <img
-                    src={`https://img.shields.io/github/issues/${formatRepoUrl(props.repository.url)}/good%20first%20issue.svg?style=flat-square&label=good%20first%20issues&labelColor=e9ecef&color=6c757d`}
+                    src={`https://img.shields.io/github/issues/${formatRepoUrl(
+                      props.repository.url
+                    )}/good%20first%20issue.svg?style=flat-square&label=good%20first%20issues&labelColor=e9ecef&color=6c757d`}
                   />
                 </ExternalLink>
               </div>

ui/webapp/src/layout/explore/card/Content.tsx

@@ -155,7 +155,11 @@ const Content = (props: Props) => {
                                   <Show when={isSectionInGuide(title, subtitle)}>
                                     <div>
                                       <A
-                                        href={`${GUIDE_PATH}#${getNormalizedName({ title: title, subtitle: subtitle, grouped: true })}`}
+                                        href={`${GUIDE_PATH}#${getNormalizedName({
+                                          title: title,
+                                          subtitle: subtitle,
+                                          grouped: true,
+                                        })}`}
                                         state={{ from: 'explore' }}
                                         class={`position-relative btn btn-link p-0 pe-2 ${styles.btnIcon}`}
                                       >

ui/webapp/src/layout/games/Content.module.css

@@ -14,8 +14,8 @@
 }
 
 .dot {
-  height: 20px;
-  width: 20px;
+  height: 18px;
+  width: 18px;
   border-radius: 50%;
   margin-top: -0.25rem;
 }
@@ -224,8 +224,8 @@
   }
 
   .dot {
-    height: 15px;
-    width: 15px;
+    height: 13px;
+    width: 13px;
   }
 
   .logoContent {

ui/webapp/src/layout/games/Content.tsx

@@ -8,14 +8,18 @@ import { SVGIconKind } from '../../types';
 import isWasmSupported from '../../utils/isWasmSupported';
 import itemsDataGetter from '../../utils/itemsDataGetter';
 import Image from '../common/Image';
+import Loading from '../common/Loading';
+import NoData from '../common/NoData';
 import SVGIcon from '../common/SVGIcon';
 import styles from './Content.module.css';
 import Title from './Title';
 
 const Content = () => {
+  const [loaded, setLoaded] = createSignal<boolean>(false);
   const [activeQuiz, setActiveQuiz] = createSignal<Quiz | null>(null);
   const [quizState, setQuizState] = createSignal<State | undefined>();
   const [selectedAnswer, setSelectedAnswer] = createSignal<number | null>(null);
+  const [error, setError] = createSignal<string | undefined>();
 
   const startGame = async (initiated?: boolean) => {
     const options = new QuizOptions(import.meta.env.MODE === 'development' ? 'http://localhost:8000' : location.origin);
@@ -32,9 +36,12 @@ const Content = () => {
 
   const importGames = async () => {
     if (!isWasmSupported()) {
+      setError("This game requires WebAssembly, but your browser doesn't seem to support it");
+      setLoaded(true);
       return Promise.reject('WebAssembly is not supported in this browser');
     } else {
       await init();
+      setLoaded(true);
       startGame();
     }
   };
@@ -62,10 +69,10 @@ const Content = () => {
                   {quizState()!.current_question.index + 1} / {activeQuiz()!.questions().length}
                 </div>
                 <div class="d-flex flex-row align-items-center ms-4 ms-xl-5">
-                  <div class={`${styles.dot} ${styles.dotCorrect}`} />
+                  <div class={`border border-2 border-light ${styles.dot} ${styles.dotCorrect}`} />
                   <div class={`ms-2 fw-semibold ${styles.score}`}>{quizState()!.score.correct}</div>
 
-                  <div class={`ms-3 ms-xl-4 ${styles.dot} ${styles.dotWrong}`} />
+                  <div class={`ms-3 ms-xl-4 border border-2 border-light  ${styles.dot} ${styles.dotWrong}`} />
                   <div class={`ms-2 fw-semibold ${styles.score}`}>{quizState()!.score.wrong}</div>
                 </div>
               </div>
@@ -85,6 +92,14 @@ const Content = () => {
             </Show>
           </div>
         </div>
+        <Show when={!loaded()}>
+          <Loading />
+        </Show>
+        <Show when={!isUndefined(error())}>
+          <div class="flex-grow-1 d-flex flex-column align-items-center justify-content-center h-100 w-100">
+            <NoData class="bg-light fs-5">{error()}</NoData>
+          </div>
+        </Show>
         <Show when={!isNull(activeQuiz()) && isUndefined(quizState())}>
           <div class="flex-grow-1 d-flex flex-column align-items-center justify-content-center h-100 w-100">
             {/* Init Quiz state */}
@@ -96,7 +111,7 @@ const Content = () => {
             </button>
           </div>
         </Show>
-        <Show when={!isUndefined(quizState())}>
+        <Show when={!isUndefined(quizState()) && !isNull(quizState())}>
           <div class="d-flex flex-column h-100">
             <div class={`flex-grow-1 d-flex flex-column mx-auto py-4 ${styles.quizContent}`}>
               <div

ui/webapp/src/layout/navigation/EmbedModal.tsx

@@ -133,18 +133,24 @@ const EmbedModal = () => {
   const getIFrameUrl = () => {
     let url = `${
       import.meta.env.MODE === 'development' ? 'http://localhost:8000' : window.location.origin
-    }${BASE_PATH}/embed/embed.html?${KEY_PARAM}=${key() || categoriesList()[0].normalized_name}&${DISPLAY_HEADER_PARAM}=${
-      displayHeader() ? 'true' : 'false'
-    }&${DISPLAY_HEADER_CATEGORY_PARAM}=${
+    }${BASE_PATH}/embed/embed.html?${KEY_PARAM}=${
+      key() || categoriesList()[0].normalized_name
+    }&${DISPLAY_HEADER_PARAM}=${displayHeader() ? 'true' : 'false'}&${DISPLAY_HEADER_CATEGORY_PARAM}=${
       displayCategoryTitle() ? 'true' : 'false'
     }&${DISPLAY_CATEGORY_IN_SUBCATEGORY_PARAM}=${
       displayCategoryInSubcategory() ? 'true' : 'false'
     }&${UPPERCASE_TITLE_PARAM}=${
       uppercaseTitle() ? 'true' : 'false'
-    }&${TITLE_ALIGNMENT_PARAM}=${titleAlignment()}&${TITLE_FONT_FAMILY_PARAM}=${titleFontFamily()}&${TITLE_SIZE_PARAM}=${titleSize()}&${ITEMS_STYLE_PARAM}=${selectedStyle()}&${TITLE_BGCOLOR_PARAM}=${encodeURIComponent(bgColor())}&${TITLE_FGCOLOR_PARAM}=${encodeURIComponent(fgColor())}${!isUndefined(window.baseDS.base_path) ? `&base-path=${encodeURIComponent(window.baseDS.base_path)}` : ''}`;
+    }&${TITLE_ALIGNMENT_PARAM}=${titleAlignment()}&${TITLE_FONT_FAMILY_PARAM}=${titleFontFamily()}&${TITLE_SIZE_PARAM}=${titleSize()}&${ITEMS_STYLE_PARAM}=${selectedStyle()}&${TITLE_BGCOLOR_PARAM}=${encodeURIComponent(
+      bgColor()
+    )}&${TITLE_FGCOLOR_PARAM}=${encodeURIComponent(fgColor())}${
+      !isUndefined(window.baseDS.base_path) ? `&base-path=${encodeURIComponent(window.baseDS.base_path)}` : ''
+    }`;
 
     if (selectedStyle() !== Style.Card) {
-      url = `${url}&${DISPLAY_ITEM_NAME_PARAM}=${displayItemName() ? 'true' : 'false'}&${ITEMS_SIZE_PARAM}=${selectedSize()}&${ITEMS_ALIGNMENT_PARAM}=${itemsAlignment()}${
+      url = `${url}&${DISPLAY_ITEM_NAME_PARAM}=${
+        displayItemName() ? 'true' : 'false'
+      }&${ITEMS_SIZE_PARAM}=${selectedSize()}&${ITEMS_ALIGNMENT_PARAM}=${itemsAlignment()}${
         displayItemName() ? `&${ITEM_NAME_SIZE_PARAM}=${itemNameSize()}` : ''
       }${
         itemsSpacingType() === SpacingType.Custom && !isUndefined(itemsSpacing())

ui/webapp/src/layout/navigation/Header.module.css

@@ -49,7 +49,7 @@
   margin-top: -4px;
 }
 
-.githubIcon {
+.linkIcon {
   margin-top: 1px;
 }
 
@@ -82,7 +82,7 @@
   font-size: 1.25rem;
 }
 
-.btnLink:hover .githubIcon {
+.btnLink:hover .linkIcon {
   color: var(--color2);
 }
 

ui/webapp/src/layout/navigation/Header.tsx

@@ -3,7 +3,15 @@ import isEmpty from 'lodash/isEmpty';
 import isUndefined from 'lodash/isUndefined';
 import { createMemo, Show } from 'solid-js';
 
-import { ALL_OPTION, DEFAULT_VIEW_MODE, EXPLORE_PATH, GUIDE_PATH, SCREENSHOTS_PATH, STATS_PATH } from '../../data';
+import {
+  ALL_OPTION,
+  DEFAULT_VIEW_MODE,
+  EXPLORE_PATH,
+  GAMES_PATH,
+  GUIDE_PATH,
+  SCREENSHOTS_PATH,
+  STATS_PATH,
+} from '../../data';
 import { SVGIconKind } from '../../types';
 import isExploreSection from '../../utils/isExploreSection';
 import itemsDataGetter from '../../utils/itemsDataGetter';
@@ -135,6 +143,19 @@ const Header = (props: Props) => {
             <div class={`d-flex align-items-center ${styles.icons}`}>
               <EmbedModal />
               <DownloadDropdown />
+              <Show when={!isUndefined(window.baseDS.games_available)}>
+                <button
+                  class={`btn btn-md text-dark ms-3 px-0 ${styles.btnLink}`}
+                  onClick={() => {
+                    navigate(prepareLink(GAMES_PATH), {
+                      state: { from: 'header' },
+                    });
+                    scrollToTop(false);
+                  }}
+                >
+                  <SVGIcon kind={SVGIconKind.Games} class={`position-relative ${styles.linkIcon}`} />
+                </button>
+              </Show>
               <Show
                 when={
                   !isUndefined(window.baseDS.header) &&
@@ -146,7 +167,7 @@ const Header = (props: Props) => {
                   class={`btn btn-md text-dark ms-3 px-0 ${styles.btnLink}`}
                   href={window.baseDS.header!.links!.github!}
                 >
-                  <SVGIcon kind={SVGIconKind.GitHub} class={`position-relative ${styles.githubIcon}`} />
+                  <SVGIcon kind={SVGIconKind.GitHub} class={`position-relative ${styles.linkIcon}`} />
                 </ExternalLink>
               </Show>
             </div>

ui/webapp/src/layout/navigation/MobileDropdown.tsx

@@ -3,7 +3,7 @@ import isEmpty from 'lodash/isEmpty';
 import isUndefined from 'lodash/isUndefined';
 import { createSignal, Show } from 'solid-js';
 
-import { EXPLORE_PATH, GUIDE_PATH, STATS_PATH } from '../../data';
+import { EXPLORE_PATH, GAMES_PATH, GUIDE_PATH, STATS_PATH } from '../../data';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
 import { SVGIconKind } from '../../types';
 import ExternalLink from '../common/ExternalLink';
@@ -77,6 +77,18 @@ const MobileDropdown = (props: Props) => {
             </A>
           </div>
         </Show>
+        <Show when={!isUndefined(window.baseDS.games_available)}>
+          <div class="dropdown-item mb-2">
+            <A
+              class={`btn btn-link position-relative text-uppercase w-100 text-start fw-semibold text-decoration-none p-0 ${styles.link}`}
+              activeClass="activeLink"
+              href={GAMES_PATH}
+              onClick={closeDropdown}
+            >
+              Games
+            </A>
+          </div>
+        </Show>
         <Show
           when={
             !isUndefined(window.baseDS.header) &&

ui/webapp/src/types.ts

@@ -438,6 +438,7 @@ export enum SVGIconKind {
   Filters,
   Flickr,
   Flutter,
+  Games,
   GitHub,
   GitHubCircle,
   Guide,

ui/webapp/src/utils/overlayData.ts

@@ -103,7 +103,9 @@ export class OverlayData {
           await obj.default();
 
           const input: OverlayInput = {
-            landscape_url: `${import.meta.env.MODE === 'development' ? 'http://localhost:8000' : window.location.origin}${BASE_PATH}`,
+            landscape_url: `${
+              import.meta.env.MODE === 'development' ? 'http://localhost:8000' : window.location.origin
+            }${BASE_PATH}`,
           };
 
           if (!isEmpty(this.params)) {