speakid-hangman

Hangman Game - Interactive word guessing game for SPEAKID platform

Установка

npm install speakid-hangman

Использование

Базовое использование

import HangmanLobbyGame from 'speakid-hangman';

function GamePage() {
  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <HangmanLobbyGame />
    </div>
  );
}

Использование с baseURL (для SPEAKID)

import HangmanLobbyGame from 'speakid-hangman';

function GamePage() {
  // Используем window.origin для автоматического определения окружения (тест/прод)
  const baseURL = window.origin + "/cloud/speakid/games/hangman";
  
  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <HangmanLobbyGame baseURL={baseURL} />
    </div>
  );
}

Примечание:

• Изображения должны быть загружены в облако по пути: speakid/games/hangman/
• Необходимые файлы: logo.svg (или logo.png), sun.png, character.png
• Использование window.origin обеспечивает работу на тесте и проде автоматически
• Логотип позиционируется: position: absolute, top: 16px, left: 16px, zIndex: 30
• Логотип рендерится вне условных блоков и отображается на всех экранах игры

Дополнительные опции

import HangmanLobbyGame from 'speakid-hangman';

// С кастомным логотипом (полный URL)
<HangmanLobbyGame 
  logoUrl={window.origin + "/cloud/speakid/games/hangman/logo.svg"} 
  baseURL={window.origin + "/cloud/speakid/games/hangman"}
/>

// Без логотипа
<HangmanLobbyGame showLogo={false} />

// С кастомными размерами контейнера
<HangmanLobbyGame 
  gameCubeSize={800}
  screenWidth={1920}
  screenHeight={1080}
  baseURL={window.origin + "/cloud/speakid/games/hangman"}
/>

Props

HangmanLobbyGameProps

| Prop | Type | Default | Description | |------|------|---------|-------------| | gameCubeSize | number | 400 | Размер игрового контейнера в пикселях | | screenHeight | number | 800 | Высота экрана для адаптивности | | screenWidth | number | 800 | Ширина экрана для адаптивности | | logoUrl | string | undefined | Полный URL логотипа. Если не указан, используется window.origin + "/cloud/speakid/games/hangman/logo" | | showLogo | boolean | true | Показывать ли логотип (на desktop и планшетах) | | baseURL | string | undefined | Базовый URL для загрузки изображений. Если не указан, используется window.origin + "/cloud/speakid/games/hangman" |

Требования

• React >= 18.2.0
• React DOM >= 18.2.0
• Webpack (CRA совместимый)

Особенности

• Адаптивный дизайн: Автоматически адаптируется под мобильные устройства, планшеты и десктопы
• Изоляция стилей: Использует inline стили через CSSProperties, не конфликтует с внешними стилями
• Независимость: Компонент полностью самодостаточен, не требует внешних CSS файлов
• Типизация: Полная поддержка TypeScript с экспортом типов

Структура игры

Игра включает следующие экраны:

1. Lobby - начальный экран с кнопкой PLAY
2. Category - выбор категории слов
3. Rounds - выбор количества раундов (1, 3, 5)
4. Game - игровой процесс с виселицей
5. Result - экран результатов с возможностью сыграть снова

Категории слов

Игра включает 20+ категорий:

• Professions
• Family
• Farm animals
• Food
• Hobbies
• Christmas
• Halloween
• Sport
• Body parts
• School subjects
• Animals
• Countries
• Clothes
• Traveling
• Environment
• Space
• Devices
• И другие...

Лицензия

MIT