Skip to content

Commit

Permalink
#35 Done
Browse files Browse the repository at this point in the history
  • Loading branch information
Dominux committed Jan 21, 2023
1 parent 2f2fb6c commit 1d34e78
Show file tree
Hide file tree
Showing 11 changed files with 1,157 additions and 691 deletions.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
1,566 changes: 905 additions & 661 deletions frontend/src/assets/gridMaterial.json

Large diffs are not rendered by default.

108 changes: 103 additions & 5 deletions frontend/src/constants.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
export const ENV_TEXTURE =
'https://raw.githubusercontent.com/Dominux/spherical-go/main/frontend/src/assets/environments/rainforest_trail/8k.env'
export const GRID_MATERIAL =
'https://raw.githubusercontent.com/Dominux/spherical-go/main/frontend/src/assets/gridMaterial.json'

export const MIN_GRIDSIZE = 5
export const MAX_GRIDSIZE = 255
export const INPUTFIELD_LENGTH_IN_SYMBOLS = 12
Expand All @@ -27,3 +22,106 @@ export const WS_API = import.meta.env.DEV
export const BASENAME = ''

export const MOVE_RESULT_CHECK_INTERVAL_MS = 200

export type EnvTexture = {
url: string
res: number
}

export const defaultEnvTextures = {
'Rainforest trail': {
'1K': {
url: 'https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/1k/rainforest_trail_1k.hdr',
res: 512,
},
'2K': {
url: 'https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/2k/rainforest_trail_2k.hdr',
res: 1024,
},
'4K': {
url: 'https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/4k/rainforest_trail_4k.hdr',
res: 2048,
},
'8K': {
url: 'https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/8k/rainforest_trail_8k.hdr',
res: 4096,
},
},
'Kiara Dawn': {
'1K': {
url: 'https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/1k/kiara_1_dawn_1k.hdr',
res: 512,
},
'2K': {
url: 'https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/2k/kiara_1_dawn_2k.hdr',
res: 1024,
},
'4K': {
url: 'https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/4k/kiara_1_dawn_4k.hdr',
res: 2048,
},
'8K': {
url: 'https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/8k/kiara_1_dawn_8k.hdr',
res: 4096,
},
},
'Chinese garden': {
'1K': {
url: 'https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/1k/chinese_garden_1k.hdr',
res: 512,
},
'2K': {
url: 'https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/2k/chinese_garden_2k.hdr',
res: 1024,
},
'4K': {
url: 'https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/4k/chinese_garden_4k.hdr',
res: 2048,
},
'8K': {
url: 'https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/8k/chinese_garden_8k.hdr',
res: 4096,
},
},
'Misty pines': {
'1K': {
url: 'https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/1k/misty_pines_1k.hdr',
res: 512,
},
'2K': {
url: 'https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/2k/misty_pines_2k.hdr',
res: 1024,
},
'4K': {
url: 'https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/4k/misty_pines_4k.hdr',
res: 2048,
},
'8K': {
url: 'https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/8k/misty_pines_8k.hdr',
res: 4096,
},
'Phalzer forest': {
'1K': {
url: 'https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/1k/phalzer_forest_01_1k.hdr',
res: 512,
},
'2K': {
url: 'https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/2k/phalzer_forest_01_2k.hdr',
res: 1024,
},
'4K': {
url: 'https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/4k/phalzer_forest_01_4k.hdr',
res: 2048,
},
'8K': {
url: 'https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/8k/phalzer_forest_01_8k.hdr',
res: 4096,
},
},
},
}
export const defaultTextureName = Object.keys(defaultEnvTextures)[0]
export const defaultResolution = '1K'

export const GRID_MATERIAL =
'https://raw.githubusercontent.com/Dominux/spherical-go/main/frontend/src/assets/gridMaterial.json'
5 changes: 5 additions & 0 deletions frontend/src/logic/game_manager.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import createLocalStore from '../../libs'
import { EnvTexture } from '../constants'
import GameGUI from '../gui'
import FieldType, { getFieldFromType } from './fields/enum'
import { Field } from './fields/interface'
Expand Down Expand Up @@ -136,6 +137,10 @@ export default class GameManager {
this.isMultiplayer || this.field?.game?.moveNumber <= 1
}

setEnvTexture(envTexture: EnvTexture) {
this._scene.setEnv(envTexture)
}

setBlackScore(value: number) {
this._GUI.setBlackScore(value)
}
Expand Down
37 changes: 13 additions & 24 deletions frontend/src/logic/scene.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
import * as BABYLON from 'babylonjs'

import { ENV_TEXTURE } from '../constants'
import {
defaultEnvTextures,
defaultResolution,
defaultTextureName,
EnvTexture,
} from '../constants'

export default class Scene {
readonly _scene: BABYLON.Scene
Expand All @@ -18,11 +22,10 @@ export default class Scene {
height: 30,
width: 30,
})
// this._ground.material = new BABYLON.PBRMetallicRoughnessMaterial('ground')
this._ground.setEnabled(false)

// Loading environment
this.loadEnv()
this.setEnv(defaultEnvTextures[defaultTextureName][defaultResolution])

this._camera = new BABYLON.ArcRotateCamera(
'camera',
Expand All @@ -49,29 +52,15 @@ export default class Scene {
})
}

