- return <div className="items">
- <div className="item">
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['bow', 'silvers']} />
- </div>
- <div className="item">
- <ToggleIcon
- className="left"
- controller={ToggleIcon.simpleController}
- icons={['blue-boomerang']}
- />
- <ToggleIcon
- className="right"
- controller={ToggleIcon.simpleController}
- icons={['red-boomerang']}
- />
- </div>
- <div className="item">
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['hookshot']} />
- </div>
- <div className="item">
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['bomb']} />
- </div>
- <div className="item">
- <ToggleIcon
- className="bottom-left"
- controller={ToggleIcon.simpleController}
- icons={['mushroom']}
- />
- <ToggleIcon
- className="top-right"
- controller={ToggleIcon.simpleController}
- icons={['powder']}
- />
- </div>
- <div className="item">
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['fire-rod']} />
- </div>
- <div className="item">
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['ice-rod']} />
- </div>
- <div className="item">
- <ToggleIcon controller={ToggleIcon.medallionController} icons={['bombos']} />
- </div>
- <div className="item">
- <ToggleIcon controller={ToggleIcon.medallionController} icons={['ether']} />
- </div>
- <div className="item">
- <ToggleIcon controller={ToggleIcon.medallionController} icons={['quake']} />
- </div>
- <div className="item">
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['lamp']} />
- </div>
- <div className="item">
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['hammer']} />
- </div>
- <div className="item">
- <ToggleIcon
- className="bottom-left"
- controller={ToggleIcon.simpleController}
- icons={['shovel']}
- />
- <ToggleIcon
- className="top-right"
- controller={ToggleIcon.simpleController}
- icons={['flute', 'duck']}
- />
- </div>
- <div className="item">
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['bugnet']} />
- </div>
- <div className="item">
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['book']} />
- </div>
- <div className="item">
- <ToggleIcon controller={ToggleIcon.countController(4)} icons={['bottle']} />
- <CountDisplay className="bottom-right" count={state.bottle || 0} />
- </div>
- <div className="item">
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['somaria']} />
- </div>
- <div className="item">
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['byrna']} />
- </div>
- <div className="item">
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['cape']} />
- </div>
- <div className="item">
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['mirror']} />
- </div>
- </div>;
+ return <>
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['bow', 'silvers']}
+ svg
+ transform={transform(0.5, 0.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['blue-boomerang']}
+ svg
+ transform={transform(1.35, 0.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['red-boomerang']}
+ svg
+ transform={transform(1.85, 0.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['hookshot']}
+ svg
+ transform={transform(2.5, 0.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['bomb']}
+ svg
+ transform={transform(3.5, 0.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['powder']}
+ svg
+ transform={transform(4.5, 0.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['fire-rod']}
+ svg
+ transform={transform(0.5, 1.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['ice-rod']}
+ svg
+ transform={transform(1.5, 1.5)}
+ />
+ <g transform={transform(2.5, 1.5)}>
+ <ToggleIcon controller={ToggleIcon.medallionController} icons={['bombos']} svg />
+ {state['mm-medallion'] === 'bombos' ?
+ <text className="med-display bottom-left">MM</text>
+ : null}
+ {state['tr-medallion'] === 'bombos' ?
+ <text className="med-display bottom-right">TR</text>
+ : null}
+ </g>
+ <g transform={transform(3.5, 1.5)}>
+ <ToggleIcon controller={ToggleIcon.medallionController} icons={['ether']} svg />
+ {state['mm-medallion'] === 'ether' ?
+ <text className="med-display bottom-left">MM</text>
+ : null}
+ {state['tr-medallion'] === 'ether' ?
+ <text className="med-display bottom-right">TR</text>
+ : null}
+ </g>
+ <g transform={transform(4.5, 1.5)}>
+ <ToggleIcon controller={ToggleIcon.medallionController} icons={['quake']} svg />
+ {state['mm-medallion'] === 'quake' ?
+ <text className="med-display bottom-left">MM</text>
+ : null}
+ {state['tr-medallion'] === 'quake' ?
+ <text className="med-display bottom-right">TR</text>
+ : null}
+ </g>
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['lamp']}
+ svg
+ transform={transform(0.5, 2.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['hammer']}
+ svg
+ transform={transform(1.5, 2.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['flute']}
+ svg
+ transform={transform(2.5, 2.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['duck']}
+ svg
+ transform={transform(2.75, 2.75, 0.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['bugnet']}
+ svg
+ transform={transform(3.5, 2.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['book']}
+ svg
+ transform={transform(4.5, 2.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['shovel']}
+ svg
+ transform={transform(0.5, 3.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['somaria']}
+ svg
+ transform={transform(1.5, 3.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['byrna']}
+ svg
+ transform={transform(2.5, 3.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['cape']}
+ svg
+ transform={transform(3.5, 3.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['mirror']}
+ svg
+ transform={transform(4.5, 3.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.bottleController('bottle-1')}
+ icons={BOTTLE_CONTENTS}
+ svg
+ transform={transform(0.5, 5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.bottleController('bottle-2')}
+ icons={BOTTLE_CONTENTS}
+ svg
+ transform={transform(1.5, 5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.bottleController('bottle-3')}
+ icons={BOTTLE_CONTENTS}
+ svg
+ transform={transform(2.5, 5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.bottleController('bottle-4')}
+ icons={BOTTLE_CONTENTS}
+ svg
+ transform={transform(3.5, 5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['mushroom']}
+ svg
+ transform={transform(4.5, 5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['boots']}
+ svg
+ transform={transform(0.5, 6.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.progressiveController('lift', 0, 2)}
+ icons={['glove', 'mitts']}
+ svg
+ transform={transform(1.5, 6.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['flippers']}
+ svg
+ transform={transform(2.5, 6.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['moonpearl']}
+ svg
+ transform={transform(3.5, 6.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['half-magic', 'quarter-magic']}
+ svg
+ transform={transform(4.5, 6.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.progressiveController('sword', 0, 4)}
+ icons={['sword-1', 'sword-2', 'sword-3', 'sword-4']}
+ svg
+ transform={transform(0.5, 7.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.progressiveController('shield', 0, 3)}
+ icons={['fighter-shield', 'fire-shield', 'mirror-shield']}
+ svg
+ transform={transform(1.5, 7.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.progressiveController('mail', 1, 3)}
+ icons={['green-mail', 'blue-mail', 'red-mail']}
+ svg
+ transform={transform(2.5, 7.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.modulusController('heart-piece')}
+ icons={['heart-0', 'heart-1', 'heart-2', 'heart-3']}
+ svg
+ transform={transform(3.5, 7.5)}
+ />
+ </>;