@dcrackel/meyersquaredui
Version:
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
73 lines (72 loc) • 4.86 kB
JavaScript
// spacingConfig.js
export const SpacingConfig = {
'Semifinal': {
'large': {
},
'small': {
Semifinal: { getTopSpace: 'mt-[0rem]', getConnectorHeight: 'h-[3.5rem]', getTopSpaceForLine: 'mt-[1.6rem]' },
Final: { getTopSpace: 'h-[6rem] mt-[9.1rem] -ml-[181px]', getBottomLine: 'h-[3rem] mt-[1.4rem] -ml-[181px]' },
'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' },
}
},
'Table of 8': {
'large': {
},
'small': {
'Table of 8': { getTopSpace: '-mt-[0.6rem]', getConnectorHeight: 'h-[1.5rem]', getTopSpaceForLine: 'mt-[0.6rem]' },
Semifinal: { getTopSpace: 'mt-[1.2rem]', getConnectorHeight: 'h-[3.6rem]', getTopSpaceForLine: 'mt-[1.6rem]' },
Final: { getTopSpace: 'h-[6rem] mt-[9.1rem] -ml-[181px]', getTopSpaceForLine: 'h-[3.9rem] mt-[4rem] -ml-[11.3rem]', getBottomLine: 'h-[3rem] mt-[1.4rem] -ml-[11.3rem]' },
'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' },
}
},
'Table of 16': {
large: {
},
small: {
'Table of 16': { getTopSpace: '-mt-[0.6rem]', getConnectorHeight: 'h-[1.5rem]', getTopSpaceForLine: 'mt-[0.6rem]' },
'Table of 8': { getTopSpace: '-mt-[0rem]', getConnectorHeight: 'h-[3.5rem]', getTopSpaceForLine: 'mt-[1.6rem]' },
Semifinal: { getTopSpace: 'mt-[2.8rem]', getConnectorHeight: 'h-[7.2rem]', getTopSpaceForLine: 'mt-[3.8rem]' },
Final: { getTopSpace: 'h-[8rem] mt-[7rem] -ml-[181px]', getTopSpaceForLine: 'h-[6rem] mt-[9.3rem] -ml-[11.35rem]',getBottomLine: 'h-[6rem] mt-[1.4rem] -ml-[11.35rem]' },
'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' },
}
},
'Table of 32': {
large: {
},
small: {
'Table of 32': { getTopSpace: '-mt-[0.6rem]', getConnectorHeight: 'h-[1.5rem]', getTopSpaceForLine: 'mt-[0.65rem]' },
'Table of 16': { getTopSpace: '-mt-[0rem]', getConnectorHeight: 'h-[3.6rem]', getTopSpaceForLine: 'mt-[1.7rem]' },
'Table of 8': { getTopSpace: 'mt-[1.8rem]', getConnectorHeight: 'h-[7.1rem]', getTopSpaceForLine: 'mt-[4rem]' },
Semifinal: { getTopSpace: 'mt-[7rem]', getConnectorHeight: 'h-[14rem]', getTopSpaceForLine: 'mt-[4rem]' },
Final: { getTopSpace: 'h-[12.6rem] mt-[24.4rem] -ml-[181px]', getTopSpaceForLine: 'h-[14rem] mt-[15rem] -ml-[181px]', getBottomLine: 'h-[14rem] mt-[1.4rem] -ml-[181px]' },
'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' },
}
},
'Table of 64': {
large: {
},
small: {
'Table of 64': { getTopSpace: '-mt-[0.6rem]', getConnectorHeight: 'h-[1.5rem]', getTopSpaceForLine: 'mt-[0.65rem]' },
'Table of 32': { getTopSpace: '-mt-[0rem]', getConnectorHeight: 'h-[4.8rem]', getTopSpaceForLine: 'mt-[2.2rem]' },
'Table of 16': { getTopSpace: 'mt-[2.3rem]', getConnectorHeight: 'h-[9.1rem]', getTopSpaceForLine: 'mt-[4rem]' },
'Table of 8': { getTopSpace: 'mt-[6.4rem]', getConnectorHeight: 'h-[18rem]', getTopSpaceForLine: 'mt-[9rem]' },
Semifinal: { getTopSpace: 'mt-[16.6rem]', getConnectorHeight: 'h-[36rem]', getTopSpaceForLine: 'mt-[18rem]' },
Final: { getTopSpace: 'h-[256px] mt-[64.8rem] -ml-[181px]', getBottomLine: 'h-[8rem] mt-[1.4rem] -ml-[181px]' },
'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' },
}
},
'Table of 128': {
large: {
},
small: {
'Table of 128': { getTopSpace: '-mt-[10px]', getConnectorHeight: 'h-[24px]', getTopSpaceForLine: 'mt-[12px]' },
'Table of 64': { getTopSpace: 'mt-[2px]', getConnectorHeight: 'h-[50px]', getTopSpaceForLine: 'mt-[25px]' },
'Table of 32': { getTopSpace: 'mt-[26px]', getConnectorHeight: 'h-[102px]', getTopSpaceForLine: 'mt-[51px]' },
'Table of 16': { getTopSpace: 'mt-[78px]', getConnectorHeight: 'h-[202px]', getTopSpaceForLine: 'mt-[101px]' },
'Table of 8': { getTopSpace: 'mt-[180px]', getConnectorHeight: 'h-[400px]', getTopSpaceForLine: 'mt-[200px]' },
Semifinal: { getTopSpace: 'mt-[398px]', getConnectorHeight: 'h-[800px]', getTopSpaceForLine: 'mt-[900px]', },
Final: { getTopSpace: 'h-[600px] mt-[9rem] -ml-[181px]', getBottomLine: 'h-[500px] mt-[1.4rem] -ml-[181px]' },
'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' },
}
},
};