client: updated everything, deprecated pubg stuff

client/app/components/SoundList/SoundList.scss

@@ -1,12 +1,12 @@
-@import "../../scss/variables";
+@import '../../scss/variables';
 
 .SoundList__item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 50px;
-    
-    & + .SoundList__item {
-        border-top: 1px solid $gray3;
-    }
-}
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 50px;
+
+  & + .SoundList__item {
+    border-top: 1px solid $gray3;
+  }
+}

client/app/components/SoundList/SoundList.tsx

@@ -3,81 +3,85 @@ import React from 'react';
 import './SoundList.scss';
 
 interface Props {
-    soundList: SoundType[];
-    type: string;
+  soundList: SoundType[];
+  type: string;
 }
 
 interface State {
-    showAudioControls: boolean[];
+  showAudioControls: boolean[];
 }
 
 export interface SoundType {
-    extension: string;
-    name: string;
-    prefix?: string;
+  extension: string;
+  name: string;
+  prefix?: string;
 }
 
 export class SoundList extends React.Component<Props, State> {
-    
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      showAudioControls: [],
+    };
+  }
 
-    constructor() {
-        super();
-        this.state = {
-            showAudioControls: [],
-        };
-    }
-    
-    checkExtension(extension: string) {
-        switch(extension) {
-        case "wav":
-            return true;
-        case "mp3":
-            return true;
-        case "mpeg":
-            return true;
-        default:
-            return false;
-        }
+  checkExtension(extension: string) {
+    switch (extension) {
+      case 'wav':
+        return true;
+      case 'mp3':
+        return true;
+      case 'mpeg':
+        return true;
+      default:
+        return false;
     }
+  }
 
-    handleShowAudio(index: any) {
-        let temp = this.state.showAudioControls;
-        temp[index] = true;
+  handleShowAudio(index: any) {
+    let temp = this.state.showAudioControls;
+    temp[index] = true;
 
-        this.setState({
-            showAudioControls: temp,
-        });
-    }
-    
-    render() {
+    this.setState({
+      showAudioControls: temp,
+    });
+  }
 
-        const { soundList, type } = this.props;
+  render() {
+    const { soundList, type } = this.props;
 
-        return (
-            <div className="Card">
-                <div className="Card__header" style={{display:'flex'}}>
-                    <div>
-                        <span>{type}</span>
-                        <i className="fa fa fa-volume-up" aria-hidden="true"/>
-                    </div>
-                    <div style={{flex:1}}/>
-                    <div>({soundList.length})</div>
+    return (
+      <div className="Card">
+        <div className="Card__header" style={{ display: 'flex' }}>
+          <div>
+            <span>{type}</span>
+            <i className="fa fa fa-volume-up" aria-hidden="true" />
+          </div>
+          <div style={{ flex: 1 }} />
+          <div>({soundList.length})</div>
+        </div>
+
+        {soundList.length > 0
+          ? soundList.map((sound: SoundType, index: number) => {
+              return (
+                <div key={index} className="SoundList__item">
+                  <div>{(sound.prefix || '') + sound.name}</div>
+
+                  {this.checkExtension(sound.extension) && this.state.showAudioControls[index] ? (
+                    <audio
+                      controls
+                      src={`/public/${type.toLowerCase()}/` + sound.name + '.' + sound.extension}
+                      itemType={'audio/' + sound.extension}
+                      style={{ width: '100px' }}
+                    />
+                  ) : (
+                    <i className="fa fa-play link" aria-hidden="true" onClick={() => this.handleShowAudio(index)} />
+                  )}
                 </div>
-                
-                {soundList.length > 0 ? soundList.map((sound: SoundType, index: number) => {
-                    return (
-                        <div key={index} className="SoundList__item">
-                            <div>{(sound.prefix || '') + sound.name}</div>
-                            
-                            {this.checkExtension(sound.extension) && this.state.showAudioControls[index] ?
-                            <audio controls src={`/public/${type.toLowerCase()}/` + sound.name + "." + sound.extension}
-                                    itemType={"audio/" + sound.extension}
-                                    style={{width: "100px"}}/>
-                            : <i className="fa fa-play link" aria-hidden="true" onClick={() => this.handleShowAudio(index)}/> }
-                        </div>
-                    );
-                }) : null}
-            </div>
-        );
-    }
+              );
+            })
+          : null}
+      </div>
+    );
+  }
 }