Общий счёт

[html]<div id="teams-container"></div>
<style>
.mgs-card { background: url(https://forumstatic.ru/files/001a/fa/19/79976.png) repeat; border: 1px solid #6C2529; border-radius: 10px; box-shadow: 0px 15px 6px rgba(54,43,43,0.03), 0px 8px 5px rgba(54,43,43,0.1), 0px 4px 4px rgba(54,43,43,0.17), 0px 1px 2px rgba(54,43,43,0.2); padding: 18px 22px; margin-bottom: 18px; font-family: 'Lora', Verdana, Arial, serif; color: #343434; }
.mgs-top { display: flex; align-items: center; justify-content: center; gap: 24px; }
.mgs-emblem { max-width: 170px; display: block; }
.mgs-score { font-family: 'Alchemy', serif; font-weight: 400; font-size: 32px; color: #3B4559; text-shadow: 0px 0px 8px #F6EED1; }
.mgs-toggle-row { text-align: center; margin-top: 14px; }
.mgs-toggle { position: relative; isolation: isolate; display: inline-flex; align-items: center; padding: 8px 20px; font-family: 'Lora', Verdana, Arial, serif; font-weight: 600; font-size: 13px; line-height: 17px; text-align: center; color: #C9C3AD; text-shadow: 1px 1px 1px rgba(0,0,0,0.25); background: linear-gradient(90deg, #313B4F 0%, #3B4559 46.53%, #313B4F 100%); border: 1px solid #282F3C; box-shadow: 0px 15px 6px rgba(54,43,43,0.03), 0px 8px 5px rgba(54,43,43,0.1), 0px 4px 4px rgba(54,43,43,0.17), 0px 1px 2px rgba(54,43,43,0.2); border-radius: 10px; cursor: pointer; transition: transform 0.5s ease, background 0.5s ease, border-color 0.5s ease; overflow: hidden; }
.mgs-toggle::before { content: ""; position: absolute; inset: 0; background-image: url(https://forumstatic.ru/files/001a/fa/19/91404.png); background-repeat: repeat; opacity: 0.25; border-radius: 10px; pointer-events: none; z-index: 0; }
.mgs-toggle span { position: relative; z-index: 1; }
.mgs-toggle:hover { transform: scale(1.08); background: linear-gradient(90deg, #782B2E 0%, #892B2F 46.53%, #782B2E 100%); border-color: #A4363B; }
.mgs-toggle.mgs-open { background: linear-gradient(90deg, #782B2E 0%, #892B2F 46.53%, #782B2E 100%); border-color: #6C2529; transform: none; }
.mgs-resources { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.mgs-res-item { background: rgba(108,101,80,0.1); border-radius: 8px; padding: 10px 6px; text-align: center; }
.mgs-res-item img { max-width: 46px; display: block; margin: 0 auto 6px; }
.mgs-res-name { font-size: 11px; font-weight: 600; color: #924035; text-shadow: 0px 0px 8px #F6EED1; line-height: 1.3; margin-bottom: 3px; }
.mgs-res-count { font-size: 14px; font-weight: 600; color: #343434; }
.mgs-empty { text-align: center; font-size: 12px; color: #656565; font-style: italic; padding: 10px 0 0; }
.mgs-error { text-align: center; font-size: 12px; color: #924035; background: rgba(108,101,80,0.1); border-radius: 8px; padding: 10px; }
</style>
<script>
const CSV_URL = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vSWzITD73lNzDtny7BQBzfYOpl1d1XR2QxUnlXRP6IsdGhlSYMUvgYkCEoY5XaPk58JYlT3Er4nyV3z/pub?output=csv';
const teamImages = {
'Crowley': 'https://upforme.ru/uploads/001a/fa/19/2/570903.png',
'Agrippa': 'https://upforme.ru/uploads/001a/fa/19/2/236546.png',
'Valpurgis': 'https://upforme.ru/uploads/001a/fa/19/2/922579.png',
'Magi': 'https://upforme.ru/uploads/001a/fa/19/2/213188.png',
'Human': 'https://upforme.ru/uploads/001a/fa/19/2/291942.png'
};
const resourceImages = {
'\u044f\u0434\u043e\u0432\u0438\u0442\u044b\u0435 \u0440\u0430\u0441\u0442\u0435\u043d\u0438\u044f': 'https://forumstatic.ru/files/001a/fa/19/14516.png',
'\u043b\u0435\u0447\u0435\u0431\u043d\u044b\u0435 \u0440\u0430\u0441\u0442\u0435\u043d\u0438\u044f': 'https://forumstatic.ru/files/001a/fa/19/30721.png',
'\u043c\u0430\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0440\u0430\u0441\u0442\u0435\u043d\u0438\u044f': 'https://forumstatic.ru/files/001a/fa/19/22081.png',
'\u0440\u0435\u0434\u043a\u0438\u0435 \u0440\u0430\u0441\u0442\u0435\u043d\u0438\u044f': 'https://forumstatic.ru/files/001a/fa/19/54096.png',
'\u043a\u0443\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0440\u0430\u0441\u0442\u0435\u043d\u0438\u044f': 'https://forumstatic.ru/files/001a/fa/19/65459.png',
'\u0446\u0432\u0435\u0442\u044b': 'https://forumstatic.ru/files/001a/fa/19/15218.png',
'\u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b': 'https://forumstatic.ru/files/001a/fa/19/89095.png',
'\u043a\u0440\u0438\u0441\u0442\u0430\u043b\u043b\u044b': 'https://forumstatic.ru/files/001a/fa/19/90368.png',
'\u043c\u0430\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043a\u0430\u043c\u043d\u0438 \u0438 \u043c\u0438\u043d\u0435\u0440\u0430\u043b\u044b': 'https://forumstatic.ru/files/001a/fa/19/41570.png',
'\u0440\u0435\u0434\u043a\u0438\u0435 \u043a\u0430\u043c\u043d\u0438 \u0438 \u043c\u0438\u043d\u0435\u0440\u0430\u043b\u044b': 'https://forumstatic.ru/files/001a/fa/19/16521.png',
'\u0434\u0440\u0430\u0433\u043e\u0446\u0435\u043d\u043d\u044b\u0435 \u043a\u0430\u043c\u043d\u0438 \u0438 \u043c\u0438\u043d\u0435\u0440\u0430\u043b\u044b': 'https://forumstatic.ru/files/001a/fa/19/14105.png',
'\u043f\u043e\u043b\u0443\u0434\u0440\u0430\u0433\u043e\u0446\u0435\u043d\u043d\u044b\u0435 \u043a\u0430\u043c\u043d\u0438 \u0438 \u043c\u0438\u043d\u0435\u0440\u0430\u043b\u044b': 'https://forumstatic.ru/files/001a/fa/19/85331.png',
'\u044d\u0441\u0441\u0435\u043d\u0446\u0438\u0438': 'https://forumstatic.ru/files/001a/fa/19/78437.png',
'\u0437\u0430\u0447\u0430\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u043e\u0440\u0443\u0436\u0438\u0435': 'https://forumstatic.ru/files/001a/fa/19/36404.png',
'\u0436\u0435\u0437\u043b\u044b \u0438 \u043f\u043e\u0441\u043e\u0445\u0438': 'https://forumstatic.ru/files/001a/fa/19/85387.png',
'\u0432\u043e\u043b\u0448\u0435\u0431\u043d\u044b\u0435 \u043f\u0430\u043b\u043e\u0447\u043a\u0438': 'https://forumstatic.ru/files/001a/fa/19/18618.png',
'\u0433\u0440\u0438\u043c\u0443\u0430\u0440\u044b \u0438 \u043a\u043d\u0438\u0433\u0438': 'https://forumstatic.ru/files/001a/fa/19/53546.png',
'\u0437\u0435\u043b\u044c\u044f': 'https://forumstatic.ru/files/001a/fa/19/55947.png',
'\u043a\u043e\u043b\u0431\u044b': 'https://forumstatic.ru/files/001a/fa/19/32235.png',
'\u043e\u0434\u0435\u0436\u0434\u0430': 'https://forumstatic.ru/files/001a/fa/19/15587.png',
'\u0433\u043e\u0440\u0448\u043a\u0438 \u0438 \u043a\u043e\u0442\u043b\u044b': 'https://forumstatic.ru/files/001a/fa/19/73443.png',
'\u0441\u0432\u0435\u0447\u0438': 'https://forumstatic.ru/files/001a/fa/19/37350.png',
'\u0441\u0432\u0438\u0442\u043a\u0438': 'https://forumstatic.ru/files/001a/fa/19/68963.png',
'\u043e\u0431\u0435\u0440\u0435\u0433\u0438': 'https://forumstatic.ru/files/001a/fa/19/30920.png'
};
const validTeams = ['Crowley', 'Agrippa', 'Valpurgis', 'Magi', 'Human'];

function formatNumber(n){return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g,'.');}

function parseCSV(text){
var lines = text.trim().split('\n');
var headers = lines[0].split(',').map(function(h){return h.trim().replace(/^"|"$/g,'');});
var teams = [];

for(var i=1; i<lines.length; i++){
var values = lines[i].split(',').map(function(v){return v.trim().replace(/^"|"$/g,'');});
if(!values[0]) continue;

var teamName = values[0];
if(validTeams.indexOf(teamName) === -1) continue;

var team = {name: teamName, score: parseInt(values[1]) || 0, resources: {}};

for(var j=2; j<headers.length; j++){
var resName = headers[j];
if(!resourceImages[resName]) continue;
var count = parseInt(values[j]) || 0;
if(count > 0) team.resources[resName] = count;
}
teams.push(team);
}
return teams;
}

function renderTeams(teams){
var container = document.getElementById('teams-container');
if(!container) return;
var html = '';

teams.forEach(function(team, idx){
var resourceEntries = Object.entries(team.resources);

html += '<div class="mgs-card">';
html += '<div class="mgs-top">';
html += '<img class="mgs-emblem" src="'+(teamImages[team.name]||'')+'" alt="'+team.name+'">';
html += '<div class="mgs-score">'+formatNumber(team.score)+'</div>';
html += '</div>';
html += '<div class="mgs-toggle-row"><button type="button" class="mgs-toggle" onclick="toggleRes('+idx+', this)"><span>\u041a\u043b\u0430\u0434\u043e\u0432\u0430\u044f \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432</span></button></div>';
html += '<div id="res-'+idx+'" style="display:none;">';

if(resourceEntries.length === 0){
html += '<div class="mgs-empty">\u0420\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u043f\u043e\u043a\u0430 \u043d\u0435\u0442.</div>';
} else {
html += '<div class="mgs-resources">';
resourceEntries.forEach(function(entry){
html += '<div class="mgs-res-item">';
html += '<img src="'+(resourceImages[entry[0]]||'')+'" alt="'+entry[0]+'">';
html += '<div class="mgs-res-name">'+entry[0]+'</div>';
html += '<div class="mgs-res-count">'+entry[1]+'</div>';
html += '</div>';
});
html += '</div>';
}

html += '</div></div>';
});
container.innerHTML = html;
}

function toggleRes(i, btn){
var el = document.getElementById('res-'+i);
if(!el) return;
var isOpen = el.style.display !== 'none';
el.style.display = isOpen ? 'none' : 'block';
if(btn) btn.classList.toggle('mgs-open', !isOpen);
}

fetch(CSV_URL)
.then(function(response){
return response.arrayBuffer();
})
.then(function(buffer){
var decoder = new TextDecoder('utf-8');
return decoder.decode(buffer);
})
.then(function(csv){
var teams = parseCSV(csv);
renderTeams(teams);
})
.catch(function(error){
var container = document.getElementById('teams-container');
if(container) container.innerHTML = '<div class="mgs-error">\u041e\u0448\u0438\u0431\u043a\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438: ' + error + '</div>';
});
</script>[/html]