{"id":1474,"date":"2026-10-24T17:26:54","date_gmt":"2026-10-24T17:26:54","guid":{"rendered":"https:\/\/savoieretrogames.fr\/?page_id=1474"},"modified":"2026-10-24T22:38:51","modified_gmt":"2026-10-24T22:38:51","slug":"nos-jeux-video","status":"publish","type":"page","link":"https:\/\/savoieretrogames.fr\/index.php\/nos-jeux-video\/","title":{"rendered":"NOS JEUX VIDEO"},"content":{"rendered":"
\n \n
\n \n \n
\n \n
\n \n
\n \n
\n
\n \n \n
\n \n
\n \n
\r\n\r\n\r\n \r\n \r\n Gestion de Collection R\u00e9trogaming & Jeux Vid\u00e9o<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Lato:wght@400;700;900&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n :root {\r\n --bg-dark: #11182b;\r\n --panel-bg: rgba(17, 24, 43, 0.9);\r\n --panel-border: rgba(124, 92, 255, 0.3);\r\n --purple: #7c5cff;\r\n --cyan: #00f0ff;\r\n --pink: #ff4fa3;\r\n --green: #10b981;\r\n --yellow: #f59e0b;\r\n --red: #ef4444;\r\n --text-light: #f5f7ff;\r\n --text-muted: #94a3b8;\r\n }\r\n\r\n * { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n body {\r\n background-color: var(--bg-dark);\r\n color: var(--text-light);\r\n font-family: 'Lato', Arial, sans-serif;\r\n padding: 30px 15px;\r\n line-height: 1.5;\r\n }\r\n\r\n .srg-container {\r\n max-width: 1300px;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* HEADER *\/\r\n .srg-header {\r\n text-align: center;\r\n margin-bottom: 25px;\r\n }\r\n .srg-header h1 {\r\n font-size: clamp(2rem, 5vw, 2.8rem);\r\n font-weight: 900;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n }\r\n .srg-header h1 span { color: var(--pink); }\r\n .srg-header p { color: var(--text-muted); font-size: 1.1rem; margin-top: 5px; }\r\n\r\n \/* BARRE DE SYNCHRONISATION MULTI-MACHINES *\/\r\n .srg-sync-bar {\r\n background: rgba(124, 92, 255, 0.1);\r\n border: 1px solid var(--panel-border);\r\n border-radius: 12px;\r\n padding: 15px 20px;\r\n margin-bottom: 25px;\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 15px;\r\n }\r\n .srg-sync-info {\r\n font-size: 0.9rem;\r\n color: var(--text-light);\r\n }\r\n .srg-sync-info strong { color: var(--cyan); }\r\n .srg-sync-actions {\r\n display: flex;\r\n gap: 10px;\r\n flex-wrap: wrap;\r\n }\r\n .srg-btn-sync {\r\n background: rgba(255, 255, 255, 0.08);\r\n border: 1px solid var(--panel-border);\r\n color: var(--text-light);\r\n padding: 8px 14px;\r\n border-radius: 8px;\r\n font-size: 0.85rem;\r\n font-weight: 700;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n }\r\n .srg-btn-sync:hover {\r\n background: var(--purple);\r\n border-color: var(--purple);\r\n color: #fff;\r\n }\r\n\r\n \/* FILTRES *\/\r\n .srg-filters-card {\r\n background: var(--panel-bg);\r\n border: 1px solid var(--panel-border);\r\n border-radius: 16px;\r\n padding: 22px;\r\n margin-bottom: 35px;\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\r\n gap: 15px;\r\n align-items: end;\r\n }\r\n\r\n .srg-filter-group label {\r\n display: block;\r\n font-size: 0.8rem;\r\n font-weight: 700;\r\n color: var(--cyan);\r\n margin-bottom: 6px;\r\n text-transform: uppercase;\r\n }\r\n\r\n .srg-select, .srg-input {\r\n width: 100%;\r\n padding: 10px 12px;\r\n background: rgba(9, 12, 21, 0.85);\r\n border: 1px solid var(--panel-border);\r\n border-radius: 8px;\r\n color: #fff;\r\n font-size: 0.9rem;\r\n font-family: inherit;\r\n }\r\n .srg-select:focus, .srg-input:focus {\r\n outline: none;\r\n border-color: var(--pink);\r\n box-shadow: 0 0 10px rgba(255, 79, 163, 0.25);\r\n }\r\n\r\n .srg-reset-btn {\r\n background: rgba(255, 255, 255, 0.08);\r\n border: 1px solid var(--panel-border);\r\n color: var(--text-light);\r\n padding: 10px;\r\n border-radius: 8px;\r\n font-weight: 700;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n width: 100%;\r\n }\r\n .srg-reset-btn:hover {\r\n background: var(--pink);\r\n border-color: var(--pink);\r\n }\r\n\r\n \/* EN-T\u00caTE CATALOGUE ET BASCULE D'AFFICHAGE *\/\r\n .srg-catalog-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 20px;\r\n padding-bottom: 10px;\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\r\n flex-wrap: wrap;\r\n gap: 15px;\r\n }\r\n .srg-catalog-header-left {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n }\r\n .srg-catalog-header h2 {\r\n font-size: 1.4rem;\r\n text-transform: uppercase;\r\n font-weight: 900;\r\n }\r\n .srg-count-badge {\r\n background: var(--purple);\r\n color: #fff;\r\n padding: 4px 12px;\r\n border-radius: 20px;\r\n font-weight: 900;\r\n font-size: 0.9rem;\r\n }\r\n\r\n \/* COMMUTATEUR BLOC \/ LIGNE *\/\r\n .srg-view-toggle {\r\n display: flex;\r\n background: rgba(9, 12, 21, 0.85);\r\n border: 1px solid var(--panel-border);\r\n border-radius: 10px;\r\n padding: 4px;\r\n gap: 4px;\r\n }\r\n .srg-view-btn {\r\n background: transparent;\r\n border: none;\r\n color: var(--text-muted);\r\n padding: 6px 12px;\r\n border-radius: 6px;\r\n font-size: 0.85rem;\r\n font-weight: 900;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n }\r\n .srg-view-btn.active {\r\n background: var(--purple);\r\n color: #fff;\r\n }\r\n\r\n \/* MODE BLOC (GRILLE) *\/\r\n .srg-games-grid.view-blocks {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));\r\n gap: 25px;\r\n margin-bottom: 50px;\r\n }\r\n\r\n .srg-games-grid.view-blocks .srg-game-card {\r\n background: var(--panel-bg);\r\n border: 1px solid var(--panel-border);\r\n border-radius: 16px;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n transition: transform 0.2s, box-shadow 0.2s;\r\n }\r\n .srg-games-grid.view-blocks .srg-game-card:hover {\r\n transform: translateY(-4px);\r\n box-shadow: 0 8px 24px rgba(124, 92, 255, 0.25);\r\n }\r\n\r\n .srg-games-grid.view-blocks .srg-cover-box {\r\n width: 100%;\r\n height: 220px;\r\n background: #090c15;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n overflow: hidden;\r\n position: relative;\r\n }\r\n .srg-games-grid.view-blocks .srg-cover-box img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n .srg-games-grid.view-blocks .srg-no-cover {\r\n color: var(--text-muted);\r\n font-size: 2rem;\r\n }\r\n\r\n .srg-games-grid.view-blocks .srg-badge-platform {\r\n position: absolute;\r\n top: 12px;\r\n left: 12px;\r\n background: rgba(9, 12, 21, 0.85);\r\n border: 1px solid var(--cyan);\r\n color: var(--cyan);\r\n font-weight: 900;\r\n padding: 4px 10px;\r\n border-radius: 6px;\r\n font-size: 0.75rem;\r\n backdrop-filter: blur(4px);\r\n }\r\n\r\n .srg-games-grid.view-blocks .srg-badge-age {\r\n position: absolute;\r\n top: 12px;\r\n right: 12px;\r\n background: rgba(239, 68, 68, 0.85);\r\n border: 1px solid var(--red);\r\n color: #fff;\r\n font-weight: 900;\r\n padding: 4px 8px;\r\n border-radius: 6px;\r\n font-size: 0.75rem;\r\n backdrop-filter: blur(4px);\r\n }\r\n\r\n .srg-games-grid.view-blocks .srg-game-body {\r\n padding: 18px;\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n }\r\n\r\n .srg-games-grid.view-blocks .srg-game-title {\r\n font-size: 1.15rem;\r\n font-weight: 900;\r\n color: #fff;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .srg-games-grid.view-blocks .srg-game-details {\r\n font-size: 0.85rem;\r\n color: var(--text-muted);\r\n margin-bottom: 12px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n }\r\n\r\n \/* MODE LIGNE (LISTE) *\/\r\n .srg-games-grid.view-rows {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 12px;\r\n margin-bottom: 50px;\r\n }\r\n\r\n .srg-games-grid.view-rows .srg-game-card {\r\n background: var(--panel-bg);\r\n border: 1px solid var(--panel-border);\r\n border-radius: 12px;\r\n padding: 12px 18px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 15px;\r\n transition: background 0.2s;\r\n }\r\n .srg-games-grid.view-rows .srg-game-card:hover {\r\n background: rgba(124, 92, 255, 0.12);\r\n }\r\n\r\n .srg-games-grid.view-rows .srg-cover-box {\r\n width: 50px;\r\n height: 50px;\r\n min-width: 50px;\r\n background: #090c15;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n }\r\n .srg-games-grid.view-rows .srg-cover-box img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n .srg-games-grid.view-rows .srg-no-cover {\r\n font-size: 1.2rem;\r\n }\r\n .srg-games-grid.view-rows .srg-badge-platform,\r\n .srg-games-grid.view-rows .srg-badge-age {\r\n display: none;\r\n }\r\n\r\n .srg-games-grid.view-rows .srg-game-body {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n width: 100%;\r\n gap: 15px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .srg-games-grid.view-rows .srg-game-title {\r\n font-size: 1.05rem;\r\n font-weight: 900;\r\n color: #fff;\r\n min-width: 180px;\r\n flex: 1.5;\r\n }\r\n\r\n .srg-games-grid.view-rows .srg-game-details {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 12px;\r\n font-size: 0.85rem;\r\n color: var(--text-muted);\r\n margin-bottom: 0;\r\n flex: 3.5;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .srg-games-grid.view-rows .srg-tags-row {\r\n margin-bottom: 0;\r\n }\r\n\r\n \/* TAGS ET ACTIONS COMMUNS *\/\r\n .srg-tags-row {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 6px;\r\n margin-bottom: 12px;\r\n }\r\n .srg-tag {\r\n padding: 3px 8px;\r\n border-radius: 6px;\r\n font-size: 0.75rem;\r\n font-weight: 700;\r\n white-space: nowrap;\r\n }\r\n .srg-tag.genre-tag { background: rgba(124, 92, 255, 0.18); color: var(--purple); border: 1px solid var(--purple); }\r\n .srg-tag.media-tag { background: rgba(0, 240, 255, 0.15); color: var(--cyan); border: 1px solid var(--cyan); }\r\n .srg-tag.box-yes { background: rgba(16, 185, 129, 0.15); color: var(--green); border: 1px solid var(--green); }\r\n .srg-tag.box-no { background: rgba(245, 158, 11, 0.15); color: var(--yellow); border: 1px solid var(--yellow); }\r\n\r\n .srg-tag.state-bon { background: rgba(16, 185, 129, 0.15); color: var(--green); border: 1px solid var(--green); }\r\n .srg-tag.state-correct { background: rgba(245, 158, 11, 0.15); color: var(--yellow); border: 1px solid var(--yellow); }\r\n .srg-tag.state-mauvais { background: rgba(239, 68, 68, 0.15); color: var(--red); border: 1px solid var(--red); }\r\n\r\n .srg-card-actions {\r\n display: flex;\r\n gap: 8px;\r\n white-space: nowrap;\r\n }\r\n\r\n .srg-edit-btn {\r\n background: rgba(0, 240, 255, 0.15);\r\n border: 1px solid var(--cyan);\r\n color: var(--cyan);\r\n padding: 8px 12px;\r\n border-radius: 8px;\r\n font-size: 0.82rem;\r\n font-weight: 900;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n }\r\n .srg-edit-btn:hover {\r\n background: var(--cyan);\r\n color: #090c15;\r\n }\r\n\r\n .srg-delete-btn {\r\n background: rgba(239, 68, 68, 0.15);\r\n border: 1px solid var(--red);\r\n color: var(--red);\r\n padding: 8px 12px;\r\n border-radius: 8px;\r\n font-size: 0.82rem;\r\n font-weight: 900;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n }\r\n .srg-delete-btn:hover {\r\n background: var(--red);\r\n color: #fff;\r\n }\r\n\r\n .srg-empty-msg {\r\n grid-column: 1 \/ -1;\r\n text-align: center;\r\n padding: 40px;\r\n background: var(--panel-bg);\r\n border-radius: 16px;\r\n border: 1px dashed var(--panel-border);\r\n color: var(--text-muted);\r\n }\r\n\r\n \/* FORMULAIRE ET MODALE *\/\r\n .srg-add-card {\r\n background: var(--panel-bg);\r\n border: 1px solid var(--panel-border);\r\n border-radius: 16px;\r\n padding: 30px;\r\n max-width: 900px;\r\n margin: 0 auto;\r\n }\r\n .srg-add-card h2 {\r\n font-size: 1.4rem;\r\n color: #fff;\r\n font-weight: 900;\r\n margin-bottom: 20px;\r\n text-transform: uppercase;\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\r\n padding-bottom: 10px;\r\n }\r\n\r\n .srg-form-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\r\n gap: 18px;\r\n }\r\n\r\n .srg-form-full { grid-column: 1 \/ -1; }\r\n\r\n .srg-add-card label, .srg-modal label {\r\n display: block;\r\n font-size: 0.85rem;\r\n font-weight: 700;\r\n margin-bottom: 6px;\r\n }\r\n .srg-add-card label span, .srg-modal label span { color: var(--pink); }\r\n\r\n .srg-submit-btn {\r\n width: 100%;\r\n padding: 14px;\r\n background: linear-gradient(135deg, var(--purple), #5c40dc);\r\n border: none;\r\n border-radius: 10px;\r\n color: #fff;\r\n font-size: 1rem;\r\n font-weight: 900;\r\n cursor: pointer;\r\n transition: all 0.25s;\r\n margin-top: 20px;\r\n }\r\n .srg-submit-btn:hover {\r\n background: linear-gradient(135deg, var(--pink), #e0328b);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .srg-alert {\r\n margin-top: 15px;\r\n padding: 12px;\r\n border-radius: 8px;\r\n font-weight: bold;\r\n text-align: center;\r\n display: none;\r\n }\r\n .srg-alert.success { background: rgba(16, 185, 129, 0.2); color: var(--green); }\r\n .srg-alert.error { background: rgba(239, 68, 68, 0.2); color: var(--red); }\r\n\r\n \/* MODALE DE MODIFICATION *\/\r\n .srg-modal-overlay {\r\n position: fixed;\r\n top: 0; left: 0; right: 0; bottom: 0;\r\n background: rgba(9, 12, 21, 0.85);\r\n backdrop-filter: blur(5px);\r\n display: none;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 9999;\r\n padding: 15px;\r\n }\r\n .srg-modal {\r\n background: var(--bg-dark);\r\n border: 1px solid var(--panel-border);\r\n border-radius: 18px;\r\n padding: 30px;\r\n width: 100%;\r\n max-width: 850px;\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n position: relative;\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.5);\r\n }\r\n .srg-modal-close {\r\n position: absolute;\r\n top: 18px; right: 20px;\r\n background: none;\r\n border: none;\r\n color: var(--text-muted);\r\n font-size: 1.5rem;\r\n cursor: pointer;\r\n }\r\n .srg-modal-close:hover { color: #fff; }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"srg-container\">\r\n\r\n <!-- HEADER -->\r\n <header class=\"srg-header\">\r\n <h1>Inventaire des <span>Jeux & Machines<\/span><\/h1>\r\n <p>Catalogue de la collection avec filtres multicrit\u00e8res<\/p>\r\n <\/header>\r\n\r\n <!-- BARRE DE SYNCHRONISATION MULTI-MACHINES -->\r\n <div class=\"srg-sync-bar\">\r\n <div class=\"srg-sync-info\">\r\n \ud83d\udcf2 <strong>Synchronisation :<\/strong> Transf\u00e9rez facilement votre base de donn\u00e9es entre ordinateurs et smartphones.\r\n <\/div>\r\n <div class=\"srg-sync-actions\">\r\n <button id=\"export-btn\" class=\"srg-btn-sync\">\ud83d\udcbe Exporter le fichier (.json)<\/button>\r\n <button id=\"import-btn\" class=\"srg-btn-sync\">\ud83d\udce5 Importer sur cette machine<\/button>\r\n <input type=\"file\" id=\"import-file-input\" accept=\".json\" style=\"display: none;\">\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- BARRE DE FILTRES -->\r\n <section class=\"srg-filters-card\">\r\n <div class=\"srg-filter-group\">\r\n <label for=\"filter-platform\">Machine<\/label>\r\n <select id=\"filter-platform\" class=\"srg-select\">\r\n <option value=\"ALL\">Toutes les machines<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"srg-filter-group\">\r\n <label for=\"filter-genre\">Genre<\/label>\r\n <select id=\"filter-genre\" class=\"srg-select\">\r\n <option value=\"ALL\">Tous les genres<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"srg-filter-group\">\r\n <label for=\"filter-media\">Support<\/label>\r\n <select id=\"filter-media\" class=\"srg-select\">\r\n <option value=\"ALL\">Tous les supports<\/option>\r\n <option value=\"Cartouche\">Cartouche<\/option>\r\n <option value=\"CD \/ DVD \/ Blu-ray\">CD \/ DVD \/ Blu-ray<\/option>\r\n <option value=\"Disquette\">Disquette<\/option>\r\n <option value=\"Borne \/ D\u00e9mat\u00e9rialis\u00e9\">Borne \/ D\u00e9mat\u00e9rialis\u00e9<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"srg-filter-group\">\r\n <label for=\"filter-age\">\u00c2ge (PEGI)<\/label>\r\n <select id=\"filter-age\" class=\"srg-select\">\r\n <option value=\"ALL\">Tous les \u00e2ges<\/option>\r\n <option value=\"3+\">3+ (Tout public)<\/option>\r\n <option value=\"7+\">7+<\/option>\r\n <option value=\"12+\">12+<\/option>\r\n <option value=\"16+\">16+<\/option>\r\n <option value=\"18+\">18+<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"srg-filter-group\">\r\n <label for=\"filter-publisher\">\u00c9diteur<\/label>\r\n <select id=\"filter-publisher\" class=\"srg-select\">\r\n <option value=\"ALL\">Tous les \u00e9diteurs<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"srg-filter-group\">\r\n <label for=\"filter-state\">\u00c9tat<\/label>\r\n <select id=\"filter-state\" class=\"srg-select\">\r\n <option value=\"ALL\">Tous les \u00e9tats<\/option>\r\n <option value=\"Bon\">Bon<\/option>\r\n <option value=\"Correct\">Correct<\/option>\r\n <option value=\"Mauvais\">Mauvais<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div>\r\n <button id=\"reset-filters\" class=\"srg-reset-btn\">R\u00e9initialiser<\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- EN-T\u00caTE CATALOGUE AVEC COMMUTATEUR -->\r\n <div class=\"srg-catalog-header\">\r\n <div class=\"srg-catalog-header-left\">\r\n <h2>Collection<\/h2>\r\n <span id=\"catalog-count\" class=\"srg-count-badge\">0 \u00e9l\u00e9ment(s)<\/span>\r\n <\/div>\r\n\r\n <!-- BOUTONS COMMUTATEURS DE VUE -->\r\n <div class=\"srg-view-toggle\">\r\n <button id=\"view-blocks-btn\" class=\"srg-view-btn active\"><span>\ud83d\udd33<\/span> Blocs<\/button>\r\n <button id=\"view-rows-btn\" class=\"srg-view-btn\"><span>\u2630<\/span> Lignes<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- CATALOGUE DES JEUX -->\r\n <main id=\"games-grid\" class=\"srg-games-grid view-blocks\"><\/main>\r\n\r\n <!-- FORMULAIRE D'AJOUT S\u00c9CURIS\u00c9 -->\r\n <section class=\"srg-add-card\">\r\n <h2>Ajouter un jeu ou une machine<\/h2>\r\n <form id=\"add-game-form\">\r\n <div class=\"srg-form-grid\">\r\n\r\n <div class=\"srg-form-group srg-form-full\">\r\n <label for=\"title\">Nom du jeu ou de la machine <span>*<\/span><\/label>\r\n <input type=\"text\" id=\"title\" class=\"srg-input\" placeholder=\"ex: Super Mario Kart\" required>\r\n <\/div>\r\n\r\n <div class=\"srg-form-group\">\r\n <label for=\"platform\">Plateforme \/ Console <span>*<\/span><\/label>\r\n <input type=\"text\" id=\"platform\" class=\"srg-input\" placeholder=\"ex: Super Nintendo, NES, Mega Drive...\" required>\r\n <\/div>\r\n\r\n <div class=\"srg-form-group\">\r\n <label for=\"genre\">Genre de jeu <span>*<\/span><\/label>\r\n <input type=\"text\" id=\"genre\" class=\"srg-input\" placeholder=\"ex: Course, Plateforme, RPG, Combat...\" required>\r\n <\/div>\r\n\r\n <div class=\"srg-form-group\">\r\n <label for=\"mediaType\">Type de support <span>*<\/span><\/label>\r\n <select id=\"mediaType\" class=\"srg-input\" required>\r\n <option value=\"Cartouche\">Cartouche<\/option>\r\n <option value=\"CD \/ DVD \/ Blu-ray\">CD \/ DVD \/ Blu-ray<\/option>\r\n <option value=\"Disquette\">Disquette<\/option>\r\n <option value=\"Borne \/ D\u00e9mat\u00e9rialis\u00e9\">Borne \/ D\u00e9mat\u00e9rialis\u00e9<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"srg-form-group\">\r\n <label for=\"ageRating\">\u00c2ge recommand\u00e9 (PEGI) <span>*<\/span><\/label>\r\n <select id=\"ageRating\" class=\"srg-input\" required>\r\n <option value=\"3+\">Tout public \/ 3+<\/option>\r\n <option value=\"7+\">7+<\/option>\r\n <option value=\"12+\">12+<\/option>\r\n <option value=\"16+\">16+<\/option>\r\n <option value=\"18+\">18+<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"srg-form-group\">\r\n <label for=\"publisher\">\u00c9diteur <span>*<\/span><\/label>\r\n <input type=\"text\" id=\"publisher\" class=\"srg-input\" placeholder=\"ex: Nintendo, Sega, Capcom...\" required>\r\n <\/div>\r\n\r\n <div class=\"srg-form-group\">\r\n <label for=\"players\">Nombre de joueurs <span>*<\/span><\/label>\r\n <input type=\"number\" id=\"players\" class=\"srg-input\" min=\"1\" max=\"16\" value=\"1\" required>\r\n <\/div>\r\n\r\n <div class=\"srg-form-group\">\r\n <label for=\"year\">Ann\u00e9e de sortie <span>*<\/span><\/label>\r\n <input type=\"number\" id=\"year\" class=\"srg-input\" min=\"1970\" max=\"2030\" value=\"1992\" required>\r\n <\/div>\r\n\r\n <div class=\"srg-form-group\">\r\n <label for=\"hasBox\">Conditionnement <span>*<\/span><\/label>\r\n <select id=\"hasBox\" class=\"srg-input\" required>\r\n <option value=\"Avec bo\u00eete\">Avec bo\u00eete<\/option>\r\n <option value=\"Sans bo\u00eete (Loose)\">Sans bo\u00eete (Loose)<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"srg-form-group\">\r\n <label for=\"state\">\u00c9tat g\u00e9n\u00e9ral <span>*<\/span><\/label>\r\n <select id=\"state\" class=\"srg-input\" required>\r\n <option value=\"Bon\">Bon<\/option>\r\n <option value=\"Correct\">Correct<\/option>\r\n <option value=\"Mauvais\">Mauvais<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"srg-form-group\">\r\n <label for=\"passcode\">Code Admin <span>*<\/span><\/label>\r\n <input type=\"password\" id=\"passcode\" class=\"srg-input\" placeholder=\"Code secret\" required>\r\n <\/div>\r\n\r\n <div class=\"srg-form-group srg-form-full\">\r\n <label for=\"cover\">Jaquette \/ Image de l'\u00e9l\u00e9ment<\/label>\r\n <input type=\"file\" id=\"cover\" class=\"srg-input\" accept=\"image\/*\">\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <button type=\"submit\" class=\"srg-submit-btn\">Ajouter \u00e0 la Collection<\/button>\r\n <div id=\"form-alert\" class=\"srg-alert\"><\/div>\r\n <\/form>\r\n <\/section>\r\n\r\n <\/div>\r\n\r\n <!-- MODALE DE MODIFICATION S\u00c9CURIS\u00c9E -->\r\n <div id=\"edit-modal\" class=\"srg-modal-overlay\">\r\n <div class=\"srg-modal\">\r\n <button class=\"srg-modal-close\" onclick=\"closeEditModal()\">×<\/button>\r\n <h2 style=\"font-size: 1.4rem; color: #fff; margin-bottom: 20px; text-transform: uppercase;\">Modifier le jeu ou la machine<\/h2>\r\n\r\n <form id=\"edit-game-form\">\r\n <input type=\"hidden\" id=\"edit-id\">\r\n\r\n <div class=\"srg-form-grid\">\r\n\r\n <div class=\"srg-form-group srg-form-full\">\r\n <label for=\"edit-title\">Nom du jeu ou de la machine <span>*<\/span><\/label>\r\n <input type=\"text\" id=\"edit-title\" class=\"srg-input\" required>\r\n <\/div>\r\n\r\n <div class=\"srg-form-group\">\r\n <label for=\"edit-platform\">Plateforme \/ Console <span>*<\/span><\/label>\r\n <input type=\"text\" id=\"edit-platform\" class=\"srg-input\" required>\r\n <\/div>\r\n\r\n <div class=\"srg-form-group\">\r\n <label for=\"edit-genre\">Genre de jeu <span>*<\/span><\/label>\r\n <input type=\"text\" id=\"edit-genre\" class=\"srg-input\" required>\r\n <\/div>\r\n\r\n <div class=\"srg-form-group\">\r\n <label for=\"edit-mediaType\">Type de support <span>*<\/span><\/label>\r\n <select id=\"edit-mediaType\" class=\"srg-input\" required>\r\n <option value=\"Cartouche\">Cartouche<\/option>\r\n <option value=\"CD \/ DVD \/ Blu-ray\">CD \/ DVD \/ Blu-ray<\/option>\r\n <option value=\"Disquette\">Disquette<\/option>\r\n <option value=\"Borne \/ D\u00e9mat\u00e9rialis\u00e9\">Borne \/ D\u00e9mat\u00e9rialis\u00e9<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"srg-form-group\">\r\n <label for=\"edit-ageRating\">\u00c2ge recommand\u00e9 (PEGI) <span>*<\/span><\/label>\r\n <select id=\"edit-ageRating\" class=\"srg-input\" required>\r\n <option value=\"3+\">Tout public \/ 3+<\/option>\r\n <option value=\"7+\">7+<\/option>\r\n <option value=\"12+\">12+<\/option>\r\n <option value=\"16+\">16+<\/option>\r\n <option value=\"18+\">18+<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"srg-form-group\">\r\n <label for=\"edit-publisher\">\u00c9diteur <span>*<\/span><\/label>\r\n <input type=\"text\" id=\"edit-publisher\" class=\"srg-input\" required>\r\n <\/div>\r\n\r\n <div class=\"srg-form-group\">\r\n <label for=\"edit-players\">Nombre de joueurs <span>*<\/span><\/label>\r\n <input type=\"number\" id=\"edit-players\" class=\"srg-input\" min=\"1\" max=\"16\" required>\r\n <\/div>\r\n\r\n <div class=\"srg-form-group\">\r\n <label for=\"edit-year\">Ann\u00e9e de sortie <span>*<\/span><\/label>\r\n <input type=\"number\" id=\"edit-year\" class=\"srg-input\" min=\"1970\" max=\"2030\" required>\r\n <\/div>\r\n\r\n <div class=\"srg-form-group\">\r\n <label for=\"edit-hasBox\">Conditionnement <span>*<\/span><\/label>\r\n <select id=\"edit-hasBox\" class=\"srg-input\" required>\r\n <option value=\"Avec bo\u00eete\">Avec bo\u00eete<\/option>\r\n <option value=\"Sans bo\u00eete (Loose)\">Sans bo\u00eete (Loose)<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"srg-form-group\">\r\n <label for=\"edit-state\">\u00c9tat g\u00e9n\u00e9ral <span>*<\/span><\/label>\r\n <select id=\"edit-state\" class=\"srg-input\" required>\r\n <option value=\"Bon\">Bon<\/option>\r\n <option value=\"Correct\">Correct<\/option>\r\n <option value=\"Mauvais\">Mauvais<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"srg-form-group\">\r\n <label for=\"edit-passcode\">Code Admin <span>*<\/span><\/label>\r\n <input type=\"password\" id=\"edit-passcode\" class=\"srg-input\" placeholder=\"Code secret\" required>\r\n <\/div>\r\n\r\n <div class=\"srg-form-group srg-form-full\">\r\n <label for=\"edit-cover\">Changer la jaquette (laisser vide pour conserver l'actuelle)<\/label>\r\n <input type=\"file\" id=\"edit-cover\" class=\"srg-input\" accept=\"image\/*\">\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <button type=\"submit\" class=\"srg-submit-btn\">Enregistrer les modifications<\/button>\r\n <div id=\"edit-form-alert\" class=\"srg-alert\"><\/div>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n document.addEventListener(\"DOMContentLoaded\", function() {\r\n\r\n \/\/ CODE DE VALIDATION ADMIN\r\n const VALIDATION_CODE = \"SRG2026\";\r\n\r\n \/\/ CHARGEMENT DES DONN\u00c9ES LOCALES\r\n let games = JSON.parse(localStorage.getItem('srg_games_collection')) || [];\r\n let currentView = localStorage.getItem('srg_games_view') || 'blocks';\r\n\r\n const filterPlatform = document.getElementById('filter-platform');\r\n const filterGenre = document.getElementById('filter-genre');\r\n const filterMedia = document.getElementById('filter-media');\r\n const filterAge = document.getElementById('filter-age');\r\n const filterPublisher = document.getElementById('filter-publisher');\r\n const filterState = document.getElementById('filter-state');\r\n const resetBtn = document.getElementById('reset-filters');\r\n\r\n const gamesGrid = document.getElementById('games-grid');\r\n const catalogCount = document.getElementById('catalog-count');\r\n const addForm = document.getElementById('add-game-form');\r\n const formAlert = document.getElementById('form-alert');\r\n\r\n const editModal = document.getElementById('edit-modal');\r\n const editForm = document.getElementById('edit-game-form');\r\n const editAlert = document.getElementById('edit-form-alert');\r\n\r\n const exportBtn = document.getElementById('export-btn');\r\n const importBtn = document.getElementById('import-btn');\r\n const importFileInput = document.getElementById('import-file-input');\r\n\r\n const viewBlocksBtn = document.getElementById('view-blocks-btn');\r\n const viewRowsBtn = document.getElementById('view-rows-btn');\r\n\r\n \/\/ GESTION DES MODES D'AFFICHAGE\r\n function setViewMode(mode) {\r\n currentView = mode;\r\n localStorage.setItem('srg_games_view', mode);\r\n\r\n if (mode === 'rows') {\r\n gamesGrid.className = 'srg-games-grid view-rows';\r\n viewRowsBtn.classList.add('active');\r\n viewBlocksBtn.classList.remove('active');\r\n } else {\r\n gamesGrid.className = 'srg-games-grid view-blocks';\r\n viewBlocksBtn.classList.add('active');\r\n viewRowsBtn.classList.remove('active');\r\n }\r\n }\r\n\r\n viewBlocksBtn.addEventListener('click', () => setViewMode('blocks'));\r\n viewRowsBtn.addEventListener('click', () => setViewMode('rows'));\r\n\r\n \/\/ POPULER LES FILTRES DYNAMIQUES\r\n function populateFilterOptions() {\r\n const currentPlatform = filterPlatform.value;\r\n const currentGenre = filterGenre.value;\r\n const currentPublisher = filterPublisher.value;\r\n\r\n const platforms = [...new Set(games.map(g => g.platform).filter(Boolean))].sort();\r\n const genres = [...new Set(games.map(g => g.genre).filter(Boolean))].sort();\r\n const publishers = [...new Set(games.map(g => g.publisher).filter(Boolean))].sort();\r\n\r\n filterPlatform.innerHTML = '<option value=\"ALL\">Toutes les machines<\/option>' + \r\n platforms.map(p => `<option value=\"${p}\">${p}<\/option>`).join('');\r\n\r\n filterGenre.innerHTML = '<option value=\"ALL\">Tous les genres<\/option>' + \r\n genres.map(gn => `<option value=\"${gn}\">${gn}<\/option>`).join('');\r\n\r\n filterPublisher.innerHTML = '<option value=\"ALL\">Tous les \u00e9diteurs<\/option>' + \r\n publishers.map(pub => `<option value=\"${pub}\">${pub}<\/option>`).join('');\r\n\r\n filterPlatform.value = platforms.includes(currentPlatform) ? currentPlatform : 'ALL';\r\n filterGenre.value = genres.includes(currentGenre) ? currentGenre : 'ALL';\r\n filterPublisher.value = publishers.includes(currentPublisher) ? currentPublisher : 'ALL';\r\n }\r\n\r\n \/\/ AFFICHAGE DES JEUX\r\n function renderGames() {\r\n const selPlatform = filterPlatform.value;\r\n const selGenre = filterGenre.value;\r\n const selMedia = filterMedia.value;\r\n const selAge = filterAge.value;\r\n const selPublisher = filterPublisher.value;\r\n const selState = filterState.value;\r\n\r\n const filtered = games.filter(g => {\r\n const matchPlatform = (selPlatform === 'ALL' || g.platform === selPlatform);\r\n const matchGenre = (selGenre === 'ALL' || g.genre === selGenre);\r\n const matchMedia = (selMedia === 'ALL' || g.mediaType === selMedia);\r\n const matchAge = (selAge === 'ALL' || g.ageRating === selAge);\r\n const matchPublisher = (selPublisher === 'ALL' || g.publisher === selPublisher);\r\n const matchState = (selState === 'ALL' || g.state === selState);\r\n return matchPlatform && matchGenre && matchMedia && matchAge && matchPublisher && matchState;\r\n });\r\n\r\n catalogCount.textContent = `${filtered.length} \u00e9l\u00e9ment(s)`;\r\n\r\n if (filtered.length === 0) {\r\n gamesGrid.innerHTML = `\r\n <div class=\"srg-empty-msg\">\r\n <h3>Aucun jeu ou machine ne correspond \u00e0 vos filtres.<\/h3>\r\n <p>Utilisez le formulaire ci-dessous pour ajouter vos premiers \u00e9l\u00e9ments.<\/p>\r\n <\/div>`;\r\n return;\r\n }\r\n\r\n gamesGrid.innerHTML = filtered.map(g => `\r\n <article class=\"srg-game-card\">\r\n <div class=\"srg-cover-box\">\r\n <span class=\"srg-badge-platform\">${g.platform}<\/span>\r\n <span class=\"srg-badge-age\">${g.ageRating || '3+'}<\/span>\r\n ${g.cover ? `<img decoding=\"async\" src=\"${g.cover}\" alt=\"${g.title}\">` : `<span class=\"srg-no-cover\">\ud83c\udfae<\/span>`}\r\n <\/div>\r\n <div class=\"srg-game-body\">\r\n <h3 class=\"srg-game-title\">${g.title}<\/h3>\r\n <div class=\"srg-game-details\">\r\n <span>\ud83d\udcbb Machine : <strong>${g.platform}<\/strong><\/span>\r\n <span>\ud83c\udfae Genre : <strong>${g.genre || 'N\/C'}<\/strong> (${g.ageRating || '3+'})<\/span>\r\n <span>\ud83d\udcfc Support : <strong>${g.mediaType || 'Cartouche'}<\/strong><\/span>\r\n <span>\ud83d\udc65 Joueurs : <strong>${g.players}<\/strong><\/span>\r\n <span>\ud83c\udfe2 \u00c9diteur : <strong>${g.publisher}<\/strong> (${g.year})<\/span>\r\n <\/div>\r\n <div class=\"srg-tags-row\">\r\n <span class=\"srg-tag genre-tag\">${g.genre || 'G\u00e9n\u00e9ral'}<\/span>\r\n <span class=\"srg-tag media-tag\">${g.mediaType || 'Cartouche'}<\/span>\r\n <span class=\"srg-tag ${g.hasBox === 'Avec bo\u00eete' ? 'box-yes' : 'box-no'}\">${g.hasBox}<\/span>\r\n <span class=\"srg-tag state-${(g.state || 'bon').toLowerCase()}\">\u00c9tat : ${g.state}<\/span>\r\n <\/div>\r\n <div class=\"srg-card-actions\">\r\n <button class=\"srg-edit-btn\" onclick=\"openEditModal(${g.id})\">\u270f\ufe0f Modifier<\/button>\r\n <button class=\"srg-delete-btn\" onclick=\"deleteGame(${g.id})\">\ud83d\uddd1\ufe0f Supprimer<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/article>\r\n `).join('');\r\n }\r\n\r\n \/\/ EXPORTATION JSON\r\n exportBtn.addEventListener('click', function() {\r\n if (games.length === 0) {\r\n alert(\"Votre collection est actuellement vide.\");\r\n return;\r\n }\r\n const dataStr = \"data:text\/json;charset=utf-8,\" + encodeURIComponent(JSON.stringify(games, null, 2));\r\n const downloadAnchor = document.createElement('a');\r\n downloadAnchor.setAttribute(\"href\", dataStr);\r\n downloadAnchor.setAttribute(\"download\", `SRG_Collection_Jeux_${new Date().toISOString().slice(0,10)}.json`);\r\n document.body.appendChild(downloadAnchor);\r\n downloadAnchor.click();\r\n downloadAnchor.remove();\r\n });\r\n\r\n \/\/ IMPORTATION MULTI-MACHINES\r\n importBtn.addEventListener('click', function() {\r\n const inputCode = prompt(\"Saisissez le code Admin pour importer une nouvelle base :\");\r\n if (inputCode === null) return;\r\n\r\n if (inputCode.trim() === VALIDATION_CODE) {\r\n importFileInput.click();\r\n } else {\r\n alert(\"Code de validation incorrect ! Importation annul\u00e9e.\");\r\n }\r\n });\r\n\r\n importFileInput.addEventListener('change', function(e) {\r\n const file = e.target.files[0];\r\n if (!file) return;\r\n\r\n const reader = new FileReader();\r\n reader.onload = function(evt) {\r\n try {\r\n const importedGames = JSON.parse(evt.target.result);\r\n if (Array.isArray(importedGames)) {\r\n games = importedGames;\r\n localStorage.setItem('srg_games_collection', JSON.stringify(games));\r\n populateFilterOptions();\r\n renderGames();\r\n alert(\"Collection import\u00e9e et synchronis\u00e9e avec succ\u00e8s !\");\r\n } else {\r\n alert(\"Le fichier choisi est invalide.\");\r\n }\r\n } catch (err) {\r\n alert(\"Erreur lors de la lecture du fichier JSON.\");\r\n }\r\n };\r\n reader.readAsText(file);\r\n });\r\n\r\n \/\/ MODALE MODIFICATION\r\n window.openEditModal = function(id) {\r\n const game = games.find(g => g.id === id);\r\n if (!game) return;\r\n\r\n document.getElementById('edit-id').value = game.id;\r\n document.getElementById('edit-title').value = game.title;\r\n document.getElementById('edit-platform').value = game.platform;\r\n document.getElementById('edit-genre').value = game.genre || '';\r\n document.getElementById('edit-mediaType').value = game.mediaType || 'Cartouche';\r\n document.getElementById('edit-ageRating').value = game.ageRating || '3+';\r\n document.getElementById('edit-publisher').value = game.publisher;\r\n document.getElementById('edit-players').value = game.players;\r\n document.getElementById('edit-year').value = game.year;\r\n document.getElementById('edit-hasBox').value = game.hasBox;\r\n document.getElementById('edit-state').value = game.state;\r\n document.getElementById('edit-passcode').value = '';\r\n document.getElementById('edit-cover').value = '';\r\n editAlert.style.display = 'none';\r\n\r\n editModal.style.display = 'flex';\r\n };\r\n\r\n window.closeEditModal = function() {\r\n editModal.style.display = 'none';\r\n };\r\n\r\n editForm.addEventListener('submit', async function(e) {\r\n e.preventDefault();\r\n\r\n const inputCode = document.getElementById('edit-passcode').value.trim();\r\n\r\n if (inputCode !== VALIDATION_CODE) {\r\n editAlert.className = \"srg-alert error\";\r\n editAlert.style.display = \"block\";\r\n editAlert.textContent = \"Code de validation incorrect !\";\r\n return;\r\n }\r\n\r\n const id = parseInt(document.getElementById('edit-id').value);\r\n const index = games.findIndex(g => g.id === id);\r\n\r\n if (index !== -1) {\r\n const coverFile = document.getElementById('edit-cover').files[0];\r\n let base64Cover = games[index].cover;\r\n\r\n if (coverFile) {\r\n base64Cover = await fileToBase64(coverFile);\r\n }\r\n\r\n games[index] = {\r\n id: id,\r\n title: document.getElementById('edit-title').value.trim(),\r\n platform: document.getElementById('edit-platform').value.trim(),\r\n genre: document.getElementById('edit-genre').value.trim(),\r\n mediaType: document.getElementById('edit-mediaType').value,\r\n ageRating: document.getElementById('edit-ageRating').value,\r\n publisher: document.getElementById('edit-publisher').value.trim(),\r\n players: parseInt(document.getElementById('edit-players').value),\r\n year: parseInt(document.getElementById('edit-year').value),\r\n hasBox: document.getElementById('edit-hasBox').value,\r\n state: document.getElementById('edit-state').value,\r\n cover: base64Cover\r\n };\r\n\r\n localStorage.setItem('srg_games_collection', JSON.stringify(games));\r\n populateFilterOptions();\r\n renderGames();\r\n closeEditModal();\r\n }\r\n });\r\n\r\n \/\/ SUPPRESSION\r\n window.deleteGame = function(id) {\r\n const inputCode = prompt(\"Saisissez le code de validation Admin pour supprimer cet \u00e9l\u00e9ment :\");\r\n if (inputCode === null) return;\r\n\r\n if (inputCode.trim() === VALIDATION_CODE) {\r\n games = games.filter(g => g.id !== id);\r\n localStorage.setItem('srg_games_collection', JSON.stringify(games));\r\n populateFilterOptions();\r\n renderGames();\r\n alert(\"L'\u00e9l\u00e9ment a bien \u00e9t\u00e9 supprim\u00e9.\");\r\n } else {\r\n alert(\"Code de validation incorrect ! Suppression annul\u00e9e.\");\r\n }\r\n };\r\n\r\n function fileToBase64(file) {\r\n return new Promise((resolve, reject) => {\r\n if (!file) { resolve(null); return; }\r\n const reader = new FileReader();\r\n reader.onload = () => resolve(reader.result);\r\n reader.onerror = reject;\r\n reader.readAsDataURL(file);\r\n });\r\n }\r\n\r\n \/\/ AJOUT JEU\r\n addForm.addEventListener('submit', async function(e) {\r\n e.preventDefault();\r\n\r\n const inputCode = document.getElementById('passcode').value.trim();\r\n\r\n if (inputCode !== VALIDATION_CODE) {\r\n formAlert.className = \"srg-alert error\";\r\n formAlert.style.display = \"block\";\r\n formAlert.textContent = \"Code de validation incorrect ! L'\u00e9l\u00e9ment n'a pas \u00e9t\u00e9 ajout\u00e9.\";\r\n return;\r\n }\r\n\r\n const coverFile = document.getElementById('cover').files[0];\r\n const base64Cover = await fileToBase64(coverFile);\r\n\r\n const newGame = {\r\n id: Date.now(),\r\n title: document.getElementById('title').value.trim(),\r\n platform: document.getElementById('platform').value.trim(),\r\n genre: document.getElementById('genre').value.trim(),\r\n mediaType: document.getElementById('mediaType').value,\r\n ageRating: document.getElementById('ageRating').value,\r\n publisher: document.getElementById('publisher').value.trim(),\r\n players: parseInt(document.getElementById('players').value),\r\n year: parseInt(document.getElementById('year').value),\r\n hasBox: document.getElementById('hasBox').value,\r\n state: document.getElementById('state').value,\r\n cover: base64Cover\r\n };\r\n\r\n games.push(newGame);\r\n localStorage.setItem('srg_games_collection', JSON.stringify(games));\r\n\r\n populateFilterOptions();\r\n renderGames();\r\n\r\n addForm.reset();\r\n document.getElementById('players').value = \"1\";\r\n document.getElementById('year').value = \"1992\";\r\n\r\n formAlert.className = \"srg-alert success\";\r\n formAlert.style.display = \"block\";\r\n formAlert.textContent = \"\u00c9l\u00e9ment valid\u00e9 et ajout\u00e9 \u00e0 la collection !\";\r\n setTimeout(() => { formAlert.style.display = \"none\"; }, 3000);\r\n });\r\n\r\n \/\/ \u00c9COUTEURS\r\n filterPlatform.addEventListener('change', renderGames);\r\n filterGenre.addEventListener('change', renderGames);\r\n filterMedia.addEventListener('change', renderGames);\r\n filterAge.addEventListener('change', renderGames);\r\n filterPublisher.addEventListener('change', renderGames);\r\n filterState.addEventListener('change', renderGames);\r\n\r\n resetBtn.addEventListener('click', function() {\r\n filterPlatform.value = 'ALL';\r\n filterGenre.value = 'ALL';\r\n filterMedia.value = 'ALL';\r\n filterAge.value = 'ALL';\r\n filterPublisher.value = 'ALL';\r\n filterState.value = 'ALL';\r\n renderGames();\r\n });\r\n\r\n setViewMode(currentView);\r\n populateFilterOptions();\r\n renderGames();\r\n });\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p> […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/full-width-page.php","meta":{"footnotes":""},"class_list":["post-1474","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/savoieretrogames.fr\/index.php\/wp-json\/wp\/v2\/pages\/1474","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savoieretrogames.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/savoieretrogames.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/savoieretrogames.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savoieretrogames.fr\/index.php\/wp-json\/wp\/v2\/comments?post=1474"}],"version-history":[{"count":8,"href":"https:\/\/savoieretrogames.fr\/index.php\/wp-json\/wp\/v2\/pages\/1474\/revisions"}],"predecessor-version":[{"id":1575,"href":"https:\/\/savoieretrogames.fr\/index.php\/wp-json\/wp\/v2\/pages\/1474\/revisions\/1575"}],"wp:attachment":[{"href":"https:\/\/savoieretrogames.fr\/index.php\/wp-json\/wp\/v2\/media?parent=1474"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}