Список игр

game/engine.coffee

@@ -36,3 +36,28 @@ $(document).on("room_enter", (event, data) ->
   if salet.interactive and _paq?
     _paq.push(['trackPageView', data.to])
 )
+
+card = (img, caption, alt) ->
+  alt ?= caption
+  return """
+    <div class="card">
+      <img class="card-img-top" src="img/#{img}" alt='#{alt}'>
+      <div class="card-body">
+        <p class="card-text">#{caption}</p>
+      </div>
+    </div>
+  """
+
+cardlink = (img, caption, link, alt) ->
+  alt ?= caption
+  return """
+    <div class="card">
+      <a class="sticky" target="_blank" href="#{link}"><img class="card-img-top" src="img/#{img}" alt='#{alt}'></a>
+      <div class="card-body">
+        <p class="card-text"><a class="sticky" target="_blank" href="#{link}">#{caption}</a></p>
+      </div>
+    </div>
+  """
+
+textlink = (content, ref) ->
+  return "<a href='./_writer_#{ref}' class='once'>#{content}</a>"

game/story.coffee

@@ -1,17 +1,18 @@
-###
+
-# This is the story code.
+
-###
 croom "start",
   dsc: """
-    Это - текстовая игра. (Что значит: это — игра, которая состоит исключительно из текста.)
+    Что такое текстовые игры? Ну, например, вот это и есть текстовая игра:
+    в ней же есть только текст.
 
-    Для начала придётся определиться с терминами.
+    А вот чтобы объяснить, что такое *сообщество* текстовых игр, нужно для начала
+    определиться с терминами.
   """
   choices: "#faq"
 
 croom "whatis",
   title: "Что такое Интерактивная Литература?"
-  dsc: """
+  dsc: () -> """
     ## Что такое интерактивная литература?
      
     <abbr title="англ. Interactive fiction">*«Интерактивная литература»*</abbr> - это термин, придуманный в
@@ -22,15 +23,21 @@ croom "whatis",
     все её нетекстовые элементы (графика, анимация, звук) можно выбросить или заменить на текст, не
     оставив игру непроходимой. Иначе это просто игра **с элементами** ИЛ.
 