protected loadEnv() {
public setEnv(envTexture: EnvTexture) {
setTimeout(() => {
const envTexture = BABYLON.CubeTexture.CreateFromPrefilteredData(
ENV_TEXTURE,
this._scene
const hdrTexture = new BABYLON.HDRCubeTexture(
envTexture.url,
this._scene,
envTexture.res
)
envTexture.name = 'envTexture'
envTexture.gammaSpace = false

this._scene.environmentTexture = envTexture

const hdrSkybox = BABYLON.Mesh.CreateBox('hdrSkyBox', 1000.0, this._scene)
const hdrSkyboxMaterial = new BABYLON.PBRMaterial('skyBox', this._scene)
hdrSkyboxMaterial.backFaceCulling = false
hdrSkyboxMaterial.reflectionTexture = envTexture.clone()
hdrSkyboxMaterial.reflectionTexture.coordinatesMode =
BABYLON.Texture.SKYBOX_MODE
hdrSkyboxMaterial.microSurface = 1.0
hdrSkyboxMaterial.cameraExposure = 0.8
hdrSkyboxMaterial.cameraContrast = 1.5
hdrSkyboxMaterial.disableLighting = true
hdrSkybox.material = hdrSkyboxMaterial
hdrSkybox.infiniteDistance = true
this._scene.createDefaultSkybox(hdrTexture)
}, 0)
}

Expand Down
4 changes: 3 additions & 1 deletion frontend/src/logic/stone_manager.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default class StoneManager {

constructor(readonly scene: BABYLON.Scene, gridSize: number, k: number) {
this.height = (0.2 * this.stoneSize * k) / gridSize
this.multiplier = 1 + this.height / 2 - this.height * 0.025
this.multiplier = 1 + this.height * 0.95
}

create(stoneSchema: CreateStoneScheme) {
Expand All @@ -44,6 +44,8 @@ export default class StoneManager {
// Creating stone's material
const material = new BABYLON.PBRMetallicRoughnessMaterial('stone')
material._albedoColor = stoneSchema.color
material.roughness = 0.9
material.metallic = 0.15
stone.material = material

// Setting stone's rotation
Expand Down
3 changes: 3 additions & 0 deletions frontend/src/pages/Game.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import SingleplayerGame from '../logic/games/singleplayer_game'
import createLocalStore from '../../libs'
import api from '../api'
import { fullLocation } from '../router'
import { Settings } from './Settings'

const GamePage: Component = () => {
const [gameManager, setGameManager] = createSignal<GameManager | undefined>()
Expand Down Expand Up @@ -96,6 +97,8 @@ const GamePage: Component = () => {
{/* Game Canvas */}
<canvas ref={canvas} class={styles.canvas}></canvas>

<Settings gm={gameManager()} />

<Show when={isRoot()}>
<ModeChooser modes={modes} />
</Show>
Expand Down
125 changes: 125 additions & 0 deletions frontend/src/pages/Settings.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
import {
GMobiledata,
Settings as SettingsIcon,
Warning,
} from '@suid/icons-material'
import {
Button,
Card,
CardActions,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
IconButton,
NativeSelect,
Stack,
} from '@suid/material'
import { createSignal, For } from 'solid-js'

import {
defaultEnvTextures,
defaultResolution,
defaultTextureName,
} from '../constants'
import GameManager from '../logic/game_manager'

export type SettingsProps = {
gm: GameManager
}

export function Settings(props: SettingsProps) {
const [isOpened, setIsOpened] = createSignal(false)
const [textureName, setTextureName] = createSignal(defaultTextureName)
const [resolution, setResolution] = createSignal(defaultResolution)

function updateTextureName(e: any) {
const newVal = e.target.value
setTextureName(newVal)

updateTexture()
}
function updateResolution(e: any) {
const newVal = e.target.value
setResolution(newVal)

updateTexture()
}

function updateTexture() {
const envTexture = defaultEnvTextures[textureName()][resolution()]

props.gm.setEnvTexture(envTexture)
}

return (
<>
<Card
sx={{
position: 'absolute',
top: '1.5%',
right: '1.5%',
zIndex: 2,
width: 'fit-content',
borderRadius: '33%',
}}
>
<CardActions sx={{ padding: 0 }}>
<IconButton color="primary" onClick={() => setIsOpened(true)}>
<SettingsIcon fontSize="large" />
</IconButton>
</CardActions>
</Card>

<Dialog
maxWidth="xs"
open={isOpened()}
onClose={() => setIsOpened(false)}
>
<DialogTitle>Settings</DialogTitle>

<DialogContentText
sx={{ padding: '0 1rem', display: 'flex', alignItems: 'center' }}
>
<Warning
color="warning"
fontSize="large"
sx={{ marginRight: '0.5rem' }}
/>
<div>
Higher resolution requires downloading heavy &nbsp;
<a href="https://polyhaven.com/hdris">HDR textures</a> &nbsp;(~
10-500 MB) and more processing power from your machine
</div>
</DialogContentText>

<DialogContent>
<Stack direction={'row'} justifyContent={'space-evenly'}>
<div>
<div>Texture</div>
<NativeSelect onChange={updateTextureName}>
<For each={Object.keys(defaultEnvTextures)}>
{(name) => <option>{name}</option>}
</For>
</NativeSelect>
</div>

<div>
<div>Resolution</div>
<NativeSelect onChange={updateResolution}>
<For each={Object.keys(defaultEnvTextures[defaultTextureName])}>
{(res) => <option>{res}</option>}
</For>
</NativeSelect>
</div>
</Stack>
</DialogContent>

<DialogActions>
<Button onClick={() => setIsOpened(false)}>Close</Button>
</DialogActions>
</Dialog>
</>
)
}

0 comments on commit 1d34e78

Please sign in to comment.