Add track creations page (wip)

utils-circuits.php

@@ -187,7 +187,7 @@ function countRows($sql,&$params) {
 	$query = toSQLSort($sql,$params);
 	$countQuery = preg_replace('#^SELECT.+? FROM #', 'SELECT COUNT(*) AS nb FROM ', $query);
 	$count = mysql_fetch_array(mysql_query($countQuery));
-	return $count['nb'];
+	return +$count['nb'];
 }
 function escape($str) {
 	return str_replace('</script>', '<\/script>', str_replace('%u', '\\u', str_replace('"', '\\"', str_replace('\\', '\\\\', $str))));

v2/app/components/ClassicPage/ClassicPage.tsx

@@ -21,11 +21,11 @@ function Flag({ nLanguage, src: srcData, alt, page, homepage = false }) {
   let url;
   let language = useLanguage();
   if (homepage) {
-    url = nLanguage ? 'en.php' : 'fr.php';
+    url = nLanguage ? '/en.php' : '/fr.php';
     alt = nLanguage ? 'Home - Mario Kart PC' : 'Accueil - Mario Kart PC';
   }
   else
-    url = 'changeLanguage.php?nLanguage=' + nLanguage + '&page=' + page;
+    url = '/changeLanguage.php?nLanguage=' + nLanguage + '&page=' + page;
   const chosen = (nLanguage === language);
   function handleClick() {
     if (chosen)

v2/app/components/Rating/Rating.module.scss

@@ -1,4 +1,5 @@
 .Rating {
+	border-collapse: collapse;
 	.star0, .star1 {
 		width: 15px;
 		height: 15px;

v2/app/components/Rating/Rating.tsx

@@ -1,4 +1,4 @@
-import style from "./Rating.module.scss"
+import styles from "./Rating.module.scss"
 import useLanguage, { plural } from "../../hooks/useLanguage";
 
 type Props = {
@@ -15,15 +15,15 @@ function Rating({ rating, nbRatings, label }: Props) {
   const rest = rating - lastRating;
   const restW = 3 + Math.round(9 * rest);
 
-  return <table title={ratingTitle} className={style.Rating}>
+  return <table title={ratingTitle} className={styles.Rating}>
     <tbody>
       <tr>
-        {Object.keys([...Array(lastRating)]).map((i) => <td key={i} className={style.star1}></td>)}
+        {Object.keys([...Array(lastRating)]).map((i) => <td key={i} className={styles.star1}></td>)}
         {(rest > 0) && <>
-          <td className={style.startStar} style={{ width: restW }}></td>
-          <td className={style.endStar} style={{ width: 15 - restW }}></td>
+          <td className={styles.startStar} style={{ width: restW }}></td>
+          <td className={styles.endStar} style={{ width: 15 - restW }}></td>
         </>}
-        {Object.keys([...Array(5 - nextRating)]).map((i) => <td key={i} className={style.star0}></td>)}
+        {Object.keys([...Array(5 - nextRating)]).map((i) => <td key={i} className={styles.star0}></td>)}
         {label && <td>{label}</td>}
       </tr>
     </tbody>

v2/app/components/TrackCreationCard/TrackCreationCard.module.scss

@@ -0,0 +1,157 @@
+.circuit-poster {
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+
+  line-height: normal;
+  position: relative;
+  font-family: Helvetica, arial, sans-serif;
+  text-align: center;
+  width: 130px;
+  height: 130px;
+  margin: 8px 20px;
+  display: inline-block;
+  &:hover {
+    background-color: rgba(0,0,0,0.2);
+  }
+
+  @media screen and (max-width: 880px) {
+		width: 110px;
+		height: 110px;
+    .circuit-name {
+      font-size: 0.9em;
+    }
+  }
+
+  .cup-poster {
+    background-repeat: no-repeat;
+    background-position: top left, top right, bottom left, bottom right;
+    background-size: 50% 50%;
+    background-size: calc(50% + 1px) calc(50% + 1px);
+  }
+  .circuit-rate {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(255,255,255, 0.6);
+    opacity: 0.8;
+    padding: 2px 0 3px 0;
+  }
+  &:hover .circuit-rate {
+    opacity: 1;
+  }
+  .circuit-star {
+    width: 15px;
+    position: relative;
+  }
+  .circuit-star > div {
+    position: absolute;
+    left: 0;
+    top: 1px;
+    overflow: hidden;
+  }
+  .circuit-name {
+    display: none;
+    position: absolute;
+    left: 10%;
+    top: 50%;
+    width: 80%;
+    -webkit-transform: translateY(-50%);
+    -moz-transform: translateY(-50%);
+    -o-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+    background-color: white;
+    color: black;
+    opacity: 0.8;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    > div:first-child {
+      word-wrap: break-word;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+  }
+  .circuit-author {
+    margin: 1px 3px;
+    font-size: 0.7em;
+    opacity: 0.6;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .circuit-author img {
+    height: 0.8em;
+    margin-left: 2px;
+    margin-right: 3px;
+  }
+  .circuit-author span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .circuit-nbcomments {
+    position: absolute;
+    left: 0;
+    top: 0;
+    color: black;
+    background-color: rgba(255,255,255, 0.6);
+    padding: 2px 5px;
+    border-bottom: solid 1px #AAA;
+    border-right: solid 1px #AAA;
+    border-bottom-right-radius: 3px;
+    font-size: 12px;
+  }
+  .circuit-preview {
+    display: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+    background-color: rgba(255,255,255, 0.6);
+    padding: 0px 5px;
+    border-bottom: solid 1px #AAC;
+    border-left: solid 1px #AAC;
+    border-bottom-left-radius: 3px;
+    cursor: zoom-in;
+  }
+  .circuit-preview:hover {
+    background-color: rgba(230,230,230, 0.6);
+  }
+  .circuit-suppr {
+    position: absolute;
+    left: 40%;
+    width: 20%;
+    background-color: #FEE;
+    opacity: 0.7;
+    color: #F00;
+  }
+  .circuit-suppr:hover {
+    opacity: 1;
+  }
+  .circuit-nbcomments img {
+    height: 12px;
+    position: relative;
+    top: 2px;
+  }
+  .circuit-preview img {
+    height: 12px;
+  }
+  &:hover .circuit-name {
+    display: inline-block;
+  }
+  &:hover .circuit-preview {
+    display: inline-block;
+  }
+  .circuit-star {
+    display: inline-block;
+    padding-top: 1px;
+  }
+}

v2/app/components/TrackCreationCard/TrackCreationCard.tsx

@@ -0,0 +1,57 @@
+import styles from "./TrackCreationCard.module.scss"
+import useLanguage, { plural } from "../../hooks/useLanguage";
+
+import userIcon from "../../images/icons/user.png"
+import commentIcon from "../../images/icons/comment.png"
+import previewIcon from "../../images/icons/preview.png"
+import Rating from "../Rating/Rating";
+import { MouseEvent } from "react";
+
+export type TrackCreation = {
+  id: number,
+  author: string,
+  cicon: string,
+  icons: string[],
+  href: string,
+  isCup: boolean,
+  name: string,
+  nbComments: number,
+  publicationDate: number,
+  rating: number,
+  nbRatings: number
+}
+
+type Props = {
+  creation: TrackCreation;
+  onPreview: (creation: TrackCreation) => void;
+}
+function TrackCreationCard({ creation, onPreview }: Props) {
+  const language = useLanguage();
+
+  function handlePreview(e: MouseEvent, creation: TrackCreation) {
+    e.preventDefault();
+    onPreview(creation);
+  }
+
+  return <a href={creation.href} title={creation.name} className={styles["circuit-poster"]}
+    style={{ backgroundImage: creation.icons ? creation.icons.map(src => `url('images/creation_icons/${src}')`).join(",") : undefined }}>
+    <div className={styles["circuit-name"]}>
+      <div className={styles["circuit-title"]}>{creation.name || (language ? "Untitled" : "Sans titre")}</div>
+      {creation.author && <div className={styles["circuit-author"]}>
+        <img src={userIcon.src} alt={language ? "Author" : "Auteur"} />
+        <span>{creation.author}</span>
+      </div>}
+    </div>
+    <div className={styles["circuit-rate"]}>
+      <Rating rating={creation.rating} nbRatings={creation.nbRatings} />
+    </div>
+    <div className={styles["circuit-nbcomments"]} title={plural(language ? "%n comment%s" : "%n commentaire%s", creation.nbComments)}>
+      <img src={commentIcon.src} alt={language ? "Comments" : "Commentaires"} /><span> {creation.nbComments}</span>
+    </div>
+    <div className={styles["circuit-preview"]} title={language ? "Preview" : "Aperçu"} onClick={(e) => handlePreview(e, creation)}>
+      <img src={previewIcon.src} alt={language ? "Preview" : "Aperçu"} />
+    </div>
+  </a>
+}
+
+export default TrackCreationCard;

v2/app/helpers/uris.ts

@@ -0,0 +1,12 @@
+export function buildQuery(params: Record<string, string | number | (string | number)[]>) {
+  return Object.entries(params)
+    .filter(([_key, value]) => value != null)
+    .map(([key, value]) => {
+      if (Array.isArray(value)) {
+        return value.map((v, i) => `${key}[${i}]=${encodeURIComponent(v)}`).join("&");
+      } else {
+        return `${key}=${encodeURIComponent(value)}`;
+      }
+    })
+    .join("&");
+}