Drunk Mode Puzzles

This library contains the core logic needed to create custom puzzles for the Drunk Mode app that can be submitted to the Drunk Mode app for use in the app.

Table of Contents

• Install
• TL;DR Quick Start
• Low-Level Usage
• Package Your Puzzle

Install

npm install drunkmode-puzzles

or

yarn add drunkmode-puzzles

TL;DR Quick Start

git clone [email protected]:noodleofdeath/drunkmode-puzzles.git
cd drunkmode-puzzles
yarn imdrunk <YourPuzzle> <com.yourcompany.yourproduct.YourPuzzle>
cd examples/YourPuzzle
yarn
yarn dev

Only edit the file Puzzle.tsx in the src directory, unless you know what you are doing. Also, be sure to update your puzzle.json file with your information.

When you are ready to submit, you can simply run:

yarn export

The copy the zip file in the out directory, and submit it to the Drunk Mode app.

Low-Level Usage

First create a web app that imports the PuzzleMessage class from the drunkmode-puzzles package. Your puzzle does not need to be a React component, but it can be if you want to use React. The only requirement is that you call PuzzleMessage.onSuccess and PuzzleMessage.onFailure when the user completes or fails the puzzle.

import React from 'react';

import { PuzzleEnv, PuzzleMessage } from 'drunkmode-puzzles';

const MyPuzzle = () => {
  
  const [env, setEnv] = React.useState<PuzzleEnv>();
  
  // load configs
  React.useEffect(() => {
    setEnv(new PuzzleEnv());
  }, []);
  
  return (
    <div>
      {env?.preview && (
        <div>
          Choose a difficulty
          <button onClick={ () => {
            PuzzleMessage.onConfig({
              ...env?.config,
              difficulty: 'easy',
            });
          } }>
            Easy Mode
          </button>
          <button onClick={ {
            () => PuzzleMessage.onConfig({
              ...env?.config,
              difficulty: 'hard',
            });
          } }>
            Hard Mode
          </button>
        </div>
      )}
      <button onClick={() => PuzzleMessage.onSuccess({ message: 'You solved the puzzle!' })}>
        Solve Puzzle
      </button>
      <button onClick={() => PuzzleMessage.onFailure({ message: 'You failed the puzzle!' })}>
        Fail Puzzle
      </button>
    </div>
  );
};

export default MyPuzzle;

Package Your Puzzle

Once you have created your puzzle, you can package it up and submit it to the Drunk Mode app.

First build your puzzle which should be an index.html file. Create a directory that contains your index.html file and any other root level files or directories. Create a puzzle.json file in the same directory with the following format:

{
  "name": "com.company.product.MyPuzzle",
  "author": "My Name",
  "icon": "puzzle", // icon name from https://material.io/resources/icons/
  "displayName": "My Puzzle",
  "description": "This is a description of my puzzle.",
  "version": "1.0.0",
}

Finally, zip the directory and submit it to the Drunk Mode app.