-    <div class="card">
+    #{card(
-      <img class="card-img-top" src="img/sunless_sea.jpg" alt="Скриншот битвы в Sunless Sea">
+      'sunless_sea.jpg',
-      <div class="card-body">
+      'Игра Sunless Sea - не является интерактивной литературой, но содержит много элементов ИЛ.',
-        <p class="card-text">Игра Sunless Sea - не является интерактивной литературой, но содержит много элементов ИЛ.</p>
+      'Скриншот битвы в Sunless Sea'
-      </div>
+    )}
-    </div>
+    
+    Также очень близко к играм ИЛ лежат визуальные новеллы: текстовые
+    нелинейные истории, проиллюстрированные в каждой сцене.
 
     Если вы хотите подробнее прочитать про этот термин, то мы подготовили хорошую статью
     [на русской IFWiki](http://ifwiki.ru/Интерактивная_литература) — т.е. на вики интерактивной литературы.
+
+    Кроме IFWiki, в кольцо сайтов сообщества ИЛ также входят
+    [ifiction.ru](http://ifiction.ru)
+    и [IFHub.](https://ifhub.club)
   """
   tags: ["faq"]
   choices: "#faq"
@@ -43,10 +50,99 @@ croom "gamebooks",
     Это книги, в которые можно играть.
     Вот эта самая игра тоже может стать книгой, если её распечатать и «прыгать» при чтении между параграфами.
 
-    Книги-игры в России редки в бумажном виде: крупные издательства редко связываются с необычным форматом,
+    Книги-игры в буквальном смысле тоже являются интерактивной литературой,
-    а независимые издатели работают по единичным онлайн-заказам, а не на федеральный рынок.
+    но они слишком *отличаются* от компьютерных квестов, поэтому их часто
+    выделяют.
 
-    Подробнее о книгах-играх может рассказать специализированный портал «Квестбук».
+    Подробнее о книгах-играх может рассказать специализированный портал
+    [«Книги-игры и интерактивные рассказы».](http://quest-book.ru/)
   """
   tags: ["faq"]
   choices: "#faq"
+ 
+croom "muds",
+  title: "Что такое MUD'ы?"
+  dsc: """
+    ## Что такое MUD'ы?
+    
+    <abbr title="англ. Multi-User Dungeon">МПМ, </abbr>МногоПользовательский Мир - это как текстовая MMO.
+    Это текстовая онлайн-игра, виртуальный мир в реальном времени,
+    часто без ограничения на количество пользователей.
+
+    Игроки могут читать описания различных мест, объектов, других игроков, компьютерных персонажей и событий, происходящих в виртуальном мире. Игроки взаимодействуют друг с другом и миром с помощью текстовых команд, близких к обычному языку, на котором мы ежедневно общаемся в реальной жизни. 
+
+    Большинство мадов запущены любителями и бесплатны для игроков.
+    Считается, что современные игры типа "World of Warcraft" и социальные виртуальные миры, такие как "Second Life" произошли от первых мадов.
+
+    Интересующимся советуем почитать [список русскоязычных онлайн-миров](http://www.mudconnector.su/MudList)
+    и специализированный портал [muder.ru](http://muder.ru/)
+  """
+  tags: ["faq"]
+  choices: "#faq"
+
+croom "platforms",
+  tags: ["faq"]
+  choices: "#step2"
+  canView: () ->
+    return (
+      @isVisited("gamebooks") and
+      @isVisited("whatis") and
+      @isVisited("muds")
+    )
+  title: "Платформы Интерактивной Литературы"
+  dsc: """
+    # Платформы Интерактивной Литературы
+    
+    Текстовые игры (кроме книг-игр) - это компьютерные программы.
+    Программы [невыгодно делать с нуля,](http://ifwiki.ru/FAQ:Возможно_ли_сделать_игру_на_собственном_движке)
+    гораздо проще начать на какой-то базе, движке, **платформе.**
+    К тому же, большинство авторов работают в одиночку, без команды.
+
+    Платформа - это специальная среда для написания игр.
+    В ней уже есть какие-то особые удобства для авторов, например,
+    платформы для непрограммистов стараются оставить от игры только текст,
+    скрывая все настройки оформления и геймплея где-нибудь поглубже.
+    
+    #{card(
+      'axma.png',
+      'Скриншот редактора платформы <a href="http://hyperbook.ru/editor/">AXMA Story Maker 5.</a>',
+      'Скриншот окна AXMA Story Maker 5'
+    )}
+
+    Платформы очень условно делятся на "парсерные" и "менюшные", по типу
+    геймплея игр. В менюшных выбор действий идёт через меню (как в этой игре),
+    а парсерные дают строку для ввода команд (так изначально выглядели квесты до 1990х).
+
+    Актуальный список платформ с подробными описаниями
+    [поддерживается на IFWiki.](http://ifwiki.ru/Категория:Платформы)
+  """
+
+croom "quests",
+  dsc: () -> """
+    ## Во что поиграть?
+    
+    Лучше показать, чем рассказать.
+    Вот, например, несколько качественных бесплатных онлайн-игр на русском языке:
+
+    ### Попроще
+    <div class="gamelist">
+      #{cardlink('dragons.png', 'Драконы и принцессы (Morych)', 'http://hyperbook.ru/file13529254137424', 'Драконы и принцессы')}
+    </div>
+
+    <p></p>
+
+    ### Посложнее
+
+    <div class="gamelist">
+      #{cardlink('vespers.jpg', 'Вечерня (Джейсон Девлин, перевод Ugo)', 'http://rinform.stormway.ru/games/vespers/vespers.html', 'Вечерня')}
+      #{cardlink('heart.png', 'Сердце льда (Дейв Моррис, перевод Kadena, Ageres, Fermalion, Jumangee, Vo1t, Johny Lee, Goraph и другие)', 'https://quest-book.ru/echarsheet/online/RU/heartofice/', 'Сердце льда')}
+      #{cardlink('quarantine.png', 'Карантин (gl00my)', 'http://instead-games.ru/instead-js/#zip:/games/instead-quarantine-0.3.7.zip', 'Карантин')}
+    </div>
+    
+    Надеюсь, вам у нас понравится.
+
+    -- *Oreolek, 2017*
+  """
+  title: "Во что поиграть?"
+  tags: ["step2"]
+  choices: "#step2"

html/index.html

@@ -2,7 +2,7 @@
 <html lang="ru">
   <head>
     <meta charset="utf-8">
-    <title>Паровозик (чух-чух)</title>
+    <title>Кто мы и куда вы попали</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href='https://fonts.googleapis.com/css?family=PT+Sans:400,400italic|PT+Sans+Caption' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="css/main.css">

sass/main.scss

@@ -141,3 +141,21 @@ button.center {
     @include make-col(12);
   }
 }
+.gamelist {
+  @include make-row();
+  .card {
+    img {
+      padding: 1em;
+    }
+    @include media-breakpoint-down(sm) {
+      @include make-col(12);
+    }
+    @include media-breakpoint-up(sm) {
+      @include make-col(6);
+    }
+    @include media-breakpoint-up(md) {
+      @include make-col(4);
+    }
+    margin: auto;
+  }
+}