Initial version: video games collection app with Docker

.dockerignore

@@ -0,0 +1,3 @@
+.git
+.gitignore
+.DS_Store

.env.example

@@ -0,0 +1,2 @@
+# Mets 7000 si le port est libre, sinon garde 7001
+APP_PORT=7001

Dockerfile

@@ -0,0 +1,9 @@
+FROM nginx:1.27-alpine
+
+WORKDIR /usr/share/nginx/html
+
+COPY index.html ./index.html
+COPY styles.css ./styles.css
+COPY app.js ./app.js
+
+EXPOSE 80

app.js

@@ -0,0 +1,337 @@
+const STORAGE_KEY = "video_game_collection_v1";
+
+const initialState = {
+  brands: {
+    SONY: ["PlayStation", "PlayStation 2", "PlayStation 3", "PlayStation 4", "PlayStation 5"],
+    MICROSOFT: ["Xbox", "Xbox 360", "Xbox One", "Xbox One X", "Xbox Series X"],
+  },
+  gamesByConsole: {},
+  selectedBrand: "SONY",
+  selectedConsole: "PlayStation",
+};
+
+const state = loadState();
+normalizeState();
+
+const platformForm = document.getElementById("platformForm");
+const gameForm = document.getElementById("gameForm");
+const brandInput = document.getElementById("brandInput");
+const consoleInput = document.getElementById("consoleInput");
+const titleInput = document.getElementById("titleInput");
+const genreInput = document.getElementById("genreInput");
+const publisherInput = document.getElementById("publisherInput");
+const yearInput = document.getElementById("yearInput");
+const valueInput = document.getElementById("valueInput");
+const loanedToInput = document.getElementById("loanedToInput");
+const gameSubmitBtn = document.getElementById("gameSubmitBtn");
+const cancelEditBtn = document.getElementById("cancelEditBtn");
+
+const brandTabs = document.getElementById("brandTabs");
+const consoleTabs = document.getElementById("consoleTabs");
+const gameSectionTitle = document.getElementById("gameSectionTitle");
+const gamesList = document.getElementById("gamesList");
+const gameCardTemplate = document.getElementById("gameCardTemplate");
+let editingGameId = null;
+
+platformForm.addEventListener("submit", (event) => {
+  event.preventDefault();
+
+  const brand = brandInput.value.trim().toUpperCase();
+  const consoleName = consoleInput.value.trim();
+
+  if (!brand || !consoleName) {
+    return;
+  }
+
+  state.brands[brand] = state.brands[brand] || [];
+  if (!state.brands[brand].includes(consoleName)) {
+    state.brands[brand].push(consoleName);
+  }
+
+  state.selectedBrand = brand;
+  state.selectedConsole = consoleName;
+  state.gamesByConsole[consoleName] = state.gamesByConsole[consoleName] || [];
+
+  platformForm.reset();
+  persist();
+  render();
+});
+
+gameForm.addEventListener("submit", (event) => {
+  event.preventDefault();
+
+  const title = titleInput.value.trim();
+  if (!title || !state.selectedConsole) {
+    return;
+  }
+
+  state.gamesByConsole[state.selectedConsole] = state.gamesByConsole[state.selectedConsole] || [];
+
+  if (editingGameId) {
+    const games = state.gamesByConsole[state.selectedConsole];
+    const idx = games.findIndex((game) => game.id === editingGameId);
+    if (idx !== -1) {
+      games[idx] = {
+        ...games[idx],
+        title,
+        genre: genreInput.value.trim(),
+        publisher: publisherInput.value.trim(),
+        year: yearInput.value ? Number(yearInput.value) : null,
+        value: valueInput.value ? Number(valueInput.value) : null,
+        loanedTo: loanedToInput.value.trim(),
+      };
+    }
+  } else {
+    const game = {
+      id: crypto.randomUUID(),
+      title,
+      genre: genreInput.value.trim(),
+      publisher: publisherInput.value.trim(),
+      year: yearInput.value ? Number(yearInput.value) : null,
+      value: valueInput.value ? Number(valueInput.value) : null,
+      loanedTo: loanedToInput.value.trim(),
+      createdAt: new Date().toISOString(),
+    };
+    state.gamesByConsole[state.selectedConsole].unshift(game);
+  }
+
+  resetEditMode();
+  persist();
+  render();
+});
+
+brandTabs.addEventListener("click", (event) => {
+  if (!(event.target instanceof Element)) {
+    return;
+  }
+  const target = event.target.closest("button[data-brand]");
+  if (!(target instanceof HTMLButtonElement)) {
+    return;
+  }
+
+  const brand = target.dataset.brand;
+  if (!brand) {
+    return;
+  }
+
+  state.selectedBrand = brand;
+  const consoles = state.brands[brand] || [];
+  state.selectedConsole = consoles[0] || "";
+  resetEditMode();
+  persist();
+  render();
+});
+
+consoleTabs.addEventListener("click", (event) => {
+  if (!(event.target instanceof Element)) {
+    return;
+  }
+  const target = event.target.closest("button[data-console]");
+  if (!(target instanceof HTMLButtonElement)) {
+    return;
+  }
+
+  const consoleName = target.dataset.console;
+  if (!consoleName) {
+    return;
+  }
+
+  state.selectedConsole = consoleName;
+  resetEditMode();
+  persist();
+  render();
+});
+
+gamesList.addEventListener("click", (event) => {
+  if (!(event.target instanceof Element)) {
+    return;
+  }
+  const target = event.target.closest("button[data-action]");
+  if (!(target instanceof HTMLButtonElement)) {
+    return;
+  }
+
+  const action = target.dataset.action;
+  const id = target.dataset.id;
+  if (!action || !id || !state.selectedConsole) {
+    return;
+  }
+
+  const games = state.gamesByConsole[state.selectedConsole] || [];
+  const idx = games.findIndex((game) => game.id === id);
+  if (idx === -1) {
+    return;
+  }
+
+  if (action === "delete") {
+    games.splice(idx, 1);
+    if (editingGameId === id) {
+      resetEditMode();
+    }
+  }
+
+  if (action === "toggle-loan") {
+    games[idx].loanedTo = games[idx].loanedTo ? "" : "A renseigner";
+  }
+
+  if (action === "edit") {
+    startEditMode(games[idx]);
+    return;
+  }
+
+  persist();
+  render();
+});
+
+cancelEditBtn.addEventListener("click", () => {
+  resetEditMode();
+});
+
+function render() {
+  renderBrandTabs();
+  renderConsoleTabs();
+  renderGames();
+}
+
+function renderBrandTabs() {
+  const brands = Object.keys(state.brands);
+  brandTabs.innerHTML = "";
+
+  for (const brand of brands) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = `tab ${state.selectedBrand === brand ? "active" : ""}`;
+    button.textContent = brand;
+    button.dataset.brand = brand;
+    brandTabs.append(button);
+  }
+}
+
+function renderConsoleTabs() {
+  const consoles = state.brands[state.selectedBrand] || [];
+  if (!consoles.includes(state.selectedConsole)) {
+    state.selectedConsole = consoles[0] || "";
+  }
+
+  consoleTabs.innerHTML = "";
+  for (const consoleName of consoles) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = `tab ${state.selectedConsole === consoleName ? "active" : ""}`;
+    button.dataset.console = consoleName;
+    const count = (state.gamesByConsole[consoleName] || []).length;
+    button.innerHTML = `<span>${consoleName}</span><span class="count-badge">${count}</span>`;
+    consoleTabs.append(button);
+  }
+}
+
+function renderGames() {
+  const selectedConsole = state.selectedConsole;
+  gameSectionTitle.textContent = selectedConsole ? `Jeux - ${selectedConsole}` : "Jeux";
+  gamesList.innerHTML = "";
+
+  if (!selectedConsole) {
+    gamesList.innerHTML = '<p class="empty">Ajoute une section pour commencer.</p>';
+    return;
+  }
+
+  const games = state.gamesByConsole[selectedConsole] || [];
+  if (!games.length) {
+    gamesList.innerHTML = '<p class="empty">Aucun jeu sur cette console pour le moment.</p>';
+    return;
+  }
+
+  for (const game of games) {
+    const card = gameCardTemplate.content.cloneNode(true);
+    const article = card.querySelector(".game-card");
+    if (editingGameId === game.id) {
+      article.classList.add("editing");
+    }
+
+    card.querySelector(".game-title").textContent = game.title;
+
+    const metaParts = [
+      game.genre ? `Genre: ${game.genre}` : null,
+      game.publisher ? `Editeur: ${game.publisher}` : null,
+      game.year ? `Annee: ${game.year}` : null,
+      game.value != null ? `Cote: ${game.value.toFixed(2)} EUR` : null,
+    ].filter(Boolean);
+
+    card.querySelector(".game-meta").textContent = metaParts.join(" | ") || "Aucune information complementaire";
+
+    card.querySelector(".game-loan").textContent = game.loanedTo
+      ? `Pret en cours: ${game.loanedTo}`
+      : "Disponible dans ta collection";
+
+    const editBtn = card.querySelector('[data-action="edit"]');
+    const toggleBtn = card.querySelector('[data-action="toggle-loan"]');
+    const deleteBtn = card.querySelector('[data-action="delete"]');
+
+    editBtn.dataset.id = game.id;
+    toggleBtn.dataset.id = game.id;
+    toggleBtn.textContent = game.loanedTo ? "Marquer comme rendu" : "Marquer comme prete";
+
+    deleteBtn.dataset.id = game.id;
+
+    gamesList.append(card);
+  }
+}
+
+function startEditMode(game) {
+  editingGameId = game.id;
+  titleInput.value = game.title || "";
+  genreInput.value = game.genre || "";
+  publisherInput.value = game.publisher || "";
+  yearInput.value = game.year || "";
+  valueInput.value = game.value != null ? game.value : "";
+  loanedToInput.value = game.loanedTo || "";
+
+  gameSubmitBtn.textContent = "Mettre a jour le jeu";
+  cancelEditBtn.classList.remove("hidden");
+  renderGames();
+}
+
+function resetEditMode() {
+  editingGameId = null;
+  gameForm.reset();
+  gameSubmitBtn.textContent = "Ajouter le jeu";
+  cancelEditBtn.classList.add("hidden");
+}
+
+function loadState() {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) {
+      return structuredClone(initialState);
+    }
+
+    return JSON.parse(raw);
+  } catch {
+    return structuredClone(initialState);
+  }
+}
+
+function normalizeState() {
+  state.brands = state.brands || structuredClone(initialState.brands);
+  state.gamesByConsole = state.gamesByConsole || {};
+
+  const brands = Object.keys(state.brands);
+  if (!brands.length) {
+    state.brands = structuredClone(initialState.brands);
+  }
+
+  if (!state.selectedBrand || !state.brands[state.selectedBrand]) {
+    state.selectedBrand = Object.keys(state.brands)[0];
+  }
+
+  const consoles = state.brands[state.selectedBrand] || [];
+  if (!state.selectedConsole || !consoles.includes(state.selectedConsole)) {
+    state.selectedConsole = consoles[0] || "";
+  }
+}
+
+function persist() {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+}
+
+render();

