29 |
37 |
38 |
39 |
17 |
18 | ACC Server Browser Web
19 |
21 | {googleVerify &&
22 |
23 | }
24 |
25 |
26 |
27 |
28 | {}, status: "online", removeFavourite: ()=>{}, addFavourite: ()=>{}}}>
40 |
42 |
43 |
44 |
45 | );
46 | };
47 | export default Home;
48 |
--------------------------------------------------------------------------------
/components/filters.module.scss:
--------------------------------------------------------------------------------
1 |
2 | .filters {
3 | display: flex;
4 | flex-direction: column;
5 | gap: 20px;
6 | margin: 0px;
7 |
8 | >*:not(.filter_search) {
9 | flex-direction: row;
10 | gap: 20px;
11 | }
12 |
13 | .filters_main {
14 | display: flex;
15 | position: relative;
16 | padding-left: 20px;
17 | padding-right: 20px;
18 | width: 100%;
19 | align-self: stretch;
20 | box-sizing: border-box;
21 | flex-wrap: wrap;
22 |
23 | .filter_group{
24 | display: table;
25 | border-spacing: 10px 0px;
26 |
27 | >* {
28 | display: table-row;
29 | >*{
30 | display: table-cell;
31 | }
32 | }
33 | .filter_group_name{
34 | display: table-row;
35 | font-weight: 700;
36 | column-span: all;
37 | }
38 | }
39 | }
40 |
41 | .filter_search{
42 | flex-grow: 1;
43 | display: flex;
44 | gap: 10px;
45 |
46 | input {
47 | width: auto;
48 | max-width: auto;
49 | flex-grow: 1;
50 | color: white;
51 | font-size: 1.5em;
52 | padding: 5px;
53 | border-radius: 10px;
54 | border-width: 2px;
55 | min-width: 0px;
56 | }
57 | }
58 | }
59 |
60 | .filter_search input:focus{
61 | outline: none;
62 | border-color: #ffff;
63 | }
64 |
65 | .button_area{
66 | margin-left: auto;
67 | justify-self: flex-end;
68 | flex-grow: 1;
69 | display: flex;
70 | flex-direction: row;
71 | justify-content: flex-end;
72 | align-items: flex-end;
73 | gap: 10px;
74 |
75 | * {
76 | padding: 5px 10px;
77 | font-weight: 500;
78 | }
79 | }
80 |
81 | #show_filters {
82 | display: block;
83 | font-size: 1.1em;
84 | padding: 0px 20px;
85 | box-shadow: inset 0 0 0 5px #1b1b1b;
86 | }
87 |
88 | #update_button{
89 | padding: 5px 10px;
90 | font-size: 1.1em;
91 | }
92 |
93 | #hide_filters {
94 | padding: 5px 10px;
95 | font-size: 1.1em;
96 | background: none;
97 | box-shadow: inset 0 0 0 2px white;
98 | margin-right: 6px;
99 | }
100 |
101 | #hide_filters:hover {
102 | box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.712);
103 | }
104 |
--------------------------------------------------------------------------------
/components/banner.tsx:
--------------------------------------------------------------------------------
1 | import styles from "./banner.module.scss";
2 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
3 | import { faRedoAlt } from "@fortawesome/free-solid-svg-icons";
4 | import { Filters } from "./filters";
5 | import DataContext from "./dataContext";
6 | import { useContext, useEffect, useState } from "react";
7 |
8 | export const Banner = ({ status }: { status: string }) => {
9 | const ctx = useContext(DataContext);
10 | const [bannerHidden, setBannerHidden] = useState(false);
11 |
12 | useEffect(() => {
13 | if (!bannerHidden) {
14 | const isHidden = JSON.parse(
15 | localStorage.getItem("newsHidden") || "false"
16 | );
17 | if (isHidden) {
18 | setBannerHidden(true);
19 | }
20 | } else {
21 | localStorage.setItem("newsHidden", "true");
22 | }
23 | }, [bannerHidden]);
24 | return (
25 |
26 |
84 | );
85 | };
86 |
--------------------------------------------------------------------------------
/styles/globals.scss:
--------------------------------------------------------------------------------
1 |
2 | html,
3 | body {
4 | padding: 0;
5 | margin: 0;
6 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
7 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
8 | }
9 |
10 | a:not(.link) {
11 | color: inherit;
12 | text-decoration: none;
13 | }
14 |
15 | * {
16 | box-sizing: border-box;
17 | }
18 |
19 | @media (prefers-color-scheme: dark) {
20 | html {
21 | color-scheme: dark;
22 | }
23 | body {
24 | color: white;
25 | background: black;
26 | }
27 | }
28 |
29 | html {
30 | min-height: 0px;
31 | max-height: 100vh;
32 | overflow: hidden;
33 | }
34 |
35 | body{
36 | padding: 0px;
37 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
38 | color: white;
39 | display: flex;
40 | flex-direction: column;
41 | max-height: 100vh;
42 | box-sizing: content-box;
43 | margin: 0px;
44 | overflow: hidden;
45 | }
46 |
47 | .background{
48 | position: fixed;
49 | min-width: 110vw;
50 | min-height: 110vh;
51 | top: -5vh;
52 | left: -5vw;
53 | z-index: -1;
54 | filter: brightness(80%) blur(2px);
55 |
56 | :global(*){
57 | width: 100% !important;
58 | height: 100% !important;
59 | }
60 | }
61 |
62 | input {
63 | background: black;
64 | padding: 5px;
65 | border: 1px solid white;
66 | border-radius: 5px;
67 | outline: none;
68 | color: white;
69 | }
70 |
71 | button, .btn {
72 | box-shadow: none;
73 | color: white;
74 | border: 2px solid white;
75 | border-radius: 10px;
76 | cursor: pointer;
77 | background: black;
78 | padding: 10px 20px;
79 | font-weight: 700;
80 | }
81 |
82 | main {
83 | display: flex;
84 | flex-direction: column;
85 | justify-content: stretch;
86 | height: 100vh;
87 | overflow: hidden;
88 | max-height: 100vh;
89 | }
90 |
91 | #spinner {
92 | // flex
93 | display: none;
94 | flex-direction: column;
95 | position: absolute;
96 | top: 0px;
97 | left: 0px;
98 | width: 100%;
99 | height: 100%;
100 | justify-content: center;
101 | align-items: center;
102 | background-color: rgba(0,0,0,0.5);
103 | z-index: 2;
104 | gap: 50px;
105 | }
106 | .lds-ring {
107 | display: inline-block;
108 | position: relative;
109 | width: min(50vw, 50vh);
110 | height: min(50vw, 50vh);
111 | }
112 | .lds-ring div {
113 | box-sizing: border-box;
114 | display: block;
115 | position: absolute;
116 | width: min(50vw, 50vh);
117 | height: min(50vw, 50vh);
118 | margin: 8px;
119 | border: 8px solid #fff;
120 | border-radius: 50%;
121 | animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
122 | border-color: #fff transparent transparent transparent;
123 | }
124 | .lds-ring div:nth-child(1) {
125 | animation-delay: -0.45s;
126 | }
127 | .lds-ring div:nth-child(2) {
128 | animation-delay: -0.3s;
129 | }
130 | .lds-ring div:nth-child(3) {
131 | animation-delay: -0.15s;
132 | }
133 | @keyframes lds-ring {
134 | 0% {
135 | transform: rotate(0deg);
136 | }
137 | 100% {
138 | transform: rotate(360deg);
139 | }
140 | }
141 |
142 | .flex-col {
143 | display: flex;
144 | flex-direction: column;
145 | }
146 | .flex-row{
147 | display: flex;
148 | flex-direction: row;
149 | }
150 |
151 | .flex-wrap {
152 | flex-wrap: wrap;
153 | }
154 |
155 | .grey-text {
156 | color: #aaa;
157 | }
--------------------------------------------------------------------------------
/components/server.module.scss:
--------------------------------------------------------------------------------
1 | .server {
2 | background-color: rgba(5, 5, 5, 0.9);
3 | position: relative;
4 | overflow: hidden;
5 | &:nth-child(2n) {
6 | background-color: rgba(0, 0, 0, 0.9);
7 | }
8 | }
9 |
10 | .server > *:not(img) {
11 | vertical-align: middle;
12 | border: none;
13 | padding-top: 10px;
14 | padding-bottom: 10px;
15 | box-sizing: border-box;
16 | }
17 |
18 | .server_name {
19 | margin-bottom: 10px;
20 | font-size: 1.2em;
21 |
22 | a {
23 | color: rgb(0, 157, 205);
24 |
25 | &:hover {
26 | text-decoration: underline;
27 | text-decoration-thickness: 2px;
28 | }
29 | }
30 | }
31 |
32 | .server_favourite {
33 | font-size: 1.8em;
34 | height: 100%;
35 | padding-left: 20px;
36 | padding-right: 10px;
37 | }
38 |
39 | .server_favourite_icon {
40 | height: 100%;
41 | display: flex;
42 | flex-direction: column;
43 | justify-content: center;
44 | cursor: pointer;
45 | }
46 |
47 | .server_favourite_icon:hover {
48 | color: #ddd;
49 | }
50 |
51 | .server_ip {
52 | margin-right: 20px;
53 | }
54 |
55 | .flag * {
56 | max-height: 30px;
57 | max-width: 50px;
58 | font-size: 2em;
59 | }
60 |
61 | .sessions {
62 | margin-right: 20px;
63 | }
64 |
65 | .session {
66 | display: inline-block;
67 | background-color: #494949;
68 | color: rgb(255, 255, 255);
69 | padding: 5px;
70 | font-weight: 600;
71 | margin-bottom: 5px;
72 | margin-right: 10px;
73 | }
74 |
75 | .session.active {
76 | background-color: #fafafa;
77 | color: black;
78 | }
79 |
80 | /* CONDITIONS */
81 | .conditions {
82 | display: flex;
83 | flex-direction: row;
84 | align-items: center;
85 | justify-content: flex-end;
86 | font-size: 2em;
87 | }
88 | .conditions_icon {
89 | height: 100%;
90 | display: flex;
91 | flex-direction: column;
92 | justify-content: center;
93 | }
94 |
95 | .conditions_variability {
96 | box-sizing: content-box;
97 | margin-top: 30px;
98 | margin-bottom: 30px;
99 | transform: rotate(270deg);
100 | width: 60px;
101 | height: 20px;
102 | overflow: hidden;
103 | background-color: rgba(0, 0, 0, 0.1);
104 | }
105 | .conditions_variability::-webkit-progress-bar {
106 | background-color: rgba(0, 0, 0, 0.1);
107 | }
108 |
109 | .conditions_variability::-webkit-progress-value {
110 | background-color: rgb(255, 198, 42);
111 | }
112 |
113 | .server_class {
114 | padding: 3px 7px;
115 | margin-top: 5px;
116 | justify-self: flex-start;
117 | min-width: 0px;
118 | width: fit-content;
119 | font-weight: 600;
120 | }
121 |
122 | .server_class.GT3 {
123 | background-color: #464646;
124 | color: white;
125 | }
126 |
127 | .server_class.GT4 {
128 | color: white;
129 | background-color: rgb(33, 40, 105);
130 | }
131 |
132 | .server_class.GTC {
133 | color: white;
134 | background-color: rgb(255, 136, 0);
135 | }
136 |
137 | .server_class.Mixed {
138 | background-color: white;
139 | color: black;
140 | }
141 |
142 | .server_class.TCX {
143 | background-color: rgb(1, 135, 168);
144 | color: rgb(255, 255, 255);
145 | }
146 | .server_class.GT2 {
147 | background-color: rgb(213, 75, 0);
148 | color: rgb(255, 255, 255);
149 | }
150 | .server_copy {
151 | font-size: 1.8em;
152 | height: 100%;
153 | padding-left: 20px;
154 | width: 0.1%;
155 | white-space: nowrap;
156 | }
157 |
158 | .server_copy svg {
159 | cursor: pointer;
160 | }
161 |
162 | .requirements {
163 | display: flex;
164 | flex-direction: row;
165 | gap: 10px;
166 | }
167 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ACC Community Server Browser Project
2 | View Assetto Corsa Competizione servers without opening the game.
3 |
4 | ## How it works
5 | Using captured websocket messages, the server "replays" them in order to get a list of servers from Kunos directly. The response from Kunos' server is in a (what seems to be) propriety format which I've been able to extract some of the data from however a large chunk of it is still unknown (see datanotes.txt for more information). The data is converted into JSON which is then stored in a database and served to the html client.
6 |
7 | Currently the app updates its server data every 2 minutes to avoid potentially being rate-limited or blocked by the kunos servers. This should be frequent enough to provide roughly accurate data but you can change the value in `./getServers.js` if you need.
8 | ## Setup
9 | ### Obtaining request strings
10 | To obtain the request strings it is a fairly involved process. I would not recommend sharing your individual request strings with other people as they may contain sensitive authentication data in relation to your Steam account. Also, the server's that appear will depend on what DLC is associated with the steam account you use to get the request strings so it is ideal to have the British GT and Intercontinental GT packs installed (though this doesn't seem to happen with the other DLCs).
11 | 1. Install wireshark https://www.wireshark.org/ (Other programs may work but this is what I have used)
12 | 2. Open wireshark and select your main network adapter, the graphs for activity next to the options should give a clue as to which it is
13 | 3. Set the filter to only be requests to Kunos's ACC server ip and press Enter to apply it.
14 | ```
15 | ip.dst == 144.76.81.131
16 | ```
17 | 4. Start ACC, go to the server list and then close the game.
18 |
19 | 5. The "auth string" is fairly easy to identify, it should be in a `WebSocket Text [FIN] [MASKED]` request after the HTTP `GET /kson809/` and the data will start with hex values separated by vertical lines. Select it and right click the "Data" section and copy it as printable text.
20 |
21 | 6. The "query string" can be found in a `WebSocket Binary [FIN] [MASKED]` request. It will contain some IP addresses in the ASCII preview below, however there are a few like this and the one that you need specifically will be different as when you select it, the whole preview will be highlighted as data. For this, right click on the data and copy it as a hex stream.
22 |
23 | ### Run the development server
24 | 1. Install MongoDB
25 | There are multiple ways to do this, I recommend using the docker image with docker desktop. You could also use MongoDB Atlas for free cloud hosting.
26 | 2. Install nodejs/ npm
27 | 3. Install the dependencies
28 | ```
29 | npm install --dev
30 | ```
31 | 4. Set up the env. This can either be done by setting the environment variables directly or by creating a .env file in the server's root folder.
32 | ```
33 | DB_URL="mongodb://
27 |
61 | {!bannerHidden && (
62 | ACC Community Server Browser Project
28 |
29 |
60 |
30 | Kunos server status:
31 |
36 | {status}
37 |
38 |
39 |
40 |
44 | Report issue
45 |
46 |
58 |
59 |
63 |
81 | )}
82 | 64 | 📰 UPDATE: ACC Server Browser has moved, if you're 65 | viewing this you are on the new site. The old URL will stop 66 | redirecting here after 28 November. A lot of the site had to be 67 | rewritten to run on the new hosting provider, some issues are known 68 | with applying filters currently though this should go away after 69 | pressing the refresh button however if you experience anything more 70 | severe please report it using the button above. 71 |
72 | 73 | 80 |
41 | {session.type}: {session.time}
42 |
43 | );
44 | }
45 | useEffect(() => {
46 | isRendered();
47 | isRendered = () => {};
48 | });
49 | return (
50 | {
64 | if (data.isFavourite) {
65 | ctx.removeFavourite(data.id ?? "");
66 | } else {
67 | ctx.addFavourite(data.id ?? "");
68 | }
69 | data.isFavourite = !data.isFavourite;
70 | setFavourite(data.isFavourite);
71 | }}
72 | >
73 | {isFavourite ? (
74 |
79 |
83 | {split?.length === 1
84 | ? data.name
85 | : split?.map((txt, i) => {
86 | switch (i % 3) {
87 | case 0:
88 | return txt;
89 | case 1:
90 | return (
91 |
95 | {txt}
96 |
97 | );
98 | default:
99 | return null;
100 | }
101 | })}
102 |
103 | {sessionEls}
104 |
105 | REQUIREMENTS:
106 |
107 | Track Medals: {data.requirements?.trackMedals}
108 |
109 |
110 | Safety Rating: {data.requirements?.safetyRating}
111 |
112 |
113 |
116 |
133 |
117 | {data.conditions?.rain ? (
118 | data.conditions?.night ? (
119 |
127 |
132 | {data.track?.name}
136 |
142 | {data.class}
143 |
144 | 
155 |
176 |
177 |
178 | {loadedData}
179 |
182 |
194 | );
195 | };
196 |
--------------------------------------------------------------------------------
/utils/getServers.ts:
--------------------------------------------------------------------------------
1 | import { randomBytes } from "crypto";
2 | import WebSocket from "ws";
3 | import models from "./db";
4 | import geoip from "geoip-country";
5 |
6 | const trackData: {
7 | [key: string]: {
8 | name: string;
9 | dlc?: string;
10 | image?: string;
11 | };
12 | } = {
13 | barcelona: {
14 | name: "Barcelona Grand Prix Circuit",
15 | image: "track-Barcelona",
16 | },
17 | mount_panorama: {
18 | name: "Bathurst - Mount Panorama Circuit",
19 | dlc: "icgt",
20 | image: "int_gt_pack-18",
21 | },
22 | brands_hatch: {
23 | name: "Brands Hatch",
24 | image: "track-Brands-Hatch",
25 | },
26 | donington: {
27 | name: "Donington Park",
28 | dlc: "bgt",
29 | image: "9-2",
30 | },
31 | hungaroring: {
32 | name: "Hungaroring",
33 | },
34 | imola: {
35 | name: "Imola",
36 | dlc: "gtwc",
37 | image: "track-imola",
38 | },
39 | kyalami: {
40 | name: "Kyalami",
41 | dlc: "icgt",
42 | },
43 | valencia: {
44 | name: "Valencia",
45 | dlc: "GTWC-2023",
46 | },
47 | laguna_seca: {
48 | name: "Laguna Seca",
49 | dlc: "icgt",
50 | image: "int_gt_pack-2",
51 | },
52 | misano: {
53 | name: "Misano",
54 | },
55 | monza: {
56 | name: "Monza",
57 | },
58 | nurburgring: {
59 | name: "Nurburgring",
60 | },
61 | oulton_park: {
62 | name: "Oulton Park",
63 | dlc: "bgt",
64 | image: "12-3",
65 | },
66 | paul_ricard: {
67 | name: "Paul Ricard",
68 | image: "track-Paul-Ricard",
69 | },
70 | silverstone: {
71 | name: "Silverstone",
72 | },
73 | snetterton: {
74 | name: "Snetterton 300",
75 | dlc: "bgt",
76 | },
77 | spa: {
78 | name: "Spa-Francorchamps",
79 | },
80 | suzuka: {
81 | name: "Suzuka",
82 | dlc: "icgt",
83 | image: "int_gt_pack-3",
84 | },
85 | zandvoort: {
86 | name: "Zandvoort",
87 | },
88 | zolder: {
89 | name: "Zolder",
90 | },
91 | watkins_glen: {
92 | name: "Watkins Glen",
93 | dlc: "atp",
94 | image: "9-2-3",
95 | },
96 | cota: {
97 | name: "Circuit of the Americas",
98 | dlc: "atp",
99 | image: "3-3",
100 | },
101 | indianapolis: {
102 | name: "Indianapolis Motor Speedway",
103 | dlc: "atp",
104 | image: "jp",
105 | },
106 | nurburgring_24h: {
107 | name: "Nurburgring 24h",
108 | dlc: "nurb-24",
109 | },
110 | red_bull_ring: {
111 | name: "Red Bull Ring",
112 | dlc: "gt2",
113 | },
114 | };
115 |
116 | function getTrack(id: string) {
117 | // todo: match legacy naming to current spec, see: https://www.acc-wiki.info/wiki/Racetracks_Overview
118 | if (id in trackData) {
119 | const track = trackData[id];
120 | if (!track.dlc) {
121 | track.dlc = "base";
122 | }
123 | if (!track.image) {
124 | track.image = `track-${track.name}`;
125 | }
126 | return { ...track, id };
127 | } else {
128 | console.log(
129 | `New track: ${id}, please create an issue at https://github.com/reesvarney/acc-server-browser-web to add it`
130 | );
131 | }
132 | return {
133 | name: id,
134 | dlc: "base",
135 | id,
136 | image: "",
137 | };
138 | }
139 |
140 | function getServers(): Promise
185 |
193 |
186 |
187 |
188 |
189 |
190 |
191 | Getting kunos servers
192 |