twine-wonder

#Коллекционки

Коллекционки - это страницы, которые можно собирать. Число собранных страниц показывается игроку.

Собранные страницы можно просматривать в любой момент времени. Это инструмент для сбора книжек, сказок, информации о мире.

Можно собирать и концовки, и хорошие концовки, и плохие отдельно, события в квесте и вообще любые страницы.

Число коллекционок теоретически не ограничено. Каждая коллекционка добавляет кнопку на экран игры (см. ниже).

Чтобы страницу (passage в Twine) можно было добавить в коллекционку - надо в Twine для неё назначить тег. Потом этот тег использовать

Done

• добавить классы к кнопке
• doc: CSS кнопки
• doc: CSS списка
• показать страницу
• doc: CSS страницы

ToDo

• addAfter

• hideBack

• код save/load

• doc: Save/Load

• забилдить формат и передать в Twine
• сделать дизайн CSS для игры

How to add collection

С помощью метода Wonder в пользовательском скрипте можно создать коллекционку

Wonder.collect({
    // можно выбирать сразу кучу тегов
    tags: ['gameover'],
    // читабельный заголовок для пользователя
    title: 'Концовки', 
    // сохранять собранные id в коллекцию
    collection: 'gameovers'
})

Движок будет создавать кнопку с надписью ‘title’ и числом собранных/всех пассажей с тем же collection.

Кнопка коллекции

При нажатии - добавляет к body тень и список собранных узлов.

CSS для коллекций

Кнопка создается как div.c-button внутри контейнера div.c-wrapper. Дополнительно к кнопке добавляется класс с именем из параметра collection.

CSS кнопок

Класс обязательный - c-button. Класс в зависимости от коллекции - collectionName Дополнительный класс заполненной кнопки - c-button-completed

<div id="c-wrapper"><!-- button wrapper -->
    
    <div class="c-button " data-collection="gameovers">
        <div class="c-bt-title">Концовки</div>
        <div class="c-bt-content">2/24</div>
    </div>
    
    <div class="c-button " data-collection="glossary">
        <div class="c-bt-title">Глоссарий</div>
        <div class="c-bt-content">4/15</div>
    </div>
</div>

CSS списков

Списки открываются по нажатию кнопки. Под списком показывается тень. По умолчанию class c-list сдвинут за край. Когда показываем - добавляем класс c-list-show.

ItemTitle берется из h1 или первой строки собранной страницы. Контент страницы не меняется.

При нажатии на div.c-item - к body добавляется страница. После клика на тени или на крестике страницы - она закрывается (уничтожается).

<div class="c-list">
    <div class="c-list-title">Глоссарий</div>
    <div class="c-list-content">
        <div class="c-item" data-name="glossary_titan_stuff">ItemTitle1</div>
        <div class="c-item" data-name="glossary_titan_vine">ItemTitle2</div>
        <div class="c-item" data-name="glossary-wasteland-legend">ItemTitle3</div>
        <div class="c-item" data-name="glossary-zaurhas">ItemTitle4</div>
    </div>
</div>

CSS страницы

Страница открывается по нажатию на пункт в списке. Тень остается на месте, под списком. По умолчанию class c-page сдвинут за край. Когда показываем - добавляем класс c-page-show.

Дополнительно добавляется класс по имени коллекции

<div class="c-page gameovers c-page-show">
   <div class="c-page-content">
   
    </div>
</div>

Общее видение

Есть узлы с особыми тегами (glossary, gameover). Это в поле tags. Проставляется в Twine.

Неплохо бы для узлов с одним тегом выполнять особые действия:

• добавлять автоматический возврат или переход на другую локацию (стартовую для всех)
• добавлять такую локацию в список collectibles под таким тегом
• показывать игроку такие списки
• позволять игроку открывать любой элемент из такого списка

• позволить уникальное оформление

• при перезапуске восстанавливаем уже собранные из какого-нибудь сейва

Примерное API

1. DONE. Движок - кидаем tags в классы.

2. Создаем метод RunTime

   Wonder.collect({
    // можно выбирать сразу кучу тегов
    tags: ['gameover'],
    // читабельный заголовок
    title: 'Концовки', 
    // добавить в конце любой HTML.
    addAfter: '<div id="restartButton">[[Начать заново|start]]</div>', 
    // показывать автобэк
    hideBack: true,
    // сохранять собранные id в коллекцию
    collection: 'gameovers'
   })
   

3.

This site is open source. Improve this page.