studio-variable/world-game
3
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: studio-variable:517143fe6073393b8a9851c7f5051e133699d340
Branches Tags
studio-variable:main
..
compare: studio-variable:3a2b5a2f576ee9d8dfa1ad0de89616935bbb829d
Branches Tags
studio-variable:main

No commits in common. "517143fe6073393b8a9851c7f5051e133699d340" and "3a2b5a2f576ee9d8dfa1ad0de89616935bbb829d" have entirely different histories.
517143fe60 ... 3a2b5a2f57

11 changed files with 61 additions and 173 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/App.svelte
View file

@ -5,7 +5,6 @@
import Header from '@components/layout/Header.svelte'
import Cursor from '@components/layout/Cursor.svelte'
import LanguageSwitcher from '@components/ui/LanguageSwitcher.svelte'
import Home from '@views/Home.svelte'
import About from '@views/About.svelte'
@ -95,7 +94,6 @@
{/each}
</div>
</main>
<LanguageSwitcher />
<style>
:global(#app) {

27
src/components/layout/Footer.svelte
View file

@ -1,6 +1,5 @@
<script>
import { site } from '@state/site.svelte'
import { t } from '@i18n'
const logo = $derived(site.logo)
const title = $derived(site.title || 'World Game')
@ -21,13 +20,13 @@
body: JSON.stringify({ email })
})
if (res.ok) {
status = { type: 'success', message: t('newsletter_success') }
status = { type: 'success', message: 'Merci pour votre inscription !' }
email = ''
} else {
status = { type: 'error', message: t('newsletter_error') }
status = { type: 'error', message: 'Une erreur est survenue.' }
}
} catch {
status = { type: 'error', message: t('newsletter_error') }
status = { type: 'error', message: 'Une erreur est survenue.' }
}
}
</script>
@ -45,7 +44,7 @@
<!-- Location -->
{#if contact.address}
<div class="footer-col">
<h3>{t('location')}</h3>
<h3>Location</h3>
<address>{@html contact.address}</address>
</div>
{/if}
@ -53,7 +52,7 @@
<!-- Contact -->
{#if contact.email}
<div class="footer-col">
<h3>{t('contact')}</h3>
<h3>Contact</h3>
<a href="mailto:{contact.email}">{contact.email}</a>
</div>
{/if}
@ -61,7 +60,7 @@
<!-- Follow us -->
{#if socials.length > 0}
<div class="footer-col">
<h3>{t('follow_us')}</h3>
<h3>Follow us</h3>
<ul class="footer-socials" role="list">
{#each socials as social}
<li>
@ -80,16 +79,16 @@
<!-- Newsletter -->
<div class="footer-newsletter">
<h3>{t('newsletter_heading')}</h3>
<h3>Subscribe to our newsletters!</h3>
<form class="footer-newsletter-form" onsubmit={handleSubscribe}>
<input
class="footer-newsletter-input"
type="email"
placeholder={t('newsletter_placeholder')}
placeholder="Enter your email"
bind:value={email}
required
/>
<button type="submit" class="button">{t('newsletter_submit')}</button>
<button type="submit" class="button">Subscribe</button>
</form>
{#if status}
<p class="footer-newsletter-status footer-newsletter-status--{status.type}">
@ -102,14 +101,14 @@
<!-- Copyright bar -->
<div class="footer-bottom">
<p>{t('copyright', { year })}</p>
<p>World Game &copy; {year}. All rights reserved.</p>
<div class="footer-divider" aria-hidden="true"></div>
<a href="/cookies">{t('cookies')}</a>
<a href="/cookies">Cookies preferences</a>
<div class="footer-divider" aria-hidden="true"></div>
{#if contact.legalNotice}
<a href={contact.legalNotice} target="_blank" rel="noopener noreferrer">{t('legal')}</a>
<a href={contact.legalNotice} target="_blank" rel="noopener noreferrer">Mentions légales</a>
{:else}
<a href="/privacy">{t('privacy')}</a>
<a href="/privacy">Privacy</a>
{/if}
</div>
</footer>

3
src/components/layout/Header.svelte
View file

@ -3,7 +3,6 @@
import { locale } from '@state/locale.svelte'
import { slides } from '@state/slides.svelte'
import Menu from '@components/layout/Menu.svelte'
import { t } from '@i18n'
const isMenuOpen = $derived(navigation.isMenuOpen)
const currentLang = $derived(locale.current)
@ -41,7 +40,7 @@
<button
class="navbar-toggle"
onclick={toggleMenu}
aria-label={isMenuOpen ? t('close_menu') : t('open_menu')}
aria-label={isMenuOpen ? 'Fermer le menu' : 'Ouvrir le menu'}
aria-expanded={isMenuOpen}
aria-controls="main-menu"
>

13
src/components/layout/Menu.svelte
View file

@ -3,7 +3,6 @@
import { locale } from '@state/locale.svelte'
import { slides } from '@state/slides.svelte'
import { site } from '@state/site.svelte'
import { t } from '@i18n'
const isMenuOpen = $derived(navigation.isMenuOpen)
const currentLang = $derived(locale.current)
@ -33,6 +32,18 @@
return slide.titles?.[currentLang] || slide.title || slide.id
}
const labels = {
menu: { fr: 'MENU', en: 'MENU' },
connect: { fr: 'CONNECT', en: 'CONNECT' },
address: { fr: 'ADRESSE', en: 'LOCATION' },
mail: { fr: 'MAIL', en: 'MAIL' },
socials: { fr: 'RÉSEAUX', en: 'SOCIALS' },
legal: { fr: 'MENTIONS LÉGALES', en: 'LEGAL NOTICE' },
}
function t(key) {
return labels[key]?.[currentLang] || labels[key]?.fr || key
}
</script>
<dialog

28
src/components/ui/LanguageSwitcher.svelte
View file

@ -1,28 +0,0 @@
<script>
import { locale } from '@state/locale.svelte'
function switchLanguage() {
const isEn = locale.current === 'en'
const newLang = isEn ? 'fr' : 'en'
localStorage.setItem('wg_lang', newLang)
const clean = window.location.pathname.replace(/^\/en/, '') || '/'
window.location.href = isEn ? clean : `/en${clean}`
}
</script>
<div class="lang-switcher font-face-danzza-bold clickable" onclick={switchLanguage}>
<p class="clickable">{locale.current === 'en' ? 'fr' : 'en'}</p>
</div>
<style>
.lang-switcher {
z-index: 60;
position: absolute;
bottom: 4vh;
left: 4vh;
text-transform: uppercase;
color: rgb(4, 254, 160);
display: block;
cursor: pointer;
}
</style>

51
src/i18n/index.js
View file

@ -1,51 +0,0 @@
import { locale } from '@state/locale.svelte'
const dict = {
// Article
'published_on': { fr: 'Publié le', en: 'Published on' },
'link_copied': { fr: 'Lien copié !', en: 'Link copied!' },
'copy_link': { fr: 'Copier le lien', en: 'Copy link' },
'share_article': { fr: 'Partager cet article', en: 'Share this article' },
'related': { fr: 'Nos recommandations', en: 'Our recommendations' },
'share_whatsapp': { fr: 'Partager sur WhatsApp', en: 'Share on WhatsApp' },
'share_x': { fr: 'Partager sur X', en: 'Share on X' },
'share_facebook': { fr: 'Partager sur Facebook', en: 'Share on Facebook' },
'share_linkedin': { fr: 'Partager sur LinkedIn', en: 'Share on LinkedIn' },
// Blog
'loading': { fr: 'Chargement…', en: 'Loading…' },
'read_article': { fr: "Lire l'article", en: 'Read article' },
// Play
'play': { fr: 'Jouer', en: 'Play' },
'coming_soon': { fr: 'Coming soon', en: 'Coming soon' },
// Header
'close_menu': { fr: 'Fermer le menu', en: 'Close menu' },
'open_menu': { fr: 'Ouvrir le menu', en: 'Open menu' },
// Footer
'location': { fr: 'Adresse', en: 'Location' },
'contact': { fr: 'Contact', en: 'Contact' },
'follow_us': { fr: 'Réseaux', en: 'Follow us' },
'newsletter_heading': { fr: 'Inscrivez-vous à notre newsletter !', en: 'Subscribe to our newsletter!' },
'newsletter_placeholder': { fr: 'Votre email', en: 'Enter your email' },
'newsletter_submit': { fr: "S'inscrire", en: 'Subscribe' },
'newsletter_success': { fr: 'Merci pour votre inscription !', en: 'Thank you for subscribing!' },
'newsletter_error': { fr: 'Une erreur est survenue.', en: 'An error occurred.' },
'copyright': { fr: 'World Game © {year}. Tous droits réservés.', en: 'World Game © {year}. All rights reserved.' },
'legal': { fr: 'Mentions légales', en: 'Legal notice' },
'cookies': { fr: 'Préférences cookies', en: 'Cookie preferences' },
'privacy': { fr: 'Confidentialité', en: 'Privacy' },
// Menu
'menu': { fr: 'MENU', en: 'MENU' },
'connect': { fr: 'CONNECT', en: 'CONNECT' },
'address': { fr: 'ADRESSE', en: 'LOCATION' },
'mail': { fr: 'MAIL', en: 'MAIL' },
'socials': { fr: 'RÉSEAUX', en: 'SOCIALS' },
}
export function t(key, vars = {}) {
const lang = locale.current
let str = dict[key]?.[lang] ?? dict[key]?.fr ?? key
for (const [k, v] of Object.entries(vars)) {
str = str.replace(`{${k}}`, v)
}
return str
}

31
src/router/index.js
View file

@ -5,12 +5,7 @@ import { locale } from "@state/locale.svelte";
let siteInitialized = false;
function normalizePath(path) {
const stripped = path.replace(/^\/en(\/|$)/, '$1') || '/';
return stripped === '/' ? '/home' : stripped;
}
function apiPrefix() {
return locale.current === 'en' ? '/en' : '';
return path === "/" ? "/home" : path;
}
/**
@ -52,7 +47,8 @@ async function loadSlide(path) {
}
try {
const response = await fetch(`${apiPrefix()}${slidePath}.json`);
// Fetch the actual slide path (parent), not the sub-page
const response = await fetch(`${slidePath}.json`);
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const data = await response.json();
@ -80,10 +76,7 @@ export function slideTo(path, { skipHistory = false } = {}) {
path = normalizePath(path);
if (!skipHistory) {
const historyPath = locale.current === 'en'
? (path === '/home' ? '/en' : `/en${path}`)
: (path === '/home' ? '/' : path);
history.pushState({}, '', historyPath);
history.pushState({}, "", path === "/home" ? "/" : path);
}
const idx = findSlideIndex(path);
@ -101,22 +94,6 @@ export function slideTo(path, { skipHistory = false } = {}) {
}
export async function initRouter() {
// Language detection: URL prefix > localStorage > navigator
const hasEnPrefix = window.location.pathname.startsWith('/en');
if (hasEnPrefix) {
locale.setLanguage('en');
localStorage.setItem('wg_lang', 'en');
} else if (!localStorage.getItem('wg_lang')) {
const navLang = navigator.language || navigator.languages?.[0] || 'fr';
if (navLang.startsWith('en')) {
window.location.replace('/en' + window.location.pathname);
return;
}
} else if (localStorage.getItem('wg_lang') === 'en') {
window.location.replace('/en' + window.location.pathname);
return;
}
const initialPath = normalizePath(window.location.pathname);
await loadSlide(initialPath);

44
src/views/Article.svelte
View file

@ -4,7 +4,6 @@
* Reçoit les données article via props, pas via le slide system.
*/
import Footer from '@components/layout/Footer.svelte'
import { t } from '@i18n'
let { data, onBack } = $props()
@ -21,32 +20,31 @@
const shareUrl = $derived(encodeURIComponent(window.location.href))
</script>
<div class="article-wrapper">
<article class="article">
<!-- Date + share buttons -->
<div class="article-topbar">
<time class="article-date">{t('published_on')} {data.published}</time>
<time class="article-date">Publié le {data.published}</time>
<div class="article-share">
{#if copySuccess}
<span class="copy-toast">{t('link_copied')}</span>
<span class="copy-toast">Lien copié !</span>
{/if}
<div class="share-buttons">
<!-- svelte-ignore a11y_invalid_attribute -->
<a href="#" class="share-button" title={t('copy_link')} onclick={(e) => { e.preventDefault(); copyLink() }}>
<img src="/assets/icons/link-icon.svg" alt={t('copy_link')} width="20" height="20" />
<a href="#" class="share-button" title="Copier le lien" onclick={(e) => { e.preventDefault(); copyLink() }}>
<img src="/assets/icons/link-icon.svg" alt="Copier le lien" width="20" height="20" />
</a>
<a href="https://api.whatsapp.com/send?text={shareUrl}" target="_blank" rel="noopener noreferrer" class="share-button">
<img src="/assets/icons/whatsapp-icon.svg" alt={t('share_whatsapp')} width="20" height="20" />
<img src="/assets/icons/whatsapp-icon.svg" alt="Partager sur WhatsApp" width="20" height="20" />
</a>
<a href="https://twitter.com/intent/tweet?url={shareUrl}" target="_blank" rel="noopener noreferrer" class="share-button">
<img src="/assets/icons/twitter-icon.svg" alt={t('share_x')} width="20" height="20" />
<img src="/assets/icons/twitter-icon.svg" alt="Partager sur X" width="20" height="20" />
</a>
<a href="https://www.facebook.com/sharer/sharer.php?u={shareUrl}" target="_blank" rel="noopener noreferrer" class="share-button">
<img src="/assets/icons/facebook-icon.svg" alt={t('share_facebook')} width="20" height="20" />
<img src="/assets/icons/facebook-icon.svg" alt="Partager sur Facebook" width="20" height="20" />
</a>
<a href="https://www.linkedin.com/sharing/share-offsite/?url={shareUrl}" target="_blank" rel="noopener noreferrer" class="share-button">
<img src="/assets/icons/linkedin-icon.svg" alt={t('share_linkedin')} width="20" height="20" />
<img src="/assets/icons/linkedin-icon.svg" alt="Partager sur LinkedIn" width="20" height="20" />
</a>
</div>
</div>
@ -75,23 +73,23 @@
<!-- Share section (bas d'article) -->
<div class="article-share-section">
<hr class="share-divider" />
<p class="share-label">{t('share_article')}</p>
<p class="share-label">Partager cet article</p>
<div class="share-buttons">
<!-- svelte-ignore a11y_invalid_attribute -->
<a href="#" class="share-button" title={t('copy_link')} onclick={(e) => { e.preventDefault(); copyLink() }}>
<img src="/assets/icons/link-icon.svg" alt={t('copy_link')} width="20" height="20" />
<a href="#" class="share-button" title="Copier le lien" onclick={(e) => { e.preventDefault(); copyLink() }}>
<img src="/assets/icons/link-icon.svg" alt="Copier le lien" width="20" height="20" />
</a>
<a href="https://api.whatsapp.com/send?text={shareUrl}" target="_blank" rel="noopener noreferrer" class="share-button">
<img src="/assets/icons/whatsapp-icon.svg" alt={t('share_whatsapp')} width="20" height="20" />
<img src="/assets/icons/whatsapp-icon.svg" alt="Partager sur WhatsApp" width="20" height="20" />
</a>
<a href="https://twitter.com/intent/tweet?url={shareUrl}" target="_blank" rel="noopener noreferrer" class="share-button">
<img src="/assets/icons/twitter-icon.svg" alt={t('share_x')} width="20" height="20" />
<img src="/assets/icons/twitter-icon.svg" alt="Partager sur X" width="20" height="20" />
</a>
<a href="https://www.facebook.com/sharer/sharer.php?u={shareUrl}" target="_blank" rel="noopener noreferrer" class="share-button">
<img src="/assets/icons/facebook-icon.svg" alt={t('share_facebook')} width="20" height="20" />
<img src="/assets/icons/facebook-icon.svg" alt="Partager sur Facebook" width="20" height="20" />
</a>
<a href="https://www.linkedin.com/sharing/share-offsite/?url={shareUrl}" target="_blank" rel="noopener noreferrer" class="share-button">
<img src="/assets/icons/linkedin-icon.svg" alt={t('share_linkedin')} width="20" height="20" />
<img src="/assets/icons/linkedin-icon.svg" alt="Partager sur LinkedIn" width="20" height="20" />
</a>
</div>
</div>
@ -99,7 +97,7 @@
<!-- Articles recommandés -->
{#if data.related?.length}
<section class="article-related">
<h2>{t('related')}</h2>
<h2>Nos recommandations</h2>
<div class="article-related-grid">
{#each data.related as rec}
<a href="/blog/{rec.slug}" class="article-related-card">
@ -112,20 +110,14 @@
</div>
</section>
{/if}
</article>
<Footer />
</div>
<style>
.article-wrapper {
grid-area: 6 / 1 / span 15 / span 20;
display: flex;
flex-direction: column;
}
.article {
height: fit-content;
grid-area: 6 / 1 / span 10 / span 20;
padding: 0 20%;
}

25
src/views/Blog.svelte
View file

@ -1,10 +1,8 @@
<script>
import { onMount } from 'svelte'
import { slides } from '@state/slides.svelte'
import { locale } from '@state/locale.svelte'
import Footer from '@components/layout/Footer.svelte'
import Article from '@views/Article.svelte'
import { t } from '@i18n'
let { data } = $props()
@ -17,9 +15,9 @@
let articleLoading = $state(false)
let sectionEl = $state(null)
// Extract slug from current URL (for direct navigation to /blog/slug or /en/blog/slug)
// Extract slug from current URL (for direct navigation to /blog/slug)
function getSlugFromUrl() {
const parts = window.location.pathname.replace(/^\/en/, '').split('/').filter(Boolean)
const parts = window.location.pathname.split('/').filter(Boolean)
// parts = ['blog', 'slug'] → slug = 'slug'
return parts.length >= 2 && parts[0] === 'blog' ? parts[1] : null
}
@ -27,8 +25,7 @@
async function openArticle(slug) {
articleLoading = true
try {
const prefix = locale.current === 'en' ? '/en' : ''
const res = await fetch(`${prefix}/blog/${slug}.json`)
const res = await fetch(`/blog/${slug}.json`)
if (!res.ok) throw new Error(`HTTP ${res.status}`)
articleData = await res.json()
scrollToTop()
@ -42,8 +39,7 @@
function backToList() {
articleData = null
const prefix = locale.current === 'en' ? '/en' : ''
history.pushState({}, '', `${prefix}/blog`)
history.pushState({}, '', '/blog')
document.title = `${data?.title ?? 'Blog'} — World Game`
scrollToTop()
}
@ -60,13 +56,12 @@
const url = new URL(link.href, window.location.origin)
if (url.origin !== window.location.origin) return
const match = url.pathname.match(/^(?:\/en)?\/blog\/([^/]+)$/)
const match = url.pathname.match(/^\/blog\/([^/]+)$/)
if (match) {
e.preventDefault()
e.stopPropagation()
const slug = match[1]
const prefix = locale.current === 'en' ? '/en' : ''
history.pushState({}, '', `${prefix}/blog/${slug}`)
history.pushState({}, '', `/blog/${slug}`)
openArticle(slug)
}
}
@ -134,7 +129,7 @@
<p class="blog-card-description">{featured.intro}</p>
{/if}
<a href="/blog/{featured.slug}" class="blog-card-readmore">
{t('read_article')} <span class="arrow">→</span>
Lire l'article <span class="arrow">→</span>
</a>
</div>
{#if featured.cover}
@ -156,7 +151,7 @@
<a href="/blog/{article.slug}">{article.title}</a>
</h2>
<a href="/blog/{article.slug}" class="blog-card-readmore">
{t('read_article')} <span class="arrow">→</span>
Lire l'article <span class="arrow">→</span>
</a>
</div>
{#if article.cover}
@ -173,7 +168,7 @@
{/each}
{#if articleLoading}
<p class="blog-loading">{t('loading')}</p>
<p class="blog-loading">Chargement…</p>
{/if}
</div>
@ -314,8 +309,6 @@
.blog :global(.site-footer) {
margin-left: -50px;
margin-right: -50px;
margin-top: 4rem;
}
/* --- Mobile --- */

7
src/views/Play.svelte
View file

@ -2,7 +2,6 @@
import { onMount } from 'svelte'
import { slides } from '@state/slides.svelte'
import ResponsivePicture from '@components/ui/ResponsivePicture.svelte'
import { t } from '@i18n'
let { data } = $props()
@ -114,7 +113,7 @@
<section
class="play golden-grid"
aria-label={t('play')}
aria-label="Jouer"
style={displayedGame?.backgroundColor ? `--background-color: ${displayedGame.backgroundColor}` : ''}
>
@ -218,9 +217,9 @@
target="_blank"
rel="noopener noreferrer"
class="button play-icon"
>{t('play')}</a>
>Jouer</a>
{:else}
<button class="button" disabled>{t('coming_soon')}</button>
<button class="button" disabled>Coming soon</button>
{/if}
</div>
{/if}

3
vite.config.js
View file

@ -43,8 +43,7 @@ export default defineConfig({
'@state': path.resolve(__dirname, 'src/state'),
'@router': path.resolve(__dirname, 'src/router'),
'@utils': path.resolve(__dirname, 'src/utils'),
'@composables': path.resolve(__dirname, 'src/composables'),
'@i18n': path.resolve(__dirname, 'src/i18n')
'@composables': path.resolve(__dirname, 'src/composables')
}
},
server: {