matchList style

src/App/components/Matchs/MatchDetails/index.js

@@ -21,7 +21,7 @@ const MatchDetails = ({ match, theme, close }) => {
         <div className='beatmap'>
           {/* <Beatmap theme={theme} beatmap={TestMap}/> */}
           {match.fullBeatmapData ?
-            <Beatmap theme={theme} beatmap={match.fullBeatmapData} />
+            <Beatmap theme={theme} beatmap={match.fullBeatmapData} width={'100%'}/>
             : 'Asking peppy...'} 
         </div>
       </div>

src/App/components/Matchs/MatchListItem.js

@@ -1,29 +1,40 @@
 import React from 'react';
 import MatchDetails from './MatchDetails'
 import injectSheet from 'react-jss';
+import Cover from '../common/Beatmap/Cover';
 
 const styles = {
   MatchListItem: {
+    width: '80%',
+    margin: '10px auto',
     padding: 0,
     listStyle: 'none',
     display: 'flex',
     backgroundColor: '#2a2a2a',
-    margin: 0,
     userSelect: 'none',
     '&:hover': {
       filter: 'brightness(1.1)'
     }
   },
+  matchName: {
+    margin: 'auto'
+  },
+  playersNum: {
+    margin: 'auto 1vmin auto 1vmin',
+    fontSize: '50%',
+  }
 };
 const MatchListItem = ({ classes, match, theme, setSelected }) => {
   const closeMatchItem = () => setSelected(null)
   return (
     <ul className={classes.MatchListItem} onClick={() => setSelected(<MatchDetails match={match} theme={theme} close={closeMatchItem} />)}>
-      <li></li>
       <li>
+        <Cover url={`https://b.ppy.sh/thumb/${match.beatmapset_id}.jpg`} height='5vmin' width='10vmin' />
+      </li>
+      <li className={classes.matchName}>
         {match.matchName}
       </li>
-      <li>
+      <li className={classes.playersNum}>
         {`${match.players.length} players`}
       </li>
     </ul>

src/App/components/Matchs/index.js

@@ -5,6 +5,7 @@ import AddMatch from './AddMatch'
 import MatchListItem from './MatchListItem'
 
 const renderMatchsList = (matchs, bot, theme, setSelected) => {
+  // matchs = new Array(20).fill({matchName: 'test', players: new Array(16).fill('PEPPY')})
   if (matchs.length > 0) return (
     <React.Fragment>
       <AddMatch bot={bot} theme={theme} />

src/App/components/common/Beatmap/Cover.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 
-const Cover = ({ url }) => {
+const Cover = ({ url, width, height }) => {
   const [loaded, isLoaded] = useState(false);
   const cover = new Image()
   cover.onload = () => isLoaded(true)
@@ -14,7 +14,8 @@ const Cover = ({ url }) => {
     opacity: loaded ? 1 : 0,
     filter: `blur(${loaded ? 0 + 'px' : 10 + 'px'})`,
     transition: '1s all',
-    width: '100%',
+    width: width || '100%',
+    height: height || null,
     paddingBottom: '15%',
     // margin: 'auto 0 auto 10px',
     backgroundPosition: 'center center',

src/App/components/common/Beatmap/index.js

@@ -10,7 +10,7 @@ import Badge from '../Badge';
 
 const reqImgAssets = require.context('../../../../assets/img', true, /\.png$/);
 
-const Beatmap = ({ theme, beatmap }) => {
+const Beatmap = ({ theme, beatmap, width }) => {
   console.log(beatmap.id, 'updated')
   const getDownloadUrl = ({ id, unique_id }) => {
     return `https://beatconnect.io/b/${id}/${unique_id}`
@@ -28,9 +28,12 @@ const Beatmap = ({ theme, beatmap }) => {
   // }
 
   const style = isPlaying ? {
+    width: width || '80%',
     filter: `brightness(${brightness})`,
     transitionDuration: `${50}ms`
-  } : {}
+  } : {
+    width: width || '80%',
+  }
 
   const modePillsStyle = (mode) => ({
     backgroundImage: `url(${reqImgAssets(`./${mode}.png`)})`,

src/Providers/DownloadQueueProvider.js

@@ -92,7 +92,6 @@ class DownloadQueueProvider extends Component {
   }
 
   _onDownloadSucceed(infos, beatmapSetId) {
-    console.log('autoImport', this.props.autoImport)
     if (this.props.autoImport) {
       shell.openItem(infos.filePath)
     }