diff --git a/components/Header.tsx b/components/Header.tsx index b23da6a..29a2af1 100644 --- a/components/Header.tsx +++ b/components/Header.tsx @@ -43,11 +43,11 @@ function Header({ network }: {network: 'sui' | 'eth'}) {
  • - Shop + Shop +
  • Launchpad
  • +
  • Marketplace
  • + } diff --git a/pages/city/launchpad.tsx b/pages/city/launchpad.tsx index 036bdf3..50a30e8 100644 --- a/pages/city/launchpad.tsx +++ b/pages/city/launchpad.tsx @@ -10,7 +10,6 @@ const Vault = () => {
    -

    Access Free Mint

    {
    -
    + {/*
    @@ -81,7 +80,7 @@ const Vault = () => {
    -
    +
    */}
    diff --git a/pages/city/marketplace.tsx b/pages/city/marketplace.tsx new file mode 100644 index 0000000..b42a5fc --- /dev/null +++ b/pages/city/marketplace.tsx @@ -0,0 +1,26 @@ +import Layout from '../../components/Layout' +import VaultCard, {VaultCardType} from "../../components/VaultCard/VaultCard"; +import {Suspense, useEffect} from "react"; +import BabylonLoader from "../../components/BabylonLoader"; +import HomeScene from "../../scenes/ChestScene"; + +const MarketPlace = () => { + useEffect(() => { + document?.body.classList.add('babylon-page'); + + return function cleanup() { + document?.body.classList.remove('babylon-page'); + }; + }, []); + + return ( +
    + }> + + +
    + ) +} + +MarketPlace.getLayout = (page: React.ReactElement) => {page} +export default MarketPlace; \ No newline at end of file diff --git a/public/resources/models/treasure/basket_c.bin b/public/resources/models/treasure/basket_c.bin new file mode 100644 index 0000000..7f7edbc Binary files /dev/null and b/public/resources/models/treasure/basket_c.bin differ diff --git a/public/resources/models/treasure/basket_c.gltf b/public/resources/models/treasure/basket_c.gltf new file mode 100644 index 0000000..13f303d --- /dev/null +++ b/public/resources/models/treasure/basket_c.gltf @@ -0,0 +1,741 @@ +{ + "asset" : { + "generator" : "Khronos glTF Blender I/O v3.3.27", + "version" : "2.0" + }, + "extensionsUsed" : [ + "KHR_materials_specular", + "KHR_materials_ior", + "KHR_texture_transform", + "KHR_materials_emissive_strength" + ], + "extensionsRequired" : [ + "KHR_texture_transform" + ], + "scene" : 0, + "scenes" : [ + { + "name" : "Scene", + "nodes" : [ + 0 + ] + } + ], + "nodes" : [ + { + "mesh" : 0, + "name" : "basket_c" + } + ], + "animations" : [ + { + "channels" : [ + { + "sampler" : 0, + "target" : { + "node" : 0, + "path" : "translation" + } + }, + { + "sampler" : 1, + "target" : { + "node" : 0, + "path" : "rotation" + } + }, + { + "sampler" : 2, + "target" : { + "node" : 0, + "path" : "scale" + } + } + ], + "name" : "basket_c", + "samplers" : [ + { + "input" : 24, + "interpolation" : "LINEAR", + "output" : 25 + }, + { + "input" : 24, + "interpolation" : "LINEAR", + "output" : 26 + }, + { + "input" : 24, + "interpolation" : "LINEAR", + "output" : 27 + } + ] + } + ], + "materials" : [ + { + "doubleSided" : true, + "extensions" : { + "KHR_materials_specular" : { + "specularColorFactor" : [ + 2.371357614441398, + 2.371357614441398, + 2.371357614441398 + ] + }, + "KHR_materials_ior" : { + "ior" : 1.4500000476837158 + } + }, + "name" : "MAT_Outfit_Wicker", + "normalTexture" : { + "extensions" : { + "KHR_texture_transform" : { + "offset" : [ + 0, + -3 + ], + "scale" : [ + 4, + 4 + ] + } + }, + "index" : 0, + "texCoord" : 1 + }, + "pbrMetallicRoughness" : { + "baseColorTexture" : { + "index" : 1 + }, + "metallicFactor" : 0, + "roughnessFactor" : 0.5999999642372131 + } + }, + { + "doubleSided" : true, + "extensions" : { + "KHR_materials_specular" : { + "specularColorFactor" : [ + 2.371357614441398, + 2.371357614441398, + 2.371357614441398 + ] + }, + "KHR_materials_ior" : { + "ior" : 1.4500000476837158 + } + }, + "name" : "MAT_Outfit_Plastic", + "normalTexture" : { + "index" : 2, + "texCoord" : 1 + }, + "pbrMetallicRoughness" : { + "baseColorTexture" : { + "index" : 3 + }, + "metallicFactor" : 0, + "metallicRoughnessTexture" : { + "extensions" : { + "KHR_texture_transform" : { + "offset" : [ + 0, + -3 + ], + "scale" : [ + 4, + 4 + ] + } + }, + "index" : 4, + "texCoord" : 1 + }, + "roughnessFactor" : 0.5 + } + }, + { + "doubleSided" : true, + "emissiveFactor" : [ + 1, + 0.1981208473443985, + 0.006116504780948162 + ], + "extensions" : { + "KHR_materials_emissive_strength" : { + "emissiveStrength" : 12 + }, + "KHR_materials_specular" : { + "specularColorFactor" : [ + 2.371357614441398, + 2.371357614441398, + 2.371357614441398 + ] + }, + "KHR_materials_ior" : { + "ior" : 1.4500000476837158 + } + }, + "name" : "MAT_Outfit_Emissive", + "pbrMetallicRoughness" : { + "baseColorTexture" : { + "index" : 5 + }, + "metallicFactor" : 0, + "roughnessFactor" : 0.5999999642372131 + } + }, + { + "doubleSided" : true, + "extensions" : { + "KHR_materials_specular" : { + "specularColorFactor" : [ + 1.3595783411134539, + 1.3595783411134539, + 1.3595783411134539 + ] + }, + "KHR_materials_ior" : { + "ior" : 1.4500000476837158 + } + }, + "name" : "MAT_Outfit_Metal_A", + "normalTexture" : { + "index" : 6, + "texCoord" : 1 + }, + "pbrMetallicRoughness" : { + "baseColorTexture" : { + "index" : 7 + }, + "metallicRoughnessTexture" : { + "extensions" : { + "KHR_texture_transform" : { + "offset" : [ + 0, + -4 + ], + "scale" : [ + 5, + 5 + ] + } + }, + "index" : 8, + "texCoord" : 1 + }, + "roughnessFactor" : 0.5 + } + } + ], + "meshes" : [ + { + "name" : "Cube.006", + "primitives" : [ + { + "attributes" : { + "POSITION" : 0, + "NORMAL" : 1, + "TEXCOORD_0" : 2, + "TEXCOORD_1" : 3, + "COLOR_0" : 4 + }, + "indices" : 5, + "material" : 0 + }, + { + "attributes" : { + "POSITION" : 6, + "NORMAL" : 7, + "TEXCOORD_0" : 8, + "TEXCOORD_1" : 9, + "COLOR_0" : 10 + }, + "indices" : 11, + "material" : 1 + }, + { + "attributes" : { + "POSITION" : 12, + "NORMAL" : 13, + "TEXCOORD_0" : 14, + "TEXCOORD_1" : 15, + "COLOR_0" : 16 + }, + "indices" : 17, + "material" : 2 + }, + { + "attributes" : { + "POSITION" : 18, + "NORMAL" : 19, + "TEXCOORD_0" : 20, + "TEXCOORD_1" : 21, + "COLOR_0" : 22 + }, + "indices" : 23, + "material" : 3 + } + ] + } + ], + "textures" : [ + { + "sampler" : 0, + "source" : 0 + }, + { + "sampler" : 0, + "source" : 1 + }, + { + "sampler" : 0, + "source" : 2 + }, + { + "sampler" : 0, + "source" : 1 + }, + { + "sampler" : 0, + "source" : 3 + }, + { + "sampler" : 0, + "source" : 1 + }, + { + "sampler" : 0, + "source" : 2 + }, + { + "sampler" : 0, + "source" : 1 + }, + { + "sampler" : 0, + "source" : 3 + } + ], + "images" : [ + { + "mimeType" : "image/png", + "name" : "TEX_Wicker_A", + "uri" : "TEX_Wicker_A.png" + }, + { + "mimeType" : "image/png", + "name" : "TEX_Outfit_AA", + "uri" : "TEX_Outfit_AA.png" + }, + { + "mimeType" : "image/png", + "name" : "TEX_Trim_A_N", + "uri" : "TEX_Trim_A_N.png" + }, + { + "mimeType" : "image/png", + "name" : "TEX_MP_Roughness_A", + "uri" : "TEX_MP_Roughness_A.png" + } + ], + "accessors" : [ + { + "bufferView" : 0, + "componentType" : 5126, + "count" : 204, + "max" : [ + 0.28354787826538086, + 0.2481013536453247, + 0.42943140864372253 + ], + "min" : [ + -0.28354787826538086, + 0.004725754261016846, + -0.42943140864372253 + ], + "type" : "VEC3" + }, + { + "bufferView" : 1, + "componentType" : 5126, + "count" : 204, + "type" : "VEC3" + }, + { + "bufferView" : 2, + "componentType" : 5126, + "count" : 204, + "type" : "VEC2" + }, + { + "bufferView" : 3, + "componentType" : 5126, + "count" : 204, + "type" : "VEC2" + }, + { + "bufferView" : 4, + "componentType" : 5123, + "count" : 204, + "normalized" : true, + "type" : "VEC4" + }, + { + "bufferView" : 5, + "componentType" : 5123, + "count" : 984, + "type" : "SCALAR" + }, + { + "bufferView" : 6, + "componentType" : 5126, + "count" : 1049, + "max" : [ + 0.33532002568244934, + 0.8094638586044312, + 0.42943140864372253 + ], + "min" : [ + -0.33532002568244934, + -0.006428537890315056, + -0.42943140864372253 + ], + "type" : "VEC3" + }, + { + "bufferView" : 7, + "componentType" : 5126, + "count" : 1049, + "type" : "VEC3" + }, + { + "bufferView" : 8, + "componentType" : 5126, + "count" : 1049, + "type" : "VEC2" + }, + { + "bufferView" : 9, + "componentType" : 5126, + "count" : 1049, + "type" : "VEC2" + }, + { + "bufferView" : 10, + "componentType" : 5123, + "count" : 1049, + "normalized" : true, + "type" : "VEC4" + }, + { + "bufferView" : 11, + "componentType" : 5123, + "count" : 3036, + "type" : "SCALAR" + }, + { + "bufferView" : 12, + "componentType" : 5126, + "count" : 104, + "max" : [ + 0.258414626121521, + 0.3598306477069855, + 0.4035223126411438 + ], + "min" : [ + -0.258414626121521, + 0.28778064250946045, + -0.4035223126411438 + ], + "type" : "VEC3" + }, + { + "bufferView" : 13, + "componentType" : 5126, + "count" : 104, + "type" : "VEC3" + }, + { + "bufferView" : 14, + "componentType" : 5126, + "count" : 104, + "type" : "VEC2" + }, + { + "bufferView" : 15, + "componentType" : 5126, + "count" : 104, + "type" : "VEC2" + }, + { + "bufferView" : 16, + "componentType" : 5123, + "count" : 104, + "normalized" : true, + "type" : "VEC4" + }, + { + "bufferView" : 17, + "componentType" : 5123, + "count" : 240, + "type" : "SCALAR" + }, + { + "bufferView" : 18, + "componentType" : 5126, + "count" : 821, + "max" : [ + 0.2737472653388977, + 0.4345664381980896, + 0.4188515543937683 + ], + "min" : [ + -0.2737472653388977, + 0.2667090892791748, + -0.4188515543937683 + ], + "type" : "VEC3" + }, + { + "bufferView" : 19, + "componentType" : 5126, + "count" : 821, + "type" : "VEC3" + }, + { + "bufferView" : 20, + "componentType" : 5126, + "count" : 821, + "type" : "VEC2" + }, + { + "bufferView" : 21, + "componentType" : 5126, + "count" : 821, + "type" : "VEC2" + }, + { + "bufferView" : 22, + "componentType" : 5123, + "count" : 821, + "normalized" : true, + "type" : "VEC4" + }, + { + "bufferView" : 23, + "componentType" : 5123, + "count" : 1992, + "type" : "SCALAR" + }, + { + "bufferView" : 24, + "componentType" : 5126, + "count" : 241, + "max" : [ + 8 + ], + "min" : [ + 0 + ], + "type" : "SCALAR" + }, + { + "bufferView" : 25, + "componentType" : 5126, + "count" : 241, + "type" : "VEC3" + }, + { + "bufferView" : 26, + "componentType" : 5126, + "count" : 241, + "type" : "VEC4" + }, + { + "bufferView" : 27, + "componentType" : 5126, + "count" : 241, + "type" : "VEC3" + } + ], + "bufferViews" : [ + { + "buffer" : 0, + "byteLength" : 2448, + "byteOffset" : 0, + "target" : 34962 + }, + { + "buffer" : 0, + "byteLength" : 2448, + "byteOffset" : 2448, + "target" : 34962 + }, + { + "buffer" : 0, + "byteLength" : 1632, + "byteOffset" : 4896, + "target" : 34962 + }, + { + "buffer" : 0, + "byteLength" : 1632, + "byteOffset" : 6528, + "target" : 34962 + }, + { + "buffer" : 0, + "byteLength" : 1632, + "byteOffset" : 8160, + "target" : 34962 + }, + { + "buffer" : 0, + "byteLength" : 1968, + "byteOffset" : 9792, + "target" : 34963 + }, + { + "buffer" : 0, + "byteLength" : 12588, + "byteOffset" : 11760, + "target" : 34962 + }, + { + "buffer" : 0, + "byteLength" : 12588, + "byteOffset" : 24348, + "target" : 34962 + }, + { + "buffer" : 0, + "byteLength" : 8392, + "byteOffset" : 36936, + "target" : 34962 + }, + { + "buffer" : 0, + "byteLength" : 8392, + "byteOffset" : 45328, + "target" : 34962 + }, + { + "buffer" : 0, + "byteLength" : 8392, + "byteOffset" : 53720, + "target" : 34962 + }, + { + "buffer" : 0, + "byteLength" : 6072, + "byteOffset" : 62112, + "target" : 34963 + }, + { + "buffer" : 0, + "byteLength" : 1248, + "byteOffset" : 68184, + "target" : 34962 + }, + { + "buffer" : 0, + "byteLength" : 1248, + "byteOffset" : 69432, + "target" : 34962 + }, + { + "buffer" : 0, + "byteLength" : 832, + "byteOffset" : 70680, + "target" : 34962 + }, + { + "buffer" : 0, + "byteLength" : 832, + "byteOffset" : 71512, + "target" : 34962 + }, + { + "buffer" : 0, + "byteLength" : 832, + "byteOffset" : 72344, + "target" : 34962 + }, + { + "buffer" : 0, + "byteLength" : 480, + "byteOffset" : 73176, + "target" : 34963 + }, + { + "buffer" : 0, + "byteLength" : 9852, + "byteOffset" : 73656, + "target" : 34962 + }, + { + "buffer" : 0, + "byteLength" : 9852, + "byteOffset" : 83508, + "target" : 34962 + }, + { + "buffer" : 0, + "byteLength" : 6568, + "byteOffset" : 93360, + "target" : 34962 + }, + { + "buffer" : 0, + "byteLength" : 6568, + "byteOffset" : 99928, + "target" : 34962 + }, + { + "buffer" : 0, + "byteLength" : 6568, + "byteOffset" : 106496, + "target" : 34962 + }, + { + "buffer" : 0, + "byteLength" : 3984, + "byteOffset" : 113064, + "target" : 34963 + }, + { + "buffer" : 0, + "byteLength" : 964, + "byteOffset" : 117048 + }, + { + "buffer" : 0, + "byteLength" : 2892, + "byteOffset" : 118012 + }, + { + "buffer" : 0, + "byteLength" : 3856, + "byteOffset" : 120904 + }, + { + "buffer" : 0, + "byteLength" : 2892, + "byteOffset" : 124760 + } + ], + "samplers" : [ + { + "magFilter" : 9729, + "minFilter" : 9987 + } + ], + "buffers" : [ + { + "byteLength" : 127652, + "uri" : "basket_c.bin" + } + ] +} diff --git a/scenes/ChestScene.tsx b/scenes/ChestScene.tsx index 6639b40..9997100 100644 --- a/scenes/ChestScene.tsx +++ b/scenes/ChestScene.tsx @@ -1,10 +1,11 @@ import { useRef, useEffect } from "react"; import * as BABYLON from '@babylonjs/core'; import { GLTFFileLoader, GLTFLoaderAnimationStartMode } from "@babylonjs/loaders"; -import LoadingScreen from '../components/LoadingScreen' -import { Chest } from './Models/Chest' +import LoadingScreen from '../components/LoadingScreen'; import { Vector3 } from "@babylonjs/core"; import { useRouter } from 'next/router' +import { Chests } from "./Models/Chests"; +import styles from './../styles/Shop.module.css'; export default function HomeScene() { const FpsElement = typeof document !== 'undefined' && document.getElementById("fps"); @@ -26,7 +27,7 @@ export default function HomeScene() { const camera = new BABYLON.FreeCamera( "camera", - new BABYLON.Vector3(125,24,-90), + new BABYLON.Vector3(0,24,-220), scene ) @@ -43,8 +44,12 @@ export default function HomeScene() { scene.environmentTexture.level = 1; scene.clearColor = new BABYLON.Color4(0,0,0,0.0000000000000001); - Chest(scene, router); - + BABYLON.SceneLoader.OnPluginActivatedObservable.add((loader) => { + (loader as GLTFFileLoader).animationStartMode = GLTFLoaderAnimationStartMode.NONE; + }) + + Chests(scene, router); + return scene; }; @@ -66,6 +71,22 @@ export default function HomeScene() { }, []); return ( - +
    +
    +
    +
    0 / 2000
    + +
    +
    +
    0 / 1000
    + +
    +
    +
    0 / 500
    + +
    +
    + +
    ) } diff --git a/scenes/Models/Chest.ts b/scenes/Models/Chest.ts deleted file mode 100644 index 315d65b..0000000 --- a/scenes/Models/Chest.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Scene, SceneLoader, Vector3 } from "@babylonjs/core" -import type { NextRouter } from 'next/router' - -export const Chest = async (scene: Scene, router: NextRouter): Promise => { - await SceneLoader.ImportMeshAsync( - "", - `${process.env.NEXT_PUBLIC_MODELS}/treasure/`, - "basket_a.gltf", - scene - ); - -} diff --git a/scenes/Models/Chests.ts b/scenes/Models/Chests.ts new file mode 100644 index 0000000..47cb76d --- /dev/null +++ b/scenes/Models/Chests.ts @@ -0,0 +1,31 @@ +import {AssetContainer, Scene, SceneLoader, TransformNode, Vector3} from "@babylonjs/core" +import type { NextRouter } from 'next/router' + +export const Chests = async (scene: Scene, router: NextRouter): Promise => { + const chests = [ + { + sceneFileName: 'basket_a.gltf', + position: new Vector3(-2, 0, 0) + }, + { + sceneFileName: 'basket_b.gltf', + position: new Vector3(0, 0, 0) + }, + { + sceneFileName: 'basket_c.gltf', + position: new Vector3(2, 0, 0) + } + ] + + chests.map(async (chest) => { + const c = await SceneLoader.ImportMeshAsync( + "", + `${process.env.NEXT_PUBLIC_MODELS}/treasure/`, + chest.sceneFileName, + scene + ) + const rootNode = c.meshes[0]; + rootNode.rotate(new Vector3(0, 200, 0), 1); + rootNode.position = chest.position; + }); +} diff --git a/scenes/Models/Platforms.ts b/scenes/Models/Platforms.ts index f806b4c..b3eed25 100644 --- a/scenes/Models/Platforms.ts +++ b/scenes/Models/Platforms.ts @@ -83,7 +83,7 @@ export const Platforms = async ({ scene, canvas, mintEvent, changeStep }: Platfo }) lemonPositions.forEach((position, index) => { - position.rotate(new Vector3(0,1,0), Math.PI) // This is becouse new lemon rotated by default + position.rotate(new Vector3(0,1,0), Math.PI) // This is becouse new lemon rotated by default const plus = scene.getMeshByName(`Plus_${index + 1}`) const plusStroke = scene.getMeshByName(`Plus_${index + 1}_Stroke`) if (plus) { @@ -116,7 +116,7 @@ export const Platforms = async ({ scene, canvas, mintEvent, changeStep }: Platfo collider.actionManager = new ActionManager(scene); collider.visibility = 0; - let stroke = scene.getMeshByName(`Plus_${index + 1}_Stroke`) + let stroke = scene.getMeshByName(`Plus_${index + 1}_Stroke`) collider.actionManager.registerAction(new ExecuteCodeAction(ActionManager.OnPointerOverTrigger, async function(){ if (stroke) stroke.visibility = 1; scene.hoverCursor = "pointer"; @@ -125,7 +125,7 @@ export const Platforms = async ({ scene, canvas, mintEvent, changeStep }: Platfo if (stroke) stroke.visibility = 0; scene.hoverCursor = "default"; })); - + collider.actionManager.registerAction(new ExecuteCodeAction(ActionManager.OnPickTrigger, async function(){ let rotationAngle = 0; let platformAnimation: AnimationGroup | null = null; @@ -147,7 +147,7 @@ export const Platforms = async ({ scene, canvas, mintEvent, changeStep }: Platfo if (platformAnimation) { platformAnimation.start(false, 1); - } + } else { const position = lemonPositions[index]; if (step != 1) { @@ -176,7 +176,7 @@ export const Platforms = async ({ scene, canvas, mintEvent, changeStep }: Platfo activePlatform = index + 1; useLemonStore.setState({ activePlatform }) })); - + }); const currentPosition = { x: 0, y: 0 }; diff --git a/styles/Shop.module.css b/styles/Shop.module.css new file mode 100644 index 0000000..1e9a7ff --- /dev/null +++ b/styles/Shop.module.css @@ -0,0 +1,30 @@ +.amount { + bottom: 15px; +} + +.amount__item--1 { + flex: 1 1 30%; +} +.amount__item--2 { + flex: 1 1 40%; +} +.amount__item--3 { + flex: 1 1 30%; +} + +@media (max-width: 1400px) { + .amount { + justify-content: space-between; + } + + .amount__item--1 { + flex: 1 1 20%; + } + .amount__item--2 { + flex: 1 1 60%; + } + .amount__item--3 { + flex: 1 1 20%; + padding-left: 20px; + } +} \ No newline at end of file