docker-compose.yml

@@ -0,0 +1,7 @@
+services:
+  video-games-app:
+    build: .
+    container_name: video-games-app
+    ports:
+      - "${APP_PORT:-7001}:80"
+    restart: unless-stopped

index.html

@@ -0,0 +1,104 @@
+<!doctype html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ma Collection Jeux Video</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main class="app-shell">
+      <header class="hero">
+        <div>
+          <p class="eyebrow">Catalogue perso</p>
+          <h1>Collection Jeux Video</h1>
+          <p class="subtitle">
+            Organise tes jeux par plateforme/console. Ajoute des sections librement
+            et garde une base propre pour la gestion des prêts et de la cote.
+          </p>
+        </div>
+      </header>
+
+      <section class="panel platform-panel">
+        <div class="panel-header">
+          <h2>Plateformes et consoles</h2>
+        </div>
+
+        <form id="platformForm" class="grid-form">
+          <label>
+            Marque (ex: SONY)
+            <input id="brandInput" required placeholder="SONY" />
+          </label>
+          <label>
+            Console (ex: PlayStation 5)
+            <input id="consoleInput" required placeholder="PlayStation 5" />
+          </label>
+          <button type="submit">Ajouter section</button>
+        </form>
+
+        <div id="brandTabs" class="tabs" aria-label="Onglets marques"></div>
+        <div id="consoleTabs" class="tabs secondary" aria-label="Onglets consoles"></div>
+      </section>
+
+      <section class="panel games-panel">
+        <div class="panel-header">
+          <h2 id="gameSectionTitle">Jeux</h2>
+        </div>
+
+        <form id="gameForm" class="grid-form game-form">
+          <label>
+            Titre
+            <input id="titleInput" required placeholder="Final Fantasy X" />
+          </label>
+          <label>
+            Genre
+            <input id="genreInput" placeholder="RPG" />
+          </label>
+          <label>
+            Éditeur
+            <input id="publisherInput" placeholder="Square Enix" />
+          </label>
+          <label>
+            Année
+            <input id="yearInput" type="number" min="1970" max="2100" placeholder="2001" />
+          </label>
+          <label>
+            Cote estimée (€)
+            <input id="valueInput" type="number" min="0" step="0.01" placeholder="45" />
+          </label>
+          <label>
+            Prêté à
+            <input id="loanedToInput" placeholder="Nom (laisser vide si chez toi)" />
+          </label>
+          <button id="gameSubmitBtn" type="submit">Ajouter le jeu</button>
+          <button id="cancelEditBtn" type="button" class="btn-secondary hidden">Annuler edition</button>
+        </form>
+
+        <div id="gamesList" class="games-list"></div>
+      </section>
+    </main>
+
+    <template id="gameCardTemplate">
+      <article class="game-card">
+        <div class="game-main">
+          <h3 class="game-title"></h3>
+          <p class="game-meta"></p>
+          <p class="game-loan"></p>
+        </div>
+        <div class="game-actions">
+          <button class="btn-inline" data-action="edit">Editer</button>
+          <button class="btn-inline" data-action="toggle-loan"></button>
+          <button class="btn-inline danger" data-action="delete">Supprimer</button>
+        </div>
+      </article>
+    </template>
+
+    <script src="app.js"></script>
+  </body>
+</html>

