mirror of
https://github.com/romancm/gamebrary
synced 2024-11-10 05:34:15 +00:00
Misc improvements
This commit is contained in:
Gamebrary
parent
208bb9307c
commit
f1ea899c7c
16 changed files with 266 additions and 177 deletions
38
public/logos/data-sources/amazon.svg
Normal file
38
public/logos/data-sources/amazon.svg
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
version="1.1"
|
||||
width="603"
|
||||
height="182"
|
||||
style="fill:#221f1f"
|
||||
id="svg1936">
|
||||
<path
|
||||
d="m 374.00642,142.18404 c -34.99948,25.79739 -85.72909,39.56123 -129.40634,39.56123 -61.24255,0 -116.37656,-22.65135 -158.08757,-60.32496 -3.2771,-2.96252 -0.34083,-6.9999 3.59171,-4.69283 45.01431,26.19064 100.67269,41.94697 158.16623,41.94697 38.774689,0 81.4295,-8.02237 120.6499,-24.67006 5.92501,-2.51683 10.87999,3.88009 5.08607,8.17965"
|
||||
id="path8"
|
||||
style="fill:#ff9900" />
|
||||
<path
|
||||
d="m 388.55678,125.53635 c -4.45688,-5.71527 -29.57261,-2.70033 -40.84585,-1.36327 -3.43442,0.41947 -3.95874,-2.56925 -0.86517,-4.71905 20.00346,-14.07844 52.82696,-10.01483 56.65462,-5.2958 3.82764,4.74526 -0.99624,37.64741 -19.79373,53.35128 -2.88385,2.41195 -5.63662,1.12734 -4.35198,-2.07113 4.2209,-10.53917 13.68519,-34.16054 9.20211,-39.90203"
|
||||
id="path10"
|
||||
style="fill:#ff9900" />
|
||||
<path
|
||||
d="M 348.49744,20.06598 V 6.38079 c 0,-2.07113 1.57301,-3.46062 3.46062,-3.46062 h 61.26875 c 1.96628,0 3.53929,1.41571 3.53929,3.46062 v 11.71893 c -0.0262,1.96626 -1.67788,4.53551 -4.61418,8.59912 l -31.74859,45.32893 c 11.79759,-0.28837 24.25059,1.46814 34.94706,7.49802 2.41195,1.36327 3.06737,3.35575 3.25089,5.32203 V 99.4506 c 0,1.99248 -2.20222,4.32576 -4.5093,3.1198 -18.84992,-9.88376 -43.887,-10.95865 -64.72939,0.10487 -2.12356,1.15354 -4.35199,-1.15354 -4.35199,-3.14602 V 85.66054 c 0,-2.22843 0.0262,-6.02989 2.25463,-9.41186 l 36.78224,-52.74829 h -32.01076 c -1.96626,0 -3.53927,-1.38948 -3.53927,-3.43441"
|
||||
id="path12" />
|
||||
<path
|
||||
d="m 124.99883,105.45424 h -18.64017 c -1.78273,-0.13107 -3.19845,-1.46813 -3.32954,-3.17224 V 6.61676 c 0,-1.91383 1.59923,-3.43442 3.59171,-3.43442 h 17.38176 c 1.80898,0.0786 3.25089,1.46814 3.38199,3.19845 v 12.50545 h 0.34082 c 4.53551,-12.08598 13.05597,-17.7226 24.53896,-17.7226 11.66649,0 18.95477,5.63662 24.19814,17.7226 4.5093,-12.08598 14.76008,-17.7226 25.74495,-17.7226 7.81262,0 16.35931,3.22467 21.57646,10.46052 5.89879,8.04857 4.69281,19.74128 4.69281,29.99208 l -0.0262,60.37739 c 0,1.91383 -1.59923,3.46061 -3.59171,3.46061 h -18.61397 c -1.86138,-0.13107 -3.35574,-1.62543 -3.35574,-3.46061 V 51.29025 c 0,-4.03739 0.36702,-14.10466 -0.52434,-17.93233 -1.38949,-6.42311 -5.55797,-8.23209 -10.95865,-8.23209 -4.5093,0 -9.22833,3.01494 -11.14216,7.83885 -1.91383,4.8239 -1.73031,12.89867 -1.73031,18.32557 v 50.70338 c 0,1.91383 -1.59923,3.46061 -3.59171,3.46061 h -18.61395 c -1.88761,-0.13107 -3.35576,-1.62543 -3.35576,-3.46061 L 152.946,51.29025 c 0,-10.67025 1.75651,-26.37415 -11.48298,-26.37415 -13.39682,0 -12.87248,15.31063 -12.87248,26.37415 v 50.70338 c 0,1.91383 -1.59923,3.46061 -3.59171,3.46061"
|
||||
id="path14" />
|
||||
<path
|
||||
d="m 469.51439,1.16364 c 27.65877,0 42.62858,23.75246 42.62858,53.95427 0,29.17934 -16.54284,52.32881 -42.62858,52.32881 -27.16066,0 -41.94697,-23.75246 -41.94697,-53.35127 0,-29.78234 14.96983,-52.93181 41.94697,-52.93181 m 0.15729,19.53156 c -13.73761,0 -14.60278,18.71881 -14.60278,30.38532 0,11.69271 -0.18352,36.65114 14.44549,36.65114 14.44548,0 15.12712,-20.13452 15.12712,-32.40403 0,-8.07477 -0.34082,-17.72257 -2.779,-25.3779 -2.09735,-6.65906 -6.26581,-9.25453 -12.19083,-9.25453"
|
||||
id="path16" />
|
||||
<path
|
||||
d="M 548.00762,105.45424 H 529.4461 c -1.86141,-0.13107 -3.35577,-1.62543 -3.35577,-3.46061 l -0.0262,-95.69149 c 0.1573,-1.75653 1.7041,-3.1198 3.59171,-3.1198 h 17.27691 c 1.62543,0.0786 2.96249,1.17976 3.32954,2.67412 v 14.62899 h 0.3408 c 5.21717,-13.0822 12.53165,-19.32181 25.40412,-19.32181 8.36317,0 16.51662,3.01494 21.75999,11.27324 4.87633,7.65532 4.87633,20.5278 4.87633,29.78233 v 60.22011 c -0.20973,1.67786 -1.75653,3.01492 -3.59169,3.01492 h -18.69262 c -1.70411,-0.13107 -3.11982,-1.38948 -3.30332,-3.01492 V 50.47753 c 0,-10.46052 1.20597,-25.77117 -11.66651,-25.77117 -4.5355,0 -8.70399,3.04117 -10.77512,7.65532 -2.62167,5.84637 -2.96249,11.66651 -2.96249,18.11585 v 51.5161 c -0.0262,1.91383 -1.65166,3.46061 -3.64414,3.46061"
|
||||
id="path18" />
|
||||
<use
|
||||
xlink:href="#path30"
|
||||
transform="translate(244.36719)"
|
||||
id="use28" />
|
||||
<path
|
||||
d="M 55.288261,59.75829 V 55.7209 c -13.475471,0 -27.711211,2.88385 -27.711211,18.77125 0,8.04857 4.16847,13.50169 11.32567,13.50169 5.24337,0 9.93618,-3.22467 12.8987,-8.46805 3.670341,-6.44935 3.486841,-12.50544 3.486841,-19.7675 m 18.79747,45.43378 c -1.23219,1.10111 -3.01495,1.17976 -4.40444,0.4457 -6.18716,-5.1385 -7.28828,-7.52423 -10.69647,-12.42678 -10.224571,10.4343 -17.460401,13.55409 -30.726141,13.55409 -15.67768,0 -27.89471,-9.67401 -27.89471,-29.04824 0,-15.12713 8.20587,-25.43035 19.87236,-30.46398 10.1197,-4.45688 24.25058,-5.24337 35.051931,-6.47556 v -2.41195 c 0,-4.43066 0.34082,-9.67403 -2.25465,-13.50167 -2.280881,-3.43442 -6.632861,-4.85013 -10.460531,-4.85013 -7.10475,0 -13.44924,3.64414 -14.99603,11.19459 -0.31461,1.67789 -1.5468,3.32955 -3.22467,3.4082 L 6.26276,32.67628 C 4.74218,32.33548 3.0643,31.10327 3.48377,28.76999 7.65225,6.85271 27.44596,0.24605 45.16856,0.24605 c 9.071011,0 20.921021,2.41195 28.078221,9.28076 9.07104,8.46804 8.20587,19.7675 8.20587,32.06321 v 29.04826 c 0,8.73022 3.61794,12.55786 7.02613,17.27691 1.20597,1.67786 1.46814,3.69656 -0.05244,4.95497 -3.80144,3.17225 -10.56538,9.07104 -14.28819,12.37436 l -0.05242,-0.0525"
|
||||
id="path30" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.4 KiB |
1
public/logos/data-sources/fandom.svg
Normal file
1
public/logos/data-sources/fandom.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.8 KiB |
1
public/logos/data-sources/gog.svg
Normal file
1
public/logos/data-sources/gog.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.5 KiB |
11
public/logos/data-sources/igdb.svg
Normal file
11
public/logos/data-sources/igdb.svg
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="249.44 647.1 1461.24 702.85">
|
||||
<title>IGDB logo</title>
|
||||
<g id="text_logo">
|
||||
<path fill="#000000" d=" M 249.44 647.14 C 736.51 647.13 1223.59 647.21 1710.67 647.10 C 1710.68 881.38 1710.69 1115.67 1710.66 1349.95 C 1615.86 1334.68 1520.63 1321.89 1425.05 1312.53 C 1080.16 1278.28 731.31 1284.02 387.73 1329.60 C 341.52 1335.59 295.47 1342.74 249.44 1349.92 C 249.43 1115.66 249.45 881.40 249.44 647.14 M 292.45 690.16 C 292.47 893.35 292.45 1096.55 292.45 1299.74 C 747.32 1230.12 1212.80 1230.06 1667.66 1299.76 C 1667.69 1096.55 1667.67 893.34 1667.67 690.13 C 1209.26 690.20 750.85 690.15 292.45 690.16 Z"/>
|
||||
<path fill="#000000" d=" M 606.98 849.96 C 636.79 820.94 678.61 805.48 720.03 806.13 C 748.31 806.03 777.18 810.46 802.61 823.37 C 815.72 829.91 827.70 838.49 838.88 847.92 C 824.81 864.91 810.62 881.79 796.71 898.90 C 788.34 892.63 780.20 885.94 770.94 880.98 C 752.35 870.49 730.45 866.86 709.32 868.40 C 683.46 870.61 659.80 886.20 645.79 907.79 C 627.73 934.91 624.92 970.60 635.86 1000.97 C 642.48 1019.42 655.12 1035.79 671.77 1046.24 C 688.33 1056.88 708.44 1061.15 727.96 1059.98 C 747.98 1059.21 768.36 1053.75 784.66 1041.78 C 784.50 1027.38 784.66 1012.97 784.58 998.57 C 762.15 998.63 739.71 998.55 717.28 998.61 C 717.23 979.29 717.40 959.97 717.20 940.66 C 761.32 940.38 805.45 940.76 849.57 940.47 C 849.84 984.58 849.54 1028.70 849.72 1072.81 C 819.35 1099.03 781.02 1116.23 740.99 1120.14 C 701.91 1124.43 660.71 1117.24 627.40 1095.69 C 600.71 1078.68 580.09 1052.59 569.30 1022.87 C 558.65 993.63 556.55 961.41 562.53 930.93 C 568.76 900.29 584.34 871.56 606.98 849.96 Z"/>
|
||||
<path fill="#000000" d=" M 412.22 811.37 C 434.59 811.42 456.96 811.33 479.33 811.42 C 479.28 912.90 479.33 1014.39 479.31 1115.88 C 456.95 1115.87 434.59 1115.84 412.23 1115.89 C 412.22 1014.39 412.24 912.88 412.22 811.37 Z"/>
|
||||
<path fill="#000000" d=" M 931.25 811.38 C 972.17 811.39 1013.09 811.38 1054.01 811.39 C 1091.21 811.80 1128.88 823.34 1157.99 846.93 C 1183.44 867.28 1201.49 896.55 1208.37 928.40 C 1216.70 966.86 1211.27 1008.80 1190.62 1042.63 C 1174.23 1069.90 1148.49 1091.13 1119.07 1103.04 C 1098.46 1111.41 1076.23 1115.81 1053.98 1115.87 C 1013.08 1115.87 972.17 1115.85 931.26 1115.88 C 931.26 1014.38 931.28 912.88 931.25 811.38 M 998.55 871.86 C 998.45 933.04 998.56 994.22 998.49 1055.41 C 1011.33 1055.39 1024.18 1055.40 1037.02 1055.40 C 1047.36 1055.32 1057.79 1055.89 1068.03 1053.99 C 1088.10 1050.87 1107.44 1041.22 1120.71 1025.65 C 1132.31 1012.31 1139.05 995.20 1141.08 977.75 C 1142.97 960.03 1141.47 941.67 1134.60 925.11 C 1127.53 907.51 1114.31 892.45 1097.61 883.42 C 1082.53 875.02 1065.11 871.85 1047.99 871.84 C 1031.51 871.88 1015.03 871.84 998.55 871.86 Z"/>
|
||||
<path fill="#000000" d=" M 1288.80 811.57 C 1330.15 811.13 1371.54 811.51 1412.90 811.38 C 1424.26 811.54 1435.65 810.91 1446.97 812.08 C 1467.08 813.95 1487.46 819.82 1503.55 832.45 C 1517.54 843.24 1527.36 859.35 1530.07 876.86 C 1532.03 893.42 1531.12 911.06 1522.97 925.99 C 1516.04 939.38 1504.10 949.32 1491.26 956.78 C 1508.37 963.22 1525.29 972.72 1535.94 988.04 C 1545.87 1002.19 1548.77 1020.07 1547.80 1037.03 C 1547.40 1054.27 1541.09 1071.56 1529.28 1084.27 C 1517.35 1097.30 1500.95 1105.31 1484.12 1109.96 C 1470.05 1113.75 1455.50 1115.70 1440.94 1115.84 C 1390.26 1115.88 1339.58 1115.89 1288.90 1115.84 C 1288.82 1014.41 1289.01 912.99 1288.80 811.57 M 1354.30 870.27 C 1354.37 891.67 1354.24 913.08 1354.36 934.49 C 1376.56 934.35 1398.76 934.52 1420.96 934.40 C 1431.03 933.86 1441.46 932.43 1450.36 927.35 C 1457.39 923.37 1462.73 916.24 1463.78 908.14 C 1465.26 899.01 1463.69 888.76 1457.02 881.93 C 1449.00 873.67 1437.04 871.03 1425.95 870.37 C 1402.07 870.17 1378.18 870.37 1354.30 870.27 M 1354.29 990.41 C 1354.32 1012.64 1354.35 1034.89 1354.27 1057.13 C 1375.50 1057.33 1396.74 1057.15 1417.98 1057.21 C 1428.58 1057.08 1439.29 1057.80 1449.79 1055.91 C 1458.99 1054.43 1468.48 1050.97 1474.69 1043.71 C 1480.95 1036.44 1482.26 1026.10 1480.69 1016.93 C 1479.44 1009.15 1474.55 1002.16 1467.79 998.15 C 1458.62 992.57 1447.64 990.81 1437.06 990.45 C 1409.47 990.37 1381.88 990.45 1354.29 990.41 Z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.1 KiB |
BIN
public/logos/data-sources/speedrun.png
Normal file
BIN
public/logos/data-sources/speedrun.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
1
public/logos/data-sources/steam.svg
Normal file
1
public/logos/data-sources/steam.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 65 65" fill="#fff"><use xlink:href="#B" x=".5" y=".5"/><defs><linearGradient id="A" x2="50%" x1="50%" y2="100%" y1="0%"><stop stop-color="#111d2e" offset="0%"/><stop stop-color="#051839" offset="21.2%"/><stop stop-color="#0a1b48" offset="40.7%"/><stop stop-color="#132e62" offset="58.1%"/><stop stop-color="#144b7e" offset="73.8%"/><stop stop-color="#136497" offset="87.3%"/><stop stop-color="#1387b8" offset="100%"/></linearGradient></defs><symbol id="B"><g><path d="M1.305 41.202C5.259 54.386 17.488 64 31.959 64c17.673 0 32-14.327 32-32s-14.327-32-32-32C15.001 0 1.124 13.193.028 29.874c2.074 3.477 2.879 5.628 1.275 11.328z" fill="url(#A)"/><path d="M30.31 23.985l.003.158-7.83 11.375c-1.268-.058-2.54.165-3.748.662a8.14 8.14 0 0 0-1.498.8L.042 29.893s-.398 6.546 1.26 11.424l12.156 5.016c.6 2.728 2.48 5.12 5.242 6.27a8.88 8.88 0 0 0 11.603-4.782 8.89 8.89 0 0 0 .684-3.656L42.18 36.16l.275.005c6.705 0 12.155-5.466 12.155-12.18s-5.44-12.16-12.155-12.174c-6.702 0-12.155 5.46-12.155 12.174zm-1.88 23.05c-1.454 3.5-5.466 5.147-8.953 3.694a6.84 6.84 0 0 1-3.524-3.362l3.957 1.64a5.04 5.04 0 0 0 6.591-2.719 5.05 5.05 0 0 0-2.715-6.601l-4.1-1.695c1.578-.6 3.372-.62 5.05.077 1.7.703 3 2.027 3.696 3.72s.692 3.56-.01 5.246M42.466 32.1a8.12 8.12 0 0 1-8.098-8.113 8.12 8.12 0 0 1 8.098-8.111 8.12 8.12 0 0 1 8.1 8.111 8.12 8.12 0 0 1-8.1 8.113m-6.068-8.126a6.09 6.09 0 0 1 6.08-6.095c3.355 0 6.084 2.73 6.084 6.095a6.09 6.09 0 0 1-6.084 6.093 6.09 6.09 0 0 1-6.081-6.093z"/></g></symbol></svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
1
public/logos/data-sources/twitch.svg
Normal file
1
public/logos/data-sources/twitch.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1140 380"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#9146ff;}</style></defs><title>Asset 14</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon class="cls-1" points="170 170.01 100 170.01 100 190 170 190 170 270.01 60 270.01 20 230.01 20 20 100 20 100 90 170 90 170 170.01"/><polygon class="cls-1" points="470 270.01 230 270.01 190 230.01 190 90 270 90 270 190 290 190 290 90 370 90 370 190 390 190 390 90 470 90 470 270.01"/><rect class="cls-1" x="490" y="90" width="80" height="180"/><rect class="cls-1" x="490" y="20" width="80" height="50"/><polygon class="cls-1" points="740 170.01 670 170.01 670 190 740 190 740 270.01 630 270.01 590 230.01 590 20 670 20 670 90 740 90 740 170.01"/><polygon class="cls-1" points="920 170.01 840 170.01 840 190 920 190 920 270.01 800 270.01 760 230.01 760 130.01 800 90 920 90 920 170.01"/><polygon class="cls-1" points="1120 270.01 1040 270.01 1040 170.01 1020 170.01 1020 270.01 940 270.01 940 20 1020 20 1020 90 1080 90 1120 130.01 1120 270.01"/><path class="cls-2" d="M1090,70h-50V0H930.21L879.72,70H790l-30,30V70H690V0H470V70H160.5L110,0H0V240L140,380H280V340l40,40H590V340l40,40H760V340l40,40h250l90-90V120ZM170,170H100v20h70v80H60L20,230V20h80V90h70ZM470,270H230l-40-40V90h80V190h20V90h80V190h20V90h80Zm100,0H490V90h80Zm0-200H490V20h80ZM740,170H670v20h70v80H630l-40-40V20h80V90h70Zm180,0H840v20h80v80H800l-40-40V130l40-40H920Zm200,100h-80V170h-20V270H940V20h80V90h60l40,40Z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
1
public/logos/data-sources/wikipedia.svg
Normal file
1
public/logos/data-sources/wikipedia.svg
Normal file
File diff suppressed because one or more lines are too long
14
src/App.vue
14
src/App.vue
|
|
@ -12,6 +12,7 @@
|
|||
<b-spinner v-if="loading" class="spinner-centered mt-5" />
|
||||
|
||||
<template v-else>
|
||||
<div v-b-visible.54="visibleHandler" class="header-flag" />
|
||||
<page-header />
|
||||
<side-bar v-if="user" />
|
||||
<router-view class="viewport" />
|
||||
|
|
@ -95,6 +96,10 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
visibleHandler(visible) {
|
||||
if (!['game', 'board'].includes(this.$route.name)) this.$store.commit('SET_SCROLLED', !visible);
|
||||
},
|
||||
|
||||
async toggleTheme() {
|
||||
const { settings } = this;
|
||||
const darkTheme = settings?.darkTheme || false;
|
||||
|
|
@ -188,8 +193,13 @@ export default {
|
|||
}
|
||||
|
||||
.viewport {
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
padding: 54px 0;
|
||||
overflow-y: auto;
|
||||
// overflow-y: auto;
|
||||
}
|
||||
|
||||
.header-flag {
|
||||
background: transparent;
|
||||
height: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,36 +1,32 @@
|
|||
<template lang="html">
|
||||
<div class="mt-3">
|
||||
<b-form-row>
|
||||
<b-col
|
||||
v-for="({ imageUrl, isVideo, isCover }, index) in gameMedia"
|
||||
cols="6"
|
||||
sm="4"
|
||||
:key="index"
|
||||
>
|
||||
<div class="align-items-center text-center mb-2 rounded cursor-pointer">
|
||||
<i
|
||||
v-if="isVideo"
|
||||
class="fa-solid fa-play video-indicator position-absolute text-white"
|
||||
/>
|
||||
<b-form-row>
|
||||
<div
|
||||
v-for="({ imageUrl, isVideo, isCover }, index) in gameMediaThumbnails"
|
||||
:key="index"
|
||||
>
|
||||
<div class="align-items-center text-center rounded cursor-pointer">
|
||||
<i
|
||||
v-if="isVideo"
|
||||
class="fa-solid fa-play video-indicator text-white"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-if="isCover"
|
||||
class="position-absolute cover-indicator text-light small w-100 bg-dark rounded-bottom"
|
||||
>
|
||||
Cover
|
||||
</div>
|
||||
|
||||
<b-img
|
||||
:src="imageUrl"
|
||||
rounded
|
||||
class="mb-2"
|
||||
fluid
|
||||
style="max-height: 120px;"
|
||||
@click="viewMedia(index)"
|
||||
/>
|
||||
<div
|
||||
v-if="isCover"
|
||||
class="cover-indicator text-light small w-100 bg-dark rounded-bottom"
|
||||
>
|
||||
Cover
|
||||
</div>
|
||||
</b-col>
|
||||
</b-form-row>
|
||||
|
||||
<b-img
|
||||
:src="imageUrl"
|
||||
rounded
|
||||
class="mb-2 mr-2"
|
||||
fluid
|
||||
style="max-height: 120px;"
|
||||
@click="viewMedia(index)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<b-modal
|
||||
id="mediaModal"
|
||||
|
|
@ -125,7 +121,7 @@
|
|||
</footer>
|
||||
</div>
|
||||
</b-modal>
|
||||
</div>
|
||||
</b-form-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -140,7 +136,6 @@ export default {
|
|||
},
|
||||
|
||||
computed: {
|
||||
...mapGetters(['gameMedia']),
|
||||
...mapState(['user', 'board', 'game', 'wallpapers', 'boards']),
|
||||
|
||||
formattedBoards() {
|
||||
|
|
@ -151,6 +146,14 @@ export default {
|
|||
return this.selectedMedia?.isVideo;
|
||||
},
|
||||
|
||||
gameMediaThumbnails() {
|
||||
return this.$store.getters.gameMedia(true);
|
||||
},
|
||||
|
||||
gameMedia() {
|
||||
return this.$store.getters.gameMedia();
|
||||
},
|
||||
|
||||
isSelectedMediaCover() {
|
||||
return this.selectedMedia?.isCover;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<!-- TODO: use search endpoint to get more accurate results -->
|
||||
<template lang="html">
|
||||
<section v-if="similarGames.length" class="my-5 px-3 py-5">
|
||||
<h4 :class="['text-center mb-3', { 'text-outlined': hasWallpaper }]">You may also like</h4>
|
||||
<section v-if="similarGames.length" class="px-3">
|
||||
<h3 class="heading my-3">You may also like</h3>
|
||||
|
||||
<div class="similar-games">
|
||||
<div class="game-grid">
|
||||
<router-link
|
||||
v-for="game in similarGames"
|
||||
:key="game.id"
|
||||
|
|
@ -28,10 +28,6 @@ import { getImageUrl } from '@/utils';
|
|||
export default {
|
||||
getImageUrl,
|
||||
|
||||
props: {
|
||||
hasWallpaper: Boolean,
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['game']),
|
||||
|
||||
|
|
@ -41,19 +37,3 @@ export default {
|
|||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
.similar-games {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(10, 1fr);
|
||||
grid-gap: 1rem;
|
||||
|
||||
@media(max-width: 1024px) {
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
}
|
||||
|
||||
@media(max-width: 780px) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -421,7 +421,7 @@ export const GAME_MODES = [
|
|||
];
|
||||
|
||||
export const IGDB_QUERIES = {
|
||||
GAME: 'fields *,keywords.*,collection,collection.games.cover.image_id,game_engines.*,remakes.cover.image_id,remasters.cover.image_id,language_supports, artworks.image_id, age_ratings.*, age_ratings.content_descriptions.*, alternative_names.*,bundles.*,bundles.cover.image_id, collection.*, collection.games.*, cover.image_id, external_games.*, game_modes.name, genres.name, involved_companies.company.logo.*, involved_companies.company.name, involved_companies.developer, involved_companies.publisher, name, platforms.platform_logo.*, platforms.id, platforms.name, player_perspectives.name, rating, release_dates.date, release_dates.platform, screenshots.image_id, similar_games.id, similar_games.cover.image_id, similar_games.slug, similar_games.name, slug, summary, videos.video_id, websites.category, websites.url, themes.*;',
|
||||
GAME: 'fields *,keywords.*,collection,collection.games.cover.image_id,game_engines.*,remakes.cover.image_id,remasters.cover.image_id,language_supports, artworks.image_id, age_ratings.*, age_ratings.content_descriptions.*, alternative_names.*,bundles.*,bundles.cover.image_id, collection.*, collection.games.*, cover.image_id, external_games.*, game_modes.name, genres.name, involved_companies.company.slug, involved_companies.company.logo.*, involved_companies.company.name, involved_companies.developer, involved_companies.publisher, name, platforms.platform_logo.*, platforms.id, platforms.name, player_perspectives.name, rating, release_dates.date, release_dates.platform, screenshots.image_id, similar_games.id, similar_games.cover.image_id, similar_games.slug, similar_games.name, slug, summary, videos.video_id, websites.category, websites.url, themes.*;',
|
||||
PLATFORMS: 'fields category,generation,name,alternative_name,slug,platform_logo.*; limit 300;',
|
||||
COMPANY: 'fields id,description,developed.name,developed.slug,developed.cover.*,logo.*,name,published.name,published.slug,published.cover.*,websites.*,slug;',
|
||||
SEARCH: 'fields name,platforms,slug,rating,cover.image_id;',
|
||||
|
|
|
|||
|
|
@ -147,17 +147,50 @@
|
|||
<div v-html="description" />
|
||||
<!-- TODO: use logos for listing all sources -->
|
||||
<span class="text-muted mt-n3 mb-3 text-capitalize">Source: {{ source }}</span>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<b-alert
|
||||
v-if="note"
|
||||
v-html="note"
|
||||
show
|
||||
class="cursor-pointer mt-3"
|
||||
variant="warning"
|
||||
@click.native="$router.push({ name: 'game.notes', params: { id: game.id, slug: game.slug } })"
|
||||
/>
|
||||
<div v-if="gamePublishers.length" class="d-flex justify-content-center flex-column">
|
||||
<span class="mt-4">Published by:</span>
|
||||
|
||||
<div>
|
||||
<b-link
|
||||
v-for="publisher in gamePublishers"
|
||||
:key="publisher.id"
|
||||
:to="{ name: 'company', params: { id: publisher.id, slug: publisher.slug }}"
|
||||
>
|
||||
<b-img
|
||||
v-if="publisher.logo"
|
||||
:src="$options.getImageUrl(publisher)"
|
||||
:alt="publisher.name"
|
||||
class="mr-2 mb-2"
|
||||
width="120"
|
||||
/>
|
||||
|
||||
<span v-else>{{ publisher.name }}</span>
|
||||
</b-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="gameDevelopers.length">
|
||||
<h4 class="mt-4">Developed by:</h4>
|
||||
|
||||
<b-link
|
||||
v-for="developer in gameDevelopers"
|
||||
:key="developer.id"
|
||||
:to="{ name: 'company', params: { id: developer.id, slug: developer.slug }}"
|
||||
>
|
||||
<b-img
|
||||
v-if="developer.logo"
|
||||
:src="$options.getImageUrl(developer)"
|
||||
:alt="developer.name"
|
||||
class="mr-2 mb-2"
|
||||
width="120"
|
||||
/>
|
||||
|
||||
<span v-else>{{ developer.name }}</span>
|
||||
</b-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<game-ratings />
|
||||
|
||||
|
|
@ -179,6 +212,15 @@
|
|||
xl="3"
|
||||
:class="['pt-3', darkTheme || hasWallpaper ? 'text-light' : '']"
|
||||
>
|
||||
<b-alert
|
||||
v-if="note"
|
||||
v-html="note"
|
||||
show
|
||||
class="cursor-pointer mt-3"
|
||||
variant="warning"
|
||||
@click.native="$router.push({ name: 'game.notes', params: { id: game.id, slug: game.slug } })"
|
||||
/>
|
||||
|
||||
<game-progress />
|
||||
|
||||
<div v-if="gameGenres">
|
||||
|
|
@ -311,49 +353,6 @@
|
|||
</b-button>
|
||||
</template>
|
||||
|
||||
<div v-if="gamePublishers.length" class="d-flex justify-content-center flex-column">
|
||||
<h4 class="mt-4">Published by:</h4>
|
||||
|
||||
<div>
|
||||
<b-link
|
||||
v-for="publisher in gamePublishers"
|
||||
:key="publisher.id"
|
||||
:to="{ name: 'company', params: { id: publisher.id }}"
|
||||
>
|
||||
<!-- TODO: use publisher.logo.alpha_channel to style logo -->
|
||||
<b-img
|
||||
v-if="publisher.logo"
|
||||
:src="$options.getImageUrl(publisher)"
|
||||
:alt="publisher.name"
|
||||
class="mr-2 mb-2"
|
||||
width="60"
|
||||
/>
|
||||
|
||||
<span v-else>{{ publisher.name }}</span>
|
||||
</b-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="gameDevelopers.length">
|
||||
<h4 class="mt-4">Developed by:</h4>
|
||||
|
||||
<b-link
|
||||
v-for="developer in gameDevelopers"
|
||||
:key="developer.id"
|
||||
:to="{ name: 'company', params: { id: developer.id }}"
|
||||
>
|
||||
<b-img
|
||||
v-if="developer.logo"
|
||||
:src="$options.getImageUrl(developer)"
|
||||
:alt="developer.name"
|
||||
class="mr-2 mb-2"
|
||||
width="60"
|
||||
/>
|
||||
|
||||
<span v-else>{{ developer.name }}</span>
|
||||
</b-link>
|
||||
</div>
|
||||
|
||||
<div v-if="alternativeNames.length">
|
||||
<h4 class="mt-4">Alternative names:</h4>
|
||||
|
||||
|
|
@ -427,25 +426,26 @@
|
|||
</div>
|
||||
|
||||
<div v-if="gameCollection" class="text-left small p-3">
|
||||
<h4>More from the {{ gameCollection.name }} collection</h4>
|
||||
<!-- <img :src="gameHeaderImage" alt="" /> -->
|
||||
<h3 class="heading mb-3">More from the {{ gameCollection.name }} collection</h3>
|
||||
|
||||
<router-link
|
||||
v-for="g in gameCollection.games"
|
||||
:key="g.id"
|
||||
:to="{ name: 'game', params: { id: g.id, slug: g.slug } }"
|
||||
>
|
||||
<b-img
|
||||
:src="$options.getImageUrl(g)"
|
||||
:alt="g.name"
|
||||
width="200"
|
||||
rounded
|
||||
class="mr-2 mb-2"
|
||||
fluid
|
||||
/>
|
||||
</router-link>
|
||||
<div class="game-grid">
|
||||
<router-link
|
||||
v-for="g in gameCollection.games"
|
||||
:key="g.id"
|
||||
:to="{ name: 'game', params: { id: g.id, slug: g.slug } }"
|
||||
>
|
||||
<b-img
|
||||
:src="$options.getImageUrl(g)"
|
||||
:alt="g.name"
|
||||
rounded
|
||||
fluid
|
||||
/>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<similar-games :has-wallpaper="hasWallpaper" />
|
||||
<similar-games />
|
||||
</template>
|
||||
|
||||
<div class="pt-5" v-else>
|
||||
|
|
|
|||
|
|
@ -1,38 +1,72 @@
|
|||
<!-- TODO: use this to animate features https://michalsnik.github.io/aos/ -->
|
||||
<template lang="html">
|
||||
<section>
|
||||
<section class="home d-flex flex-column">
|
||||
<portal to="pageTitle">Gamebrary</portal>
|
||||
|
||||
<div v-if="user" class="text-center py-5">
|
||||
<h1 class="text-light display-4 text-center">Your game library. Organized.</h1>
|
||||
|
||||
<!-- <div v-if="user" class="text-center py-5">
|
||||
Welcome back, {{ user.displayName }}
|
||||
</div> -->
|
||||
|
||||
<div class="mb-5 pb-5 field ml-auto mr-auto text-center mb-auto">
|
||||
<div class="lead">
|
||||
<p>Organize</p>
|
||||
<p>Track progress</p>
|
||||
<p>Take notes</p>
|
||||
<p>Learn</p>
|
||||
<p>Read news</p>
|
||||
<p>Discover</p>
|
||||
<p class="text-info">Free and open source!</p>
|
||||
</div>
|
||||
|
||||
<b-button
|
||||
variant="success"
|
||||
class="mt-3"
|
||||
size="lg"
|
||||
:to="{ name: 'auth' }"
|
||||
>
|
||||
Get started!
|
||||
</b-button>
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<h1 class="display-5 mt-5 mb-3 mx-5 text-center">
|
||||
Gamebrary
|
||||
</h1>
|
||||
<div class="mt-auto">
|
||||
<h2 class="text-center text-light mb-2">Game data from the most reliable sources</h2>
|
||||
|
||||
<div class="mb-5 pb-5 field ml-auto mr-auto text-center mb-auto">
|
||||
<div class="lead text-primary">
|
||||
<p>Organize</p>
|
||||
<p>Track progress</p>
|
||||
<p>Take notes</p>
|
||||
<p>Learn</p>
|
||||
<p>Read news</p>
|
||||
<p>Discover</p>
|
||||
<p class="text-info">Free and open source!</p>
|
||||
</div>
|
||||
|
||||
<b-button
|
||||
variant="success"
|
||||
class="mt-3"
|
||||
size="lg"
|
||||
:to="{ name: 'auth' }"
|
||||
>
|
||||
Get started!
|
||||
</b-button>
|
||||
<div class="d-flex align-items-start justify-content-center">
|
||||
<!-- YouTube -->
|
||||
<img src="/logos/data-sources/wikipedia.svg" alt="wikipedia" width="80" class="mx-3">
|
||||
<img src="/logos/data-sources/igdb.svg" alt="igdb" width="100" class="mx-3">
|
||||
<img src="/logos/data-sources/fandom.svg" alt="fandom" width="100" class="mx-3 mt-2">
|
||||
<img src="/logos/data-sources/amazon.svg" alt="amazon" width="100" class="mx-3 mt-3">
|
||||
<img src="/logos/data-sources/twitch.svg" alt="twitch" width="100" class="mx-3 mt-2">
|
||||
<img src="/logos/data-sources/speedrun.png" alt="speedrun" width="100" class="mx-3 mt-3">
|
||||
<img src="/logos/data-sources/gog.svg" alt="gog" width="70" class="mx-3">
|
||||
<img src="/logos/data-sources/steam.svg" alt="steam" width="80" class="mx-3">
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<footer class="text-light text-center mt-auto">
|
||||
<router-link class="px-1" :to="{ name: 'about' }">About</router-link>
|
||||
<router-link class="px-1" :to="{ name: 'privacy.policy' }">Privacy</router-link>
|
||||
<router-link class="px-1" :to="{ name: 'terms' }">Terms</router-link>
|
||||
<br />
|
||||
<small>©{{ year }} Gamebrary</small>
|
||||
</footer>
|
||||
|
||||
<!-- <h1 class="display-5 mt-5 mb-3 mx-5 text-center">
|
||||
Gamebrary
|
||||
</h1> -->
|
||||
|
||||
<!-- <b-row>
|
||||
<b-col class="bg-warning">
|
||||
<b-img src="https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=1212,h=992,fit=crop/blickpkok4/mockup_4-AQE98M88kgFWl5ey.png" />
|
||||
</b-col>
|
||||
<b-col class="bg-danger">
|
||||
<h3>Your games, in one place.</h3>
|
||||
<p>From checking accounts to savings, credit cards, and more, personal finances can be tricky. Blick's mission is to make it simple to manage everything from one place.</p>
|
||||
</b-col>
|
||||
</b-row> -->
|
||||
|
||||
<!-- <b-form-row class="bg-secondary px-3 py-5">
|
||||
Organize your game library your way!
|
||||
|
|
@ -46,7 +80,6 @@
|
|||
</b-form-row> -->
|
||||
|
||||
<!-- <b-form-row>
|
||||
Show simplified game page, with lines pointing to content
|
||||
Game page
|
||||
|
||||
- IGDB
|
||||
|
|
@ -87,8 +120,7 @@
|
|||
</b-col>
|
||||
</b-form-row> -->
|
||||
|
||||
<!-- TODO: put in components -->
|
||||
<b-form-row class="bg-secondary px-3 py-5">
|
||||
<!-- <b-form-row class="bg-light px-3 py-5">
|
||||
<b-col cols="12">
|
||||
<h3 class="text-center text-light text-outlined py-2 mt-2">Trending games</h3>
|
||||
</b-col>
|
||||
|
|
@ -103,9 +135,9 @@
|
|||
<game-card-search :game="game" />
|
||||
</b-col>
|
||||
</div>
|
||||
</b-form-row>
|
||||
</b-form-row> -->
|
||||
|
||||
<b-form-row class="bg-info px-3 py-5">
|
||||
<!-- <b-form-row class="px-3 py-5">
|
||||
<b-col cols="12">
|
||||
<h3 class="text-center text-light text-outlined py-2 mt-2">Featured boards</h3>
|
||||
</b-col>
|
||||
|
|
@ -114,7 +146,9 @@
|
|||
v-for="board in featuredBoards"
|
||||
:key="board.id"
|
||||
cols="12"
|
||||
lg="3"
|
||||
sm="6"
|
||||
md="4"
|
||||
lg="2"
|
||||
>
|
||||
<mini-board
|
||||
:board="board"
|
||||
|
|
@ -131,28 +165,20 @@
|
|||
>
|
||||
More boards
|
||||
</b-button>
|
||||
</b-form-row>
|
||||
|
||||
<footer class="text-muted text-center py-5">
|
||||
<router-link class="px-1" :to="{ name: 'about' }">About</router-link>
|
||||
<router-link class="px-1" :to="{ name: 'privacy.policy' }">Privacy</router-link>
|
||||
<router-link class="px-1" :to="{ name: 'terms' }">Terms</router-link>
|
||||
<br />
|
||||
©{{ year }} Gamebrary
|
||||
</footer>
|
||||
</b-form-row> -->
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { TRENDING_GAMES } from '@/constants';
|
||||
import MiniBoard from '@/components/Board/MiniBoard';
|
||||
import GameCardSearch from '@/components/GameCards/GameCardSearch';
|
||||
// import MiniBoard from '@/components/Board/MiniBoard';
|
||||
// import GameCardSearch from '@/components/GameCards/GameCardSearch';
|
||||
import { mapState } from 'vuex';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MiniBoard,
|
||||
GameCardSearch,
|
||||
// MiniBoard,
|
||||
// GameCardSearch,
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
@ -176,3 +202,14 @@ export default {
|
|||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.home {
|
||||
/* margin-top: -54px; */
|
||||
/* padding-top: 54px; */
|
||||
height: 100vh;
|
||||
background: rgb(53,54,58);
|
||||
background: linear-gradient(0deg, rgba(218,0,80,1) 0%, rgba(218,0,80,.8) 100%);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -16,7 +16,7 @@ const routes = [
|
|||
...profileRoutes,
|
||||
{
|
||||
name: 'company',
|
||||
path: '/company/:id',
|
||||
path: '/company/:id/:slug',
|
||||
component: () => import(/* webpackChunkName: "notes" */ '@/companies/pages/CompanyPage'),
|
||||
meta: {
|
||||
title: 'Company',
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@ import {
|
|||
NEWS_SOURCES,
|
||||
LINKS_CATEGORIES,
|
||||
EXCLUDED_PLATFORMS,
|
||||
IMAGE_SIZE_THUMB,
|
||||
IMAGE_SIZE_MICRO,
|
||||
IMAGE_SIZE_SCREENSHOT_HUGE,
|
||||
IMAGE_SIZE_1080P,
|
||||
} from '@/constants';
|
||||
|
|
@ -53,7 +55,7 @@ export default {
|
|||
return gameNews;
|
||||
},
|
||||
|
||||
gameMedia: (state) => {
|
||||
gameMedia: (state) => (thumb = false) => {
|
||||
const steamVideos = state.game?.steam?.movies?.map((video) => {
|
||||
const hiQuality = video?.mp4?.max;
|
||||
const lowQuality = video?.mp4?.[480];
|
||||
|
|
@ -75,11 +77,14 @@ export default {
|
|||
}
|
||||
}) || [];
|
||||
|
||||
const igdbScreenshots = state.game?.screenshots?.map((screenshot) => ({ imageUrl: getImageUrl(screenshot, IMAGE_SIZE_SCREENSHOT_HUGE), source: 'igdb', })) || [];
|
||||
const igdbScreenshots = state.game?.screenshots?.map((screenshot) => ({
|
||||
imageUrl: getImageUrl(screenshot, thumb ? IMAGE_SIZE_THUMB : IMAGE_SIZE_SCREENSHOT_HUGE),
|
||||
source: 'igdb',
|
||||
})) || [];
|
||||
const steamScreenshots = state.game?.steam?.screenshots.map(({ path_full }) => ({ imageUrl: path_full, source: 'steam' })) || [];
|
||||
|
||||
const gameCover = {
|
||||
imageUrl: getImageUrl(state.game, IMAGE_SIZE_1080P),
|
||||
imageUrl: getImageUrl(state.game, thumb ? IMAGE_SIZE_THUMB : IMAGE_SIZE_1080P),
|
||||
source: 'igdb',
|
||||
isCover: true,
|
||||
};
|
||||
|
|
@ -97,7 +102,7 @@ export default {
|
|||
};
|
||||
}) || [];
|
||||
|
||||
const igdbArtworks = state?.game?.artworks?.map((artwork) => ({ imageUrl: getImageUrl(artwork, IMAGE_SIZE_1080P), source: 'igdb', })) || [];
|
||||
const igdbArtworks = state?.game?.artworks?.map((artwork) => ({ imageUrl: getImageUrl(artwork, thumb ? IMAGE_SIZE_THUMB : IMAGE_SIZE_1080P), source: 'igdb', })) || [];
|
||||
|
||||
return [
|
||||
...gogImages,
|
||||
|
|
|
|||
Loading…
Reference in a new issue