+ return <svg
+ xmlns="http://www.w3.org/2000/svg"
+ className="items"
+ width="5"
+ height="8"
+ viewBox="0 0 5 8"
+ onContextMenu={(e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ }}
+ >
+ <g transform={transform(0.5, 0.5)}>
+ <ToggleIcon controller={ToggleIcon.simpleController} icons={['bow', 'silvers']} svg />
+ </g>
+ <g transform={transform(1.35, 0.5)}>
+ <ToggleIcon controller={ToggleIcon.simpleController} icons={['blue-boomerang']} svg />
+ </g>
+ <g transform={transform(1.85, 0.5)}>
+ <ToggleIcon controller={ToggleIcon.simpleController} icons={['red-boomerang']} svg />
+ </g>
+ <g transform={transform(2.5, 0.5)}>
+ <ToggleIcon controller={ToggleIcon.simpleController} icons={['hookshot']} svg />
+ </g>
+ <g transform={transform(3.5, 0.5)}>
+ <ToggleIcon controller={ToggleIcon.simpleController} icons={['bomb']} svg />
+ </g>
+ <g transform={transform(4.5, 0.5)}>
+ <ToggleIcon controller={ToggleIcon.simpleController} icons={['powder']} svg />
+ </g>
+ <g transform={transform(0.5, 1.5)}>
+ <ToggleIcon controller={ToggleIcon.simpleController} icons={['fire-rod']} svg />
+ </g>
+ <g transform={transform(1.5, 1.5)}>
+ <ToggleIcon controller={ToggleIcon.simpleController} icons={['ice-rod']} svg />
+ </g>
+ <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>
+ <g transform={transform(0.5, 2.5)}>
+ <ToggleIcon controller={ToggleIcon.simpleController} icons={['lamp']} svg />
+ </g>
+ <g transform={transform(1.5, 2.5)}>
+ <ToggleIcon controller={ToggleIcon.simpleController} icons={['hammer']} svg />
+ </g>
+ <g transform={transform(2.5, 2.5)}>
+ <ToggleIcon controller={ToggleIcon.simpleController} icons={['flute']} svg />
+ </g>
+ <g transform={transform(2.75, 2.75, 0.5)}>
+ <ToggleIcon controller={ToggleIcon.simpleController} icons={['duck']} svg />
+ </g>
+ <g transform={transform(3.5, 2.5)}>
+ <ToggleIcon controller={ToggleIcon.simpleController} icons={['bugnet']} svg />
+ </g>
+ <g transform={transform(4.5, 2.5)}>
+ <ToggleIcon controller={ToggleIcon.simpleController} icons={['book']} svg />
+ </g>
+ <g transform={transform(0.5, 3.5)}>
+ <ToggleIcon controller={ToggleIcon.simpleController} icons={['shovel']} svg />
+ </g>
+ <g transform={transform(1.5, 3.5)}>
+ <ToggleIcon controller={ToggleIcon.simpleController} icons={['somaria']} svg />
+ </g>
+ <g transform={transform(2.5, 3.5)}>
+ <ToggleIcon controller={ToggleIcon.simpleController} icons={['byrna']} svg />
+ </g>
+ <g transform={transform(3.5, 3.5)}>
+ <ToggleIcon controller={ToggleIcon.simpleController} icons={['cape']} svg />
+ </g>
+ <g transform={transform(4.5, 3.5)}>
+ <ToggleIcon controller={ToggleIcon.simpleController} icons={['mirror']} svg />
+ </g>
+ <g transform={transform(0.5, 5)}>