diff --git a/.gitignore b/.gitignore index 6d48fef..e3de4fa 100644 --- a/.gitignore +++ b/.gitignore @@ -4,6 +4,7 @@ node_modules/ nohup.out /public/build/ +/config/reference.php ###< system7 - jotunheimr ### ###> symfony/framework-bundle ### diff --git a/assets/css/style.homepage.scss b/assets/css/style.homepage.scss index 92b0aa2..2094ef5 100644 --- a/assets/css/style.homepage.scss +++ b/assets/css/style.homepage.scss @@ -1,181 +1,592 @@ +// ── Reset ──────────────────────────────────────────────────────────────────── + * { outline: none; padding: 0; margin: 0; + box-sizing: border-box; } -html, body { - background: #ffffff; - display: block; +html { + // Grid lives on html so it tiles across all pages including content pages + background-color: #07090d; + background-image: + linear-gradient(rgba(35, 111, 135, 0.1) 1px, transparent 1px), + linear-gradient(90deg, rgba(35, 111, 135, 0.1) 1px, transparent 1px); + background-size: 46px 46px; width: 100%; height: 100%; } +body { + background: transparent; + width: 100%; + height: 100%; +} + +// ── Hero ───────────────────────────────────────────────────────────────────── + header { - background: #d1e8ff; position: relative; width: 100%; - height: 950px; - color: #ffffff; - overflow: hidden; + + // Minesweeper grid texture + background-color: #07090d; + background-image: + linear-gradient(rgba(35, 111, 135, 0.1) 1px, transparent 1px), + linear-gradient(90deg, rgba(35, 111, 135, 0.1) 1px, transparent 1px); + background-size: 46px 46px; } -header section { +// Deep radial vignette – grid fades toward the centre +header::before { + content: ''; + position: absolute; + inset: 0; + background: radial-gradient( + ellipse 85% 75% at 50% 50%, + #07090d 10%, + transparent 75% + ); + z-index: 0; + pointer-events: none; +} + +// Smoke at the bottom so header bleeds into body +header::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 160px; + background: linear-gradient(to bottom, transparent, #07090d); + z-index: 1; + pointer-events: none; +} + +// ── Hero section ───────────────────────────────────────────────────────────── + +.hero { + position: relative; + z-index: 2; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + min-height: 100vh; + padding: 80px 40px 160px; + gap: 0; +} + +// Decorative glow blobs in opposite corners +.hero::before { + content: ''; + position: absolute; + top: -60px; + left: -60px; + width: 420px; + height: 420px; + border-radius: 50%; + background: radial-gradient(circle, rgba(173, 10, 5, 0.09) 0%, transparent 65%); + pointer-events: none; + z-index: 0; +} + +.hero::after { + content: ''; + position: absolute; + bottom: 100px; + right: -60px; + width: 380px; + height: 380px; + border-radius: 50%; + background: radial-gradient(circle, rgba(35, 111, 135, 0.1) 0%, transparent 65%); + pointer-events: none; + z-index: 0; +} + +// Logo +.hero-logo { + display: block; + margin-bottom: 72px; + position: relative; + z-index: 1; + animation: appear 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; +} + +.hero-logo img { + width: 400px; + max-width: 82vw; + filter: + drop-shadow(0 0 40px rgba(35, 111, 135, 0.35)) + drop-shadow(0 6px 20px rgba(0, 0, 0, 0.8)); +} + +// Body text block +.hero-body { + position: relative; + z-index: 1; + display: flex; + flex-direction: column; + align-items: center; + gap: 0; +} + +.hero-sub { + font: 300 17px 'Rajdhani', sans-serif; + color: rgba(149, 207, 245, 0.9); + letter-spacing: 3px; + text-transform: uppercase; + margin-bottom: 18px; + animation: rise 0.8s 0.15s cubic-bezier(0.22, 1, 0.36, 1) both; +} + +.hero-sub strong { + font-weight: 600; + color: #95cff5; +} + +.hero-avatar { + width: 36px; + height: 36px; + border-radius: 50%; + border: 2px solid rgba(149, 207, 245, 0.25); + vertical-align: middle; + margin-right: 10px; + margin-bottom: 2px; +} + +.hero h1 { + font: 800 58px 'Rajdhani', sans-serif; + color: #ffffff; + line-height: 1.1; + letter-spacing: 1px; + margin-bottom: 56px; + text-shadow: 0 4px 30px rgba(0, 0, 0, 0.7); + animation: rise 0.8s 0.28s cubic-bezier(0.22, 1, 0.36, 1) both; +} + +// ── CTA button ─────────────────────────────────────────────────────────────── + +.hero-cta { + position: relative; + display: inline-block; + font: 800 28px 'Rajdhani', sans-serif; + text-transform: uppercase; + letter-spacing: 6px; + text-decoration: none; + color: #ffffff; + padding: 22px 100px 20px; + border-radius: 4px; + border: 1px solid rgba(246, 125, 82, 0.25); + + background: linear-gradient(to bottom, #b30c06 0%, #d63d15 50%, #f67d52 100%); + + box-shadow: + 0 0 0 1px rgba(173, 10, 5, 0.2), + 0 0 30px rgba(173, 10, 5, 0.35), + 0 6px 24px rgba(0, 0, 0, 0.5), + inset 0 1px 0 rgba(255, 255, 255, 0.12); + + transition: transform 220ms ease, box-shadow 220ms ease, letter-spacing 220ms ease; + animation: rise 0.8s 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; +} + +// Outer glow layer (blurred duplicate, always visible) +.hero-cta::before { + content: ''; + position: absolute; + inset: -4px; + border-radius: 7px; + background: linear-gradient(to bottom, #ad0a05, #f67d52); + filter: blur(18px); + opacity: 0.3; + z-index: -1; + transition: opacity 220ms ease; +} + +.hero-cta:hover { + transform: translateY(-4px); + letter-spacing: 8px; + box-shadow: + 0 0 0 1px rgba(246, 125, 82, 0.3), + 0 0 50px rgba(173, 10, 5, 0.65), + 0 10px 32px rgba(0, 0, 0, 0.45), + inset 0 1px 0 rgba(255, 255, 255, 0.15); +} + +.hero-cta:hover::before { + opacity: 0.55; +} + +.hero-cta:active { + transform: translateY(-1px); +} + +// Version / copyright line +.hero-meta { + position: relative; + z-index: 1; + font: 400 12px 'Rajdhani', sans-serif; + color: rgba(255, 255, 255, 0.5); + letter-spacing: 0.5px; + margin-top: 58px; + animation: rise 0.8s 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; +} + +.hero-meta a { + color: rgba(149, 207, 245, 0.65); + text-decoration: none; + transition: color 180ms; +} + +.hero-meta a:hover { + color: #95cff5; +} + +// ── Compact hero (sub-pages) ───────────────────────────────────────────────── + +.hero--compact { + min-height: unset; + padding: 36px 60px 48px; + flex-direction: row; + align-items: center; + justify-content: center; + text-align: left; + gap: 52px; + + &::before, &::after { display: none; } + + .hero-logo { + flex-shrink: 0; + margin-bottom: 0; + + img { width: 180px; } + } + + .hero-body { + align-items: flex-start; + } + + .hero-sub { + font-size: 14px; + letter-spacing: 2px; + margin-bottom: 10px; + } + + h1 { + font-size: 26px; + margin-bottom: 24px; + letter-spacing: 0; + } + + .hero-cta { + padding: 12px 52px 10px; + font-size: 18px; + letter-spacing: 4px; + } + + .hero-meta { + margin-top: 20px; + } +} + +// Also shrink the bottom fade on sub-pages +header:has(.hero--compact)::after { + height: 60px; +} + +// ── Animations ─────────────────────────────────────────────────────────────── + +@keyframes appear { + from { opacity: 0; transform: scale(0.94); } + to { opacity: 1; transform: scale(1); } +} + +@keyframes rise { + from { opacity: 0; transform: translateY(16px); } + to { opacity: 1; transform: translateY(0); } +} + +// ── Content pages (terms, privacy, contact) ────────────────────────────────── + +main div.txt { + color: rgba(255, 255, 255, 0.85); + max-width: 900px; + margin: 0 auto; + padding: 60px 40px 80px; +} + +main div.txt h2 { + font: bold 28px 'Rajdhani', sans-serif; + color: #ffffff; + margin-bottom: 30px; + letter-spacing: 1px; +} + +main div.txt h3 { + font: bold 17px 'Rajdhani', sans-serif; + color: rgba(149, 207, 245, 0.9); + margin: 28px 0 10px; + letter-spacing: 0.5px; +} + +main div.txt p, +main div.txt li { + font: 400 15px 'Rajdhani', sans-serif; + color: rgba(255, 255, 255, 0.72); + line-height: 1.75; +} + +main div.txt a { + color: #95cff5; + text-decoration: none; + transition: color 180ms; + + &:hover { color: #c5e8ff; } +} + +// ── Technologies strip ──────────────────────────────────────────────────────── + +main { + background: #07090d; +} + +.tech-section { + padding: 48px 20px 72px; + text-align: center; + border-top: 1px solid rgba(255, 255, 255, 0.04); +} + +.tech-label { + font: 600 11px 'Rajdhani', sans-serif; + text-transform: uppercase; + letter-spacing: 6px; + color: rgba(255, 255, 255, 0.14); + margin-bottom: 28px; +} + +.tech-logos img { + display: inline-block; + width: 52px; + height: 52px; + object-fit: contain; + margin: 8px 24px; + // Force all logos to white, then tint with the game's blue + filter: brightness(0) invert(1) opacity(0.35); + transition: filter 220ms ease, transform 220ms ease; +} + +.tech-logos img:hover { + // Bright white → blue-tinted on hover + filter: + brightness(0) invert(1) + sepia(1) saturate(3) hue-rotate(175deg) brightness(1.1) + opacity(0.9); + transform: translateY(-4px); +} + +// ── Footer ─────────────────────────────────────────────────────────────────── + +footer { + background: #040608; + border-top: 1px solid rgba(35, 111, 135, 0.12); + width: 100%; +} + +.footer-inner { display: flex; align-items: flex-start; - justify-content: flex-start; - flex-direction: column; - max-width: 1300px; - width: 100%; - height: 100%; - padding: 20px; + justify-content: space-between; + max-width: 1100px; margin: 0 auto; + padding: 60px 60px 52px; + gap: 40px; } -header section div.logo img { - width: 350px; - margin: 50px 0; +// Left: brand block +.footer-brand { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 10px; } -header section div.logo a { - display: block; +.footer-logo { + width: 72px; + height: 72px; + opacity: 0.55; + filter: + drop-shadow(0 0 12px rgba(35, 111, 135, 0.4)) + brightness(1.1); + transition: opacity 250ms ease, filter 250ms ease; + + &:hover { + opacity: 0.9; + filter: + drop-shadow(0 0 20px rgba(35, 111, 135, 0.65)) + brightness(1.2); + } } -header section > img { - position: absolute; - width: 1300px; - height: 1300px; - right: -20%; - top: -10%; - - z-index: 1; -} - -header section > div { - z-index: 2; -} - -header section h1 { - font: bold 40px 'Rajdhani', sans-serif; - color: #434242; - margin-bottom: 100px; -} - -header section h2 { - font: normal 32px 'Rajdhani', sans-serif; - color: #434242; - margin-top: 100px; -} - -header section h3 { - display: block; - font: bold 16px 'Rajdhani', sans-serif; - color: #434242; - margin-top: 10px; -} - -header section h3 img { - width: 16px; -} - -header section div.buttons > a { - background: #69788e; - display: table; - font: bold 32px 'Rajdhani', sans-serif; +.footer-name { + font: 700 22px 'Rajdhani', sans-serif; + color: rgba(255, 255, 255, 0.75); + letter-spacing: 2px; text-transform: uppercase; + margin-top: 4px; +} + +.footer-tagline { + font: 400 13px 'Rajdhani', sans-serif; + color: rgba(149, 207, 245, 0.7); + letter-spacing: 0.5px; + max-width: 240px; + line-height: 1.5; +} + +// Right: navigation +.footer-nav-label { + font: 700 11px 'Rajdhani', sans-serif; + text-transform: uppercase; + letter-spacing: 4px; + color: rgba(255, 255, 255, 0.5); + margin-bottom: 18px; + text-align: left; +} + +.footer-nav ul { + list-style: none; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 6px; + min-width: 180px; +} + +.footer-nav ul li a { + display: block; + font: 500 15px 'Rajdhani', sans-serif; + color: rgba(255, 255, 255, 0.7); text-decoration: none; - border: 5px solid #57667b; - color: #FFFFFF; - padding: 25px 150px; - margin-bottom: 20px; + text-transform: uppercase; + letter-spacing: 1.5px; + white-space: nowrap; + padding: 6px 0; + transition: color 180ms ease, letter-spacing 180ms ease; - box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); - border-radius: 20px; - transition: all 250ms ease-in-out; + &:hover { + color: #95cff5; + letter-spacing: 2px; + } } -header section div.buttons > a:hover { - background: #57667b; +// Bottom copyright bar +.footer-copy { + border-top: 1px solid rgba(255, 255, 255, 0.05); + padding: 16px 60px; + max-width: 1100px; + margin: 0 auto; - -webkit-box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2); - box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2); - -webkit-transition: all 250ms ease-in-out; - -moz-transition: all 250ms ease-in-out; - -o-transition: all 250ms ease-in-out; - transition: all 250ms ease-in-out; -} - -header section div.buttons > a.small { - background: #83aed9; - display: inline-block; - font: bold 22px 'Rajdhani', sans-serif; - border: 1px solid #6890ba; - color: #FFFFFF; - padding: 10px; - - -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); - box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); - -webkit-transition: all 250ms ease-in-out; - -moz-transition: all 250ms ease-in-out; - -o-transition: all 250ms ease-in-out; - transition: all 250ms ease-in-out; - -} - -header section div.buttons > a.small:hover { - background: #86b5e1; - border: 1px solid #658fb8; - color: #FFFFFF; - - -webkit-box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2); - box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2); - -webkit-transition: all 250ms ease-in-out; - -moz-transition: all 250ms ease-in-out; - -o-transition: all 250ms ease-in-out; - transition: all 250ms ease-in-out; -} - -@media screen and (max-width: 1100px) { - header section { - align-items: center; - justify-content: center; + p { + font: 400 11px 'Rajdhani', sans-serif; + color: rgba(255, 255, 255, 0.45); + letter-spacing: 0.5px; text-align: center; } - header section div.buttons > a { - margin: 0 auto 20px auto; - } + a { + color: rgba(149, 207, 245, 0.6); + text-decoration: none; + transition: color 180ms; - header section h1 { - margin-bottom: 20px; - } - - header section div.logo img { - margin-bottom: 0; - } - - header section > img { - display: none; + &:hover { color: #95cff5; } } } -@media screen and (max-width: 500px) { - /*header {*/ - /*min-height: 100%;*/ - /*height: auto;*/ - /*}*/ +// ── Responsive ─────────────────────────────────────────────────────────────── - header section { - width: auto; +@media screen and (max-width: 768px) { + .hero--compact { + flex-direction: column; + text-align: center; + padding: 36px 24px 44px; + gap: 28px; + + .hero-body { align-items: center; } } - header section div.logo img { - width: 100%; + .footer-inner { + flex-direction: column; + align-items: center; + text-align: center; + padding: 48px 30px 36px; } - header section div.buttons > a { - display: block; - padding: 25px 5px; + .footer-brand { + align-items: center; + } + + .footer-tagline { + text-align: center; + } + + .footer-nav-label { + text-align: center; + } + + .footer-nav ul { + align-items: center; + } + + .footer-copy { + padding: 16px 30px; } } + +@media screen and (max-width: 900px) { + .hero h1 { + font-size: 44px; + } + + .hero-cta { + padding: 20px 72px 18px; + font-size: 24px; + letter-spacing: 5px; + } +} + +@media screen and (max-width: 550px) { + .hero { + padding: 60px 24px 140px; + } + + .hero-logo img { + width: 260px; + } + + .hero-logo { + margin-bottom: 52px; + } + + .hero h1 { + font-size: 32px; + margin-bottom: 40px; + } + + .hero-sub { + font-size: 14px; + letter-spacing: 2px; + } + + .hero-cta { + padding: 18px 48px 16px; + font-size: 20px; + letter-spacing: 4px; + } + + +} \ No newline at end of file diff --git a/assets/css/style.mineseeker.scss b/assets/css/style.mineseeker.scss index 274fe92..624a0a4 100644 --- a/assets/css/style.mineseeker.scss +++ b/assets/css/style.mineseeker.scss @@ -88,7 +88,7 @@ main { font-family: 'Open Sans', sans-serif; text-align: center; color: #354d6a; - width: 500px; + width: 660px; padding: 10px; -webkit-border-radius: 10px; @@ -109,47 +109,93 @@ main { color: #386e8c; } -#mine-wrapper .game-wrapper .game-overlay .game-overlay-window .clippy { +#mine-wrapper .game-wrapper .game-overlay .game-overlay-window .share-invite { + padding: 0 4px 4px; +} + +#mine-wrapper .game-wrapper .game-overlay .game-overlay-window .share-invite-label { + font-size: 13px; + color: #386e8c; + margin: 0 0 8px; + font-style: italic; +} + +#mine-wrapper .game-wrapper .game-overlay .game-overlay-window .share-url-box { display: flex; align-items: center; - width: 100%; - margin-bottom: 10px; + background: #d0e8f5; + border: 1px solid #7ab8d8; + border-radius: 6px; + padding: 0 12px; + margin-bottom: 12px; + cursor: text; + transition: border-color 200ms ease; + + &:hover { + border-color: #236f87; + } } -#mine-wrapper .game-wrapper .game-overlay .game-overlay-window .clippy input { +#mine-wrapper .game-wrapper .game-overlay .game-overlay-window .share-url-icon { + color: #236f87; + font-size: 13px; + flex-shrink: 0; + margin-right: 8px; + opacity: 0.7; +} + +#mine-wrapper .game-wrapper .game-overlay .game-overlay-window .share-url-input { + flex: 1; + background: transparent; border: 0; + outline: 0; height: 40px; - width: 100%; - padding: 0 20px; + color: #1a4a6a; + font-family: 'Courier New', monospace; + font-size: 13px; + font-weight: bold; + letter-spacing: 0.3px; + text-align: center; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + cursor: text; + min-width: 0; - -webkit-border-radius: 3px; - border-radius: 3px; - -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075); + &::selection { + background: rgba(35, 111, 135, 0.2); + } } -#mine-wrapper .game-wrapper .game-overlay .game-overlay-window a { - background: #d8e3ea; - display: inline-table; - text-decoration: none; - color: #126aa2; - padding: 10px 50px; - margin: 0 2.5px; - +#mine-wrapper .game-wrapper .game-overlay .game-overlay-window .share-copy-btn { + display: inline-flex; + align-items: center; + gap: 7px; + background: linear-gradient(to bottom, #236f87 0%, #1a5068 100%); + border: 1px solid #2e7a9a; + color: #e0f4ff; + font-family: 'Rajdhani', sans-serif; + font-size: 15px; + font-weight: bold; + letter-spacing: 0.5px; + padding: 9px 32px; + border-radius: 5px; cursor: pointer; + transition: all 220ms ease; - -webkit-border-radius: 3px; - border-radius: 3px; - -webkit-transition: all 250ms ease-in-out; - transition: all 250ms ease-in-out; -} + &:hover { + background: linear-gradient(to bottom, #2d8aa8 0%, #236f87 100%); + border-color: #5ba4d4; + color: #fff; + box-shadow: 0 0 10px rgba(35, 111, 135, 0.5); + } -#mine-wrapper .game-wrapper .game-overlay .game-overlay-window a:hover { - background: #a4afb6; - color: #ffffff; - - -webkit-transition: all 250ms ease-in-out; - transition: all 250ms ease-in-out; + &.copied { + background: linear-gradient(to bottom, #1a6844 0%, #135233 100%); + border-color: #2a9e60; + color: #a0f0c0; + box-shadow: 0 0 8px rgba(26, 104, 68, 0.5); + } } #mine-wrapper .game-wrapper .users { diff --git a/assets/js/mine-seeker/hooks/useServerCommunication.jsx b/assets/js/mine-seeker/hooks/useServerCommunication.jsx index 49581b2..b5d66ce 100644 --- a/assets/js/mine-seeker/hooks/useServerCommunication.jsx +++ b/assets/js/mine-seeker/hooks/useServerCommunication.jsx @@ -7,12 +7,42 @@ * file that was distributed with this source code. */ -import React, { useEffect, useRef } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import { useMutation, useQuery } from '@tanstack/react-query'; import { useGame } from '@mine-contexts'; import { DESC } from '@mine-utils'; import useStepTimer from './useStepTimer'; +const ShareLinkBox = ({ url }) => { + const [copied, setCopied] = useState(false); + + const handleCopy = () => { + navigator.clipboard.writeText(url).then(() => { + setCopied(true); + setTimeout(() => setCopied(false), 2500); + }).catch(() => {}); + }; + + return ( +
+

