Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhancement - Steam Onboarding #541

Merged
merged 9 commits into from
Feb 16, 2024
Merged

Enhancement - Steam Onboarding #541

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
38974db
update images to be more standardized, update styling
beckpaul Jan 30, 2024
3c07421
update the view - too many br tags
beckpaul Jan 30, 2024
f7b5366
update overarching class name for content container
beckpaul Jan 30, 2024
d3b9688
remove mixing that is not used
beckpaul Jan 31, 2024
adffbaf
fix styling for link GOG page to be compatable with linksteam page ch…
beckpaul Jan 31, 2024
33152de
lint
beckpaul Jan 31, 2024
165dafe
change wording on setup page to direct users to start faf as part of …
beckpaul Feb 2, 2024
439de92
address my own comments, normalize the pages, add some extra flavor t…
beckpaul Feb 5, 2024
8ef9120
fix gog input field css
beckpaul Feb 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added public/images/steamGOG/steamBrowserGameSettings.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/steamGOG/steamBrowserGames.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/images/steamGOG/steamEditProfile.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/images/steamGOG/steamPublic.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/images/steamGOG/steamSettings.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
41 changes: 22 additions & 19 deletions public/styles/site/play.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -43,32 +36,42 @@
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
margin: 0
.playInnerGrid
.playContainer
padding: 1em 0.1em
.playContentContainer
.smallerImages
flex-direction: column

39 changes: 9 additions & 30 deletions src/backend/templates/views/account/linkGog.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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). <br> 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. <br> Only the fact that you own Supreme Commander: Forged Alliance. <br> Which is why we need you to set your Game Details to public when linking your account.
37 changes: 11 additions & 26 deletions src/backend/templates/views/account/linkSteam.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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?
Expand Down
140 changes: 62 additions & 78 deletions src/backend/templates/views/play.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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). <br> 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. <br> If your Windows computer stops you from running FAF, click on "More info" and you'll be able to run it. <br> This happens because FAF doesn't pay Microsoft for security certifications. So it's an "unrecognized app" for Windows. <br> 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. <br> If your Windows computer stops you from running FAF, click on "More info" and you'll be able to run it. <br> This happens because FAF doesn't pay Microsoft for security certifications. So it's an "unrecognized app" for Windows. <br> 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. <br> 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. <br> 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. <br> 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. <br> 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 <br> watching the video below and joining the official FAF Discord, <br> 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 <br> watching the video below and joining the official FAF Discord, <br> 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'))
Loading