pandotcodes-web/gtav.pan.codes
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update button styles and improve button mapping for Xbox and PlayStation

Browse source
This commit is contained in:
pan.codes 2025-06-03 16:01:31 +02:00
parent c44ec45725
commit 5cefb81b91
1 changed files with 21 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

38
index.html
View file

@ -130,37 +130,41 @@
justify-content: center; justify-content: center;
color: white; color: white;
font-weight: bold; font-weight: bold;
font-size: 11px; font-size: 16px;
margin: 1px; margin: 1px;
padding-bottom: 4px;
} }
.btn-icon.xbox { .btn-icon.xbox {
background: #107c10; background: #2b343d;
} }
.btn-icon.playstation { .btn-icon.playstation {
background: #003087; background: #2b343d;
} }
.btn-icon.direction { .btn-icon.direction {
background: #666; background: #666;
} }
.l1, .l2, .r1, .r2, .rb, .rt, .lb, .lt {
background: #34495e;
height: 24px;
width: 32px;
border-radius: 25%;
}
/* PlayStation specific colors */ /* PlayStation specific colors */
.btn-icon.triangle { color: #7bc142; } .btn-icon.triangle { background: #00AA00; transform: scale(1, -1); padding: 0; }
.btn-icon.square { color: #f14a8a; } .btn-icon.square { background: #AA00AA; padding-bottom: 2px; }
.btn-icon.circle { color: #f14a8a; } .btn-icon.circle { background: #AA0000; padding-bottom: 2px; }
.btn-icon.cross { color: #5294cf; } .btn-icon.cross { background: #0000AA; }
.btn-icon.l1, .btn-icon.l2 { color: #34495e; }
.btn-icon.r1, .btn-icon.r2 { color: #34495e; }
/* Xbox specific colors */ /* Xbox specific colors */
.btn-icon.a { background: #7bc142; } .btn-icon.a { background: #00AA00; }
.btn-icon.b { background: #e74c3c; } .btn-icon.b { background: #AA0000; }
.btn-icon.x { background: #5294cf; } .btn-icon.x { background: #0000AA; }
.btn-icon.y { background: #f39c12; } .btn-icon.y { background: #AAAA00; }
.btn-icon.lb, .btn-icon.lt { background: #34495e; }
.btn-icon.rb, .btn-icon.rt { background: #34495e; }
.search-container { .search-container {
margin-bottom: 20px; margin-bottom: 20px;
@ -444,10 +448,10 @@
// Button mapping for display // Button mapping for display
const buttonMapping = { const buttonMapping = {
// Directions // Directions
'Up': '↑', 'Down': '↓', 'Left': '←', 'Right': '→', 'Up': '🠉', 'Down': '🠋', 'Left': '🠈', 'Right': '🠊',
// PlayStation // PlayStation
'Triangle': '△', 'Square': '□', 'Circle': '○', 'Cross': '✕', 'Triangle': '⛛', 'Square': '🞒', 'Circle': '🞇', 'Cross': '✕',
'L1': 'L1', 'L2': 'L2', 'R1': 'R1', 'R2': 'R2', 'L1': 'L1', 'L2': 'L2', 'R1': 'R1', 'R2': 'R2',
// Xbox // Xbox