diff --git a/public/images/steamGOG/steamBrowserGameSettings.jpg b/public/images/steamGOG/steamBrowserGameSettings.jpg new file mode 100644 index 00000000..bda95e71 Binary files /dev/null and b/public/images/steamGOG/steamBrowserGameSettings.jpg differ diff --git a/public/images/steamGOG/steamBrowserGames.jpg b/public/images/steamGOG/steamBrowserGames.jpg new file mode 100644 index 00000000..6a5210fe Binary files /dev/null and b/public/images/steamGOG/steamBrowserGames.jpg differ diff --git a/public/images/steamGOG/steamEditProfile.jpg b/public/images/steamGOG/steamEditProfile.jpg index 636c3c53..ef056c27 100644 Binary files a/public/images/steamGOG/steamEditProfile.jpg and b/public/images/steamGOG/steamEditProfile.jpg differ diff --git a/public/images/steamGOG/steamPublic.jpg b/public/images/steamGOG/steamPublic.jpg index 6b8dd451..1ae9bcf2 100644 Binary files a/public/images/steamGOG/steamPublic.jpg and b/public/images/steamGOG/steamPublic.jpg differ diff --git a/public/images/steamGOG/steamSettings.jpg b/public/images/steamGOG/steamSettings.jpg index c22f356f..825a3383 100644 Binary files a/public/images/steamGOG/steamSettings.jpg and b/public/images/steamGOG/steamSettings.jpg differ diff --git a/public/styles/site/play.sass b/public/styles/site/play.sass index e75f186c..53d834bd 100644 --- a/public/styles/site/play.sass +++ b/public/styles/site/play.sass @@ -17,23 +17,16 @@ margin: 0 auto gap: 3em 0 .playContainer - padding: 1em 0 + padding: 1em 0 width: 100% border-radius: 20px text-align: center background-color: variables.$background-secondary - - img - width: 40% - height: 100% + label margin: 0 font-size: 18px - input - margin: 1em 0.5em - width: 0.75em - height: 0.75em a @@ -43,28 +36,34 @@ font-size: 1em text-align: center display: block - + h2 padding: 1em font-weight: 600 p font-weight: normal - .playCheckboxContainer + .playContentContainer padding: 0 0.25em - text-align: left - display: inline-block + margin: 0 0.25em + text-align: center + display: grid + justify-items: center + gap: 1.25em img - width: 75% - .gogSmallerImage + max-width: 100% + .smallerImages + display: inline-flex + justify-content: space-between + flex-direction: row img - width: 30% - .gogSmallerImage2 - img - width: 45% + flex-grow: 1 + padding: 1.25em .75em + max-height: 500px .displayBlock input width: initial + @media (max-width: 1000px) .playMain padding: 0 @@ -72,3 +71,7 @@ .playInnerGrid .playContainer padding: 1em 0.1em + .playContentContainer + .smallerImages + flex-direction: column + diff --git a/src/backend/templates/views/account/linkGog.pug b/src/backend/templates/views/account/linkGog.pug index c184590c..00df921d 100644 --- a/src/backend/templates/views/account/linkGog.pug +++ b/src/backend/templates/views/account/linkGog.pug @@ -5,43 +5,27 @@ block bannerMixin block content .playMain .playInnerGrid + h1 How to link FAF Account to GOG + p.highlightText Shouldn't take more than 1-2 minutes. .playContainer - h2 How to link FAF account to GOG? - p Shouldnt take more than 1-2 minutes. - - .playCheckboxContainer - input(type='checkbox') - label Go to your Profile inside GOG -> Order & Settings -> Privacy -> Set everything to Everyone/All visitors (once the linking is done, you can revert this) - br - .gogSmallerImage + h2 Your GOG account must be public to link + .playContentContainer + label Go to your Profile inside GOG -> Order & Settings -> Privacy -> Set everything to Everyone/All visitors + label Once the linking is done, you can revert this. + .smallerImages img(src='/images/steamGOG/gog1.jpg') img(src='/images/steamGOG/gog2.jpg') - br - br img(src='/images/steamGOG/gog3.jpg') - br - input(type='checkbox') label Switch your profile's about you to the code below (so we can make sure you own SC:FA). - br - h2 #{ gogToken } - br + h3 #{ gogToken } img(src='/images/steamGOG/gog4.jpg') - .gogSmallerImage2 - br + .smallerImages img(src='/images/steamGOG/gog5.jpg') - br - br img(src='/images/steamGOG/gog6.jpg') - br - br - input(type='checkbox') label Write your GOG username below and then click the link accounts button. - br +flash-messages(flash) - - br .displayBlock form( method='post', @@ -53,17 +37,12 @@ block content button.btn.btn-default.btn-lg.btn-outro.btn-danger( type='submit' ) Link accounts - br - input(type='checkbox') label Make sure the flash message below states you are connected. - br p Flash Message: +flash-messages(flash) - br h1 And you are done with GOG linking forever! p Now if you want, you can set your privacy settings back to private and your profile's about you to normal. - h2 Why do I need to link my Steam/GOG account to FAF? p FAF as an organization doesn't own the copyright or trademark to SC:FA (Square Enix does).
Therefore, we need to verify you own a copy of SC:FA to prevent piracy. p Linking your GOG account to FAF doesn't provide us with any information or powers over your account.
Only the fact that you own Supreme Commander: Forged Alliance.
Which is why we need you to set your Game Details to public when linking your account. diff --git a/src/backend/templates/views/account/linkSteam.pug b/src/backend/templates/views/account/linkSteam.pug index 2b4f7b86..3a69d286 100644 --- a/src/backend/templates/views/account/linkSteam.pug +++ b/src/backend/templates/views/account/linkSteam.pug @@ -1,45 +1,30 @@ extends ../../layouts/default include ../../mixins/flash-messages -include ../../mixins/form/account block bannerMixin block content .playMain .playInnerGrid + h1 How to link FAF Account to Steam + p.highlightText Shouldn't take more than 1-2 minutes. .playContainer - h2 How to link FAF account to Steam? - p Shouldnt take more than 1-2 minutes. - - .playCheckboxContainer - input(type='checkbox') - label Go to your Profile inside Steam -> Edit Profile -> My Privacy Settings -> Set Game details to "Public" - br + h2 Your Steam account must be public to link + .playContentContainer + label Go to your Profile inside the Steam client -> Edit Profile -> Privacy Settings -> Set Game details to "Public" img(src='/images/steamGOG/steamPublic.jpg') - br - br img(src='/images/steamGOG/steamEditProfile.jpg') - br - br img(src='/images/steamGOG/steamSettings.jpg') - - br - input(type='checkbox') label Login to Steam and link your account below - br a(href=steamConnect, target='_blank') button Link your FAF account to Steam - br img(src='/images/steamGOG/steamLogin.jpg') - - br - - input(type='checkbox') label Make sure the flash message below states you are connected. - - br - p Flash Message: + label Flash Message: +flash-messages(flash) - br - h1 And you are done with Steam link forever! + label If you encounter issues linking then you may also need to set the game to be public + label Login to steam in your browser -> Games -> Supreme commander -> "Unmark as private" + img(src='/images/steamGOG/steamBrowserGames.jpg') + img(src='/images/steamGOG/steamBrowserGameSettings.jpg') + h2 And you are done with Steam link forever! p Now if you want, you can set your Game Details back to private. h2 Why do I need to link my Steam/GOG account to FAF? diff --git a/src/backend/templates/views/play.pug b/src/backend/templates/views/play.pug index 44447d6d..5094af03 100644 --- a/src/backend/templates/views/play.pug +++ b/src/backend/templates/views/play.pug @@ -1,100 +1,84 @@ extends ../layouts/default - block bannerMixin - block content .playMain - h1 Play the best RTS out there - h2.highlightText Join hundreds of players on the battlefield - - br - .playInnerGrid + h1 Play the Best RTS out There + p.highlightText Join hundreds of players on the battlefield .playContainer - h1 Before installing FAF - p Doing these now will ensure an easy installation later and avoid issues. - - .playCheckboxContainer - input(type='checkbox') + h2 Before installing FAF + p Doing these now will ensure an easy installation later and avoid issues. + .playContentContainer label Buy and install Supreme Commander:Forged Alliance (SC:FA) via Steam or GOG. - br - a( - href='https://store.steampowered.com/app/9420/Supreme_Commander_Forged_Alliance', - target='_blank' - ) - button Buy on Steam - a( - href='https://www.gog.com/en/game/supreme_commander_gold_edition', - target='_blank' - ) - button Buy on GOG - br - input(type='checkbox') + label Make sure to run SC:FA and start a skirmish game (you can quit out after it begins) + div + a( + href='https://store.steampowered.com/app/9420/Supreme_Commander_Forged_Alliance', + target='_blank' + ) + button Buy on Steam + a( + href='https://www.gog.com/en/game/supreme_commander_gold_edition', + target='_blank' + ) + button Buy on GOG label Create and activate your FAF account - br - a(href='/account/register', target='_blank') - button Register - - br - - input(type='checkbox') + div + a(href='/account/register', target='_blank') + button Register label Link Steam or GOG account to your FAF account. - br - a(href='/account/link', target='_blank') - button Link Steam Account - a(href='/account/linkGog', target='_blank') - button Link GOG Account - br - input(type='checkbox') - label Run SC:FA locally once to create a profile in it (game generates necessary files doing so) - br - + div + a(href='/account/link', target='_blank') + button Link Steam Account + a(href='/account/linkGog', target='_blank') + button Link GOG Account h2 Why do I need to link my Steam/GOG account to FAF? p FAF as an organization doesn't own the copyright or trademark to SC:FA (Square Enix does).
Therefore, we need to verify you own a copy of SC:FA to prevent piracy. - h2.highlightText Checked everything above? + h2.highlightText Completed everything above? h2.highlightText Then follow these easy steps to play FAF .playContainer - h1 1 - Download and install FAF - p Download the FAF Client and install it. FAF is open source and safe to use.
If your Windows computer stops you from running FAF, click on "More info" and you'll be able to run it.
This happens because FAF doesn't pay Microsoft for security certifications. So it's an "unrecognized app" for Windows.
If you have any issues or troubleshooting, join our Discord or use our forum for help. - a#faf-client-download(href='#') - button Download FAF - br - br - a(href=discordUrl) - button Discord - a(href=forumUrl) - button Forum - a(href='https://wiki.faforever.com/en/Play/Linux-Install') - button Linux Installation - br - br - img(src='/images/windowsDefender.png') + .playContentContainer + h1 1 - Download and install FAF + p Download the FAF Client and install it. FAF is open source and safe to use.
If your Windows computer stops you from running FAF, click on "More info" and you'll be able to run it.
This happens because FAF doesn't pay Microsoft for security certifications. So it's an "unrecognized app" for Windows.
If you have any issues or troubleshooting, join our Discord or use our forum for help. + a#faf-client-download(href='#') + button Download FAF + div + a(href=discordUrl) + button Discord + a(href=forumUrl) + button Forum + a( + href='https://wiki.faforever.com/en/Play/Linux-Install' + ) + button Linux Installation + .smallerImages + img(src='/images/windowsDefender.png') .playContainer - h1 2 - Run FAF and find your SC:FA directory - p Run FAF and log in with the same credentials you used for your FAF account.
Now once you try joining a lobby or creating a game in the Play tab, FAF will ask for your SC:FA game files/directory.
Below are instructions if you dont know where you installed SC:FA on Steam or GOG - a(href='https://www.youtube.com/watch?v=-BVEctqzkxw') - button How to find Steam directory - a(href='https://www.youtube.com/watch?v=7IzJlw3Tdtg') - button How to find GOG directory + .playContentContainer + h1 2 - Run FAF and find your SC:FA directory + p Run FAF and log in with the same credentials you used for your FAF account.
Now once you try joining a lobby or creating a game in the Play tab, FAF will ask for your SC:FA game files/directory.
Below are instructions if you dont know where you installed SC:FA on Steam or GOG + .div + a(href='https://www.youtube.com/watch?v=-BVEctqzkxw') + button How to find Steam directory + a(href='https://www.youtube.com/watch?v=7IzJlw3Tdtg') + button How to find GOG directory .playContainer - h1 3 - Enjoy Forged Alliance Forever! - p You are officially done! If you are new to the game, we recommend
watching the video below and joining the official FAF Discord,
you'll find plenty of friendly people to play, ask questions and become part of the community! - - a(href='https://discord.gg/kTsxKu52WU') - button Join the FAF Discord - br - br - iframe( - style='width: 75%; height: 45vh', - src='https://www.youtube.com/embed/Nks9loE96ok', - title='NEW TO FAF? || SUPREME COMMANDER TUTORIAL', - allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;', - allowfullscreen - ) + .playContentContainer + h1 3 - Enjoy Forged Alliance Forever! + p You are officially done! If you are new to the game, we recommend
watching the video below and joining the official FAF Discord,
you'll find plenty of friendly people to play, ask questions and become part of the community! + a(href='https://discord.gg/kTsxKu52WU') + button Join the FAF Discord + iframe( + style='width: 75%; height: 45vh', + src='https://www.youtube.com/embed/Nks9loE96ok', + title='NEW TO FAF? || SUPREME COMMANDER TUTORIAL', + allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;', + allowfullscreen + ) block js script(src=webpackAssetJS('play'))