Share this link with your opponent

+
e.currentTarget.querySelector('input').select()}> + + e.target.select()} + /> +
+ +
+ ); +}; + /** Handles all server communication: SSE (Mercure), REST calls, and the initialization lifecycle. */ const useServerCommunication = (gameAssoc, gameInherited, isEnvDev) => { const { @@ -76,13 +106,7 @@ const useServerCommunication = (gameAssoc, gameInherited, isEnvDev) => { const wInit = (revealedCells = []) => { setGridReady(true); showOverlay('We are waiting for your opponent...', gameAssoc ? ( -
-

Share this unique link w/ your opponent

-
- -
- Play w/ me! -
+ ) : ''); setTimeout(() => revealedCells.forEach(cell => applyRevealedCell(cell, cell.player)), 0); }; diff --git a/public/images/technologies/bun.svg b/public/images/technologies/bun.svg new file mode 100644 index 0000000..e1918b9 --- /dev/null +++ b/public/images/technologies/bun.svg @@ -0,0 +1 @@ +Bun \ No newline at end of file diff --git a/public/images/technologies/howler.svg b/public/images/technologies/howler.svg new file mode 100644 index 0000000..bf9ea0a --- /dev/null +++ b/public/images/technologies/howler.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/technologies/jquery.png b/public/images/technologies/jquery.png deleted file mode 100644 index 5f63b01..0000000 Binary files a/public/images/technologies/jquery.png and /dev/null differ diff --git a/public/images/technologies/lets-encrypt.png b/public/images/technologies/lets-encrypt.png deleted file mode 100644 index e1fae90..0000000 Binary files a/public/images/technologies/lets-encrypt.png and /dev/null differ diff --git a/public/images/technologies/mercure.svg b/public/images/technologies/mercure.svg new file mode 100644 index 0000000..dbd2da3 --- /dev/null +++ b/public/images/technologies/mercure.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + diff --git a/public/images/technologies/phpstorm.svg b/public/images/technologies/phpstorm.svg new file mode 100644 index 0000000..39e48b8 --- /dev/null +++ b/public/images/technologies/phpstorm.svg @@ -0,0 +1 @@ +PhpStorm \ No newline at end of file diff --git a/public/images/technologies/react.png b/public/images/technologies/react.png deleted file mode 100644 index c27bd6b..0000000 Binary files a/public/images/technologies/react.png and /dev/null differ diff --git a/public/images/technologies/symfony.png b/public/images/technologies/symfony.png deleted file mode 100644 index 576de45..0000000 Binary files a/public/images/technologies/symfony.png and /dev/null differ diff --git a/public/images/technologies/symfony.svg b/public/images/technologies/symfony.svg new file mode 100644 index 0000000..4c0706b --- /dev/null +++ b/public/images/technologies/symfony.svg @@ -0,0 +1 @@ +Symfony \ No newline at end of file diff --git a/public/images/technologies/tanstack-query.svg b/public/images/technologies/tanstack-query.svg new file mode 100644 index 0000000..ed38f7f --- /dev/null +++ b/public/images/technologies/tanstack-query.svg @@ -0,0 +1 @@ +React Query \ No newline at end of file diff --git a/public/images/technologies/vite.svg b/public/images/technologies/vite.svg new file mode 100644 index 0000000..585b2ab --- /dev/null +++ b/public/images/technologies/vite.svg @@ -0,0 +1 @@ +Vite \ No newline at end of file diff --git a/public/images/technologies/websocket.png b/public/images/technologies/websocket.png deleted file mode 100644 index 93fee91..0000000 Binary files a/public/images/technologies/websocket.png and /dev/null differ diff --git a/templates/Game/index.html.twig b/templates/Game/index.html.twig index 929ffb5..81356a1 100644 --- a/templates/Game/index.html.twig +++ b/templates/Game/index.html.twig @@ -3,93 +3,83 @@ {% block title %} - The Game{% endblock %} {% block metas %} - - - - - + + + + + {% endblock %} {% block header %} -
- -
-
- {% if is_granted("IS_AUTHENTICATED_REMEMBERED") %} - {% if app.user.facebookId is not null %} -
- Facebook profile -
- {% endif %} -
- - Hello, {{ app.user.realName is not null ? app.user.realName : app.user.username }}! - -

Let's play!! :D

-
- {% else %} -
-

A minesweeper game rethought...

-

...and you can play w/o register!!

-
- {% endif %} -
-
- Play NOW! - {# - {% if is_granted("IS_AUTHENTICATED_REMEMBERED") %} - - {{ 'layout.logout'|trans({}, 'FOSUserBundle') }} - - {% else %} - Sign up · - Sign in - {% endif %} - #} -
-

- version {{ version }} • MineSeeker © {{ "now"|date("Y") }} • - www.splendidbear.org -

-
- MineSeeker Logo -
+
+ + + +
+ {% if is_granted("IS_AUTHENTICATED_REMEMBERED") %} +

+ {% if app.user.facebookId is defined and app.user.facebookId is not null %} + + {% endif %} + Welcome back, {{ app.user.realName is not null ? app.user.realName : app.user.username }} +

+

Ready for another round?

+ {% else %} +

Multiplayer minesweeper — reimagined

+

No account needed.
Just play.

+ {% endif %} + Play Now +
+ +
{% endblock %} {% block body %} -
-
-

Used technologies

- Used Websocket - Used React.js - Used Symfony - Used jQuery - Used Let's Encrypt -
+
+

Built with

+
+ Symfony + Howler.js + TanStack Query + Mercure + Vite + Bun + PHPStorm
+
{% endblock %} {% block footer %} -