styles.css

@@ -0,0 +1,250 @@
+:root {
+  --bg: #f2f4f8;
+  --surface: #ffffff;
+  --text: #12202f;
+  --muted: #4b5968;
+  --accent: #0a7f5a;
+  --accent-2: #0c5ea8;
+  --danger: #bf2f47;
+  --border: #d6dde6;
+  --shadow: 0 10px 24px rgba(17, 36, 57, 0.08);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: "Space Grotesk", sans-serif;
+  color: var(--text);
+  background:
+    radial-gradient(circle at top right, #d9f0e7 0, transparent 30%),
+    linear-gradient(160deg, #f5f7fa, #ebeff4);
+  min-height: 100vh;
+}
+
+.app-shell {
+  width: min(1100px, 94vw);
+  margin: 2rem auto;
+  display: grid;
+  gap: 1rem;
+}
+
+.hero,
+.panel {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  box-shadow: var(--shadow);
+}
+
+.hero {
+  padding: 1.2rem 1.4rem;
+  background:
+    linear-gradient(125deg, #f8fff7, #f4f8ff),
+    var(--surface);
+}
+
+.eyebrow {
+  margin: 0;
+  color: var(--accent-2);
+  font-weight: 700;
+  text-transform: uppercase;
+  font-size: 0.78rem;
+  letter-spacing: 0.06em;
+}
+
+h1 {
+  margin: 0.2rem 0 0.5rem;
+  font-size: clamp(1.3rem, 2.5vw, 2rem);
+}
+
+.subtitle {
+  margin: 0;
+  color: var(--muted);
+}
+
+.panel {
+  padding: 1rem;
+}
+
+.panel-header h2 {
+  margin: 0 0 0.8rem;
+  font-size: 1.1rem;
+}
+
+.grid-form {
+  display: grid;
+  gap: 0.7rem;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  align-items: end;
+  margin-bottom: 0.9rem;
+}
+
+.game-form {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+label {
+  display: grid;
+  gap: 0.35rem;
+  font-size: 0.9rem;
+  color: var(--muted);
+}
+
+input {
+  width: 100%;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 0.65rem 0.7rem;
+  font-family: inherit;
+  font-size: 0.95rem;
+}
+
+input:focus {
+  outline: 2px solid color-mix(in hsl, var(--accent-2), white 60%);
+  outline-offset: 1px;
+}
+
+button {
+  border: 0;
+  border-radius: 10px;
+  padding: 0.7rem 0.9rem;
+  font-family: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  background: var(--accent);
+  color: white;
+}
+
+.tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  margin-top: 0.7rem;
+}
+
+.tab {
+  background: #e9eef5;
+  color: var(--text);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+.count-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.45rem;
+  height: 1.45rem;
+  border-radius: 999px;
+  padding: 0 0.35rem;
+  font-size: 0.78rem;
+  font-weight: 700;
+  color: #173a5d;
+  background: #d3e4f7;
+}
+
+.tab.active {
+  background: var(--accent-2);
+  color: #fff;
+}
+
+.tab.active .count-badge {
+  background: color-mix(in hsl, white, transparent 25%);
+  color: #ffffff;
+}
+
+.tabs.secondary .tab.active {
+  background: var(--accent);
+}
+
+.games-list {
+  display: grid;
+  gap: 0.6rem;
+}
+
+.empty {
+  color: var(--muted);
+  font-style: italic;
+  padding: 0.5rem 0;
+}
+
+.game-card {
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 0.85rem;
+  display: flex;
+  justify-content: space-between;
+  gap: 0.8rem;
+  align-items: center;
+}
+
+.game-card.editing {
+  border-color: color-mix(in hsl, var(--accent-2), white 35%);
+  box-shadow: 0 0 0 2px color-mix(in hsl, var(--accent-2), white 80%);
+}
+
+.game-title {
+  margin: 0;
+  font-size: 1rem;
+}
+
+.game-meta,
+.game-loan {
+  margin: 0.25rem 0 0;
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
+.game-actions {
+  display: grid;
+  gap: 0.45rem;
+}
+
+.btn-inline {
+  background: #dde8f5;
+  color: #1e3045;
+  padding: 0.45rem 0.65rem;
+  font-size: 0.85rem;
+}
+
+.btn-inline.danger {
+  background: #fbe7eb;
+  color: var(--danger);
+}
+
+.btn-secondary {
+  background: #dce4ee;
+  color: #1b2d43;
+}
+
+.hidden {
+  display: none;
+}
+
+@media (max-width: 900px) {
+  .grid-form,
+  .game-form {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 640px) {
+  .grid-form,
+  .game-form {
+    grid-template-columns: 1fr;
+  }
+
+  .game-card {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .game-actions {
+    width: 100%;
+    grid-template-columns: 1fr 1fr;
+  }
+}