https://www.melianfruchart.fr/Recent content on Mélian FruchartHugo -- gohugo.ioenTue, 15 Sep 2026 00:00:00 +0000https://www.melianfruchart.fr/posts/projects/wikigraph/Tue, 15 Sep 2026 00:00:00 +0000https://www.melianfruchart.fr/posts/projects/wikigraph/<p>Web-based real-time multiplayer game, where players navigate through Wikipedia pages by clicking on internal links in order to reach one or more target pages.</p> <p>WikiGraph was hosted at <a href="https://wikigraph.fr" target="_blank">wikigraph.fr</a>, but is no longer available since October 7th 2026. It will be brought up again in the future.</p> <h2 id="image-gallery">Image gallery</h2> <p>WikiGraph menus. <style> .carousel-indicators img[data-bs-target] { width: 60px !important; height: 40px !important; object-fit: cover; cursor: pointer; margin: 0 4px; border: 2px solid transparent !important; border-radius: 4px; opacity: 0.5; transition: opacity 0.2s; flex-shrink: 0 !important; min-width: 60px !important; box-shadow: 0 0 3px rgba(0,0,0,0.5); text-indent: 0; } .carousel-indicators img[data-bs-target].active { border-color: #fff !important; opacity: 1; } .carousel-control-prev-icon, .carousel-control-next-icon { filter: drop-shadow(0px 0px 2px rgb(0, 0, 0)); } .carousel-item img.inline-img { cursor: zoom-in; } .modal-carousel-bg { background-color: rgba(0,0,0,0.4); } .carousel-control-prev, .carousel-control-next { width: 5% !important; } .carousel-item { transition: transform 0.15s ease-in-out !important; } .carousel-indicators { flex-wrap: nowrap !important; overflow-x: auto; gap: 8px; justify-content: flex-start !important; padding: 0 !important; -ms-overflow-style: none; scrollbar-width: none; } .carousel-indicators::-webkit-scrollbar { display: none; } .carousel-indicators::before, .carousel-indicators::after { content: ""; flex: 0 0 calc(50% - 30px); } .carousel-indicators-inline { position: absolute !important; bottom: 1rem; margin: 0 !important; left: 0; right: 0; z-index: 15; } .carousel-indicators-modal { position: relative !important; margin-top: 1rem !important; margin-bottom: 1rem !important; } </style> <div id="carousel-gallery_menus" class="carousel slide mb-5"> <div class="carousel-inner rounded shadow-sm"> <div class="carousel-item active"> <img src="https://www.melianfruchart.fr/posts/projects/wikigraph/gallery_menus/0.webp" class="d-block w-100 inline-img" alt="Gallery Image" data-bs-toggle="modal" data-bs-target="#modal-carousel-gallery_menus" onclick="document.getElementById('modal-thumb-carousel-gallery_menus-0').click()"> </div> <div class="carousel-item "> <img src="https://www.melianfruchart.fr/posts/projects/wikigraph/gallery_menus/1.webp" class="d-block w-100 inline-img" alt="Gallery Image" data-bs-toggle="modal" data-bs-target="#modal-carousel-gallery_menus" onclick="document.getElementById('modal-thumb-carousel-gallery_menus-1').click()"> </div> </div> <div class="carousel-indicators carousel-indicators-inline"> <img id="modal-thumb-carousel-gallery_menus-0" src="https://www.melianfruchart.fr/posts/projects/wikigraph/gallery_menus/0.webp" data-bs-target="#carousel-gallery_menus" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"> <img id="modal-thumb-carousel-gallery_menus-1" src="https://www.melianfruchart.fr/posts/projects/wikigraph/gallery_menus/1.webp" data-bs-target="#carousel-gallery_menus" data-bs-slide-to="1" aria-label="Slide 2"> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carousel-gallery_menus" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carousel-gallery_menus" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> <div class="modal fade" id="modal-carousel-gallery_menus" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" style="max-width: 90vw;"> <div class="modal-content bg-transparent border-0"> <button type="button" class="btn-close btn-close-white position-absolute top-0 end-0 m-2" data-bs-dismiss="modal" aria-label="Close" style="z-index: 1055; filter: drop-shadow(0px 0px 4px rgba(0,0,0,0.9));"></button> <div class="modal-body p-0"> <div id="modal-carousel-carousel-gallery_menus" class="carousel slide" data-bs-keyboard="true"> <div class="carousel-inner rounded shadow-lg modal-carousel-bg"> <div class="carousel-item active"> <img src="https://www.melianfruchart.fr/posts/projects/wikigraph/gallery_menus/0.webp" class="d-block w-100" alt="Enlarged Gallery Image" style="max-height: 70vh; object-fit: contain;"> </div> <div class="carousel-item "> <img src="https://www.melianfruchart.fr/posts/projects/wikigraph/gallery_menus/1.webp" class="d-block w-100" alt="Enlarged Gallery Image" style="max-height: 70vh; object-fit: contain;"> </div> </div> <div class="carousel-indicators carousel-indicators-modal"> <img src="https://www.melianfruchart.fr/posts/projects/wikigraph/gallery_menus/0.webp" data-bs-target="#modal-carousel-carousel-gallery_menus" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"> <img src="https://www.melianfruchart.fr/posts/projects/wikigraph/gallery_menus/1.webp" data-bs-target="#modal-carousel-carousel-gallery_menus" data-bs-slide-to="1" aria-label="Slide 2"> </div> <button class="carousel-control-prev" type="button" data-bs-target="#modal-carousel-carousel-gallery_menus" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#modal-carousel-carousel-gallery_menus" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </div> </div> </div> </div> <script> document.addEventListener("DOMContentLoaded", function() { if (!window.hasCarouselKeyboardListener) { window.hasCarouselKeyboardListener = true; document.addEventListener('keydown', function(event) { if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') { const activeModal = document.querySelector('.modal.show'); if (activeModal) { const arrowSelector = event.key === 'ArrowLeft' ? '.carousel-control-prev' : '.carousel-control-next'; const arrowButton = activeModal.querySelector(arrowSelector); if (arrowButton) { arrowButton.click(); } } } }); } function centerThumb(container, thumb, behavior) { if (!container || !thumb) return; const scrollLeft = thumb.offsetLeft + (thumb.offsetWidth / 2) - (container.clientWidth / 2); container.scrollTo({ left: scrollLeft, behavior: behavior }); } document.querySelectorAll('.carousel').forEach(function(carousel) { carousel.addEventListener('slide.bs.carousel', function(event) { const container = carousel.querySelector('.carousel-indicators'); if (container && container.clientWidth > 0) { centerThumb(container, container.children[event.to], 'smooth'); } }); }); document.querySelectorAll('.modal').forEach(function(modal) { modal.addEventListener('shown.bs.modal', function () { const container = modal.querySelector('.carousel-indicators'); const activeThumb = container ? container.querySelector('.active') : null; if (container && activeThumb) { centerThumb(container, activeThumb, 'instant'); } }); }); }); </script></p>https://www.melianfruchart.fr/posts/projects/space_charity/Thu, 20 Jan 2022 00:00:00 +0000https://www.melianfruchart.fr/posts/projects/space_charity/<p>Space-charity is a (fake) real-time auction application. It was developed as an academical project in the 2nd year of my bachelor&rsquo;s degree.</p> <h2 id="project-instructions">Project instructions</h2> <p>Develop a collaborative, real-time client-server auction application for individuals (B2C or C2C). Auctions may involve personal property or real estate.</p> <p>Some more details:</p> <ul> <li>There are different auction mechanisms. We needed to explore them, choose one, and analyze the specific features that would impact our requirements.</li> <li>We also needed to clearly define the type of assets that would be put into auction, and verify that there are no restrictive regulations applying to them</li> </ul> <h2 id="why-space-charity">Why &ldquo;Space Charity&rdquo;</h2> <p>We had the idea of using objects that should not be able to be put to auction: <strong>planets and stars</strong>.</p>