@oasisomniverse/nextjs 1.0.0

package/src/components/popups/game/components/ViewLeagues.tsx

@@ -0,0 +1,35 @@
+'use client';
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class ViewLeagues extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('game', 'viewLeagues')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>Coming Soon</h2>
+                        <p>This module is coming soon...</p>
+                        <button onClick={() => hide('game', 'viewLeagues')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default ViewLeagues;

package/src/components/popups/game/components/ViewTournaments.tsx

@@ -0,0 +1,35 @@
+'use client';
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class ViewTournaments extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('game', 'viewTournaments')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>Coming Soon</h2>
+                        <p>This module is coming soon...</p>
+                        <button onClick={() => hide('game', 'viewTournaments')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default ViewTournaments;

package/src/components/popups/game/index.tsx

@@ -0,0 +1,39 @@
+'use client';
+import React from 'react';
+
+import SearchProfiles from './components/SearchProfiles';
+import ViewAchievements from './components/ViewAchievements';
+import ViewLeagues from './components/ViewLeagues';
+import ViewTournaments from './components/ViewTournaments';
+
+class Game extends React.Component {
+
+    render() {
+        const props=this.props;
+        return(
+            <>
+                <SearchProfiles
+                    show={props.game.searchProfiles}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <ViewTournaments
+                    show={props.game.viewTournaments}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <ViewLeagues
+                    show={props.game.viewLeagues}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <ViewAchievements
+                    show={props.game.viewAchievements}
+                    hide={props.toggleScreenPopup}
+                />
+            </>
+        )
+    }
+}
+
+export default Game;

package/src/components/popups/karma/components/SearchKarma.tsx

@@ -0,0 +1,35 @@
+'use client';
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class SearchKarma extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('karma', 'searchKarma')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>UI Coming Soon</h2>
+                        <p>You can use this functionality directly by accessing the OASIS API from the Developer menu.</p>
+                        <button onClick={() => hide('karma', 'searchKarma')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default SearchKarma;

package/src/components/popups/karma/components/ViewAvatarKarma.tsx

@@ -0,0 +1,140 @@
+'use client';
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+// import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+import axios from "axios";
+import { toast } from 'react-toastify';
+import { AgGridReact } from 'ag-grid-react';
+import API_BASE_URL from "../../../../config/api";
+
+class ViewAvatarKarma extends React.Component {
+    state = {
+        columnDefs: [
+            { 
+                field: "date",
+                headerName: "Date"
+            },
+            {
+                field: 'level',
+
+            },
+            { 
+                field: "type",
+                headerName: "Type"
+            },
+            {
+                field: "karma",
+                headerName: "Karma",
+            },
+            {
+                field: "source",
+                headerName: "Source" 
+            },
+            {
+                field: "title",
+                headerName: "Title" 
+            },
+            {
+                field: "description",
+                headerName: "Description" 
+            },
+            {
+                field: "weblink",
+                headerName: "Weblink" 
+            },
+        ],
+        defaultColDef: {
+            flex: 1,
+            minWidth: 150,
+            filter: true,
+            sortable: true,
+            floatingFilter: true,
+            resizable: true,
+            // overflow:true
+        },
+        rowData: null,
+    };
+
+    onGridReady = (params) => {
+        this.gridApi = params.api;
+        this.gridColumnApi = params.columnApi;
+    
+        const updateData = (data) => {
+          this.setState({ rowData: data });
+        };
+    
+        fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
+          .then((resp) => resp.json())
+          .then((data) => updateData(data));
+    };
+
+    getApiData = () => {
+        this.setState({ loading: true })
+
+        axios({
+            method: 'get',
+            url: API_BASE_URL,
+            headers: {
+                'Content-Type': 'application/json'
+            }, 
+        })
+        .then((response) => {
+            this.setState({loading: false})
+
+            if (response.data.result?.isError) { 
+                toast.error(response.data.result.message);
+                return; 
+            }
+
+            toast.success(response.data.result.message);
+        })
+        .catch((err) => {
+            toast.error('err');
+            this.setState({loading: false})
+            return { error: true, data: err };
+        });
+    }
+
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal 
+                    size="xl"
+                    centered 
+                    className="custom-modal custom-popup-component light-custom-popup" 
+                    show={show}
+                    onHide={() => hide('karma', 'viewAvatarKarma')}
+                >
+                    <Modal.Body>
+                        <span className="form-cross-icon" onClick={() => hide('karma', 'viewAvatarKarma')}>
+                            <i className="fa fa-times"></i>
+                        </span>
+
+                        <h1 className="single-heading">Karma</h1>
+
+                        <div className="grids-container">
+                            <div className="single-grid">
+                                <p className="heading">Seeds Sent</p>
+
+                                <div className="ag-theme-alpine custom-ag-parent">
+                                    <AgGridReact
+                                        columnDefs={this.state.columnDefs}
+                                        defaultColDef={this.state.defaultColDef}
+                                        onGridReady={this.onGridReady}
+                                        rowData={this.state.rowData}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default ViewAvatarKarma;

package/src/components/popups/karma/components/ViewKarma.tsx

@@ -0,0 +1,104 @@
+'use client';
+import React from 'react';
+import { Modal } from 'react-bootstrap';
+// import Loader from "react-loader-spinner";
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+import oasisApi from "oasis-api";
+
+class ViewKarma extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            columnDefs: [
+                { field: 'date' },
+                { field: 'avatar' },
+                { field: 'positive/negative' },
+                { field: 'type' },
+                { field: 'karma' },
+                { field: 'source' },
+                { field: 'description' },
+                { field: 'weblink' },
+            ],
+            defaultColDef: {
+                flex: 1,
+                minWidth: 150,
+                filter: true,
+                sortable: true,
+                floatingFilter: true,
+                resizable: true,
+            },
+            rowData: null,
+            // loading: true,
+            // loggedIn: true,
+        };
+    }
+
+    onGridReady = async (params) => {
+        this.gridApi = params.api;
+        this.gridColumnApi = params.columnApi;
+        let karmaRecords = []
+
+        const avatarApi = new oasisApi.Avatar()
+        const karmaApi = new oasisApi.Karma()
+
+        const avatarRes = await avatarApi.getAll()
+        if(!avatarRes.error){
+          const avatars = avatarRes.data.result
+          for(let i=0; i<=avatars.length-1; i++){
+            const avatar = avatars[i]
+            const karmaRes = await karmaApi.getKarmaAkashicRecordsForAvatar(avatar.avatarId)
+            if(!karmaRes.error){
+              if(karmaRes.data.result){
+                const karmas = karmaRes.data.result
+                for(let j=0; j<=karmas.length-1; j++){
+                  const karma = karmas[j]
+                  console.log(karma)
+                  const karmaRecord = {
+                    date: karma.date,
+                    avatar: avatar.username,
+                    'positive/negative': karma.karmaTypePositive.value,
+                    type: karma.karmaTypePositive.name,
+                    source: karma.karmaSource.name,
+                    description: karma.karmaSourceDesc,
+                    weblink: 'oasisweb4.one',
+                    karma: karma.karma
+                  }
+                  karmaRecords.push(karmaRecord)
+                  console.log(karmaRecord)
+                };
+              }
+            }
+          };
+        }
+        console.log(karmaRecords);
+        this.setState({rowData: karmaRecords})
+    }
+    //run this after component mounts
+    render() {
+        const { show, hide } = this.props;
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('karma', 'viewKarmaWeightings')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>UI Coming Soon</h2>
+                        <p>This module is coming soon...</p>
+                        <button onClick={() => hide('karma', 'viewKarmaWeightings')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+
+    }
+}
+
+export default ViewKarma;

package/src/components/popups/karma/components/VoteKarma.tsx

@@ -0,0 +1,35 @@
+'use client';
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class VoteKarma extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('karma', 'voteKarma')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>Coming Soon</h2>
+                        <p>This module is coming soon...</p>
+                        <button onClick={() => hide('karma', 'voteKarma')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default VoteKarma;

package/src/components/popups/karma/index.tsx

@@ -0,0 +1,35 @@
+'use client';
+import React  from 'react';
+
+import "../../../assets/scss/data-screen.scss";
+import ViewKarma from './components/ViewKarma';
+import ViewAvatarKarma from './components/ViewAvatarKarma';
+import SearchKarma from './components/SearchKarma';
+import VoteKarma from './components/VoteKarma';
+class Karma extends React.Component {
+    render() { 
+        const props=this.props;
+        return(
+            <>
+                <ViewKarma
+                    show={props.karma.viewKarmaWeightings}
+                    hide={props.toggleScreenPopup}
+                />
+                <SearchKarma 
+                    show={props.karma.searchKarma}
+                    hide={props.toggleScreenPopup}
+                />
+                <VoteKarma 
+                    show={props.karma.voteKarma}
+                    hide={props.toggleScreenPopup}
+                />
+                <ViewAvatarKarma 
+                    show={props.karma.viewAvatarKarma}
+                    hide={props.toggleScreenPopup}
+                />
+            </>
+        );
+    }
+}
+ 
+export default Karma;

package/src/components/popups/map/components/Add2dObjectMap.tsx

@@ -0,0 +1,35 @@
+'use client';
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class Add2dObjectMap extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('map', 'add2dObjectMap')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>Coming Soon</h2>
+                        <p>This module is coming soon...</p>
+                        <button onClick={() => hide('map', 'add2dObjectMap')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default Add2dObjectMap;

package/src/components/popups/map/components/Add3dObjectMap.tsx

@@ -0,0 +1,35 @@
+'use client';
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class Add3dObjectMap extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('map', 'add3dObjectMap')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>Coming Soon</h2>
+                        <p>This module is coming soon...</p>
+                        <button onClick={() => hide('map', 'add3dObjectMap')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default Add3dObjectMap;

package/src/components/popups/map/components/AddQuestToMap.tsx

@@ -0,0 +1,35 @@
+'use client';
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class AddQuestToMap extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('map', 'addQuestToMap')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>Coming Soon</h2>
+                        <p>This module is coming soon...</p>
+                        <button onClick={() => hide('map', 'addQuestToMap')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default AddQuestToMap;

package/src/components/popups/map/components/DownloadOurWorld.tsx

@@ -0,0 +1,35 @@
+'use client';
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class DownloadOurWorld extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('map', 'downloadOurWorld')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>STAR ODK Coming Soon.</h2>
+                        <p>The alpha release of this will be coming soon… please check back soon… thank you.</p>
+                        <button onClick={() => hide('map', 'downloadOurWorld')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default DownloadOurWorld;

package/src/components/popups/map/components/ManageMap.tsx

@@ -0,0 +1,35 @@
+'use client';
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class ManageMap extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('map', 'manageMap')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>Our World Coming Soon.</h2>
+                        <p>This is functionaliy that is built in the Unity Smartphone Prototype for Our World and will soon be released. You can then download Our World from either the Map or OAPP menu.</p>
+                        <button onClick={() => hide('map', 'manageMap')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default ManageMap;

package/src/components/popups/map/components/PlotRouteOnMap.tsx

@@ -0,0 +1,35 @@
+'use client';
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class PlotRouteOnMap extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('map', 'plotRouteOnMap')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>Coming Soon</h2>
+                        <p>This module is coming soon...</p>
+                        <button onClick={() => hide('map', 'plotRouteOnMap')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default PlotRouteOnMap;