mns/mns-mini-zabor
mns
/
mns-mini-zabor
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'dev' (#43) from dev into main
Deploy / build_and_push_images (push) Successful in 1m37s Details
Deploy / deploy_to_server_dev (push) Successful in 37s Details 

Reviewed-on: #43
This commit is contained in:
ksenia_mikhailova 2024-07-24 14:22:26 +03:00
parent a15aaa9a1a 47199cf48e
commit 77a4ac2baf
8 changed files with 86 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
assets/main.scss
View File

@ -12,6 +12,9 @@ html {
body { body {
@apply select-none min-w-80 font-sans; @apply select-none min-w-80 font-sans;
&.modal-opened {
@apply overflow-hidden;
}
} }
.container { .container {
@ -31,7 +34,7 @@ body {
} }
.logo { .logo {
@apply w-full py-4 col-span-4 xl:col-span-2; @apply w-full py-4 col-span-8 xl:col-span-2;
a { a {
@apply flex items-center gap-2; @apply flex items-center gap-2;
@ -42,7 +45,7 @@ body {
} }
svg { svg {
@apply text-ioprim inline-block m-0 w-10 h-10; @apply text-ioprim inline-block m-0 w-10 h-10 min-w-10;
} }
} }
@ -72,7 +75,7 @@ body {
} }
&.toggle_visible { &.toggle_visible {
@apply max-xl:flex max-xl:flex-col max-xl:text-center; @apply max-xl:flex max-xl:flex-col max-xl:text-left;
a { a {
@apply max-xl:mb-2; @apply max-xl:mb-2;
@ -86,7 +89,7 @@ body {
} }
&-toggle { &-toggle {
@apply flex xl:hidden col-span-8 justify-end; @apply flex xl:hidden col-span-4 justify-end;
>span { >span {
@apply cursor-pointer text-zinc-600 hover:text-ioprim-900 transition-colors; @apply cursor-pointer text-zinc-600 hover:text-ioprim-900 transition-colors;
@ -196,7 +199,7 @@ a[href^="#"] {
} }
&-title { &-title {
@apply col-span-full text-4xl xl:text-6xl font-black font-h1 leading-[0.85] tracking-tight mb-[3.15rem] @apply col-span-full text-4xl xl:text-6xl font-black font-h1 xl:leading-[0.85] tracking-tight mb-[3.15rem]
} }
&-image { &-image {
@ -208,15 +211,19 @@ a[href^="#"] {
@apply col-span-12 md:col-span-6 xl:col-span-4 grid grid-cols-4 items-center px-4; @apply col-span-12 md:col-span-6 xl:col-span-4 grid grid-cols-4 items-center px-4;
&-image { &-image {
@apply rounded-full size-20 bg-slate-300 overflow-hidden col-span-1; @apply max-w-full max-h-full aspect-square overflow-hidden col-span-1 pr-4;
img {
@apply rounded-full bg-slate-300
}
} }
&-content { &-content {
@apply col-span-3 text-end italic; @apply col-span-3 text-end italic text-sm lg:text-base;
} }
&-title { &-title {
@apply col-span-4 font-bold text-lg text-end mt-4; @apply col-span-4 font-bold text-lg text-end xl:mt-4 mb-4 xl:mb-0;
} }
} }
@ -228,7 +235,7 @@ a[href^="#"] {
} }
&-close { &-close {
@apply absolute right-4 top-4 text-4xl opacity-50; @apply absolute right-3 top-3 text-4xl opacity-50;
} }
&-status { &-status {
@ -243,8 +250,12 @@ a[href^="#"] {
} }
} }
&-content {
@apply max-h-[66vh] overflow-auto;
}
h2 { h2 {
@apply px-4; @apply px-6 text-2xl text-center;
} }
form { form {
@ -285,7 +296,7 @@ button {
} }
&-item { &-item {
@apply flex flex-row gap-4 items-center justify-center flex-wrap xl:flex-nowrap; @apply flex flex-row gap-4 items-center justify-start xl:justify-center flex-wrap xl:flex-nowrap;
label { label {
@apply w-full xl:w-auto; @apply w-full xl:w-auto;
@ -302,6 +313,10 @@ button {
&_checkbox { &_checkbox {
@apply w-full xl:w-auto flex-row xl:flex-initial flex-nowrap @apply w-full xl:w-auto flex-row xl:flex-initial flex-nowrap
} }
input[type=range] {
@apply min-w-[calc(100%-8rem)] xl:min-w-min;
}
} }
} }

5
components/calcModels.vue
View File

@ -23,7 +23,6 @@ const cameraStat = reactive({
}) })
const pointLight = ref() const pointLight = ref()
const pointLight2 = ref()
const loadAll = async () => { const loadAll = async () => {
const { scene: light } = await useGLTF('/models_light/zabor_so_svetom.glb') const { scene: light } = await useGLTF('/models_light/zabor_so_svetom.glb')
pointLight.value = light.children[2] pointLight.value = light.children[2]
@ -35,7 +34,7 @@ const loadAll = async () => {
pointLight.value.shadow.mapSize.x = 512 * j pointLight.value.shadow.mapSize.x = 512 * j
pointLight.value.shadow.mapSize.y = 512 * j pointLight.value.shadow.mapSize.y = 512 * j
const k = 5 const k = 3
pointLight.value.position.x = pointLight.value.position.x * k pointLight.value.position.x = pointLight.value.position.x * k
pointLight.value.position.y = pointLight.value.position.y * k pointLight.value.position.y = pointLight.value.position.y * k
pointLight.value.position.z = pointLight.value.position.z * k pointLight.value.position.z = pointLight.value.position.z * k
@ -62,7 +61,7 @@ watch([section_count, extra_section], () => {
</div> </div>
</template> </template>
<Loader /> <Loader />
<TresCanvas shadows> <TresCanvas>
<TresPerspectiveCamera v-bind="cameraStat" ref="camera" /> <TresPerspectiveCamera v-bind="cameraStat" ref="camera" />
<OrbitControls v-bind="controlsState" make-default /> <OrbitControls v-bind="controlsState" make-default />
<TresGroup :position-x="Math.min(section_count, max_size) * fence_section * -1" :position-y="-3"> <TresGroup :position-x="Math.min(section_count, max_size) * fence_section * -1" :position-y="-3">

69
components/calcValues.vue
View File

@ -15,6 +15,12 @@ const extra_section = use_extra_section()
const total_length = use_total_length() const total_length = use_total_length()
const min_length = use_min_length() const min_length = use_min_length()
if (!pillar_color.value) {
const r = Math.floor(Math.random() * predefPillarColors.length)
pillar_color.value = predefPillarColors[r] as ralTypes
lamelle_color.value = predefLamelleColors[r] as ralTypes
}
const parametric = reactive({ const parametric = reactive({
length: { length: {
min: min_length.value, min: min_length.value,
@ -43,6 +49,7 @@ const form_state = reactive({
auto_length: true, auto_length: true,
remove_pillar: false remove_pillar: false
}) })
let copy_form_state = Object.assign({}, form_state)
const form_refs = { const form_refs = {
length: ref(), length: ref(),
height: ref(), height: ref(),
@ -50,9 +57,8 @@ const form_refs = {
} }
const changeParametres = () => { const changeParametres = () => {
if (form_state.total_length * 1000 < parametric.length.min) { // console.log('form', form_state.total_length * 1000, 'copy', copy_form_state.total_length * 1000)
return
}
const lamelles = Math.floor(form_state.height / parametric.height.step) const lamelles = Math.floor(form_state.height / parametric.height.step)
for (const key in form_state) { for (const key in form_state) {
@ -67,18 +73,16 @@ const changeParametres = () => {
} }
} }
if (form_state.total_length_mm < form_state.length) {
form_state.length = form_state.total_length_mm
}
form_state.total_length_mm = form_state.total_length * 1000 form_state.total_length_mm = form_state.total_length * 1000
let { fence_length, total_length_mm, auto_length, length, full_sections } = form_state let { fence_length, total_length_mm, auto_length, length, full_sections } = form_state
length = parseFloat(length.toString()) length = parseFloat(length.toString())
if (total_length_mm < parametric.length.min) total_length_mm = parametric.length.min
if (auto_length) { if (auto_length) {
let w = parametric.length.min let w = parametric.length.min
const max_sections = Math.floor((total_length_mm - fence_length) / (parametric.length.min + fence_length)) const max_sections = Math.floor((total_length_mm - fence_length) / (parametric.length.min + fence_length))
const min_sections = Math.floor((total_length_mm - fence_length) / (parametric.length.max + fence_length)) const min_sections = Math.floor((total_length_mm - fence_length) / (parametric.length.max + fence_length)) || 1
for (let index = min_sections; index <= max_sections; index++) { for (let index = min_sections; index <= max_sections; index++) {
full_sections = index full_sections = index
@ -106,8 +110,10 @@ const changeParametres = () => {
} }
form_state.full_sections = full_sections form_state.full_sections = full_sections
form_state.length = length form_state.length = typeof length == 'string' ? parseFloat(length) : length
form_state.fence_length = fence_length form_state.fence_length = typeof fence_length == 'string' ? parseFloat(fence_length) : fence_length
copy_form_state = Object.assign({}, form_state)
total_length.value = form_state.total_length total_length.value = form_state.total_length
lamelles_count.value = lamelles lamelles_count.value = lamelles
@ -125,17 +131,12 @@ const setLamelleColor = (color: ralTypes) => {
const setPillarColor = (color: ralTypes) => { const setPillarColor = (color: ralTypes) => {
pillar_color.value = color pillar_color.value = color
} }
watch(form_state, changeParametres, { deep: true }) watch(() => form_state, changeParametres, { deep: true })
const isModalOpen = useState('modal_open', () => false) const isModalOpen = useState('modal_open', () => false)
const toggleModal = () => { const toggleModal = () => {
isModalOpen.value = !isModalOpen.value isModalOpen.value = !isModalOpen.value
} }
const plurals = {
lamelle: { one: 'ламель', few: 'ламели', many: 'ламелей' },
fence: { one: 'cтолб', few: 'столба', many: 'столбов' },
section: { one: 'секция', few: 'секции', many: 'секций' },
}
const goal = (target: string, params: object) => { const goal = (target: string, params: object) => {
const nuxtApp = useNuxtApp() const nuxtApp = useNuxtApp()
if (nuxtApp.$metrika) { if (nuxtApp.$metrika) {
@ -146,23 +147,23 @@ const goal = (target: string, params: object) => {
<template> <template>
<div class="container relative py-4"> <div class="container relative py-4">
<form class="form"> <form class="form">
<div class="col-span-12 lg:col-span-6"> <div class="col-span-12 sm:col-span-6">
<div class="form-row"> <div class="form-row">
<div class="form-item w-full"> <div class="form-item w-full">
<label for="length">Длина ламельного блока, мм</label> <label for="length">Длина ламельного блока, мм</label>
<input disabled :value="`${form_state.length} мм`" class="w-28" /> <input disabled :value.input="`${form_state.length.toFixed(0)} мм`" class="w-28" />
<input id="length" type="range" class="w-full" v-bind="parametric.length" <input id="length" type="range" class="xl:w-full" v-bind="parametric.length"
v-model="form_state.length" :disabled="form_state.auto_length" :ref="form_refs.length" /> v-model="form_state.length" :disabled="form_state.auto_length" :ref="form_refs.length" />
</div> </div>
<div class="form-item w-full"> <div class="form-item w-full">
<label for="height">Высота забора, мм</label> <label for="height">Высота забора, мм</label>
<input disabled :value="`${form_state.height} мм`" class="w-28" /> <input disabled :value="`${form_state.height} мм`" class="w-28" />
<input id="height" type="range" class="w-full" v-bind="parametric.height" <input id="height" type="range" class="xl:w-full" v-bind="parametric.height"
v-model="form_state.height" :ref="form_refs.height" /> v-model="form_state.height" :ref="form_refs.height" />
</div> </div>
</div> </div>
</div> </div>
<div class="col-span-12 lg:col-span-6"> <div class="col-span-12 sm:col-span-6">
<div class="form-row"> <div class="form-row">
<div class="form-item"> <div class="form-item">
<label for="lamelle_color">Цвет ламелей</label> <label for="lamelle_color">Цвет ламелей</label>
@ -182,17 +183,21 @@ const goal = (target: string, params: object) => {
<div class="form-row"> <div class="form-row">
<div class="form-item"> <div class="form-item">
<label for="total_length">Общая длина забора, м</label> <label for="total_length">Общая длина забора, м</label>
<input type="number" id="total_length" v-bind="parametric.total_length" <input type="number" id="total_length" v-bind="parametric.total_length" min=0
v-model="form_state.total_length" :ref="form_refs.total_length" /> v-model="form_state.total_length" :ref="form_refs.total_length" />
</div> </div>
<div class="form-item w-full lg:w-2/4"> <div class="form-item xl:w-2/4 text-sm xl:text-base">
<p v-if="form_state.total_length_mm < parametric.length.min" class="text-ioprim">
Выбранный размер забора слишком мал для расчета стоимости. Пожалуйста, выберите больший
размер, чтобы продолжить.
</p>
<p v-if="form_state.extra_section" class="text-ioprim"> <p v-if="form_state.extra_section" class="text-ioprim">
Внимание! Дополнительная секция приводит к увеличению стоимости. Внимание! Дополнительная секция приводит к увеличению стоимости.
Рекомендуем вам изменить длину забора или длину секции! Рекомендуем вам изменить длину забора или длину секции!
</p> </p>
</div> </div>
</div> </div>
<div class="form-row min-h-12"> <div class="form-row min-h-12 mt-2 xl:mt-0">
<div class="form-item form-item_checkbox"> <div class="form-item form-item_checkbox">
<input id="auto_length" type="checkbox" v-model="form_state.auto_length" /> <input id="auto_length" type="checkbox" v-model="form_state.auto_length" />
<label for="auto_length">Автоматический подбор секции</label> <label for="auto_length">Автоматический подбор секции</label>
@ -208,30 +213,30 @@ const goal = (target: string, params: object) => {
<div class="grid grid-cols-6"> <div class="grid grid-cols-6">
<div class="col-span-4 calc_table-maincell">Секции</div> <div class="col-span-4 calc_table-maincell">Секции</div>
<div class="col-span-2 calc_table-maincell">{{ section_count }}</div> <div class="col-span-2 calc_table-maincell">{{ section_count }}</div>
<div class="col-span-4"> <div class="col-span-6 sm:col-span-4">
Ламели, RAL {{ lamelle_color }}, {{ getColorNameFromRal(lamelle_color)?.toLowerCase() }} Ламели, RAL {{ lamelle_color }}, {{ getColorNameFromRal(lamelle_color)?.toLowerCase() }}
</div> </div>
<div class="col-span-1">{{ section_count * lamelles_count }}</div> <div class="col-span-3 sm:col-span-1">{{ section_count * lamelles_count }}</div>
<div class="col-span-1"> <div class="col-span-3 sm:col-span-1">
{{ `${parseFloat(form_state.length.toString()).toFixed(2)}\xa0мм` }}</div> {{ `${parseFloat(form_state.length.toString()).toFixed(2)}\xa0мм` }}</div>
<template v-if="!form_state.remove_pillar"> <template v-if="!form_state.remove_pillar">
<div class="col-span-4">Столбы, RAL {{ pillar_color }}, {{ <div class="col-span-6 sm:col-span-4">Столбы, RAL {{ pillar_color }}, {{
getColorNameFromRal(pillar_color)?.toLowerCase() }}</div> getColorNameFromRal(pillar_color)?.toLowerCase() }}</div>
<div class="col-span-1"> <div class="col-span-3 sm:col-span-1">
{{ section_count + ~~(!!form_state.extra_section) + 1 }} {{ section_count + ~~(!!form_state.extra_section) + 1 }}
</div> </div>
<div class="col-span-1"> <div class="col-span-3 sm:col-span-1">
{{ `${parseFloat(form_state.fence_length.toString()).toFixed(2)}\xa0мм` }} {{ `${parseFloat(form_state.fence_length.toString()).toFixed(2)}\xa0мм` }}
</div> </div>
</template> </template>
<template v-if="form_state.extra_section"> <template v-if="form_state.extra_section">
<div class="col-span-4 calc_table-maincell">Секции</div> <div class="col-span-4 calc_table-maincell">Секции</div>
<div class="col-span-2 calc_table-maincell">1</div> <div class="col-span-2 calc_table-maincell">1</div>
<div class="col-span-4"> <div class="col-span-6 sm:col-span-4">
Ламели, RAL {{ lamelle_color }}, {{ getColorNameFromRal(lamelle_color)?.toLowerCase() }} Ламели, RAL {{ lamelle_color }}, {{ getColorNameFromRal(lamelle_color)?.toLowerCase() }}
</div> </div>
<div class="col-span-1">{{ 1 * lamelles_count }}</div> <div class="col-span-3 sm:col-span-1">{{ 1 * lamelles_count }}</div>
<div class="col-span-1">{{ <div class="col-span-3 sm:col-span-1">{{
`${parseFloat(form_state.extra_section.toString()).toFixed(2)}\xa0мм` }}</div> `${parseFloat(form_state.extra_section.toString()).toFixed(2)}\xa0мм` }}</div>
</template> </template>
</div> </div>

2
components/expDiagram.vue
View File

@ -63,7 +63,7 @@ onMounted(() => {
Загрузка 3D модели Загрузка 3D модели
</div> </div>
</template> </template>
<TresCanvas height="600"> <TresCanvas height="600" preset="realistic">
<TresPerspectiveCamera :position="[-7, 2, 4]" ref="camera" /> <TresPerspectiveCamera :position="[-7, 2, 4]" ref="camera" />
<OrbitControls v-bind="controlsState" ref="controls" make-default /> <OrbitControls v-bind="controlsState" ref="controls" make-default />
<Suspense> <Suspense>

18
components/modal.vue
View File

@ -36,7 +36,7 @@ const modal_data = reactive<modalDataType>({
email: undefined, email: undefined,
phone: undefined, phone: undefined,
name: undefined, name: undefined,
policy: true policy: false
}) })
const modal_form = reactive({ const modal_form = reactive({
@ -75,6 +75,13 @@ const validate = () => {
} }
} }
watch(modal_data, validate) watch(modal_data, validate)
watch(isModalOpen, () => {
if (isModalOpen.value == true) {
document.body.classList.add('modal-opened')
} else {
document.body.classList.remove('modal-opened')
}
})
const submit = async (e: any) => { const submit = async (e: any) => {
goal('submit_form', modal_data) goal('submit_form', modal_data)
@ -208,7 +215,7 @@ const policy = () => {
</div> </div>
<template v-else-if="modal_state.show_form"> <template v-else-if="modal_state.show_form">
<h2>Оставьте контакты для связи </h2> <h2>Оставьте контакты для связи </h2>
<form @submit.prevent="submit" ref="form"> <form @submit.prevent="submit" ref="form" class="modal-content">
<input type="text" placeholder="Ваше имя" v-model="modal_data.name" /> <input type="text" placeholder="Ваше имя" v-model="modal_data.name" />
<input type="phone" placeholder="Ваш номер телефона" v-model="modal_data.phone" <input type="phone" placeholder="Ваш номер телефона" v-model="modal_data.phone"
@keypress="validateInput" /> @keypress="validateInput" />
@ -216,8 +223,9 @@ const policy = () => {
@keypress="validateInput" /> @keypress="validateInput" />
<div class="flex gap-4 justify-between items-center"> <div class="flex gap-4 justify-between items-center">
<input type="checkbox" id="policy" v-model="modal_data.policy" /> <input type="checkbox" id="policy" v-model="modal_data.policy" />
<label for="policy">Нажимая кнопку "Отправить" Вы также даете согласие на <NuxtLink to="policy" @click="policy">обработку персональных <label for="policy">Нажимая кнопку "Отправить" Вы также даете согласие на <NuxtLink to="policy"
данных</NuxtLink>. @click="policy">обработку персональных
данных</NuxtLink>.
</label> </label>
</div> </div>
{{ total_txt && total_txt.total[0] }} {{ total_txt && total_txt.total[0] }}
@ -229,7 +237,7 @@ const policy = () => {
</template> </template>
<template v-else> <template v-else>
<h2>данные расчета</h2> <h2>данные расчета</h2>
<div class="flex gap-4 flex-col mb-4"> <div class="flex gap-4 flex-col mb-4 modal-content">
<p>Общая длина: {{ total_length }}<br /> <p>Общая длина: {{ total_length }}<br />
Ламелей: {{ lamelles_count }}<br /> Ламелей: {{ lamelles_count }}<br />
Длина секции: {{ (fence_section * 1000).toFixed(0) }}<br /> Длина секции: {{ (fence_section * 1000).toFixed(0) }}<br />

1
components/model/fence.vue
View File

@ -53,6 +53,7 @@ const instanced_lamelle_material = props.models.lamelle.children[0].material
const instanced_lamelle_count = 24 const instanced_lamelle_count = 24
const instanced_v = [instanced_lamelle_geometry, instanced_lamelle_material, instanced_lamelle_count] const instanced_v = [instanced_lamelle_geometry, instanced_lamelle_material, instanced_lamelle_count]
watch([instanced_lamelle, fence_section, extra_section, lamelles_count, extra], () => { watch([instanced_lamelle, fence_section, extra_section, lamelles_count, extra], () => {
// console.log(props.index, instanced_v, instanced_lamelle.value)
for (let i = 0; i < instanced_lamelle_count; i++) { for (let i = 0; i < instanced_lamelle_count; i++) {
if (instanced_lamelle.value) { if (instanced_lamelle.value) {
const scale_x = (((extra.value as number) || fence_section.value) * 10) const scale_x = (((extra.value as number) || fence_section.value) * 10)

3
components/model/parametric.vue
View File

@ -15,7 +15,7 @@ const section_count = use_section_count()
const extra_section = use_extra_section() const extra_section = use_extra_section()
const max_size = use_max_size() const max_size = use_max_size()
const { scene, renderer } = useTresContext() const { scene, renderer, camera } = useTresContext()
renderer.value.toneMapping = CineonToneMapping renderer.value.toneMapping = CineonToneMapping
renderer.value.toneMappingExposure = 0.5 renderer.value.toneMappingExposure = 0.5
// renderer.value.gammaOutput = true // renderer.value.gammaOutput = true
@ -72,6 +72,7 @@ onMounted(async () => {
'hdrmaps/hdr-gainmap.webp', 'hdrmaps/hdr-gainmap.webp',
'hdrmaps/hdr.json', 'hdrmaps/hdr.json',
]) ])
renderer.value.render(scene.value, camera.value)
scene.value.environment = result.renderTarget.texture scene.value.environment = result.renderTarget.texture
scene.value.background = result.renderTarget.texture scene.value.background = result.renderTarget.texture
scene.value.background.mapping = EquirectangularReflectionMapping scene.value.background.mapping = EquirectangularReflectionMapping

7
composables/useCalc.ts
View File

@ -5,15 +5,16 @@ export const predefLamelleColors = ['3009', '9003', '6027', '5024', '9001', '101
const n = 2 const n = 2
const min = 1300 const min = 1300
export const use_lamelle_height = () => useState<number>('lamelle_height', () => 0.115) export const use_lamelle_height = () => useState<number>('lamelle_height', () => 0.115)
export const use_lamelles_count = () => useState('lamelles_count', () => 14) export const use_lamelles_count = () => useState('lamelles_count', () => 14)
export const use_fence_section = () => useState<number>('fence_section', () => min * 0.001) export const use_fence_section = () => useState<number>('fence_section', () => min * 0.001)
export const use_remove_pillar = () => useState<boolean>('remove_pillar', () => false) export const use_remove_pillar = () => useState<boolean>('remove_pillar', () => false)
export const use_pillar_color = () => useState<ralTypes>('pillar_color', () => predefPillarColors[Math.floor(Math.random() * predefPillarColors.length)] as ralTypes) export const use_pillar_color = () => useState<ralTypes>('pillar_color')
export const use_lamelle_color = () => useState<ralTypes>('lamelle_color', () => predefLamelleColors[Math.floor(Math.random() * predefLamelleColors.length)] as ralTypes) export const use_lamelle_color = () => useState<ralTypes>('lamelle_color')
export const use_section_count = () => useState('section_count', () => n) export const use_section_count = () => useState('section_count', () => n)
export const use_extra_section = () => useState('extra_section', () => 0) export const use_extra_section = () => useState('extra_section', () => 0)
export const use_total_length = () => useState('total_length', () => (((min + 104) * n) + 104) * 0.001) export const use_total_length = () => useState('total_length', () => (((min + 104) * n) + 104) * 0.001)
export const use_min_length = () => useState('min_length', () => 700) export const use_min_length = () => useState('min_length', () => 700)
export const use_max_size = () => useState<number>('max_size', () => 13) export const use_max_size = () => useState<number>('max_size', () => 20)
export const use_explosion_state = () => useState<boolean>('explosion_state', () => false) export const use_explosion_state = () => useState<boolean>('explosion_state', () => false)