Working on shop javascript & fixed assettypeids.
This commit is contained in:
Graphictoria
parent
0a2f41131b
commit
c0461f57c0
|
|
@ -10,61 +10,77 @@ namespace App\Helpers;
|
||||||
class AssetHelper
|
class AssetHelper
|
||||||
{
|
{
|
||||||
public static $assetTypes = [
|
public static $assetTypes = [
|
||||||
[0] = 'Image',
|
[1] = 'Image',
|
||||||
[1] = 'TShirt',
|
[2] = 'T-Shirt',
|
||||||
[2] = 'Audio',
|
[3] = 'Audio',
|
||||||
[3] = 'Mesh',
|
[4] = 'Mesh',
|
||||||
[4] = 'Lua',
|
[5] = 'Lua',
|
||||||
[5] = 'HTML',
|
[6] = 'HTML',
|
||||||
[6] = 'Text',
|
[7] = 'Text',
|
||||||
[7] = 'Hat',
|
[8] = 'Hat',
|
||||||
[8] = 'Place',
|
[9] = 'Place',
|
||||||
[9] = 'Model',
|
[10] = 'Model',
|
||||||
[10] = 'Shirt',
|
[11] = 'Shirt',
|
||||||
[11] = 'Pants',
|
[12] = 'Pants',
|
||||||
[12] = 'Decal',
|
[13] = 'Decal',
|
||||||
[13] = 'Avatar',
|
[14] = null, // Doesn't exist on Roblox.
|
||||||
[14] = 'Head',
|
[15] = null, // Doesn't exist on Roblox.
|
||||||
[15] = 'Face',
|
[16] = 'Avatar',
|
||||||
[16] = 'Gear',
|
[17] = 'Head',
|
||||||
[17] = 'Badge',
|
[18] = 'Face',
|
||||||
[18] = 'GroupEmblem',
|
[19] = 'Gear',
|
||||||
[19] = 'Animation',
|
[20] = null, // Doesn't exist on Roblox.
|
||||||
[20] = 'Arms',
|
[21] = 'Badge',
|
||||||
[21] = 'Legs',
|
[22] = 'Group Emblem',
|
||||||
[22] = 'Torso',
|
[23] = null, // Doesn't exist on Roblox.
|
||||||
[23] = 'RightArm',
|
[24] = 'Animation',
|
||||||
[24] = 'LeftArm',
|
[25] = 'Arms',
|
||||||
[25] = 'LeftLeg',
|
[26] = 'Legs',
|
||||||
[26] = 'RightLeg',
|
[27] = 'Torso',
|
||||||
[27] = 'Package',
|
[28] = 'Right Arm',
|
||||||
[28] = 'YouTubeVideo',
|
[29] = 'Left Arm',
|
||||||
[29] = 'GamePass',
|
[30] = 'Left Leg',
|
||||||
[30] = 'App',
|
[31] = 'Right Leg',
|
||||||
[31] = 'Code',
|
[32] = 'Package',
|
||||||
[32] = 'Plugin',
|
[33] = 'YouTubeVideo',
|
||||||
[33] = 'SolidModel',
|
[34] = 'Game Pass',
|
||||||
[34] = 'MeshPart',
|
[35] = 'App',
|
||||||
[35] = 'HairAccessory',
|
[36] = null, // Doesn't exist on Roblox.
|
||||||
[36] = 'FaceAccessory',
|
[37] = 'Code',
|
||||||
[37] = 'NeckAccessory',
|
[38] = 'Plugin',
|
||||||
[38] = 'ShoulderAccessory',
|
[39] = 'SolidModel',
|
||||||
[39] = 'FrontAccessory',
|
[40] = 'MeshPart',
|
||||||
[40] = 'BackAccessory',
|
[41] = 'Hair Accessory',
|
||||||
[41] = 'WaistAccessory',
|
[42] = 'Face Accessory',
|
||||||
[42] = 'ClimbAnimation',
|
[43] = 'Neck Accessory',
|
||||||
[43] = 'DeathAnimation',
|
[44] = 'Shoulder Accessory',
|
||||||
[44] = 'FallAnimation',
|
[45] = 'Front Accessory',
|
||||||
[45] = 'IdleAnimation',
|
[46] = 'Back Accessory',
|
||||||
[46] = 'JumpAnimation',
|
[47] = 'Waist Accessory',
|
||||||
[47] = 'RunAnimation',
|
[48] = 'Climb Animation',
|
||||||
[48] = 'SwimAnimation',
|
[49] = 'Death Animation',
|
||||||
[49] = 'WalkAnimation',
|
[50] = 'Fall Animation',
|
||||||
[50] = 'PoseAnimation',
|
[51] = 'Idle Animation',
|
||||||
[51] = 'LocalizationTableManifest',
|
[52] = 'Jump Animation',
|
||||||
[52] = 'LocalizationTableTranslation',
|
[53] = 'Run Animation',
|
||||||
[53] = 'EmoteAnimation',
|
[54] = 'Swim Animation',
|
||||||
[54] = 'Video',
|
[55] = 'Walk Animation',
|
||||||
[55] = 'TexturePack'
|
[56] = 'Pose Animation',
|
||||||
|
[57] = 'Ear Accessory',
|
||||||
|
[58] = 'Eye Accessory',
|
||||||
|
[59] = 'LocalizationTableManifest',
|
||||||
|
[60] = 'LocalizationTableTranslation',
|
||||||
|
[61] = 'Emote Animation',
|
||||||
|
[62] = 'Video',
|
||||||
|
[63] = 'TexturePack',
|
||||||
|
[64] = 'T-Shirt Accessory',
|
||||||
|
[65] = 'Shirt Accessory',
|
||||||
|
[66] = 'Pants Accessory',
|
||||||
|
[67] = 'Jacket Accessory',
|
||||||
|
[68] = 'Sweater Accessory',
|
||||||
|
[69] = 'Shorts Accessory',
|
||||||
|
[70] = 'Left Shoe Accessory',
|
||||||
|
[71] = 'Right Shoe Accessory',
|
||||||
|
[72] = 'Dress Skirt Accessory'
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,134 @@
|
||||||
|
// © XlXi 2021
|
||||||
|
// Graphictoria 5
|
||||||
|
|
||||||
|
import { Component, createRef } from 'react';
|
||||||
|
|
||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
|
import Twemoji from 'react-twemoji';
|
||||||
|
|
||||||
|
import { buildGenericApiUrl } from '../util/HTTP.js';
|
||||||
|
import Loader from './Loader';
|
||||||
|
|
||||||
|
axios.defaults.withCredentials = true;
|
||||||
|
|
||||||
|
const shopCategories = [
|
||||||
|
['Clothing'] = [
|
||||||
|
{
|
||||||
|
label: 'Hats',
|
||||||
|
assetTypeId: 0
|
||||||
|
}
|
||||||
|
]
|
||||||
|
];
|
||||||
|
|
||||||
|
class Shop extends Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="container-lg my-2">
|
||||||
|
<div className="row">
|
||||||
|
<div className="col d-flex">
|
||||||
|
<h4 className="my-auto">Shop</h4>
|
||||||
|
</div>
|
||||||
|
<div className="col-lg-5 my-2 my-lg-0 mb-lg-2 d-flex">
|
||||||
|
<button className="btn btn-secondary me-2"><i className="fa-solid fa-gear"></i></button>
|
||||||
|
<div className="input-group">
|
||||||
|
<input type="text" className="form-control d-lg-flex" placeholder="Item name" />
|
||||||
|
<button className="btn btn-primary">Search</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-md-2">
|
||||||
|
<div className="graphictoria-shop-categories">
|
||||||
|
<h5>Category</h5>
|
||||||
|
<a href="#" className="text-decoration-none">All Items</a>
|
||||||
|
<ul className="list-unstyled ps-0">
|
||||||
|
<li className="mb-1">
|
||||||
|
<a className="text-decoration-none fw-normal align-items-center graphictoria-list-dropdown" data-bs-toggle="collapse" data-bs-target="#shop-clothing-collapse" aria-expanded="true" href="#">Clothing</a>
|
||||||
|
<div className="collapse show" id="shop-clothing-collapse">
|
||||||
|
<ul className="btn-toggle-nav list-unstyled fw-normal small">
|
||||||
|
<li><a href="#" className="text-decoration-none ms-2">All Clothing</a></li>
|
||||||
|
<li><a href="#" className="fw-bold text-decoration-none ms-2">Hats</a></li>
|
||||||
|
<li><a href="#" className="text-decoration-none ms-2">Shirts</a></li>
|
||||||
|
<li><a href="#" className="text-decoration-none ms-2">T-Shirts</a></li>
|
||||||
|
<li><a href="#" className="text-decoration-none ms-2">Pants</a></li>
|
||||||
|
<li><a href="#" className="text-decoration-none ms-2">Packages</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li className="mb-1">
|
||||||
|
<a className="text-decoration-none fw-normal align-items-center graphictoria-list-dropdown" data-bs-toggle="collapse" data-bs-target="#shop-bodyparts-collapse" aria-expanded="false" href="#">Body Parts</a>
|
||||||
|
<div className="collapse" id="shop-bodyparts-collapse">
|
||||||
|
<ul className="btn-toggle-nav list-unstyled fw-normal small">
|
||||||
|
<li><a href="#" className="text-decoration-none ms-2">All Body Parts</a></li>
|
||||||
|
<li><a href="#" className="text-decoration-none ms-2">Heads</a></li>
|
||||||
|
<li><a href="#" className="text-decoration-none ms-2">Faces</a></li>
|
||||||
|
<li><a href="#" className="text-decoration-none ms-2">Packages</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li className="mb-1">
|
||||||
|
<a className="text-decoration-none fw-normal align-items-center graphictoria-list-dropdown" data-bs-toggle="collapse" data-bs-target="#shop-gear-collapse" aria-expanded="false" href="#">Gear</a>
|
||||||
|
<div className="collapse" id="shop-gear-collapse">
|
||||||
|
<ul className="btn-toggle-nav list-unstyled fw-normal small">
|
||||||
|
<li><a href="#" className="text-decoration-none ms-2">All Gear</a></li>
|
||||||
|
<li><a href="#" className="text-decoration-none ms-2">Building</a></li>
|
||||||
|
<li><a href="#" className="text-decoration-none ms-2">Explosive</a></li>
|
||||||
|
<li><a href="#" className="text-decoration-none ms-2">Melee</a></li>
|
||||||
|
<li><a href="#" className="text-decoration-none ms-2">Musical</a></li>
|
||||||
|
<li><a href="#" className="text-decoration-none ms-2">Navigation</a></li>
|
||||||
|
<li><a href="#" className="text-decoration-none ms-2">Power Up</a></li>
|
||||||
|
<li><a href="#" className="text-decoration-none ms-2">Ranged</a></li>
|
||||||
|
<li><a href="#" className="text-decoration-none ms-2">Social</a></li>
|
||||||
|
<li><a href="#" className="text-decoration-none ms-2">Transport</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-10 d-flex flex-column">
|
||||||
|
<div className="card p-3">
|
||||||
|
<div className="graphictoria-shop-overlay">
|
||||||
|
<Loader />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a className="graphictoria-item-card" href="#">
|
||||||
|
<span className="card m-2">
|
||||||
|
<img className="img-fluid" src="https://gtoria.local/images/testing/hat.png" />
|
||||||
|
<div className="p-2">
|
||||||
|
<p>Test hat</p>
|
||||||
|
<p className="text-muted">Free</p>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul className="list-inline mx-auto mt-3">
|
||||||
|
<li className="list-inline-item">
|
||||||
|
<button className="btn btn-secondary" disabled><i className="fa-solid fa-angle-left"></i></button>
|
||||||
|
</li>
|
||||||
|
<li className="list-inline-item graphictoria-paginator">
|
||||||
|
<span>Page </span>
|
||||||
|
<input type="text" value="1" className="form-control" disabled />
|
||||||
|
<span> of 20</span>
|
||||||
|
</li>
|
||||||
|
<li className="list-inline-item">
|
||||||
|
<button className="btn btn-secondary" disabled><i className="fa-solid fa-angle-right"></i></button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Shop;
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
// © XlXi 2021
|
||||||
|
// Graphictoria 5
|
||||||
|
|
||||||
|
import $ from 'jquery';
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { render } from 'react-dom';
|
||||||
|
|
||||||
|
import Shop from '../components/Shop';
|
||||||
|
|
||||||
|
const shopId = 'gt-shop-main';
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
if (document.getElementById(shopId)) {
|
||||||
|
render(<Shop />, document.getElementById(shopId));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -2,101 +2,13 @@
|
||||||
|
|
||||||
@section('title', 'Shop')
|
@section('title', 'Shop')
|
||||||
|
|
||||||
|
@section('page-specific')
|
||||||
|
<script src="{{ mix('js/Shop.js') }}"></script>
|
||||||
|
@endsection
|
||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
<div class="container-lg my-2">
|
<div id="gt-shop-main" class="container-lg my-2 d-flex flex-column">
|
||||||
<div class="row">
|
<h4 class="my-auto">Shop</h4>
|
||||||
<div class="col d-flex">
|
<x-loader />
|
||||||
<h4 class="my-auto">Shop</h4>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-5 my-2 my-lg-0 mb-lg-2 d-flex">
|
|
||||||
<button class="btn btn-secondary me-2"><i class="fa-solid fa-gear"></i></button>
|
|
||||||
<div class="input-group">
|
|
||||||
<input type="text" class="form-control d-lg-flex" placeholder="Item name" />
|
|
||||||
<button class="btn btn-primary">Search</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-2">
|
|
||||||
<div class="graphictoria-shop-categories">
|
|
||||||
<h5>Category</h5>
|
|
||||||
<a href="#" class="text-decoration-none">All Items</a>
|
|
||||||
<ul class="list-unstyled ps-0">
|
|
||||||
<li class="mb-1">
|
|
||||||
<a class="text-decoration-none fw-normal align-items-center graphictoria-list-dropdown" data-bs-toggle="collapse" data-bs-target="#shop-clothing-collapse" aria-expanded="true" href="#">Clothing</a>
|
|
||||||
<div class="collapse show" id="shop-clothing-collapse">
|
|
||||||
<ul class="btn-toggle-nav list-unstyled fw-normal small">
|
|
||||||
<li><a href="#" class="text-decoration-none ms-2">All Clothing</a></li>
|
|
||||||
<li><a href="#" class="fw-bold text-decoration-none ms-2">Hats</a></li>
|
|
||||||
<li><a href="#" class="text-decoration-none ms-2">Shirts</a></li>
|
|
||||||
<li><a href="#" class="text-decoration-none ms-2">T-Shirts</a></li>
|
|
||||||
<li><a href="#" class="text-decoration-none ms-2">Pants</a></li>
|
|
||||||
<li><a href="#" class="text-decoration-none ms-2">Packages</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="mb-1">
|
|
||||||
<a class="text-decoration-none fw-normal align-items-center graphictoria-list-dropdown" data-bs-toggle="collapse" data-bs-target="#shop-bodyparts-collapse" aria-expanded="false" href="#">Body Parts</a>
|
|
||||||
<div class="collapse" id="shop-bodyparts-collapse">
|
|
||||||
<ul class="btn-toggle-nav list-unstyled fw-normal small">
|
|
||||||
<li><a href="#" class="text-decoration-none ms-2">All Body Parts</a></li>
|
|
||||||
<li><a href="#" class="text-decoration-none ms-2">Heads</a></li>
|
|
||||||
<li><a href="#" class="text-decoration-none ms-2">Faces</a></li>
|
|
||||||
<li><a href="#" class="text-decoration-none ms-2">Packages</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="mb-1">
|
|
||||||
<a class="text-decoration-none fw-normal align-items-center graphictoria-list-dropdown" data-bs-toggle="collapse" data-bs-target="#shop-gear-collapse" aria-expanded="false" href="#">Gear</a>
|
|
||||||
<div class="collapse" id="shop-gear-collapse">
|
|
||||||
<ul class="btn-toggle-nav list-unstyled fw-normal small">
|
|
||||||
<li><a href="#" class="text-decoration-none ms-2">All Gear</a></li>
|
|
||||||
<li><a href="#" class="text-decoration-none ms-2">Building</a></li>
|
|
||||||
<li><a href="#" class="text-decoration-none ms-2">Explosive</a></li>
|
|
||||||
<li><a href="#" class="text-decoration-none ms-2">Melee</a></li>
|
|
||||||
<li><a href="#" class="text-decoration-none ms-2">Musical</a></li>
|
|
||||||
<li><a href="#" class="text-decoration-none ms-2">Navigation</a></li>
|
|
||||||
<li><a href="#" class="text-decoration-none ms-2">Power Up</a></li>
|
|
||||||
<li><a href="#" class="text-decoration-none ms-2">Ranged</a></li>
|
|
||||||
<li><a href="#" class="text-decoration-none ms-2">Social</a></li>
|
|
||||||
<li><a href="#" class="text-decoration-none ms-2">Transport</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-10 d-flex flex-column">
|
|
||||||
<div class="card p-3">
|
|
||||||
<div class="graphictoria-shop-overlay">
|
|
||||||
<x-loader />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<a class="graphictoria-item-card" href="#">
|
|
||||||
<span class="card m-2">
|
|
||||||
<img class="img-fluid" src="{{ asset('images/testing/hat.png') }}" />
|
|
||||||
<div class="p-2">
|
|
||||||
<p>Test hat</p>
|
|
||||||
<p class="text-muted">Free</p>
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<ul class="list-inline mx-auto mt-3">
|
|
||||||
<li class="list-inline-item">
|
|
||||||
<button class="btn btn-secondary disabled"><i class="fa-solid fa-angle-left"></i></button>
|
|
||||||
</li>
|
|
||||||
<li class="list-inline-item graphictoria-paginator">
|
|
||||||
<span>Page</span>
|
|
||||||
<input type="text" value="1" class="form-control">
|
|
||||||
<span>of 20</span>
|
|
||||||
</li>
|
|
||||||
<li class="list-inline-item">
|
|
||||||
<button class="btn btn-secondary"><i class="fa-solid fa-angle-right"></i></button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
@endsection
|
@endsection
|
||||||
|
|
@ -15,6 +15,7 @@ require('laravel-mix-banner');
|
||||||
mix.js('resources/js/app.js', 'public/js')
|
mix.js('resources/js/app.js', 'public/js')
|
||||||
.js('resources/js/pages/Maintenance.js', 'public/js')
|
.js('resources/js/pages/Maintenance.js', 'public/js')
|
||||||
.js('resources/js/pages/Dashboard.js', 'public/js')
|
.js('resources/js/pages/Dashboard.js', 'public/js')
|
||||||
|
.js('resources/js/pages/Shop.js', 'public/js')
|
||||||
.react()
|
.react()
|
||||||
.sass('resources/sass/Graphictoria.scss', 'public/css')
|
.sass('resources/sass/Graphictoria.scss', 'public/css')
|
||||||
.banner({
|
.banner({
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue