Перейти к основному содержимому

qSpider v.1.0.0

Клуб любителей текстовых игр на QSP·5 янв 2024

Вышло большое обновление qSpider — 1.0.0.

Список основных изменений:​

  • добавлена полка игр
  • доступ к каталогу QSP игр прямо из плеера (к сожалению оказалось что РКН блокирует cloudflare домен и поэтому в России каталог сейчас доступен только через VPN, я занимаюсь этой проблемой)
  • локализация плеера (английский, русский и украинский язык)
  • темная и светлая тема для полки игр
  • убран верхний тулбар (доступ к загрузке/сохранению и настройкам через меню паузы открывающееся по нажатию Esc)
  • поддержка архивов с игрой не на самом верхнем уровне а в папке
  • поддержка rar архивов
  • поддержка коллекций игр в архивах (для этого в корне архива должен лежать game.cfg с списком игр)
  • количество слотов сохранения теперь можно настроить в конфиге (save_slots аттрибут)
  • плеер был переделан для поддержки тем (класический и аеро плееры это теперь тоже темы, и есть возможность создавать полностью свои темы)
  • возможность связать элементы HTML форм с qsp переменными
  • добавлен ряд кастомных HTML тегов для более простого обновления данных (без полного обновления описания например)
  • добавлена возможность вызова qsp кода по определенным событиям (клик, двойной клик, клик правой кнопкой, наведения курсора)
  • возможность вызова команд плеера по клику

Привязка элементов HTML форм к qsp переменными​

Элементы HTML форм (input, select, textarea) теперь можно связать с qsp переменной c помощью специального аттрибута qsp-bind. Связь двунаправлена — изменение переменной обновит элемент и изменения элемента (ввод текста или выбор опции) записываются в переменную.

<input type="text" qsp-bind="$username">
<input type="password" qsp-bind="$form_password">
<input type="color" value="#e66465" qsp-bind="$color">
<input type="checkbox" value="1" qsp-bind="enable">
<select qsp-bind="$car">
   <option value="mercedes">Mercedes</option>
   <option value="audi">Audi</option>
</select>

Вызов QSP кода по событию​

Добавлена возможность вызвать qsp код по определенным событиям с помощью аттрибутов начинающихся с qsp-on:

Подерживаются

  • qsp-on:click — одинарный клик
  • qsp-on:dblclick — двойной клик
  • qsp-on:contextmenu — клик правой кнопкой
  • qsp-on:mouseenter — наведение курсора
  • qsp-on:mouseleave — выход курсора за пределы элемента
<div qsp-on:click="exec: msg 'click'" qsp-on:dblclick="exec: msg 'dblclick'">Click me</div>
<div qsp-on:contextmenu="exec: menu '$context_menu'">Right Click me</div>
<div qsp-on:mouseenter="exec: pl 'enter'" qsp-on:mouseleave="exec: pl 'leave'">Hover me</div>

Вызов команд плеера​

Добавлена возможность вызова команд плеера по клику на HTML элемент с помощью аттрибута qsp-action

<button qsp-action="resume">Resume</button>

Поддерживаемые команды

  • quit — выход из игры на полку игр
  • restart — перезапуск игры
  • resume — продолжить игру (закрытие меню паузы)
  • mute — выключить звук
  • unmute — включить звук
  • quicksave — быстрое сохранение
  • quickload — быстрая загрузка
  • pause:saves — открыть меню сохранения
  • pause:preferences — открыть настройки
  • scroll:main:bottom и scroll:main:top — прокрутка окна основного описания
  • scroll:stats:bottom и scroll:stats:top — прокуртка окна доп описания

Эти команды также можно вызвать из кода подключив библиотеку qspider

inclib 'qspider'
@qspider_quit()
@qspider_restart()
@qspider_open_pause_screen('saves')
@qspider_scroll('main', 'top')

Новые HTML теги​

  • qsp-variable — вывод значения qsp переменной (обновляется автоматически), есть доступ по индексу или строковому ключу
    <qsp-variable name="money"></qsp-variable> <qsp-variable name="counts" index="5"></qsp-variable> <qsp-variable name="$items" key="knife"></qsp-variable>
  • qsp-show — возможность скрыть/показать тег по определенному условию
    <qsp-show when="should_show=1">Этот текст будет виден только когда значение should_show перменной будет равно 1</qsp-show>
  • qsp-style — динамический css из qsp переменной (аналогично $STYLESHEET переменной в аеро но не ограничено только этой переменной)
    <qsp-style from="$STYLESHEET"></qsp-style> <qsp-style from="$styles"></qsp-style>

Регионы​

qsp-region тег дает возможность обновлять только часть экрана, его можно использовать как на уровне файла теми так и в основном или дополнительном описании.

<qsp-region name="region1"></qsp-region>

Для обновления региона из кода необходимо подключить qspider библиотеку

inclib 'qspider'

Библиотека встроена в плеер и предоставляет следующие методы работы с регионами

  • qspider_update_region — полностью перезаписывает содержимое региона
  • qspider_prepend_region — добаление в начало рагиона
  • qspider_append_region — добавление в конец региона
  • qspider_scroll_region — скрол содержимого региона (как в начало так и в конец)
  • qspider_clear_region — очистка сожержимого региона
@qspider_update_region('region1', '<b>Текст</b>')
@qspider_prepend_region('region1', 'Текст<br/>')
@qspider_append_region('region1', '<br/>Текст')
@qspider_scroll_region('region1', 'top')
@qspider_scroll_region('region1', 'bottom')
@qspider_clear_region('region1')

Слои​

qsp-layer тег дает возможность быстро показывать или скрывать большой кусок отображения
Слои рисуются один поверх другого позволяя делать наложения интерфейса или например модальные элемент. Порядок слоев определяется через аттрибут index. По умолчанию все слои скрыты.

<qsp-layer name="layer1" index="10">Some UI</qsp-layer>

Для управления слоями необходимо подключить qspider библиотеку

inclib 'qspider'

Библиотека встроена в плеер и предоставляет следующие методы работы с регионами

  • qspider_show_layer — включает отображение слоя
  • qspider_show_only_layer — включает отображение слоя пряча все остальные слои
  • qspider_hide_layer — прячет слой
@qspider_show_layer('layer1')
@qspider_show_only_layer('layer1')
@qspider_hide_layer('layer1')

Кастомные темы​

Плеер был переработан для поддержки кастомных тем (классический и аеро варианты теперь тоже отдельные темы). Тема представляет собой HTML код, где для каждого элемента плеера используется свой HTML тег.
Примеры встроенных тем — классическая и аеро.
В игре можно подключать дополнительные теми и определять дефолтную через файл конфига

[[game]]
id = "test-asset-qspider"
title = "Test qspider functionality"
file="qspider.qsps"
themes = ["custom-theme.html"]
defaultTheme = "custom-theme"

Тему можно переключать подключив qspider библиотеку

inclib 'qspider'
@qspider_change_theme('custom-theme')

Более подробное описание тем будет позже.

Оригинал статьи: https://ifhub.club/2024/01/03/qspider-100.html

Автор статьи: Werewolf